feat: début d'ajout des statuts des signalements

IGNF · Sep 17, 2024 · 4029090 · 4029090
1 parent 7c3f7d3
commit 4029090
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 54 deletions.
diff --git a/assets/@types/espaceco.ts b/assets/@types/espaceco.ts
@@ -1,3 +1,5 @@
+import statuses from "../data/report_statuses.json";
+
 export interface ConstraintsDTO {
     minLength?: number;
     maxLength?: number;
@@ -31,6 +33,21 @@ export interface ThemeDTO {
     global?: boolean;
 }
 
+export type ReportStatuses = keyof typeof statuses;
+export type ReportStatusesDTO = Record<
+    ReportStatuses,
+    {
+        wording: string;
+        help?: string;
+    }
+>;
+
+export type ReportStatusesDTO2 = {
+    status: ReportStatuses;
+    wording: string;
+    help?: string;
+}[];
+
 export interface CommunityResponseDTO {
     id: number;
     description: string | null;
@@ -57,6 +74,7 @@ export interface CommunityResponseDTO {
     logo_url: string | null;
     keywords?: string[];
     documents?: DocumentDTO[];
+    report_statuses?: ReportStatusesDTO2;
 }
 
 export interface DocumentDTO {
@@ -155,3 +173,8 @@ export interface TableResponseDTO {
     wfs_transactions: string;
     columns: ColumnDTO[];
 }
+
+export type ReportFormType = {
+    attributes: ThemeDTO[];
+    report_statuses?: ReportStatusesDTO2;
+};
diff --git a/assets/data/report_statuses.json b/assets/data/report_statuses.json
@@ -0,0 +1,12 @@
+{    
+    "submit": "Reçu dans nos services",
+    "pending0": "En demande de qualification",
+    "pending": "En cours de traitement",
+    "pending1": "En attente de saisie",
+    "pending2": "En attente de validation",
+    "valid": "Pris en compte",
+    "valid0": "Déjà pris en compte",
+    "reject": "Rejeté (hors spéc.)",
+    "reject0": "Rejeté (hors de propos)",
+    "test": "En mode test"
+}
diff --git a/assets/espaceco/pages/communities/ManageCommunity.tsx b/assets/espaceco/pages/communities/ManageCommunity.tsx
@@ -39,9 +39,7 @@ const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
     return (
         <AppLayout navItems={navItems} documentTitle={t("title", { name: communityQuery.data?.name })}>
             <h1>{t("title", { name: communityQuery.data?.name })}</h1>
-            {communityQuery.isLoading ? (
-                <LoadingText message={t("loading")} />
-            ) : communityQuery.isError ? (
+            {communityQuery.isError ? (
                 <Alert
                     severity="error"
                     closable={false}
@@ -53,6 +51,8 @@ const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
                         </>
                     }
                 />
+            ) : communityQuery.isLoading ? (
+                <LoadingText message={t("loading")} />
             ) : (
                 communityQuery.data !== undefined && (
                     <div className={fr.cx("fr-container", "fr-py-2w")}>

diff --git a/assets/espaceco/pages/communities/ManageCommunityTr.tsx b/assets/espaceco/pages/communities/ManageCommunityTr.tsx
@@ -57,6 +57,8 @@ export const { i18n } = declareComponentKeys<
     | "layer.tab3"
     | "report.configure_themes"
     | "report.configure_themes.explain"
+    | "report.configure_statuses"
+    | "report.configure_statuses.explain"
     | "grid.grids"
     | { K: "grid.explain"; R: JSX.Element }
 >()("ManageCommunity");
@@ -127,6 +129,9 @@ export const ManageCommunityFrTranslations: Translations<"fr">["ManageCommunity"
     "report.configure_themes": "Configurer les thèmes et attributs des signalements (optionnel)",
     "report.configure_themes.explain":
         "Afin de permettre aux membres de votre groupe de soumettre des signalements sur d'autres thématiques que celles IGN (Adresse, Bâti, Points d'intérêts...), vous pouvez ajouter vos propres thèmes et personnaliser le formulaire de saisie d'un nouveau signalement pour l'adapter à vos besoins métier. Les membres de votre groupe verront ces thèmes, en plus ou à la place des thèmes IGN, sur l'interface de saisie d'un nouveau signalement sur l'espace collaboratif, les plugins SIG et l'application mobile.",
+    "report.configure_statuses": "Paramétrer les status des signalements (optionnel)",
+    "report.configure_statuses.explain":
+        "Vous pouvez supprimer un maximum de 2 status en les décochant, changer le nom des status et ajouter une explication des status pour améliorer la compréhension de vos utilisateurs.",
     "grid.grids": "Emprises du guichet (optionnel)",
     "grid.explain": (
         <p>
@@ -199,6 +204,8 @@ export const ManageCommunityEnTranslations: Translations<"en">["ManageCommunity"
     "layer.tab3": "Base maps",
     "report.configure_themes": undefined,
     "report.configure_themes.explain": undefined,
+    "report.configure_statuses": undefined,
+    "report.configure_statuses.explain": undefined,
     "grid.grids": undefined,
     "grid.explain": undefined,
 };
diff --git a/assets/espaceco/pages/communities/management/Reports.tsx b/assets/espaceco/pages/communities/management/Reports.tsx
@@ -4,37 +4,66 @@ import { useQuery } from "@tanstack/react-query";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
-import { CommunityResponseDTO, TableResponseDTO } from "../../../../@types/espaceco";
+import { CommunityResponseDTO, ReportFormType, TableResponseDTO } from "../../../../@types/espaceco";
 import RQKeys from "../../../../modules/espaceco/RQKeys";
 import { CartesApiException } from "../../../../modules/jsonFetch";
 import api from "../../../api";
+import ReportStatuses from "./reports/ReportStatuses";
 import ThemeList from "./reports/ThemeList";
+import getDefaultStatuses from "./reports/Utils";
+import Wait from "../../../../components/Utils/Wait";
+import { fr } from "@codegouvfr/react-dsfr";
+import LoadingText from "../../../../components/Utils/LoadingText";
+import { useTranslation } from "../../../../i18n/i18n";
 
 type ReportsProps = {
     community: CommunityResponseDTO;
 };
 
 const Reports: FC<ReportsProps> = ({ community }) => {
-    const schema = yup.object({
-        attributes: yup.array().of(yup.object()),
-    });
+    const { t: tCommon } = useTranslation("Common");
+
+    /*const schema = yup.object({
+        attributes: yup.array().of(yup.object()).required(),
+        report_statuses: yup.array().of(
+            yup.object({
+                status: yup.string().required(),
+                wording: yup.string().required(),
+                help: yup.string(),
+            })
+        )
+    });*/
 
     const tablesQuery = useQuery<Partial<TableResponseDTO>[], CartesApiException>({
         queryKey: RQKeys.tables(community.id),
         queryFn: ({ signal }) => api.permission.getThemableTables(community.id, signal),
         staleTime: 60000,
     });
 
-    // TODO Typer le formulaire
-    const form = useForm({ resolver: yupResolver(schema), mode: "onChange", values: { attributes: community.attributes ?? [] } });
+    const form = useForm<ReportFormType>({
+        // resolver: yupResolver(schema),
+        mode: "onChange",
+        values: {
+            attributes: community.attributes ?? [],
+            report_statuses: getDefaultStatuses(),
+        },
+    });
 
     return (
         <div>
-            {tablesQuery.isError && <Alert severity="error" closable title={tablesQuery.error.message} />}
             {tablesQuery.isError ? (
                 <Alert severity="error" closable title={tablesQuery.error.message} />
+            ) : tablesQuery.isLoading ? (
+                <Wait>
+                    <div className={fr.cx("fr-grid-row")}>
+                        <LoadingText as="h6" message={tCommon("loading")} />
+                    </div>
+                </Wait>
             ) : (
-                <ThemeList form={form} tables={tablesQuery.data ?? []} />
+                <div>
+                    <ThemeList form={form} tables={tablesQuery.data ?? []} />
+                    <ReportStatuses form={form} statuses={community.report_statuses} />
+                </div>
             )}
         </div>
     );

diff --git a/assets/espaceco/pages/communities/management/reports/AddAttributeDialog.tsx b/assets/espaceco/pages/communities/management/reports/AddAttributeDialog.tsx
@@ -1,6 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import Input from "@codegouvfr/react-dsfr/Input";
-import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import RadioButtons from "@codegouvfr/react-dsfr/RadioButtons";
 import ToggleSwitch from "@codegouvfr/react-dsfr/ToggleSwitch";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -11,13 +10,10 @@ import * as yup from "yup";
 import { AttributeDTO, AttributeTypes } from "../../../../../@types/espaceco";
 import { useTranslation } from "../../../../../i18n/i18n";
 import { AttributeValidations, validateList } from "./AttributeValidations";
-
-const AddAttributeDialogModal = createModal({
-    id: "add-attribute",
-    isOpenedByDefault: false,
-});
+import { createModal } from "@codegouvfr/react-dsfr/Modal";
 
 type AddAttributeDialogProps = {
+    modal: ReturnType<typeof createModal>;
     attributes: AttributeDTO[];
     onAdd: (attribute: AttributeDTO) => void;
 };
@@ -42,7 +38,7 @@ const defaultValues: AddAttributeFormType = {
     values: "",
 };
 
-const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ attributes, onAdd }) => {
+const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ modal, attributes, onAdd }) => {
     const { t: tCommon } = useTranslation("Common");
     const { t } = useTranslation("Theme");
 
@@ -71,15 +67,11 @@ const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ attributes, onAdd })
         }),
         help: yup.string(),
         multiple: yup.boolean(),
-        /*values: yup.string().test({
+        values: yup.string().test({
             name: "check-values",
             test: (value, context) => {
                 return validateList(value, context);
             },
-        }),*/
-        values: yup.string().transform((value, origin) => {
-            const v = origin ? origin.split("|") : [];
-            return [...new Set(v)];
         }),
     });
 
@@ -99,22 +91,10 @@ const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ attributes, onAdd })
     });
 
     const type = watch("type");
