edit client api-depot

BaseAdresseNationale · May 3, 2023 · 8da1f5f · 8da1f5f
1 parent 1a329f2
commit 8da1f5f
Show file tree

Hide file tree

Showing 15 changed files with 249 additions and 165 deletions.
diff --git a/components/api-depot/chef-de-file.js b/components/api-depot/chef-de-file.js
@@ -9,60 +9,71 @@ function getPerimeters(perimetre) {
     const [territoireType, code] = p.split('-')
 
     if (territoireType === 'epci') {
-      return `EPCI de ${getEPCI(code).nom}`
+      return `EPCI de ${getEPCI(code).nom} (${code})`
     }
 
     if (territoireType === 'departement') {
-      return `Département de ${getDepartement(code).nom}`
+      return `Département de ${getDepartement(code).nom} (${code})`
     }
 
     if (territoireType === 'commune') {
-      return `Commune de ${getCommune(code).nom}`
+      return `Commune de ${getCommune(code).nom} (${code})`
     }
 
     return 'inconnu'
   }) : null
 }
 
-const ChefDeFile = ({_id, nom, email, perimetre, signataireCharte}) => {
+const ChefDeFile = ({hasChefDeFile, _id, nom, email, perimetre, signataireCharte}) => {
   const perimeters = getPerimeters(perimetre)
   return (
-    <div className='fr-container'>
-      <div className='fr-grid-row fr-grid-row--gutters fr-grid-row--middle'>
-        <div className='fr-col'>
-          <h3>{nom}</h3>
-          <MongoId id={_id} />
-        </div>
+    <div className='fr-py-4v'>
+      <h1 className='fr-m-1v'>Chef de file</h1>
+      {hasChefDeFile ? (
+        <div className='fr-container fr-py-4v'>
+          <div className='fr-grid-row fr-grid-row--gutters fr-grid-row--middle'>
+            <div className='fr-col-10'>
+              <h3>{nom}</h3>
+              <MongoId id={_id} />
+              <a href={`emailTo:${email}`}>{email}</a>
+            </div>
 
-        <div className='fr-col'>
-          <a href={`emailTo:${email}`}>{email}</a>
-        </div>
+            <div className='fr-col'>
+              <input type='checkbox' id='checkbox' name='checkbox' checked={signataireCharte} disabled />
+              <label className='fr-label' htmlFor='checkbox'>signataire de la charte</label>
+            </div>
+          </div>
 
-        <div className='fr-col'>
-          <input type='checkbox' id='checkbox' name='checkbox' checked={signataireCharte} disabled />
-          <label className='fr-label' htmlFor='checkbox'>signataire de la charte</label>
+          <div className='fr-my-2w'>
+            <label className='fr-label'>Périmètre :</label>
+            <ul>
+              {perimeters ? perimeters.map(p => (
+                <li key={p}>{p}</li>
+              )) : 'Aucune périmètre n’est défini'}
+            </ul>
+          </div>
         </div>
-      </div>
-
-      <div className='fr-my-2w'>
-        <label className='fr-label'>Périmètre :</label>
-        <ul>
-          {perimeters ? perimeters.map(p => (
-            <li key={p}>{p}</li>
-          )) : 'Aucune périmètre n’est défini'}
-        </ul>
-      </div>
+      ) : (
+        <div className='fr-container fr-py-4v'>
+          <div className='fr-grid-row fr-grid-row--gutters'>
+            <div className='fr-col'>
+              Aucun chef de file
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
 
 /* eslint-disable react/boolean-prop-naming */
 ChefDeFile.propTypes = {
-  _id: PropTypes.string.isRequired,
-  nom: PropTypes.string.isRequired,
-  email: PropTypes.string.isRequired,
-  perimetre: PropTypes.string.isRequired,
-  signataireCharte: PropTypes.bool.isRequired
+  hasChefDeFile: PropTypes.bool,
+  _id: PropTypes.string,
+  nom: PropTypes.string,
+  email: PropTypes.string,
+  perimetre: PropTypes.array,
+  signataireCharte: PropTypes.bool
 }
 /* eslint-enable react/boolean-prop-naming */
 

diff --git a/components/api-depot/client-item.js b/components/api-depot/client-item.js
@@ -22,6 +22,17 @@ const ClientItem = ({_id, nom, mandataire, chefDeFile, authorizationStrategy, ac
     <td className='fr-col fr-my-1v'>
       <input type='checkbox' id='checkbox' name='checkbox' checked={options.relaxMode} disabled />
     </td>
+    <td className='fr-col fr-my-1v'>
+      <Link passHref href={{
+        pathname: '/api-depot/client/client-form',
+        query: {clientId: _id, demo: isDemo ? 1 : 0}
+      }}
+      >
+        <Button iconId='fr-icon-edit-line' iconPosition='right'>
+          Editer
+        </Button>
+      </Link>
+    </td>
     <td className='fr-col fr-my-1v'>
       <Link passHref href={{
         pathname: '/api-depot/client',

diff --git a/components/api-depot/client/client-form/chef-de-file-form.js b/components/api-depot/client/client-form/chef-de-file-form.js
@@ -19,12 +19,13 @@ const ChefDeFileForm = ({selectedChefDeFile, chefsDeFile, onSelect}) => {
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false)
 
   const chefsDeFileOptions = useMemo(() =>
-    chefsDeFile.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom, value: m._id}))
+    chefsDeFile.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom + ' (' + m.email + ')', value: m._id}))
   , [chefsDeFile])
 
   const handleCreationForm = (event, isOpen) => {
     event.preventDefault()
     setIsCreateFormOpen(isOpen)
+    onSelect('')
   }
 
   useEffect(() => {
@@ -112,7 +113,10 @@ const ChefDeFileForm = ({selectedChefDeFile, chefsDeFile, onSelect}) => {
 }
 
 ChefDeFileForm.propTypes = {
-  selectedChefDeFile: PropTypes.string,
+  selectedChefDeFile: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
   chefsDeFile: PropTypes.array.isRequired,
   onSelect: PropTypes.func.isRequired
 }

diff --git a/components/api-depot/client/client-form/chef-de-file-perimeter.js b/components/api-depot/client/client-form/chef-de-file-perimeter.js
@@ -13,7 +13,6 @@ const ChefDeFilePerimeter = ({perimeters, handlePerimeter}) => {
 
   const handleChange = useCallback((perimeter, key, idx) => {
     const {type, code} = perimeter
-
     const cpy = [...perimeters]
     cpy[idx] = {type, code, key}
 

diff --git a/components/api-depot/client/client-form/mandataire-form.js b/components/api-depot/client/client-form/mandataire-form.js
@@ -14,7 +14,7 @@ const MandataireForm = ({selectedMandataire, mandataires, onSelect}) => {
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false)
 
   const mandatairesOptions = useMemo(() =>
-    mandataires.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom, value: m._id}))
+    mandataires.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom + ' (' + m.email + ')', value: m._id}))
   , [mandataires])
 
   const handleCreationForm = (event, isOpen) => {
@@ -92,7 +92,10 @@ const MandataireForm = ({selectedMandataire, mandataires, onSelect}) => {
 }
 
 MandataireForm.propTypes = {
-  selectedMandataire: PropTypes.string,
+  selectedMandataire: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
   mandataires: PropTypes.array.isRequired,
   onSelect: PropTypes.func.isRequired
 }

diff --git a/components/api-depot/client/client-form/perimeter.js b/components/api-depot/client/client-form/perimeter.js
@@ -1,6 +1,11 @@
+import {useEffect, useState} from 'react'
+import {uniqueId} from 'lodash'
 import PropTypes from 'prop-types'
-import Input from '@codegouvfr/react-dsfr/Input'
+import epcis from '@etalab/decoupage-administratif/data/epci.json'
+import departements from '@etalab/decoupage-administratif/data/departements.json'
+import allCommunes from '@etalab/decoupage-administratif/data/communes.json'
 
+import AutocompleteInput from '@/components/autocomplete-input'
 import SelectInput from '@/components/select-input'
 
 const typeOptions = [
@@ -9,25 +14,47 @@ const typeOptions = [
   {label: 'Commune', value: 'commune'}
 ]
 
-const Perimeter = ({type, code, handlePerimeter}) => (
-  <div className='fr-grid-row fr-grid-row--gutters'>
-    <div className='fr-col-6'>
-      <SelectInput
-        label='Type'
-        value={type}
-        options={typeOptions}
-        handleChange={v => handlePerimeter({type: v, code})}
-      />
-    </div>
-    <div className='fr-col-6'>
-      <Input
-        label='Code'
-        value={code}
-        onChange={e => handlePerimeter({type, code: e.target.value})}
-      />
+const Perimeter = ({type, code, handlePerimeter}) => {
+  const [perimetreOptions, setPerimetreOptions] = useState([])
+
+  useEffect(() => {
+    let options = []
+    if (type === 'epci') {
+      options = epcis.map(({code, nom}) => ({value: code, label: nom}))
+    } else if (type === 'departement') {
+      options = departements.map(({code, nom}) => ({value: code, label: nom}))
+    } else if (type === 'commune') {
+      options = allCommunes
+        .filter(c => ['commune-actuelle', 'arrondissement-municipal'].includes(c.type))
+        .map(({code, nom}) => ({value: code, label: nom}))
+    }
+
+    setPerimetreOptions(options)
+  }, [type])
+
+  return (
+    <div className='fr-grid-row fr-grid-row--gutters'>
+      <div className='fr-col-6'>
+        <SelectInput
+          label='Type'
+          value={type}
+          options={typeOptions}
+          handleChange={v => handlePerimeter({type: v, code})}
+        />
+      </div>
+
+      <div className='fr-col-6'>
+        <AutocompleteInput
+          id={uniqueId()}
+          label='Code'
+          options={perimetreOptions}
+          value={code}
+          onChange={e => handlePerimeter({type, code: e.target.value})}
+        />
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Perimeter.propTypes = {
   type: PropTypes.string.isRequired,

diff --git a/components/api-depot/client/client-header.js b/components/api-depot/client/client-header.js
@@ -1,23 +1,16 @@
 import PropTypes from 'prop-types'
 
-import ToggleSwitch from '@codegouvfr/react-dsfr/ToggleSwitch'
 import MongoId from '@/components/mongo-id'
 
-const ClientHeader = ({id, nom, isActive, isDisabled, onUpdate}) => (
-  <div className='fr-container fr-py-12v'>
-    <div className='fr-grid-row fr-grid-row--gutters'>
-      <div className='fr-col-10'>
-        <h1>{nom}</h1>
-        <MongoId id={id} />
-      </div>
-
-      <div className='fr-col-2'>
-        <ToggleSwitch
-          label=''
-          checked={isActive}
-          disabled={isDisabled}
-          onChange={checked => onUpdate({active: checked})}
-        />
+const ClientHeader = ({id, nom}) => (
+  <div className='fr-py-4v'>
+    <h1 className='fr-m-1v' >Client</h1>
+    <div className='fr-container fr-py-4v'>
+      <div className='fr-grid-row fr-grid-row--gutters'>
+        <div className='fr-col-10'>
+          <h2>{nom}</h2>
+          <MongoId id={id} />
+        </div>
       </div>
     </div>
   </div>
@@ -26,9 +19,6 @@ const ClientHeader = ({id, nom, isActive, isDisabled, onUpdate}) => (
 ClientHeader.propTypes = {
   id: PropTypes.string.isRequired,
   nom: PropTypes.string.isRequired,
-  isActive: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  onUpdate: PropTypes.func.isRequired
 }
 
 export default ClientHeader
diff --git a/components/api-depot/client/client-options.js b/components/api-depot/client/client-options.js
diff --git a/components/api-depot/clients-list.js b/components/api-depot/clients-list.js
@@ -54,7 +54,8 @@ const ClientsList = ({isDemo}) => {
               <th scope='col'>Stratégie d’autorisation</th>
               <th scope='col'>Activé</th>
               <th scope='col'>Mode relax</th>
-              <th scope='col' />
+              <th scope='col'>Editer</th>
+              <th scope='col'>Consulter</th>
             </tr>
           </thead>
 

diff --git a/components/api-depot/mandataire.js b/components/api-depot/mandataire.js
@@ -3,14 +3,15 @@ import PropTypes from 'prop-types'
 import MongoId from '@/components/mongo-id'
 
 const Mandataire = ({_id, nom, email}) => (
-  <div className='fr-container'>
-    <div className='fr-grid-row fr-grid-row--gutters'>
-      <div className='fr-col'>
-        <h3>{nom}</h3>
-        <MongoId id={_id} />
-      </div>
-      <div className='fr-col'>
-        <a href={`emailTo:${email}`}>{email}</a>
+  <div className='fr-py-4v'>
+    <h1 className='fr-m-1v'>Mandataire</h1>
+    <div className='fr-container fr-py-4v'>
+      <div className='fr-grid-row fr-grid-row--gutters'>
+        <div className='fr-col'>
+          <h3>{nom}</h3>
+          <MongoId id={_id} />
+          <a href={`emailTo:${email}`}>{email}</a>
+        </div>
       </div>
     </div>
   </div>