|
|
@@ -1,5 +1,13 @@
|
|
|
import { createToast } from './bs';
|
|
|
-import { isTruthy, getElements, apiPatch, hasError, slugify } from './util';
|
|
|
+import {
|
|
|
+ isTruthy,
|
|
|
+ getElements,
|
|
|
+ apiPatch,
|
|
|
+ hasError,
|
|
|
+ slugify,
|
|
|
+ findFirstAdjacent,
|
|
|
+ getElement,
|
|
|
+} from './util';
|
|
|
|
|
|
/**
|
|
|
* Toggle the visibility of device images and update the toggle button style.
|
|
|
@@ -123,8 +131,113 @@ function initReslug(): void {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Show the select all card when the select all checkbox is checked, and sync the checkbox state
|
|
|
+ * with all the PK checkboxes in the table.
|
|
|
+ *
|
|
|
+ * @param event Change Event
|
|
|
+ */
|
|
|
+function handleSelectAllToggle(event: Event) {
|
|
|
+ // Select all checkbox in header row.
|
|
|
+ const tableSelectAll = event.currentTarget as HTMLInputElement;
|
|
|
+ // Nearest table to the select all checkbox.
|
|
|
+ const table = findFirstAdjacent<HTMLInputElement>(tableSelectAll, 'table');
|
|
|
+ // Select all confirmation card.
|
|
|
+ const confirmCard = document.getElementById('select-all-box');
|
|
|
+ // Checkbox in confirmation card to signal if all objects should be selected.
|
|
|
+ const confirmCheckbox = document.getElementById('select-all') as Nullable<HTMLInputElement>;
|
|
|
+
|
|
|
+ if (table !== null) {
|
|
|
+ for (const element of table.querySelectorAll<HTMLInputElement>(
|
|
|
+ 'input[type="checkbox"][name="pk"]',
|
|
|
+ )) {
|
|
|
+ if (tableSelectAll.checked) {
|
|
|
+ // Check all PK checkboxes if the select all checkbox is checked.
|
|
|
+ element.checked = true;
|
|
|
+ } else {
|
|
|
+ // Uncheck all PK checkboxes if the select all checkbox is unchecked.
|
|
|
+ element.checked = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (confirmCard !== null) {
|
|
|
+ if (tableSelectAll.checked) {
|
|
|
+ // Unhide the select all confirmation card if the select all checkbox is checked.
|
|
|
+ confirmCard.classList.remove('d-none');
|
|
|
+ } else {
|
|
|
+ // Hide the select all confirmation card if the select all checkbox is unchecked.
|
|
|
+ confirmCard.classList.add('d-none');
|
|
|
+ if (confirmCheckbox !== null) {
|
|
|
+ // Uncheck the confirmation checkbox when the table checkbox is unchecked (after which
|
|
|
+ // the confirmation card will be hidden).
|
|
|
+ confirmCheckbox.checked = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * If any PK checkbox is checked, uncheck the select all table checkbox and the select all
|
|
|
+ * confirmation checkbox.
|
|
|
+ *
|
|
|
+ * @param event Change Event
|
|
|
+ */
|
|
|
+function handlePkCheck(event: Event) {
|
|
|
+ const target = event.currentTarget as HTMLInputElement;
|
|
|
+ if (!target.checked) {
|
|
|
+ for (const element of getElements<HTMLInputElement>(
|
|
|
+ 'input[type="checkbox"].toggle',
|
|
|
+ 'input#select-all',
|
|
|
+ )) {
|
|
|
+ element.checked = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Synchronize the select all confirmation checkbox state with the select all confirmation button
|
|
|
+ * disabled state. If the select all confirmation checkbox is checked, the buttons should be
|
|
|
+ * enabled. If not, the buttons should be disabled.
|
|
|
+ *
|
|
|
+ * @param event Change Event
|
|
|
+ */
|
|
|
+function handleSelectAll(event: Event) {
|
|
|
+ const target = event.currentTarget as HTMLInputElement;
|
|
|
+ const selectAllBox = getElement<HTMLDivElement>('select-all-box');
|
|
|
+ if (selectAllBox !== null) {
|
|
|
+ for (const button of selectAllBox.querySelectorAll<HTMLButtonElement>(
|
|
|
+ 'button[type="submit"]',
|
|
|
+ )) {
|
|
|
+ if (target.checked) {
|
|
|
+ button.disabled = false;
|
|
|
+ } else {
|
|
|
+ button.disabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * Initialize table select all elements.
|
|
|
+ */
|
|
|
+function initSelectAll() {
|
|
|
+ for (const element of getElements<HTMLInputElement>(
|
|
|
+ 'table tr th > input[type="checkbox"].toggle',
|
|
|
+ )) {
|
|
|
+ element.addEventListener('change', handleSelectAllToggle);
|
|
|
+ }
|
|
|
+ for (const element of getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]')) {
|
|
|
+ element.addEventListener('change', handlePkCheck);
|
|
|
+ }
|
|
|
+ const selectAll = getElement<HTMLInputElement>('select-all');
|
|
|
+
|
|
|
+ if (selectAll !== null) {
|
|
|
+ selectAll.addEventListener('change', handleSelectAll);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
export function initButtons() {
|
|
|
- for (const func of [initRackElevation, initConnectionToggle, initReslug]) {
|
|
|
+ for (const func of [initRackElevation, initConnectionToggle, initReslug, initSelectAll]) {
|
|
|
func();
|
|
|
}
|
|
|
}
|
checktheroads