migration: api-depot postgres

components/api-depot/chef-de-file.tsx

@@ -4,12 +4,13 @@ import { getEPCI, getDepartement, getCommune } from "@/lib/cog";
 
 import CopyToClipBoard from "@/components/copy-to-clipboard";
 import {
-  ChefDeFileApiDepotType,
-  PerimeterType,
+  ChefDeFile as ChefDeFileApiDepot,
+  Perimeter,
   TypePerimeterEnum,
-} from "types/api-depot";
+} from "types/api-depot.types";
+import Checkbox from "@codegouvfr/react-dsfr/Checkbox";
 
-function getPerimeters(perimetre: PerimeterType[]) {
+function getPerimeters(perimetre: Perimeter[]) {
   return perimetre
     ? perimetre.map((p) => {
         const { type, code } = p;
@@ -31,20 +32,20 @@ function getPerimeters(perimetre: PerimeterType[]) {
     : null;
 }
 
-interface ChefDeFileProps extends ChefDeFileApiDepotType {
+interface ChefDeFileProps extends ChefDeFileApiDepot {
   hasChefDeFile: boolean;
 }
 
 const ChefDeFile = ({
   hasChefDeFile,
-  _id,
+  id,
   nom,
   email,
   isEmailPublic,
-  perimetre,
-  signataireCharte,
+  perimeters,
+  isSignataireCharte,
 }: ChefDeFileProps) => {
-  const perimeters = getPerimeters(perimetre);
+  const perimetersString = getPerimeters(perimeters);
   return (
     <div className="fr-py-4v">
       <h1 className="fr-m-1v">Chef de file</h1>
@@ -53,41 +54,42 @@ const ChefDeFile = ({
           <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
             <div className="fr-col-10">
               <h3>{nom}</h3>
-              <CopyToClipBoard text={_id} title="Id" />
+              <CopyToClipBoard text={id} title="Id" />
               <CopyToClipBoard text={email} title="Email" />
-              <div className="fr-col">
-                <input
-                  type="checkbox"
-                  id="checkbox"
-                  name="checkbox"
-                  checked={isEmailPublic}
-                  disabled
-                />
-                <label className="fr-label" htmlFor="checkbox">
-                  Email Public
-                </label>
-              </div>
-            </div>
-
-            <div className="fr-col">
-              <input
-                type="checkbox"
-                id="checkbox"
-                name="checkbox"
-                checked={signataireCharte}
-                disabled
+              <Checkbox
+                state={isEmailPublic ? "success" : "error"}
+                options={[
+                  {
+                    label: "Email public",
+                    nativeInputProps: {
+                      value: "value1",
+                      checked: isEmailPublic,
+                      readOnly: true,
+                    },
+                  },
+                ]}
+              />
+              <Checkbox
+                state={isSignataireCharte ? "success" : "error"}
+                options={[
+                  {
+                    label: "Signataire de la charte",
+                    nativeInputProps: {
+                      value: "value1",
+                      checked: isSignataireCharte,
+                      readOnly: true,
+                    },
+                  },
+                ]}
               />
-              <label className="fr-label" htmlFor="checkbox">
-                signataire de la charte
-              </label>
             </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>)
+              {perimetersString
+                ? perimetersString.map((p) => <li key={p}>{p}</li>)
                 : "Aucune périmètre n’est défini"}
             </ul>
           </div>

components/api-depot/client-item.tsx

@@ -1,17 +1,14 @@
 import Badge from "@codegouvfr/react-dsfr/Badge";
 import Button from "@codegouvfr/react-dsfr/Button";
+import Checkbox from "@codegouvfr/react-dsfr/Checkbox";
 import Link from "next/link";
+import { ChefDeFile, Client, Mandataire } from "types/api-depot.types";
 import { PartenaireDeLaCharte } from "../../server/lib/partenaire-de-la-charte/entity";
-import {
-  ChefDeFileApiDepotType,
-  ClientApiDepotType,
-  MandataireApiDepotType,
-} from "types/api-depot";
 
 interface ClientItemProps {
-  client: ClientApiDepotType;
-  mandataire: MandataireApiDepotType;
-  chefDeFile: ChefDeFileApiDepotType;
+  client: Client;
+  mandataire: Mandataire;
+  chefDeFile: ChefDeFile;
   partenaires: PartenaireDeLaCharte[];
   isDemo: boolean;
 }
@@ -29,21 +26,31 @@ const ClientItem = ({
     <td className="fr-col fr-my-1v">{chefDeFile ? chefDeFile.nom : "-"}</td>
     <td className="fr-col fr-my-1v">{client.authorizationStrategy}</td>
     <td className="fr-col fr-my-1v">
-      <input
-        type="checkbox"
-        id="checkbox"
-        name="checkbox"
-        checked={client.active}
-        disabled
+      <Checkbox
+        options={[
+          {
+            label: "",
+            nativeInputProps: {
+              value: "value1",
+              checked: client.isActive,
+              readOnly: true,
+            },
+          },
+        ]}
       />
     </td>
     <td className="fr-col fr-my-1v">
-      <input
-        type="checkbox"
-        id="checkbox"
-        name="checkbox"
-        checked={client.options.relaxMode}
-        disabled
+      <Checkbox
+        options={[
+          {
+            label: "",
+            nativeInputProps: {
+              value: "value1",
+              checked: client.isRelaxMode,
+              readOnly: true,
+            },
+          },
+        ]}
       />
     </td>
     <td className="fr-col fr-my-1v">
@@ -71,7 +78,7 @@ const ClientItem = ({
         passHref
         href={{
           pathname: "/api-depot/client/client-form",
-          query: { clientId: client._id, demo: isDemo ? 1 : 0 },
+          query: { clientId: client.id, demo: isDemo ? 1 : 0 },
         }}
       >
         <Button iconId="fr-icon-edit-line" iconPosition="right">
@@ -85,7 +92,7 @@ const ClientItem = ({
         passHref
         href={{
           pathname: "/api-depot/client",
-          query: { clientId: client._id, demo: isDemo ? 1 : 0 },
+          query: { clientId: client.id, demo: isDemo ? 1 : 0 },
         }}
       >
         <Button iconId="fr-icon-arrow-right-line" iconPosition="right">

components/api-depot/client/client-form/chef-de-file-form.tsx

@@ -5,12 +5,12 @@ import ToggleSwitch from "@codegouvfr/react-dsfr/ToggleSwitch";
 
 import { checkEmail } from "@/lib/util/email";
 
-import { ChefDeFileApiDepotType, PerimeterType } from "types/api-depot";
+import { ChefDeFile, Perimeter } from "types/api-depot.types";
 import { createChefDeFile, updateChefDeFile } from "@/lib/api-depot";
 import PerimeterList from "@/components/api-depot/client/client-form/perimeter-list";
 
 interface ChefDeFileFormProps {
-  initialChefDeFile: ChefDeFileApiDepotType;
+  initialChefDeFile: ChefDeFile;
   isDemo: boolean;
   close: () => void;
   onSelect: (value: string) => void;
@@ -32,29 +32,32 @@ const ChefDeFileForm = ({
     initialChefDeFile ? initialChefDeFile.isEmailPublic : true
   );
   const [isEmailValid, setIsEmailValid] = useState<boolean>(true);
-  const [perimeters, setPerimeters] = useState<PerimeterType[]>(
-    initialChefDeFile ? initialChefDeFile.perimetre : []
+  const [perimeters, setPerimeters] = useState<Perimeter[]>(
+    initialChefDeFile ? initialChefDeFile.perimeters : []
   );
   const [isSignataireCharte, setIsSignataireCharte] = useState<boolean>(
-    initialChefDeFile ? initialChefDeFile.signataireCharte : false
+    initialChefDeFile ? initialChefDeFile.isSignataireCharte : false
   );
 
   const saveChefDeFile = async (event) => {
     event.stopPropagation();
     event.preventDefault();
     try {
-      const chefDeFile = {
+      const chefDeFile: ChefDeFile = {
         nom,
         email,
         isEmailPublic,
-        perimetre: perimeters,
-        signataireCharte: isSignataireCharte,
+        perimeters: perimeters,
+        isSignataireCharte: isSignataireCharte,
       };
-      if (initialChefDeFile?._id) {
-        await updateChefDeFile(initialChefDeFile._id, chefDeFile, isDemo);
+      if (initialChefDeFile?.id) {
+        await updateChefDeFile(initialChefDeFile.id, chefDeFile, isDemo);
       } else {
-        const newChefDeFile = await createChefDeFile(chefDeFile, isDemo);
-        onSelect(newChefDeFile._id);
+        const newChefDeFile: ChefDeFile = await createChefDeFile(
+          chefDeFile,
+          isDemo
+        );
+        onSelect(newChefDeFile.id);
       }
       close();
     } catch (error: unknown) {

components/api-depot/client/client-form/chef-de-file-select.tsx

@@ -1,42 +1,44 @@
-import {useEffect, useMemo, useState} from 'react'
-import PropTypes from 'prop-types'
-import {uniqueId} from 'lodash'
-import Button from '@codegouvfr/react-dsfr/Button'
-import Input from '@codegouvfr/react-dsfr/Input'
-import ToggleSwitch from '@codegouvfr/react-dsfr/ToggleSwitch'
+import { useMemo } from "react";
 
-import SelectInput from '@/components/select-input'
-import { ChefDeFileApiDepotType } from 'types/api-depot'
+import SelectInput from "@/components/select-input";
+import { ChefDeFile } from "types/api-depot.types";
 
 interface ChefDeFileSelectProps {
   selectedChefDeFile: string;
-  chefsDeFile: ChefDeFileApiDepotType[];
+  chefsDeFile: ChefDeFile[];
   onSelect: (value: any) => void;
 }
 
-
-
-const ChefDeFileSelect = ({selectedChefDeFile, chefsDeFile, onSelect}: ChefDeFileSelectProps) => {
-  const chefsDeFileOptions = useMemo(() =>
-    chefsDeFile.map(m => ({label: m.nom + ' (' + m.email + ')', value: m._id}))
-  , [chefsDeFile])
+const ChefDeFileSelect = ({
+  selectedChefDeFile,
+  chefsDeFile,
+  onSelect,
+}: ChefDeFileSelectProps) => {
+  const chefsDeFileOptions = useMemo(
+    () =>
+      chefsDeFile.map((m) => ({
+        label: m.nom + " (" + m.email + ")",
+        value: m.id,
+      })),
+    [chefsDeFile]
+  );
 
   return (
-    <div className='fr-my-4w'>
-      <div className='fr-grid-row fr-grid-row--gutters fr-grid-row--bottom'>
-        <div className='fr-col-sm-12 fr-col-md-4'>
+    <div className="fr-my-4w">
+      <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--bottom">
+        <div className="fr-col-sm-12 fr-col-md-4">
           <SelectInput
-            label='Chef de file'
-            hint='Chef de file du client'
+            label="Chef de file"
+            hint="Chef de file du client"
             value={selectedChefDeFile}
-            defaultOption='Aucun'
+            defaultOption="Aucun"
             options={chefsDeFileOptions}
             handleChange={onSelect}
           />
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ChefDeFileSelect
+export default ChefDeFileSelect;