save-states-of-checkboxes-in-MultipleChooserPanel

client/src/includes/chooserModal.js

@@ -157,6 +157,17 @@ class SearchController {
         this.request = null;
         this.resultsContainer.html(resultsData);
         if (this.onLoadResults) {
+          // save the state of the checkboxes when the user searches or navigates between pages.
+          const checkboxes = document.querySelectorAll(
+            'form[data-multiple-choice-form] input[type="checkbox"]',
+          );
+          checkboxes.forEach((checkbox) => {
+            const savedState = sessionStorage.getItem(checkbox.id);
+
+            if (savedState === 'true') {
+              checkbox.setAttribute('checked', true);
+            }
+          });
           this.onLoadResults(this.resultsContainer);
         }
       },
@@ -234,6 +245,13 @@ class ChooserModalOnloadHandlerFactory {
     $('[data-multiple-choice-select]', containerElement).on('change', () => {
       this.updateMultipleChoiceSubmitEnabledState(modal);
     });
+
+    this.updateMultipleChoiceSubmitLocalStorage();
+
+    const form = document.querySelector('form[data-multiple-choice-form]');
+    form.addEventListener('submit', () => {
+      this.getMissingCheckboxes(form);
+    });
   }
 
   updateMultipleChoiceSubmitEnabledState(modal) {
@@ -246,6 +264,42 @@ class ChooserModalOnloadHandlerFactory {
     }
   }
 
+  updateMultipleChoiceSubmitLocalStorage() {
+    // eslint-disable-next-line func-names
+    $(document).on('change', '[data-multiple-choice-select]', function () {
+      $(this).each(() => {
+        sessionStorage.setItem($(this).prop('id'), $(this).prop('checked'));
+      });
+    });
+  }
+
+  // get Checkbox States and create hidden inputs on submit to update the form with the missing checkboxes.
+  getMissingCheckboxes(form) {
+    for (let i = 0; i < sessionStorage.length; i += 1) {
+      const key = sessionStorage.key(i);
+      const value = sessionStorage.getItem(key);
+
+      if (
+        key.startsWith('chooser-modal-select') &&
+        value === 'true' &&
+        (document.getElementById(key) == null ||
+          (document.getElementById(key) &&
+            document.getElementById(key).checked !== true))
+      ) {
+        const id = key.substring('chooser-modal-select-'.length);
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'id';
+        input.value = id;
+        form.appendChild(input);
+      }
+
+      if (key.startsWith('chooser-modal-select') && value === 'true') {
+        sessionStorage.setItem(key, false);
+      }
+    }
+  }
+
   modalHasTabs(modal) {
     return $('[data-tabs]', modal.body).length;
   }