Merge branch 'develop' of github.com:maykinmedia/open-inwoner into de…

…velop

requirements/base.txt

@@ -108,7 +108,7 @@ django-csp==3.7
     # via -r requirements/base.in
 django-csp-reports==1.8.1
     # via -r requirements/base.in
-django-digid-eherkenning==0.3.3
+django-digid-eherkenning==0.4.0
     # via -r requirements/base.in
 django-elasticsearch-dsl==7.2.1
     # via -r requirements/base.in

requirements/ci.txt

@@ -175,7 +175,7 @@ django-csp-reports==1.8.1
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt
-django-digid-eherkenning==0.3.3
+django-digid-eherkenning==0.4.0
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt

requirements/dev.txt

@@ -202,7 +202,7 @@ django-csp-reports==1.8.1
     #   -r requirements/ci.txt
 django-debug-toolbar==3.2.2
     # via -r requirements/dev.in
-django-digid-eherkenning==0.3.3
+django-digid-eherkenning==0.4.0
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt

src/open_inwoner/conf/fixtures/django-admin-index.json

@@ -1 +1 @@
-[{"model": "admin_index.appgroup", "fields": {"order": 0, "name": "Gebruikersprofielen", "slug": "accounts", "models": [["account", "emailaddress"], ["account", "emailconfirmation"], ["accounts", "action"], ["accounts", "appointment"], ["accounts", "contact"], ["accounts", "document"], ["accounts", "invite"], ["accounts", "message"], ["accounts", "user"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 2, "name": "PDC", "slug": "pdc", "models": [["pdc", "category"], ["pdc", "neighbourhood"], ["pdc", "organization"], ["pdc", "organizationtype"], ["pdc", "product"], ["pdc", "productcondition"], ["pdc", "productcontact"], ["pdc", "productfile"], ["pdc", "productlink"], ["pdc", "productlocation"], ["pdc", "tag"], ["pdc", "tagtype"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 5, "name": "Permissies, 2FA en logging", "slug": "permissies-2fa-en-logging", "models": [["auth", "group"], ["axes", "accessattempt"], ["axes", "accesslog"], ["otp_totp", "totpdevice"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 7, "name": "Overige / Diverse", "slug": "overige-diverse", "models": [["account", "emailconfirmation"], ["admin_index", "appgroup"], ["admin_index", "applink"], ["admin_index", "contenttypeproxy"], ["easy_thumbnails", "source"], ["easy_thumbnails", "thumbnail"], ["easy_thumbnails", "thumbnaildimensions"], ["filer", "folder"], ["filer", "folderpermission"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 6, "name": "Configuratie", "slug": "configuratie", "models": [["configurations", "siteconfiguration"], ["configurations", "siteconfigurationpage"], ["flatpages", "flatpage"], ["haalcentraal", "haalcentraalconfig"], ["mail_editor", "mailtemplate"], ["openzaak", "openzaakconfig"], ["sites", "site"], ["zgw_consumers", "nlxconfig"], ["zgw_consumers", "service"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 3, "name": "Vragen en antwoorden", "slug": "vraag-antwoord", "models": [["pdc", "question"], ["questionnaire", "questionnairestep"], ["questionnaire", "questionnairestepfile"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 4, "name": "Zoeken", "slug": "zoeken", "models": [["search", "feedback"], ["search", "fieldboost"], ["search", "synonym"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 1, "name": "Plannen", "slug": "plannen", "models": [["plans", "actiontemplate"], ["plans", "plan"], ["plans", "plantemplate"]]}}]
+[{"model": "admin_index.appgroup", "fields": {"order": 0, "name": "Gebruikersprofielen", "slug": "accounts", "models": [["accounts", "action"], ["accounts", "appointment"], ["accounts", "contact"], ["accounts", "document"], ["accounts", "invite"], ["accounts", "message"], ["accounts", "user"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 2, "name": "PDC", "slug": "pdc", "models": [["pdc", "category"], ["pdc", "organization"], ["pdc", "organizationtype"], ["pdc", "product"], ["pdc", "productcondition"], ["pdc", "productcontact"], ["pdc", "productlocation"], ["pdc", "tag"], ["pdc", "tagtype"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 5, "name": "Permissies, 2FA en logging", "slug": "permissies-2fa-en-logging", "models": [["auth", "group"], ["axes", "accessattempt"], ["axes", "accesslog"], ["cspreports", "cspreport"], ["otp_totp", "totpdevice"], ["timeline_logger", "timelinelog"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 7, "name": "Overige / Diverse", "slug": "overige-diverse", "models": [["account", "emailconfirmation"], ["admin_index", "appgroup"], ["admin_index", "applink"], ["admin_index", "contenttypeproxy"], ["easy_thumbnails", "source"], ["easy_thumbnails", "thumbnail"], ["easy_thumbnails", "thumbnaildimensions"], ["filer", "folder"], ["filer", "folderpermission"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 6, "name": "Configuratie", "slug": "configuratie", "models": [["configurations", "siteconfiguration"], ["configurations", "siteconfigurationpage"], ["flatpages", "flatpage"], ["haalcentraal", "haalcentraalconfig"], ["mail_editor", "mailtemplate"], ["openzaak", "openzaakconfig"], ["sites", "site"], ["zgw_consumers", "nlxconfig"], ["zgw_consumers", "service"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 3, "name": "Vragen en antwoorden", "slug": "vraag-antwoord", "models": [["pdc", "question"], ["questionnaire", "questionnairestep"], ["questionnaire", "questionnairestepfile"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 4, "name": "Zoeken", "slug": "zoeken", "models": [["search", "feedback"], ["search", "fieldboost"], ["search", "synonym"]]}}, {"model": "admin_index.appgroup", "fields": {"order": 1, "name": "Plannen", "slug": "plannen", "models": [["plans", "actiontemplate"], ["plans", "plan"], ["plans", "plantemplate"]]}}, {"model": "admin_index.applink", "fields": {"order": 0, "app_group": ["overige-diverse"], "name": "Link naar Documentatie", "link": "https://taiga.maykinmedia.nl/project/open-inwoner/wiki/home"}}, {"model": "admin_index.applink", "fields": {"order": 1, "app_group": ["overige-diverse"], "name": "Link naar Github", "link": "https://github.com/maykinmedia/open-inwoner"}}, {"model": "admin_index.applink", "fields": {"order": 2, "app_group": ["overige-diverse"], "name": "Link naar Maykin", "link": "https://www.maykinmedia.nl/nl/"}}]

src/open_inwoner/js/components/accessibility/help_modal.js

@@ -14,7 +14,8 @@ class HelpModal {
     const modal = new Modal(modalId)
     modal.setTitle(this.modal.dataset.helpTitle)
     modal.setText(this.modal.dataset.helpText)
-    modal.setConfirm(this.modal.dataset.helpClose, (close) => {
+    modal.setClose(this.modal.dataset.helpClose)
+    modal.setModalClosedCallback(() => {
       this.helpButton.classList.remove('accessibility-header__modal--highlight')
     })
     modal.show()

src/open_inwoner/js/components/modal/index.js

@@ -6,17 +6,47 @@ export default class Modal {
     this.actions = this.node.querySelector('.modal__actions')
     this.close = this.node.querySelector('.modal__close')
     this.confirm = this.node.querySelector('.modal__confirm')
+    this.closeTitle = this.node.querySelector('.modal__close-title')
 
+    // This is for the prefilled modals so they will not be emptied
+    if (!this.node.classList.contains('modal--no-reset')) {
+      this.reset()
+    }
+    this.setListeners()
+  }
+
+  reset() {
+    this.modalClosedCallback = null
+    this.setTitle('')
+    this.setText('')
+    if (this.confirm) {
+      this.setConfirm('')
+      this.confirm.className = 'button modal__button modal__confirm'
+    }
+    if (this.close) {
+      this.setClose('')
+      this.close.className = 'button modal__button modal__close'
+    }
+  }
+
+  setListeners() {
     this.node.addEventListener('click', (event) => {
-      if (!event.target.closest('.modal__container')) {
-        this.hide()
-      }
+      event.preventDefault()
+      this.hide()
     })
 
-    this.close.addEventListener('click', () => {
+    this.close.addEventListener('click', (event) => {
+      event.preventDefault()
+
       this.hide()
     })
 
+    if (this.closeTitle) {
+      this.closeTitle.addEventListener('click', () => {
+        this.hide()
+      })
+    }
+
     document.addEventListener('keydown', (event) => {
       if (event.code === 'Escape') {
         this.hide()
@@ -39,20 +69,25 @@ export default class Modal {
 
   setConfirm(text, callback, className = 'button--primary') {
     this.confirm.innerText = text
-    this.confirm.addEventListener('click', (event) => {
+    this.confirm.onclick = (event) => {
       callback(event)
       this.hide()
-    })
+    }
     this.confirm.classList.add(className)
   }
 
+  setModalClosedCallback(callback) {
+    this.modalClosedCallback = callback
+  }
+
   show() {
     this.node.classList.add('modal--open')
-    document.body.style.overflow = 'hidden'
   }
 
   hide() {
     this.node.classList.remove('modal--open')
-    document.body.style.overflow = 'visible'
+    if (this.modalClosedCallback) {
+      this.modalClosedCallback()
+    }
   }
 }

src/open_inwoner/scss/components/modal/_modal.scss

@@ -63,4 +63,9 @@
   &__button:empty {
     display: none;
   }
+
+  *[class*='icon'],
+  *[class*='Icon'] {
+    font-size: var(--font-size-heading-2);
+  }
 }

src/open_inwoner/templates/pages/plans/create.html

@@ -44,9 +44,11 @@ <h1 class="h1">{% trans "Samenwerken" %}</h1>
                                 {% icon icon="visibility" outlined=True %}
                             </div>
                         </div>
-                        <div class="modal" id="template-{{ plan_template.id }}">
+                        <div class="modal modal--no-reset" id="template-{{ plan_template.id }}">
                             <div class="modal__container">
-                                <h2 class="modal__title" id="modal__title">{{ plan_template.name }}</h2>
+                                <h2 class="h2 modal__title" id="modal__title">{{ plan_template.name }}
+                                    {% button text=_("Sluiten") hide_text=True icon="close" extra_classes="modal__button modal__close-title" %}
+                                </h2>
                                 <div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>
                                 <div class="modal__actions modal__actions--align-right" id="modal__actions">
                                     {% spaceless %}