fix: ensure toggles work, backend and front end

nditech · takinbo · Jul 24, 2024 · Apr 19, 2022 · Apr 20, 2022 · Apr 22, 2022
commit f0a14edf8aab8bfe2bbfae395a55b2c4ca63b75f
diff --git a/apollo/formsframework/forms.py b/apollo/formsframework/forms.py
@@ -489,6 +489,7 @@ class QuestionnaireHiddenToggleForm(SecureForm):
             query_factory=_get_forms,
             option_widget=wtforms.widgets.CheckboxInput(),
             widget=wtforms.widgets.ListWidget(prefix_label=False),
+            get_pk=lambda f: f.id,
         )
         mode = wtforms.HiddenField(
             validators=[

diff --git a/apollo/formsframework/views_forms.py b/apollo/formsframework/views_forms.py
@@ -227,25 +227,27 @@ def forms_list(view):
     query_params = request.args.to_dict(flat=False)
     hidden_form_count = models.Form.query.filter(
         models.Form.is_hidden == True).count() # noqa
+    query = models.Form.query.order_by('name')
     show_hidden = bool(query_params.get(show_hidden_param))
+
     if show_hidden:
         show_toggle_link_label = _('Hide Hidden')
         add_show_url_param = False
-        query = models.Form.query.order_by('name')
     else:
         show_toggle_link_label = _(
             'Show All (%(count)d Hidden)', count=hidden_form_count)
         add_show_url_param = True
-        query = models.Form.query.filter(
+        query = query.filter(
             models.Form.is_hidden == False).order_by('name') # noqa
 
     if show_hide_form.validate_on_submit():
         posted_data = show_hide_form.data.copy()
-        if len(posted_data.get('forms')) > 0:
-            hide_forms = True if posted_data.get('mode') == 'hide' else False
-            for questionnaire in posted_data.get('forms'):
-                questionnaire.is_hidden = hide_forms
-            db.session.commit()
+        hide_forms = True if posted_data.get('mode') == 'hide' else False
+        posted_form_ids = [f.id for f in posted_data.get('forms')]
+        models.Form.query.filter(models.Form.id.in_(posted_form_ids)).update(
+            {'is_hidden': hide_forms}, synchronize_session='fetch')
+        db.session.commit()
+        db.session.expire_all()
 
     all_forms = query.all()
     checklist_forms = query.filter(models.Form.form_type == 'CHECKLIST').all()

diff --git a/apollo/templates/admin/form_list.html b/apollo/templates/admin/form_list.html
@@ -361,21 +361,50 @@ <h5 id="formImportModalLabel" class="modal-title">{{ _('Import Form') }}</h5>
   var hideButton = document.querySelector('#hide_button');
   var modeSelector = document.querySelector('#{{ show_hide_form.mode.id }}');
 
+  function toggleActionButtons() {
+    var numChecked = document.querySelectorAll('input[data-show-toggle]:checked').length;
+    if (numChecked === 0) {
+      hideButton.classList.add('invisible');
+      showButton.classList.add('invisible');
+    } else {
+      hideButton.classList.remove('invisible');
+      showButton.classList.remove('invisible');
+    }
+
+    changeToggleAllState();
+  }
+
+  function changeToggleAllState() {
+    // change the state of the 'toggle all' checkbox depending on how many checkboxes
+    // are checked
+    var numCheckboxes = document.querySelectorAll('input[data-show-toggle]').length;
+    var numChecked = document.querySelectorAll('input[data-show-toggle]:checked').length;
+
+    if (numChecked === 0) {
+      // none are checked, make it unchecked
+      toggleAll.indeterminate = false;
+      toggleAll.checked = false;
+    } else if (numCheckboxes === numChecked) {
+      // all are checked, make it checked
+      toggleAll.indeterminate = false;
+      toggleAll.checked = true;
+    } else {
+      // some are checked, but not all
+      toggleAll.indeterminate = true;
+    }
+  }
+
   toggleForm.addEventListener('click', function (event) {
     // capture all clicks on this form. if a form checkbox
     // is checked, make the buttons visible
     if (event.target.matches('[data-show-toggle]')) {
-      if (event.target.checked) {
-        hideButton.classList.remove('invisible');
-        showButton.classList.remove('invisible');
-      } else {
-        var numChecked = document.querySelectorAll('input[data-show-toggle]:checked').length;
+      toggleActionButtons();
+    }
 
-        if (numChecked === 0) {
-          hideButton.classList.add('invisible');
-          showButton.classList.add('invisible');
-        }
-      }
+    if (event.target === toggleAll) {
+      document.querySelectorAll('input[data-show-toggle]').forEach(function (checkbox) {
+        checkbox.checked = toggleAll.checked;
+      });
     }
   });
 
@@ -388,5 +417,9 @@ <h5 id="formImportModalLabel" class="modal-title">{{ _('Import Form') }}</h5>
     modeSelector.value = 'hide';
     toggleForm.submit();
   });
+
+  document.addEventListener('DOMContentLoaded', function () {
+    toggleActionButtons();
+  });
 </script>
 {%- endblock %}