293 lines
9.6 KiB
TypeScript
293 lines
9.6 KiB
TypeScript
// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair
|
|
/* eslint-disable unicorn/prefer-module */
|
|
|
|
import type { BulmaJS } from '@cityssm/bulma-js/types.js'
|
|
import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
|
|
|
|
import type { LOS } from '../../types/globalTypes.js'
|
|
import type { LotOccupantType } from '../../types/recordTypes.js'
|
|
|
|
declare const cityssm: cityssmGlobal
|
|
declare const bulmaJS: BulmaJS
|
|
|
|
declare const los: LOS
|
|
declare const exports: Record<string, unknown>
|
|
|
|
declare const refreshFontAwesomeIcon: (changeEvent: Event) => void
|
|
|
|
let lotOccupantTypes = exports.lotOccupantTypes as LotOccupantType[]
|
|
delete exports.lotOccupantTypes
|
|
|
|
type ResponseJSON =
|
|
| {
|
|
success: true
|
|
lotOccupantTypes: LotOccupantType[]
|
|
}
|
|
| {
|
|
success: false
|
|
errorMessage: string
|
|
}
|
|
|
|
function updateLotOccupantType(submitEvent: SubmitEvent): void {
|
|
submitEvent.preventDefault()
|
|
|
|
cityssm.postJSON(
|
|
`${los.urlPrefix}/admin/doUpdateLotOccupantType`,
|
|
submitEvent.currentTarget,
|
|
(rawResponseJSON) => {
|
|
const responseJSON = rawResponseJSON as ResponseJSON
|
|
|
|
if (responseJSON.success) {
|
|
lotOccupantTypes = responseJSON.lotOccupantTypes
|
|
|
|
bulmaJS.alert({
|
|
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Updated Successfully`,
|
|
contextualColorName: 'success'
|
|
})
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: `Error Updating ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
|
|
message: responseJSON.errorMessage ?? '',
|
|
contextualColorName: 'danger'
|
|
})
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
function deleteLotOccupantType(clickEvent: Event): void {
|
|
const tableRowElement = (clickEvent.currentTarget as HTMLElement).closest(
|
|
'tr'
|
|
) as HTMLTableRowElement
|
|
|
|
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId
|
|
|
|
function doDelete(): void {
|
|
cityssm.postJSON(
|
|
`${los.urlPrefix}/admin/doDeleteLotOccupantType`,
|
|
{
|
|
lotOccupantTypeId
|
|
},
|
|
(rawResponseJSON) => {
|
|
const responseJSON = rawResponseJSON as ResponseJSON
|
|
|
|
if (responseJSON.success) {
|
|
lotOccupantTypes = responseJSON.lotOccupantTypes
|
|
|
|
if (lotOccupantTypes.length === 0) {
|
|
renderLotOccupantTypes()
|
|
} else {
|
|
tableRowElement.remove()
|
|
}
|
|
|
|
bulmaJS.alert({
|
|
message: `${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type Deleted Successfully`,
|
|
contextualColorName: 'success'
|
|
})
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: `Error Deleting ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
|
|
message: responseJSON.errorMessage ?? '',
|
|
contextualColorName: 'danger'
|
|
})
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
bulmaJS.confirm({
|
|
title: `Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
|
|
message: `Are you sure you want to delete this ${los.escapedAliases.lot} ${los.escapedAliases.occupant} type?<br />
|
|
Note that no ${los.escapedAliases.lot} ${los.escapedAliases.occupants} will be removed.`,
|
|
messageIsHtml: true,
|
|
contextualColorName: 'warning',
|
|
okButton: {
|
|
text: `Yes, Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
|
|
callbackFunction: doDelete
|
|
}
|
|
})
|
|
}
|
|
|
|
function moveLotOccupantType(clickEvent: MouseEvent): void {
|
|
const buttonElement = clickEvent.currentTarget as HTMLButtonElement
|
|
|
|
const tableRowElement = buttonElement.closest('tr') as HTMLTableRowElement
|
|
|
|
const lotOccupantTypeId = tableRowElement.dataset.lotOccupantTypeId
|
|
|
|
cityssm.postJSON(
|
|
`${los.urlPrefix}/admin/${
|
|
buttonElement.dataset.direction === 'up'
|
|
? 'doMoveLotOccupantTypeUp'
|
|
: 'doMoveLotOccupantTypeDown'
|
|
}`,
|
|
{
|
|
lotOccupantTypeId,
|
|
moveToEnd: clickEvent.shiftKey ? '1' : '0'
|
|
},
|
|
(rawResponseJSON) => {
|
|
const responseJSON = rawResponseJSON as ResponseJSON
|
|
|
|
if (responseJSON.success) {
|
|
lotOccupantTypes = responseJSON.lotOccupantTypes
|
|
renderLotOccupantTypes()
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: `Error Moving ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
|
|
message: responseJSON.errorMessage ?? '',
|
|
contextualColorName: 'danger'
|
|
})
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
function renderLotOccupantTypes(): void {
|
|
const containerElement = document.querySelector(
|
|
'#container--lotOccupantTypes'
|
|
) as HTMLTableSectionElement
|
|
|
|
if (lotOccupantTypes.length === 0) {
|
|
// eslint-disable-next-line no-unsanitized/property
|
|
containerElement.innerHTML = `<tr><td colspan="3">
|
|
<div class="message is-warning">
|
|
<p class="message-body">There are no active ${los.escapedAliases.lot} ${los.escapedAliases.occupant} types.</p>
|
|
</div>
|
|
</td></tr>`
|
|
|
|
return
|
|
}
|
|
|
|
containerElement.innerHTML = ''
|
|
|
|
for (const lotOccupantType of lotOccupantTypes) {
|
|
const tableRowElement = document.createElement('tr')
|
|
|
|
tableRowElement.dataset.lotOccupantTypeId =
|
|
lotOccupantType.lotOccupantTypeId.toString()
|
|
|
|
const formId = `form--lotOccupantType-${lotOccupantType.lotOccupantTypeId.toString()}`
|
|
|
|
// eslint-disable-next-line no-unsanitized/property
|
|
tableRowElement.innerHTML = `<td>
|
|
<div class="field">
|
|
<div class="control">
|
|
<input class="input" name="lotOccupantType" type="text"
|
|
value="${cityssm.escapeHTML(lotOccupantType.lotOccupantType)}"
|
|
form="${formId}"
|
|
aria-label="${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type" maxlength="100" required />
|
|
</div>
|
|
</div>
|
|
</td><td>
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
<span class="button is-static">fa-</span>
|
|
</div>
|
|
<div class="control">
|
|
<input class="input" name="fontAwesomeIconClass" type="text"
|
|
value="${cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass)}"
|
|
form="${formId}"
|
|
list="datalist--fontAwesomeIconClass" aria-label="Icon Name" maxlength="50" />
|
|
</div>
|
|
<div class="control">
|
|
<span class="button is-static">
|
|
<i class="fas fa-fw fa-${cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass)}"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td><td>
|
|
<div class="field">
|
|
<div class="control">
|
|
<input class="input" name="occupantCommentTitle" type="text"
|
|
value="${cityssm.escapeHTML(lotOccupantType.occupantCommentTitle)}"
|
|
form="${formId}"
|
|
aria-label="${los.escapedAliases.Occupant} Comment Title" maxlength="50" />
|
|
</div>
|
|
</div>
|
|
</td><td>
|
|
<form id="${formId}">
|
|
<input name="lotOccupantTypeId" type="hidden"
|
|
value="${lotOccupantType.lotOccupantTypeId.toString()}" />
|
|
<button class="button is-success" type="submit" aria-label="Save">
|
|
<i class="fas fa-save" aria-hidden="true"></i>
|
|
</button>
|
|
</form>
|
|
</td><td class="is-nowrap">
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
${los.getMoveUpDownButtonFieldHTML(
|
|
'button--moveLotOccupantTypeUp',
|
|
'button--moveLotOccupantTypeDown',
|
|
false
|
|
)}
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-danger is-light button--deleteLotOccupantType"
|
|
data-tooltip="Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type"
|
|
type="button"
|
|
aria-label="Delete ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type">
|
|
<i class="fas fa-trash" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>`
|
|
|
|
const fontAwesomeInputElement = tableRowElement.querySelector(
|
|
"input[name='fontAwesomeIconClass']"
|
|
) as HTMLInputElement
|
|
|
|
fontAwesomeInputElement.addEventListener('keyup', refreshFontAwesomeIcon)
|
|
fontAwesomeInputElement.addEventListener('change', refreshFontAwesomeIcon)
|
|
|
|
tableRowElement
|
|
.querySelector('form')
|
|
?.addEventListener('submit', updateLotOccupantType)
|
|
;(
|
|
tableRowElement.querySelector(
|
|
'.button--moveLotOccupantTypeUp'
|
|
) as HTMLButtonElement
|
|
).addEventListener('click', moveLotOccupantType)
|
|
;(
|
|
tableRowElement.querySelector(
|
|
'.button--moveLotOccupantTypeDown'
|
|
) as HTMLButtonElement
|
|
).addEventListener('click', moveLotOccupantType)
|
|
|
|
tableRowElement
|
|
.querySelector('.button--deleteLotOccupantType')
|
|
?.addEventListener('click', deleteLotOccupantType)
|
|
|
|
containerElement.append(tableRowElement)
|
|
}
|
|
}
|
|
;(
|
|
document.querySelector('#form--addLotOccupantType') as HTMLFormElement
|
|
).addEventListener('submit', (submitEvent: SubmitEvent) => {
|
|
submitEvent.preventDefault()
|
|
|
|
const formElement = submitEvent.currentTarget as HTMLFormElement
|
|
|
|
cityssm.postJSON(
|
|
`${los.urlPrefix}/admin/doAddLotOccupantType`,
|
|
formElement,
|
|
(rawResponseJSON) => {
|
|
const responseJSON = rawResponseJSON as ResponseJSON
|
|
|
|
if (responseJSON.success) {
|
|
lotOccupantTypes = responseJSON.lotOccupantTypes
|
|
renderLotOccupantTypes()
|
|
formElement.reset()
|
|
formElement.querySelector('input')?.focus()
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: `Error Adding ${los.escapedAliases.Lot} ${los.escapedAliases.Occupant} Type`,
|
|
message: responseJSON.errorMessage ?? '',
|
|
contextualColorName: 'danger'
|
|
})
|
|
}
|
|
}
|
|
)
|
|
})
|
|
|
|
renderLotOccupantTypes()
|