400 lines
19 KiB
JavaScript
400 lines
19 KiB
JavaScript
"use strict";
|
|
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
(() => {
|
|
const los = exports.los;
|
|
const containerElement = document.querySelector("#container--lotTypes");
|
|
let lotTypes = exports.lotTypes;
|
|
delete exports.lotTypes;
|
|
const expandedLotTypes = new Set();
|
|
function toggleLotTypeFields(clickEvent) {
|
|
const toggleButtonElement = clickEvent.currentTarget;
|
|
const lotTypeElement = toggleButtonElement.closest(".container--lotType");
|
|
const lotTypeId = Number.parseInt(lotTypeElement.dataset.lotTypeId, 10);
|
|
if (expandedLotTypes.has(lotTypeId)) {
|
|
expandedLotTypes.delete(lotTypeId);
|
|
}
|
|
else {
|
|
expandedLotTypes.add(lotTypeId);
|
|
}
|
|
toggleButtonElement.innerHTML = expandedLotTypes.has(lotTypeId)
|
|
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
|
|
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>';
|
|
const panelBlockElements = lotTypeElement.querySelectorAll(".panel-block");
|
|
for (const panelBlockElement of panelBlockElements) {
|
|
panelBlockElement.classList.toggle("is-hidden");
|
|
}
|
|
}
|
|
function lotTypeResponseHandler(responseJSON) {
|
|
if (responseJSON.success) {
|
|
lotTypes = responseJSON.lotTypes;
|
|
renderLotTypes();
|
|
}
|
|
else {
|
|
bulmaJS.alert({
|
|
title: `Error Updating ${exports.aliases.lot} Type`,
|
|
message: responseJSON.errorMessage || "",
|
|
contextualColorName: "danger"
|
|
});
|
|
}
|
|
}
|
|
function deleteLotType(clickEvent) {
|
|
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset.lotTypeId, 10);
|
|
function doDelete() {
|
|
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotType", {
|
|
lotTypeId
|
|
}, lotTypeResponseHandler);
|
|
}
|
|
bulmaJS.confirm({
|
|
title: `Delete ${exports.aliases.lot} Type`,
|
|
message: `Are you sure you want to delete this ${exports.aliases.lot.toLowerCase()} type?`,
|
|
contextualColorName: "warning",
|
|
okButton: {
|
|
text: `Yes, Delete ${exports.aliases.lot} Type`,
|
|
callbackFunction: doDelete
|
|
}
|
|
});
|
|
}
|
|
function openEditLotType(clickEvent) {
|
|
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset.lotTypeId, 10);
|
|
const lotType = lotTypes.find((currentLotType) => {
|
|
return lotTypeId === currentLotType.lotTypeId;
|
|
});
|
|
let editCloseModalFunction;
|
|
const doEdit = (submitEvent) => {
|
|
submitEvent.preventDefault();
|
|
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotType", submitEvent.currentTarget, (responseJSON) => {
|
|
lotTypeResponseHandler(responseJSON);
|
|
if (responseJSON.success) {
|
|
editCloseModalFunction();
|
|
}
|
|
});
|
|
};
|
|
cityssm.openHtmlModal("adminLotTypes-editLotType", {
|
|
onshow(modalElement) {
|
|
los.populateAliases(modalElement);
|
|
modalElement.querySelector("#lotTypeEdit--lotTypeId").value =
|
|
lotTypeId.toString();
|
|
modalElement.querySelector("#lotTypeEdit--lotType").value =
|
|
lotType.lotType;
|
|
},
|
|
onshown(modalElement, closeModalFunction) {
|
|
editCloseModalFunction = closeModalFunction;
|
|
modalElement.querySelector("#lotTypeEdit--lotType").focus();
|
|
modalElement.querySelector("form").addEventListener("submit", doEdit);
|
|
bulmaJS.toggleHtmlClipped();
|
|
},
|
|
onremoved() {
|
|
bulmaJS.toggleHtmlClipped();
|
|
}
|
|
});
|
|
}
|
|
function openAddLotTypeField(clickEvent) {
|
|
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset.lotTypeId, 10);
|
|
let addCloseModalFunction;
|
|
const doAdd = (submitEvent) => {
|
|
submitEvent.preventDefault();
|
|
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotTypeField", submitEvent.currentTarget, (responseJSON) => {
|
|
expandedLotTypes.add(lotTypeId);
|
|
lotTypeResponseHandler(responseJSON);
|
|
if (responseJSON.success) {
|
|
addCloseModalFunction();
|
|
openEditLotTypeField(lotTypeId, responseJSON.lotTypeFieldId);
|
|
}
|
|
});
|
|
};
|
|
cityssm.openHtmlModal("adminLotTypes-addLotTypeField", {
|
|
onshow(modalElement) {
|
|
los.populateAliases(modalElement);
|
|
if (lotTypeId) {
|
|
modalElement.querySelector("#lotTypeFieldAdd--lotTypeId").value = lotTypeId.toString();
|
|
}
|
|
},
|
|
onshown(modalElement, closeModalFunction) {
|
|
addCloseModalFunction = closeModalFunction;
|
|
modalElement.querySelector("#lotTypeFieldAdd--lotTypeField").focus();
|
|
modalElement.querySelector("form").addEventListener("submit", doAdd);
|
|
bulmaJS.toggleHtmlClipped();
|
|
},
|
|
onremoved() {
|
|
bulmaJS.toggleHtmlClipped();
|
|
}
|
|
});
|
|
}
|
|
function moveLotType(clickEvent) {
|
|
const buttonElement = clickEvent.currentTarget;
|
|
const lotTypeId = buttonElement.closest(".container--lotType").dataset
|
|
.lotTypeId;
|
|
cityssm.postJSON(los.urlPrefix +
|
|
"/admin/" +
|
|
(buttonElement.dataset.direction === "up"
|
|
? "doMoveLotTypeUp"
|
|
: "doMoveLotTypeDown"), {
|
|
lotTypeId,
|
|
moveToEnd: clickEvent.shiftKey ? "1" : "0"
|
|
}, lotTypeResponseHandler);
|
|
}
|
|
function openEditLotTypeField(lotTypeId, lotTypeFieldId) {
|
|
const lotType = lotTypes.find((currentLotType) => {
|
|
return currentLotType.lotTypeId === lotTypeId;
|
|
});
|
|
const lotTypeField = lotType.lotTypeFields.find((currentLotTypeField) => {
|
|
return currentLotTypeField.lotTypeFieldId === lotTypeFieldId;
|
|
});
|
|
let minimumLengthElement;
|
|
let maximumLengthElement;
|
|
let patternElement;
|
|
let lotTypeFieldValuesElement;
|
|
let editCloseModalFunction;
|
|
function updateMaximumLengthMin() {
|
|
maximumLengthElement.min = minimumLengthElement.value;
|
|
}
|
|
function toggleInputFields() {
|
|
if (lotTypeFieldValuesElement.value === "") {
|
|
minimumLengthElement.disabled = false;
|
|
maximumLengthElement.disabled = false;
|
|
patternElement.disabled = false;
|
|
}
|
|
else {
|
|
minimumLengthElement.disabled = true;
|
|
maximumLengthElement.disabled = true;
|
|
patternElement.disabled = true;
|
|
}
|
|
}
|
|
function doUpdate(submitEvent) {
|
|
submitEvent.preventDefault();
|
|
cityssm.postJSON(los.urlPrefix + "/admin/doUpdateLotTypeField", submitEvent.currentTarget, (responseJSON) => {
|
|
lotTypeResponseHandler(responseJSON);
|
|
if (responseJSON.success) {
|
|
editCloseModalFunction();
|
|
}
|
|
});
|
|
}
|
|
function doDelete() {
|
|
cityssm.postJSON(los.urlPrefix + "/admin/doDeleteLotTypeField", {
|
|
lotTypeFieldId
|
|
}, (responseJSON) => {
|
|
lotTypeResponseHandler(responseJSON);
|
|
if (responseJSON.success) {
|
|
editCloseModalFunction();
|
|
}
|
|
});
|
|
}
|
|
function confirmDoDelete() {
|
|
bulmaJS.confirm({
|
|
title: "Delete Field",
|
|
message: "Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.",
|
|
contextualColorName: "warning",
|
|
okButton: {
|
|
text: "Yes, Delete Field",
|
|
callbackFunction: doDelete
|
|
}
|
|
});
|
|
}
|
|
cityssm.openHtmlModal("adminLotTypes-editLotTypeField", {
|
|
onshow(modalElement) {
|
|
los.populateAliases(modalElement);
|
|
modalElement.querySelector("#lotTypeFieldEdit--lotTypeFieldId").value = lotTypeField.lotTypeFieldId.toString();
|
|
modalElement.querySelector("#lotTypeFieldEdit--lotTypeField").value = lotTypeField.lotTypeField;
|
|
modalElement.querySelector("#lotTypeFieldEdit--isRequired").value = lotTypeField.isRequired ? "1" : "0";
|
|
minimumLengthElement = modalElement.querySelector("#lotTypeFieldEdit--minimumLength");
|
|
minimumLengthElement.value = lotTypeField.minimumLength.toString();
|
|
maximumLengthElement = modalElement.querySelector("#lotTypeFieldEdit--maximumLength");
|
|
maximumLengthElement.value = lotTypeField.maximumLength.toString();
|
|
patternElement = modalElement.querySelector("#lotTypeFieldEdit--pattern");
|
|
patternElement.value = lotTypeField.pattern;
|
|
lotTypeFieldValuesElement = modalElement.querySelector("#lotTypeFieldEdit--lotTypeFieldValues");
|
|
lotTypeFieldValuesElement.value = lotTypeField.lotTypeFieldValues;
|
|
toggleInputFields();
|
|
},
|
|
onshown(modalElement, closeModalFunction) {
|
|
editCloseModalFunction = closeModalFunction;
|
|
bulmaJS.init(modalElement);
|
|
bulmaJS.toggleHtmlClipped();
|
|
cityssm.enableNavBlocker();
|
|
modalElement.querySelector("form").addEventListener("submit", doUpdate);
|
|
minimumLengthElement.addEventListener("keyup", updateMaximumLengthMin);
|
|
updateMaximumLengthMin();
|
|
lotTypeFieldValuesElement.addEventListener("keyup", toggleInputFields);
|
|
modalElement
|
|
.querySelector("#button--deleteLotTypeField")
|
|
.addEventListener("click", confirmDoDelete);
|
|
},
|
|
onremoved() {
|
|
bulmaJS.toggleHtmlClipped();
|
|
cityssm.disableNavBlocker();
|
|
}
|
|
});
|
|
}
|
|
function openEditLotTypeFieldByClick(clickEvent) {
|
|
clickEvent.preventDefault();
|
|
const lotTypeFieldId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotTypeField").dataset.lotTypeFieldId, 10);
|
|
const lotTypeId = Number.parseInt(clickEvent.currentTarget.closest(".container--lotType").dataset.lotTypeId, 10);
|
|
openEditLotTypeField(lotTypeId, lotTypeFieldId);
|
|
}
|
|
function moveLotTypeField(clickEvent) {
|
|
const buttonElement = clickEvent.currentTarget;
|
|
const lotTypeFieldId = buttonElement.closest(".container--lotTypeField")
|
|
.dataset.lotTypeFieldId;
|
|
cityssm.postJSON(los.urlPrefix +
|
|
"/admin/" +
|
|
(buttonElement.dataset.direction === "up"
|
|
? "doMoveLotTypeFieldUp"
|
|
: "doMoveLotTypeFieldDown"), {
|
|
lotTypeFieldId,
|
|
moveToEnd: clickEvent.shiftKey ? "1" : "0"
|
|
}, lotTypeResponseHandler);
|
|
}
|
|
function renderLotTypeFields(panelElement, lotTypeId, lotTypeFields) {
|
|
if (lotTypeFields.length === 0) {
|
|
panelElement.insertAdjacentHTML("beforeend", '<div class="panel-block is-block' +
|
|
(expandedLotTypes.has(lotTypeId) ? "" : " is-hidden") +
|
|
'">' +
|
|
'<div class="message is-info">' +
|
|
'<p class="message-body">There are no additional fields.</p>' +
|
|
"</div>" +
|
|
"</div>");
|
|
}
|
|
else {
|
|
for (const lotTypeField of lotTypeFields) {
|
|
const panelBlockElement = document.createElement("div");
|
|
panelBlockElement.className = "panel-block is-block container--lotTypeField";
|
|
if (!expandedLotTypes.has(lotTypeId)) {
|
|
panelBlockElement.classList.add("is-hidden");
|
|
}
|
|
panelBlockElement.dataset.lotTypeFieldId = lotTypeField.lotTypeFieldId.toString();
|
|
panelBlockElement.innerHTML =
|
|
'<div class="level is-mobile">' +
|
|
'<div class="level-left">' +
|
|
('<div class="level-item">' +
|
|
'<a class="has-text-weight-bold button--editLotTypeField" href="#">' +
|
|
cityssm.escapeHTML(lotTypeField.lotTypeField || "") +
|
|
"</a>" +
|
|
"</div>") +
|
|
"</div>" +
|
|
'<div class="level-right">' +
|
|
('<div class="level-item">' +
|
|
los.getMoveUpDownButtonFieldHTML("button--moveLotTypeFieldUp", "button--moveLotTypeFieldDown") +
|
|
"</div>") +
|
|
"</div>" +
|
|
"</div>";
|
|
panelBlockElement
|
|
.querySelector(".button--editLotTypeField")
|
|
.addEventListener("click", openEditLotTypeFieldByClick);
|
|
panelBlockElement.querySelector(".button--moveLotTypeFieldUp").addEventListener("click", moveLotTypeField);
|
|
panelBlockElement.querySelector(".button--moveLotTypeFieldDown").addEventListener("click", moveLotTypeField);
|
|
panelElement.append(panelBlockElement);
|
|
}
|
|
}
|
|
}
|
|
function renderLotTypes() {
|
|
containerElement.innerHTML = "";
|
|
if (lotTypes.length === 0) {
|
|
containerElement.insertAdjacentHTML("afterbegin", `<div class="message is-warning>
|
|
<p class="message-body">There are no active ${exports.aliases.lot.toLowerCase()} types.</p>
|
|
</div>`);
|
|
return;
|
|
}
|
|
for (const lotType of lotTypes) {
|
|
const lotTypeContainer = document.createElement("div");
|
|
lotTypeContainer.className = "panel container--lotType";
|
|
lotTypeContainer.dataset.lotTypeId = lotType.lotTypeId.toString();
|
|
lotTypeContainer.innerHTML =
|
|
'<div class="panel-heading">' +
|
|
'<div class="level is-mobile">' +
|
|
('<div class="level-left">' +
|
|
'<div class="level-item">' +
|
|
'<button class="button is-small button--toggleLotTypeFields" data-tooltip="Toggle Fields" type="button" aria-label="Toggle Fields">' +
|
|
(expandedLotTypes.has(lotType.lotTypeId)
|
|
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
|
|
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') +
|
|
"</button>" +
|
|
"</div>" +
|
|
'<div class="level-item">' +
|
|
'<h2 class="title is-4">' +
|
|
cityssm.escapeHTML(lotType.lotType) +
|
|
"</h2>" +
|
|
"</div>" +
|
|
"</div>") +
|
|
('<div class="level-right">' +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-danger is-small button--deleteLotType" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' +
|
|
"<span>Delete</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-primary is-small button--editLotType" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
|
|
"<span>Edit " +
|
|
exports.aliases.lot +
|
|
" Type</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-success is-small button--addLotTypeField" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
|
|
"<span>Add Field</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
los.getMoveUpDownButtonFieldHTML("button--moveLotTypeUp", "button--moveLotTypeDown") +
|
|
"</div>") +
|
|
"</div>") +
|
|
"</div>" +
|
|
"</div>";
|
|
renderLotTypeFields(lotTypeContainer, lotType.lotTypeId, lotType.lotTypeFields);
|
|
lotTypeContainer
|
|
.querySelector(".button--toggleLotTypeFields")
|
|
.addEventListener("click", toggleLotTypeFields);
|
|
lotTypeContainer
|
|
.querySelector(".button--deleteLotType")
|
|
.addEventListener("click", deleteLotType);
|
|
lotTypeContainer
|
|
.querySelector(".button--editLotType")
|
|
.addEventListener("click", openEditLotType);
|
|
lotTypeContainer
|
|
.querySelector(".button--addLotTypeField")
|
|
.addEventListener("click", openAddLotTypeField);
|
|
lotTypeContainer.querySelector(".button--moveLotTypeUp").addEventListener("click", moveLotType);
|
|
lotTypeContainer.querySelector(".button--moveLotTypeDown").addEventListener("click", moveLotType);
|
|
containerElement.append(lotTypeContainer);
|
|
}
|
|
}
|
|
document.querySelector("#button--addLotType").addEventListener("click", () => {
|
|
let addCloseModalFunction;
|
|
function doAdd(submitEvent) {
|
|
submitEvent.preventDefault();
|
|
cityssm.postJSON(los.urlPrefix + "/admin/doAddLotType", submitEvent.currentTarget, (responseJSON) => {
|
|
if (responseJSON.success) {
|
|
addCloseModalFunction();
|
|
lotTypes = responseJSON.lotTypes;
|
|
renderLotTypes();
|
|
}
|
|
else {
|
|
bulmaJS.alert({
|
|
title: "Error Adding " + exports.aliases.lot + " Type",
|
|
message: responseJSON.errorMessage || "",
|
|
contextualColorName: "danger"
|
|
});
|
|
}
|
|
});
|
|
}
|
|
cityssm.openHtmlModal("adminLotTypes-addLotType", {
|
|
onshow(modalElement) {
|
|
los.populateAliases(modalElement);
|
|
},
|
|
onshown(modalElement, closeModalFunction) {
|
|
addCloseModalFunction = closeModalFunction;
|
|
modalElement.querySelector("#lotTypeAdd--lotType").focus();
|
|
modalElement.querySelector("form").addEventListener("submit", doAdd);
|
|
bulmaJS.toggleHtmlClipped();
|
|
},
|
|
onremoved() {
|
|
bulmaJS.toggleHtmlClipped();
|
|
}
|
|
});
|
|
});
|
|
renderLotTypes();
|
|
})();
|