From 3a0efb71b9562f0d5db30f93d5917072bf053b73 Mon Sep 17 00:00:00 2001 From: SvyatoslavArtymovych Date: Mon, 5 Jun 2023 14:56:31 +0300 Subject: [PATCH] checkbox tree v2 --- .../book/modals/access_level_modal_v2.html | 180 ++++++++++++++++++ src/checkBoxTree_v2.ts | 93 +++++++++ 2 files changed, 273 insertions(+) create mode 100644 app/templates/book/modals/access_level_modal_v2.html create mode 100644 src/checkBoxTree_v2.ts diff --git a/app/templates/book/modals/access_level_modal_v2.html b/app/templates/book/modals/access_level_modal_v2.html new file mode 100644 index 0000000..3eac823 --- /dev/null +++ b/app/templates/book/modals/access_level_modal_v2.html @@ -0,0 +1,180 @@ + + + + + + + \ No newline at end of file diff --git a/src/checkBoxTree_v2.ts b/src/checkBoxTree_v2.ts new file mode 100644 index 0000000..d765d54 --- /dev/null +++ b/src/checkBoxTree_v2.ts @@ -0,0 +1,93 @@ +// Will be useful in next OpenLaw version + +interface Permissions { + [key: string]: number[]; +} + +const updatePermissionsJSON = ( + permissionsJSON: Permissions, + checkBoxTrees: Element, +) => { + const inputs: NodeListOf = checkBoxTrees.querySelectorAll( + 'input[type=checkbox]', + ); + inputs.forEach(element => { + const accessTo: string = `${element.getAttribute('data-access-to')}`; + const accessToId: number = parseInt( + element.getAttribute('data-access-to-id'), + ); + const checked = element.checked; + if (checked && !permissionsJSON[accessTo].includes(accessToId)) { + permissionsJSON[accessTo].push(accessToId); + } else if (!checked && permissionsJSON[accessTo].includes(accessToId)) { + permissionsJSON[accessTo] = permissionsJSON[accessTo].filter( + el => el != accessToId, + ); + } + }); +}; + +const uncheckParentInputs = (checkbox: HTMLElement) => { + const parentLiElement: HTMLElement = + checkbox.parentElement.parentElement.parentElement.parentElement; + + const dataPermission = checkbox.getAttribute('data-permission'); + + const parentInputElement: HTMLInputElement = parentLiElement.querySelector( + `input[type=checkbox][data-permission=${dataPermission}]`, + ); + + if (!parentInputElement.disabled) { + parentInputElement.checked = false; + } + + if (parentInputElement.getAttribute('data-root') != 'true') { + uncheckParentInputs(parentInputElement); + } +}; + +const handleCheckboxClick = (checkbox: HTMLInputElement) => { + const parentLiElement: HTMLElement = checkbox.parentElement.parentElement; + + const checked = checkbox.checked; + + if (!checked) { + uncheckParentInputs(checkbox); + } + + const dataPermission = checkbox.getAttribute('data-permission'); + + const checkboxes = parentLiElement.querySelectorAll( + `input[type=checkbox][data-permission=${dataPermission}]`, + ); + + checkboxes.forEach((checkbox: HTMLInputElement) => { + if (!checkbox.disabled) { + checkbox.checked = checked; + } + }); +}; + +export const initCheckBoxTree = () => { + const permissionsJSON: Permissions = { + book: [], + sub_collection: [], + collection: [], + section: [], + }; + const permissionsJsonInput: HTMLInputElement = + document.querySelector('#permissions_json'); + const checkBoxTrees = document.querySelectorAll('.checkbox-tree'); + + checkBoxTrees.forEach((checkBoxTree: Element) => { + const checkboxes = checkBoxTree.querySelectorAll('input[type=checkbox]'); + + checkboxes.forEach((checkbox: HTMLInputElement) => { + checkbox.addEventListener('click', () => { + handleCheckboxClick(checkbox); + updatePermissionsJSON(permissionsJSON, checkBoxTree); + permissionsJsonInput.value = JSON.stringify(permissionsJSON); + }); + }); + }); +};