Merge pull request #3554 from MTES-MCT/feature/3308-ui-multi-ter

[BO - Utilisateur] UI / UX pour utilisateurs multi-territoire

.env

@@ -67,6 +67,7 @@ CLAMAV_SCAN_ENABLE=1
 HISTORY_TRACKING_ENABLE=1
 DELAY_MIN_CHECK_NEW_SIGNALEMENT_FILES=30 #minutes
 ALBERT_API_KEY=
+FEATURE_MULTI_TERRITORIES=0
 ### histologe ###
 
 ### object storage S3 ###

.env.sample

@@ -54,6 +54,7 @@ CLAMAV_STRATEGY=clamd_unix
 CLAMAV_SCAN_ENABLE=1
 DELAY_MIN_CHECK_NEW_SIGNALEMENT_FILES=30 #minutes
 ALBERT_API_KEY=
+FEATURE_MULTI_TERRITORIES=1
 ###> knplabs/knp-snappy-bundle ###
 WKHTMLTOPDF_PATH=wkhtmltopdf
 WKHTMLTOIMAGE_PATH=wkhtmltoimage

.github/workflows/main.yml

@@ -17,6 +17,7 @@ env:
   CLAMAV_SOCKET: '/tmp/clamd.socket'
   CLAMAV_HOST: 127.0.0.1
   CLAMAV_PORT: 3310
+  FEATURE_MULTI_TERRITORIES: 1
 jobs:
   code-quality:
     name: Histologe (PHP ${{ matrix.php-versions }})

assets/scripts/vanilla/controllers/back_partner_view/form_partner.js

@@ -48,13 +48,20 @@ function histoUpdateFieldsVisibility () {
 function histoUpdateValueFromData (elementName, elementData, target) {
   document.querySelector(elementName).value = target.getAttribute(elementData)
 }
-function histoUpdatePermissionsFromRole (editOrCreate, toggleValue) {
+
+//TODO : remove editOrCreate param after feature_multi_territories deletion (will always be 'partner')
+function histoUpdatePermissionsFromRole (editOrCreate) {
   const elementTogglePermissionAffectation = document.querySelector('#user_' + editOrCreate + '_permission_affectation_toggle input')
   const elementTextPermissionAffectation = document.querySelector('#user_' + editOrCreate + '_permission_affectation_text')
   if (!elementTogglePermissionAffectation || !elementTextPermissionAffectation) {
     return
   }
-  const rolesSelect = document.querySelector('#user_' + editOrCreate + '_roles')
+  let rolesSelect = null
+  if(editOrCreate === 'partner'){
+    rolesSelect = document.querySelector('#user_partner_role')
+  }else{
+    rolesSelect = document.querySelector('#user_' + editOrCreate + '_roles')
+  }
   if (rolesSelect.value === 'ROLE_ADMIN' || rolesSelect.value === 'ROLE_ADMIN_TERRITORY') {
     if (!elementTogglePermissionAffectation.checked) {
       elementTogglePermissionAffectation.click()
@@ -63,12 +70,6 @@ function histoUpdatePermissionsFromRole (editOrCreate, toggleValue) {
     elementTextPermissionAffectation.classList.remove('fr-hidden')
   } else {
     elementTogglePermissionAffectation.removeAttribute('disabled')
-    if (toggleValue === false && elementTogglePermissionAffectation.checked) {
-      elementTogglePermissionAffectation.click()
-    }
-    if (editOrCreate === 'edit' && toggleValue === true && !elementTogglePermissionAffectation.checked) {
-      elementTogglePermissionAffectation.click()
-    }
     elementTextPermissionAffectation.classList.add('fr-hidden')
   }
 }
@@ -111,61 +112,6 @@ document.querySelectorAll('.btn-delete-partner').forEach(swbtn => {
     })
   })
 })