+
     const mandatory = watch("mandatory");
     const multiple = watch("multiple");
 
-    const typeOptions = useMemo(() => {
-        return Array.from(AttributeTypes, (at) => {
-            return {
-                label: t("dialog.add_attribute.get_type", { type: at }),
-                nativeInputProps: {
-                    ...register("type"),
-                    value: at,
-                    checked: at === type,
-                },
-            };
-        });
-    }, [t, register, type]);
-
     useEffect(() => {
         setFormValue("default", "");
         clearErrors(["default", "values"]);
@@ -152,15 +132,15 @@ const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ attributes, onAdd })
     }, [getFormValues]);
 
     const onSubmit = () => {
-        AddAttributeDialogModal.close();
+        modal.close();
         onAdd(normalize());
         reset(defaultValues);
     };
 
     return (
         <>
             {createPortal(
-                <AddAttributeDialogModal.Component
+                <modal.Component
                     title={t("add_attribute")}
                     buttons={[
                         {
@@ -169,7 +149,7 @@ const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ attributes, onAdd })
                             doClosesModal: false,
                             onClick: () => {
                                 reset(defaultValues);
-                                AddAttributeDialogModal.close();
+                                modal.close();
                             },
                         },
                         {
@@ -192,7 +172,13 @@ const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ attributes, onAdd })
                         />
                         <RadioButtons
                             legend={t("dialog.add_attribute.type")}
-                            options={typeOptions}
+                            options={AttributeTypes.map((attrType) => ({
+                                label: t("dialog.add_attribute.get_type", { type: attrType }),
+                                nativeInputProps: {
+                                    ...register("type"),
+                                    value: attrType,
+                                },
+                            }))}
                             orientation={"horizontal"}
                             state={errors.type ? "error" : "default"}
                             stateRelatedMessage={errors?.type?.message}
@@ -247,11 +233,11 @@ const AddAttributeDialog: FC<AddAttributeDialogProps> = ({ attributes, onAdd })
                             }}
                         />
                     </div>
