[#584] Feature/collapse questionnaire tree by default (#261)

* [#584] Collapse questionnaires by default

* [#584] Removed log

src/open_inwoner/js/admin/treebeard/index.js

@@ -0,0 +1,67 @@
+function collapseNode(node) {
+  const event = new CustomEvent('click', {
+    view: window,
+    bubbles: true,
+    detail: { system: true },
+  })
+  setTimeout(() => {
+    node.dispatchEvent(event)
+  }, 1)
+}
+
+function updateNodeStatus() {
+  const buttons = document.querySelectorAll('a.collapse')
+  buttons.forEach((button) => {
+    button.addEventListener('click', (event) => {
+      if (event.detail.system) {
+        return
+      }
+      const buttonId = event.currentTarget.parentElement.parentElement.id
+      setTimeout(() => {
+        if (button.classList.contains('expanded')) {
+          window.localStorage.setItem(`${buttonId}-open`, true)
+        } else {
+          window.localStorage.removeItem(`${buttonId}-open`)
+        }
+      }, 100)
+    })
+  })
+}
+
+function expandOpenNodes() {
+  const rows = document.querySelectorAll('#result_list tr')
+  rows.forEach((row) => {
+    const currentRowOpen = window.localStorage.getItem(`${row.id}-open`)
+    if (currentRowOpen) {
+      const button = row.querySelector('.collapse')
+      const event = new MouseEvent('click', {
+        view: window,
+        bubbles: true,
+      })
+      setTimeout(() => {
+        button.dispatchEvent(event)
+      }, 1)
+    }
+  })
+}
+
+function main() {
+  const questionnairePage = document.querySelector(
+    ' .app-questionnaire, .model-questionnairestep, .change-list'
+  )
+
+  if (questionnairePage) {
+    // Collapse all expanded nodes when the page is loaded
+    ;[...document.querySelectorAll('a.collapse')]
+      .reverse()
+      .forEach(collapseNode)
+
+    // Update local storage when the node is expanded
+    updateNodeStatus()
+
+    // Expand all nodes which are saved as open in the local storage
+    expandOpenNodes()
+  }
+}
+
+window.addEventListener('load', main)

src/open_inwoner/js/django-admin.js

@@ -0,0 +1,2 @@
+import './admin/ckeditor'
+import './admin/treebeard'

src/open_inwoner/templates/admin/base_site.html

@@ -48,5 +48,5 @@ <h1 id="site-name">
     {{ block.super }}
     {# Load the custom JS #}
     <script src="{% static 'bundles/open_inwoner-js.js' %}"></script>
-    <script src="{% static 'bundles/ckeditor.js' %}"></script>
+    <script src="{% static 'bundles/django-admin.js' %}"></script>
 {% endblock %}

webpack.config.js

@@ -23,7 +23,7 @@ module.exports = {
 
     admin_overrides: `${__dirname}/${paths.scssSrcDir}/admin/admin_overrides.scss`,
     'pdf-p': `${__dirname}/${paths.scssSrcDir}/pdf/pdf_portrait.scss`,
-    ckeditor: `${__dirname}/${paths.jsSrcDir}/ckeditor.js`,
+    'django-admin': `${__dirname}/${paths.jsSrcDir}/django-admin.js`,
   },
 
   // (Output) bundle locations.