-let userEditedId = null
-
-function clearErrors () {
-  const divErrorElements = document.querySelectorAll('.fr-input-group--error')
-  divErrorElements.forEach((divErrorElement) => {
-    divErrorElement.classList.remove('fr-input-group--error')
-    const pErrorElement = divErrorElement.querySelector('.fr-error-text')
-    if (pErrorElement) {
-      pErrorElement.classList.add('fr-hidden')
-    }
-  })
-}
-document.querySelectorAll('.btn-edit-partner-user').forEach(swbtn => {
-  swbtn.addEventListener('click', evt => {
-    clearErrors()
-    const target = evt.target
-    document.querySelectorAll('.fr-modal-user-edit_useremail').forEach(userItem => {
-      userItem.textContent = target.getAttribute('data-useremail')
-    })
-    userEditedId = target.getAttribute('data-userid')
-    if (target.getAttribute('data-submit-url')) {
-      document.querySelector('#fr-modal-user-edit form').action = target.getAttribute('data-submit-url')
-    }
-    histoUpdateValueFromData('#user_edit_userid', 'data-userid', target)
-    histoUpdateValueFromData('#user_edit_email', 'data-useremail', target)
-    histoUpdateValueFromData('#user_edit_nom', 'data-usernom', target)
-    histoUpdateValueFromData('#user_edit_prenom', 'data-userprenom', target)
-    const isMailingActive = target.getAttribute('data-userismailingactive')
-    if (isMailingActive === '1') {
-      document.querySelector('#user_edit_is_mailing_active-1').checked = true
-    } else {
-      document.querySelector('#user_edit_is_mailing_active-2').checked = true
-    }
-
-    const elementPermissionAffectation = document.querySelector('#user_edit_permission_affectation')
-    if (elementPermissionAffectation) {
-      elementPermissionAffectation.removeAttribute('disabled')
-    }
-
-    const userRole = target.getAttribute('data-userrole')
-    const rolesSelect = document.querySelector('#user_edit_roles')
-    rolesSelect.value = userRole
-    histoUpdatePermissionsFromRole('edit', target.getAttribute('data-userpermissionaffectation') === '1')
-
-    document.querySelector('#user_edit_form').addEventListener('submit', (e) => {
-      histoUpdateSubmitButton('#user_edit_form_submit', 'Edition en cours...')
-    })
-  })
-})
-if (document.querySelector('.fr-btn-add-user')) {
-  document.querySelector('.fr-btn-add-user').addEventListener('click', () => {
-    clearErrors()
-    userEditedId = null
-  })
-}
 
 if (document.querySelector('#partner_type')) {
   histoUpdateFieldsVisibility()
@@ -174,19 +120,6 @@ if (document.querySelector('#partner_type')) {
   })
 }
 
-if (document.querySelector('#user_create_roles')) {
-  document.querySelector('#user_create_roles').addEventListener('change', () => {
-    histoUpdatePermissionsFromRole('create', null)
-  })
-  histoUpdatePermissionsFromRole('create', null)
-}
-if (document.querySelector('#user_edit_roles')) {
-  document.querySelector('#user_edit_roles').addEventListener('change', () => {
-    histoUpdatePermissionsFromRole('edit', null)
-  })
-  histoUpdatePermissionsFromRole('edit', null)
-}
-
 const territorySelect = document.querySelector("#partner_territory");
 
 if (territorySelect) {
@@ -234,10 +167,34 @@ deletePartnerForm.forEach(form => {
   })
 })
 