-                </AddAttributeDialogModal.Component>,
+                </modal.Component>,
                 document.body
             )}
         </>
     );
 };
 
-export { AddAttributeDialog, AddAttributeDialogModal };
+export { AddAttributeDialog /*, AddAttributeDialogModal*/ };
diff --git a/assets/espaceco/pages/communities/management/reports/AddThemeDialog.tsx b/assets/espaceco/pages/communities/management/reports/AddThemeDialog.tsx
@@ -102,6 +102,7 @@ const AddThemeDialog: FC<AddThemeDialogProps> = ({ themes, tables, onAdd }) => {
     });
 
     const tableFullName = watch("fullname");
+    const global = watch("global");
 
     useEffect(() => {
         if (tableFullName) {
@@ -173,7 +174,7 @@ const AddThemeDialog: FC<AddThemeDialogProps> = ({ themes, tables, onAdd }) => {
                             inputTitle={""}
                             label={t("dialog.edit_theme.global")}
                             showCheckedHint
-                            defaultChecked={getFormValues("global")}
+                            defaultChecked={global}
                             onChange={(checked) => {
                                 setFormValue("global", checked);
                             }}

diff --git a/assets/espaceco/pages/communities/management/reports/AttributeList.tsx b/assets/espaceco/pages/communities/management/reports/AttributeList.tsx
@@ -1,14 +1,16 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import Button from "@codegouvfr/react-dsfr/Button";
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import { UseFormReturn } from "react-hook-form";
-import { ThemeDTO } from "../../../../../@types/espaceco";
+import { ReportFormType, ThemeDTO } from "../../../../../@types/espaceco";
 import { useTranslation } from "../../../../../i18n/i18n";
-import { AddAttributeDialog, AddAttributeDialogModal } from "./AddAttributeDialog";
+import { AddAttributeDialog /*, AddAttributeDialogModal*/ } from "./AddAttributeDialog";
+import { createModal } from "@codegouvfr/react-dsfr/Modal";
+import { v4 as uuidv4 } from "uuid";
 
 type AttributeListProps = {
-    form: UseFormReturn;
-    theme?: ThemeDTO;
+    form: UseFormReturn<ReportFormType>;
+    theme: ThemeDTO;
 };
 
 const AttributeList: FC<AttributeListProps> = ({ form, theme }) => {
@@ -30,9 +32,14 @@ const AttributeList: FC<AttributeListProps> = ({ form, theme }) => {
         setFormValue("attributes", a);
     };
 
-    if (!theme?.attributes.length) {
-        return null;
-    }
+    const AddAttributeDialogModal: ReturnType<typeof createModal> = useMemo(
+        () =>
+            createModal({
+                id: `add-attribute-${uuidv4()}`,
+                isOpenedByDefault: false,
+            }),
+        []
+    );
 
     return (
         <div className={fr.cx("fr-grid-row")}>
@@ -74,7 +81,7 @@ const AttributeList: FC<AttributeListProps> = ({ form, theme }) => {
                     </Button>
                 )}
             </div>
-            <AddAttributeDialog attributes={theme?.attributes} onAdd={(attribute) => console.log(attribute)} />
+            {!theme.table && <AddAttributeDialog modal={AddAttributeDialogModal} attributes={theme.attributes} onAdd={(attribute) => console.log(attribute)} />}
         </div>
     );
 };