dismiss

dataesr · Feb 5, 2025 · d21f8d2 · d21f8d2
1 parent c69ef17
commit d21f8d2
Show file tree

Hide file tree

Showing 9 changed files with 557 additions and 138 deletions.
diff --git a/src/pages/admin/sirene.js b/src/pages/admin/sirene.js
@@ -9,14 +9,12 @@ const DATE_DISPLAY_OPTIONS = {
 };
 
 function SireneUpdateList() {
-  const { data, isLoading, error } = useFetch('/sirene/updates');
+  const { data, isLoading } = useFetch('/sirene/updates');
 
   if (isLoading) return null;
 
   const updates = data?.data?.filter((structure) => structure.updates.length > 0);
 
-  console.log(updates);
-
   return (
     <Container fluid>
       <Title as="h1" look="h4">

diff --git a/src/pages/structures/[id]/updates/components/AdresseUpdate.js b/src/pages/structures/[id]/updates/components/AdresseUpdate.js
@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import { ModalContent, ModalTitle } from '@dataesr/react-dsfr';
+import { useState } from 'react';
+import Button from '../../../../../components/button';
+import Modal from '../../../../../components/modal';
+import LocalisationForm from '../../../../../components/forms/localisation';
+import DismissButton from './DismissButton';
+
+function transformAddress(input, startDate = null) {
+  const address = [
+    input.numeroVoieEtablissement,
+    input.typeVoieEtablissement?.toLowerCase(),
+    input.libelleVoieEtablissement,
+  ].filter(Boolean).join(' ');
+
+  return {
+    cityId: input.codeCommuneEtablissement || '',
+    city: input.libelleCommuneEtablissement || '',
+    address,
+    postalCode: input.codePostalEtablissement || '',
+    locality: input.libelleCommuneEtablissement || '',
+    country: 'France',
+    iso3: 'FRA',
+    active: true,
+    startDate,
+  };
+}
+
+export function formatAddress(address) {
+  if (!address) return <p>Adresse non renseignée</p>;
+
+  return (
+    <div className="fr-text--sm">
+      <div>{address.address}</div>
+      <div>{`${address.postalCode} ${address.city}`}</div>
+      <div>{address.country}</div>
+    </div>
+  );
+}
+
+const getPaysageValue = (paysageData) => <pre className="fr-text--xs">{formatAddress(paysageData.currentLocalisation)}</pre>;
+
+const getSireneValue = (update) => <pre className="fr-text--xs">{formatAddress(transformAddress(update.value, update.changeEffectiveDate))}</pre>;
+
+export function AdresseUpdate({ update, paysageData, reload }) {
+  const [showModal, setShowModal] = useState(false);
+
+  const paysageValue = getPaysageValue(paysageData);
+  const sireneValue = getSireneValue(update);
+
+  return (
+    <>
+      <div style={{ width: '100%', display: 'flex', gap: '2rem' }}>
+        <p style={{ flex: '0 1 100%' }}>
+          <i className="fr-text--sm">
+            Nouvelle valeur sirene:
+          </i>
+          <br />
+          <span className="fr-text--bold">{sireneValue}</span>
+        </p>
+        <p style={{ flex: '0 1 100%' }}>
+          <i className="fr-text--sm">
+            Valeur paysage actuelle:
+            {' '}
+          </i>
+          <br />
+          <span className="fr-text--bold">{paysageValue || 'Non renseigné'}</span>
+        </p>
+      </div>
+      <div className="fr-my-2w fr-btns-group fr-btns-group--inline-sm fr-btns-group--sm">
+        <Button
+          size="sm"
+          type="button"
+          onClick={() => setShowModal(true)}
+        >
+          Ajouter
+        </Button>
+        <DismissButton id={update._id} reload={reload} />
+      </div>
+
+      <Modal isOpen={showModal} size="lg" hide={() => setShowModal(false)}>
+        <ModalTitle>
+          Modifier le SIRET
+          <br />
+          <span className="fr-text--sm fr-text-mention--grey fr-text--regular">
+            Cette action mettra une date de fin au SIRET actuel
+          </span>
+        </ModalTitle>
+        <ModalContent>
+          <LocalisationForm
+            data={transformAddress(update.value)}
+            defaultQuery={transformAddress(update.value).address}
+          />
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+AdresseUpdate.propTypes = {
+  update: PropTypes.object.isRequired,
+  paysageData: PropTypes.object.isRequired,
+  reload: PropTypes.func.isRequired,
+};
diff --git a/src/pages/structures/[id]/updates/components/CategorieJuridiqueUpdate.js b/src/pages/structures/[id]/updates/components/CategorieJuridiqueUpdate.js
@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { ModalContent, ModalTitle } from '@dataesr/react-dsfr';
+import Button from '../../../../../components/button';
+import Modal from '../../../../../components/modal';
+import RelationForm from '../../../../../components/forms/relations';
+import DismissButton from './DismissButton';
+
+export const getPaysageValue = (paysageData) => paysageData?.legalcategory?.inseeCode;
+
+export const getSireneValue = (update) => update.value;
+export const getSirenePrevValue = (update) => update.previousValue;
+
+export const getForm = (update) => ({
+  inseeCode: update.value,
+  startDate: update.changeEffectiveDate,
+});
+
+export function CategorieJuridiqueUpdate({ update, paysageData, reload }) {
+  const [showModal, setShowModal] = useState(false);
+
+  const paysageValue = getPaysageValue(paysageData);
+  const sireneValue = getSireneValue(update);
+  const sirenePrevValue = getSirenePrevValue(update);
+
+  return (
+    <>
+      <div style={{ width: '100%', display: 'flex', gap: '2rem' }}>
+        <p style={{ flex: '0 1 30%' }}>
+          <i className="fr-text--sm">
+            Nouvelle valeur sirene:
+          </i>
+          <br />
+          <span className="fr-text--bold">{sireneValue}</span>
+        </p>
+        <p style={{ flex: '0 1 30%' }}>
+          <i className="fr-text--sm">
+            Ancienne valeur sirene:
+          </i>
+          <br />
+          <span className="fr-text--bold">{sirenePrevValue}</span>
+        </p>
+        <p style={{ flex: '0 1 30%' }}>
+          <i className="fr-text--sm">
+            Valeur paysage actuelle:
+            {' '}
+          </i>
+          <br />
+          <span className="fr-text--bold">{paysageValue || 'Non renseigné'}</span>
+        </p>
+      </div>
+      <div className="fr-my-2w fr-btns-group fr-btns-group--inline-sm fr-btns-group--sm">
+        <Button
+          size="sm"
+          type="button"
+          onClick={() => setShowModal(true)}
+        >
+          Ajouter
+        </Button>
+        <DismissButton id={update._id} reload={reload} />
+      </div>
+
+      <Modal isOpen={showModal} size="lg" hide={() => setShowModal(false)}>
+        <ModalTitle>
+          Modifier la catégorie juridique
+          <br />
+          <span className="fr-text--sm fr-text-mention--grey fr-text--regular">
+            Cette action mettra une date de fin à la catégorie juridique actuelle
+          </span>
+        </ModalTitle>
+        <ModalContent>
+          <RelationForm
+            data={getForm(update)}
+            resourceType="structures"
+            relatedObjectType={['legalcategories']}
+            noRelationType
+            onSave={() => {
+              console.log('save');
+              setShowModal(false);
+            }}
+          />
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+CategorieJuridiqueUpdate.propTypes = {
+  update: PropTypes.object.isRequired,
+  paysageData: PropTypes.object.isRequired,
+  reload: PropTypes.func.isRequired,
+};
diff --git a/src/pages/structures/[id]/updates/components/DenominationUpdate.js b/src/pages/structures/[id]/updates/components/DenominationUpdate.js
@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import { ModalContent, ModalTitle } from '@dataesr/react-dsfr';
+import { useState } from 'react';
+import Button from '../../../../../components/button';
+import Modal from '../../../../../components/modal';
+import NameForm from '../../../../../components/forms/names';
+import DismissButton from './DismissButton';
+
+export const getPaysageValue = (paysageData) => (
+  <>
+    <span>{paysageData.displayName}</span>
+    <br />
+    <span className="fr-text--sm">{paysageData.currentName?.officialName}</span>
+  </>
+);
+
+export const getSireneValue = (update) => update.value;
+export const getSirenePrevValue = (update) => update.previousValue;
+
+export const getForm = (update) => ({
+  offcialName: update.value,
+  usualName: update.value,
+  startDate: update.changeEffectiveDate,
+});
+
+export function DenominationUpdate({ update, paysageData, reload }) {
+  const [showModal, setShowModal] = useState(false);
+
+  const paysageValue = getPaysageValue(paysageData);
+  const sireneValue = getSireneValue(update);
+  const sirenePrevValue = getSirenePrevValue(update);
+
+  return (
+    <>
+      <div style={{ width: '100%', display: 'flex', gap: '2rem' }}>
+        <p style={{ flex: '0 1 100%' }}>
+          <i className="fr-text--sm">
+            Nouvelle valeur sirene:
+          </i>
+          <br />
+          <span className="fr-text--bold">{sireneValue}</span>
+        </p>
+        <p style={{ flex: '0 1 100%' }}>
+          <i className="fr-text--sm">
+            Ancienne valeur sirene:
+          </i>
+          <br />
+          <span className="fr-text--bold">{sirenePrevValue}</span>
+        </p>
+        <p style={{ flex: '0 1 100%' }}>
+          <i className="fr-text--sm">
+            Valeur paysage actuelle:
+            {' '}
+          </i>
+          <br />
+          <span className="fr-text--bold">{paysageValue || 'Non renseigné'}</span>
+        </p>
+      </div>
+      <div className="fr-my-2w fr-btns-group fr-btns-group--inline-sm fr-btns-group--sm">
+        <Button
+          size="sm"
+          type="button"
+          onClick={() => setShowModal(true)}
+        >
+          Ajouter
+        </Button>
+        <DismissButton id={update._id} reload={reload} />
+      </div>
+
+      <Modal isOpen={showModal} size="lg" hide={() => setShowModal(false)}>
+        <ModalTitle>
+          Modifier le SIRET
+          <br />
+          <span className="fr-text--sm fr-text-mention--grey fr-text--regular">
+            Cette action mettra une date de fin au SIRET actuel
+          </span>
+        </ModalTitle>
+        <ModalContent>
+          <NameForm
+            id={update.id}
+            data={getForm(update)}
+            onSave={() => {
+              console.log('save');
+              setShowModal(false);
+            }}
+          />
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+DenominationUpdate.propTypes = {
+  update: PropTypes.object.isRequired,
+  paysageData: PropTypes.object.isRequired,
+  reload: PropTypes.func.isRequired,
+};
diff --git a/src/pages/structures/[id]/updates/components/DismissButton.js b/src/pages/structures/[id]/updates/components/DismissButton.js
@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import Button from '../../../../../components/button';
+import useNotice from '../../../../../hooks/useNotice';
+import api from '../../../../../utils/api';
+
+export default function DismissButton({ id, reload }) {
+  const { notice } = useNotice();
+
+  return (
+    <Button
+      size="sm"
+      type="button"
+      secondary
+      onClick={() => api.patch(`/sirene/updates/${id}`, { status: 'ok' })
+        .then(() => {
+          reload();
+          notice({ content: 'Ignoré.', autoDismissAfter: 6000, type: 'success' });
+        })
+        .catch(() => notice({
+          content: "Une erreur s'est produite",
+          autoDismissAfter: 6000,
+          type: 'error',
+        }))}
+    >
+      Ignorer
+    </Button>
+  );
+}
+
+DismissButton.propTypes = {
+  id: PropTypes.string.isRequired,
+  reload: PropTypes.func,
+};
+
+DismissButton.defaultProps = {
+  reload: () => { },
+};