+//TODO : delete with feature_multi_territories deletion
+function clearErrors () {
+  const divErrorElements = document.querySelectorAll('.fr-input-group--error')
+  divErrorElements.forEach((divErrorElement) => {
+    divErrorElement.classList.remove('fr-input-group--error')
+    const pErrorElement = divErrorElement.querySelector('.fr-error-text')
+    if (pErrorElement) {
+      pErrorElement.classList.add('fr-hidden')
+    }
+  })
+}
+
+if (document.querySelector('.fr-btn-add-user')) {
+  document.querySelector('.fr-btn-add-user').addEventListener('click', () => {
+    clearErrors()
+  })
+}
+
+if (document.querySelector('#user_create_roles')) {
+  document.querySelector('#user_create_roles').addEventListener('change', () => {
+    histoUpdatePermissionsFromRole('create')
+  })
+  histoUpdatePermissionsFromRole('create')
+}
+
 const checkUserMail = (el) => {
   const formData = new FormData()
   formData.append('email', el.value)
-  formData.append('userEditedId', userEditedId)
   formData.append('_token', el.getAttribute('data-token'))
   fetch('/bo/partenaires/checkmail', {
     method: 'POST',
@@ -275,9 +232,79 @@ emailInputs.forEach(emailInput => {
     checkUserMail(this)
   })
 })
+//END TODO : delete with feature_multi_territories deletion
 
 loadWindowWithLocalStorage('click', '[data-filter-list-partner]', 'search-partner-form')
 updateLocalStorageOnEvent('input', '#partner-input', 'back_link_partners')
 updateLocalStorageOnEvent('change', '#partner-filters-territories', 'back_link_partners')
 updateLocalStorageOnEvent('change', '#partner-filters-types', 'back_link_partners')
 updateLocalStorageWithPaginationParams('click', '#partner-pagination a', 'back_link_partners')
+
+//add for multi territories
+document.querySelectorAll('.btn-edit-partner-user').forEach(swbtn => {
+  swbtn.addEventListener('click', event => {
+    const refreshUrl = event.target.dataset.refreshUrl;
+    document.querySelector('#fr-modal-user-edit button[type="submit"]').disabled = true;
+    document.querySelector('#fr-modal-user-edit-title').innerHTML = 'Chargement en cours...'
+    document.querySelector('#fr-modal-user-edit-form-container').innerHTML = 'Chargement en cours...'
+    fetch(refreshUrl).then(response => {
+      updateModaleFromResponse(response, '#fr-modal-user-edit', addEventListenerOnRoleChange)
+    })
+  })
+})
+
+const modalPartnerUserCreate = document?.querySelector('#fr-modal-user-create')
+if(modalPartnerUserCreate){
+  modalPartnerUserCreate.addEventListener('dsfr.conceal', (event) => {
+    const refreshUrl = event.target.dataset.refreshUrl;
+    modalPartnerUserCreate.querySelector('button[type="submit"]').disabled = true;
+    fetch(refreshUrl).then(response => {
+      updateModaleFromResponse(response, '#fr-modal-user-create', addEventListenerOnRoleChange)
+    })
+  })
+}
+
+function addEventListenerOnRoleChange(){
+  if (document.querySelector('#user_partner_role')) {
+    document.querySelector('#user_partner_role').addEventListener('change', () => {
+      histoUpdatePermissionsFromRole('partner')
+    })
+    histoUpdatePermissionsFromRole('partner')
+  }
+}
+
+function updateModaleFromResponse(response, modalSelector, callback = null){
+  if (response.ok) {
+    response.json().then((response) => {
+      if (response.redirect) {
+        window.location.href = response.url
+        window.location.reload()
+      }else{
+        document.querySelector(modalSelector + '-title').innerHTML = response.title
+        document.querySelector(modalSelector + '-form-container').innerHTML = response.content
+        attachSubmitFormModal(modalSelector, callback)
+        if (typeof callback === 'function') {
+          callback();
+        }
+        if(response.disabled){
+          return
+        }
+        document.querySelector(modalSelector +' button[type="submit"]').disabled = false
+      }
+    })
+  }else{
+    const content = '<div class="fr-alert fr-alert--error" role="alert"><p class="fr-alert__title">Erreur</p><p>Une erreur s\'est produite. Veuillez actualiser la page.</p></div>'
+    document.querySelector(modalSelector + '-form-container').innerHTML = content
+  }
+}
+
+function attachSubmitFormModal (modalSelector, callback) {
+  document.querySelector(modalSelector + ' form').addEventListener('submit', (e) => {
+    e.preventDefault()
+    document.querySelector(modalSelector + ' button[type="submit"]').disabled = true
+    const formData = new FormData(e.target)
+    fetch(e.target.action, {method: 'POST', body: formData}).then(response => {
+      updateModaleFromResponse(response, modalSelector, callback)
+    })
+  })
+}

config/packages/twig.yaml

@@ -17,6 +17,7 @@ twig:
             banner_message: '%maintenance_banner_message%'
             enable: '%maintenance_enable%'
         mise_en_berne: '%env(MISE_EN_BERNE_ENABLE)%'
+        feature_multi_territories: '%env(bool:FEATURE_MULTI_TERRITORIES)%'
     paths:
         # point this wherever your images live
         '%kernel.project_dir%/public/img': images

config/services.yaml

@@ -47,6 +47,7 @@ parameters:
     delay_min_check_new_signalement_files: '%env(DELAY_MIN_CHECK_NEW_SIGNALEMENT_FILES)%'
     albert_api_key: '%env(ALBERT_API_KEY)%'
     standard_max_list_pagination: 50
+    feature_multi_territories: '%env(bool:FEATURE_MULTI_TERRITORIES)%'
 
 services:
     # default configuration for services in *this* file