feat: add comment to voie (#969)

* feat: add comment to voie

* feat: add comment to voie

* openapi: delete adminService

* return Jules

* correct wording

* delete cookie

* correct

* correct

* delete package cookie

components/bal/toponymes-list.tsx

@@ -179,7 +179,11 @@ function ToponymesList({
                 }
                 comment={
                   toponyme.commentedNumeros.length > 0 ? (
-                    <CommentsContent comments={toponyme.commentedNumeros} />
+                    <CommentsContent
+                      commentedNumeros={(
+                        toponyme.commentedNumeros as Numero[]
+                      ).map(({ comment }) => comment)}
+                    />
                   ) : null
                 }
               />

components/bal/voie-editor.tsx

@@ -24,6 +24,7 @@ import {
   VoiesService,
 } from "@/lib/openapi-api-bal";
 import LayoutContext from "@/contexts/layout";
+import Comment from "../comment";
 
 interface VoieEditorProps {
   initialValue?: Voie;
@@ -43,6 +44,9 @@ function VoieEditor({
     initialValue ? initialValue.typeNumerotation === "metrique" : false
   );
   const [nom, onNomChange] = useInput(initialValue ? initialValue.nom : "");
+  const [comment, onCommentChange] = useInput(
+    initialValue ? initialValue.comment : ""
+  );
   const { getValidationMessage, setValidationMessages } =
     useValidationMessage();
   const [nomAlt, setNomAlt] = useState(initialValue?.nomAlt);
@@ -66,6 +70,7 @@ function VoieEditor({
           nomAlt: Object.keys(nomAlt).length > 0 ? nomAlt : null,
           typeNumerotation: isMetric ? "metrique" : "numerique",
           trace: data ? data.geometry : null,
+          comment: comment ? comment : null,
         };
 
         // Add or edit a voie
@@ -126,6 +131,7 @@ function VoieEditor({
       baseLocale.id,
       initialValue,
       nom,
+      comment,
       isMetric,
       data,
       nomAlt,
@@ -203,6 +209,8 @@ function VoieEditor({
           />
         </FormInput>
 
+        <Comment input={comment} onChange={onCommentChange} />
+
         {isMetric && <DrawEditor />}
       </Pane>
 

components/bal/voies-list.tsx

@@ -194,8 +194,11 @@ function VoiesList({
                     : null
                 }
                 comment={
-                  voie.comments.length > 0 ? (
-                    <CommentsContent comments={voie.comments} />
+                  voie.comment?.length || voie.commentedNumeros?.length > 0 ? (
+                    <CommentsContent
+                      mainComment={voie.comment}
+                      commentedNumeros={voie.commentedNumeros}
+                    />
                   ) : null
                 }
                 warning={

components/comments-content.tsx

@@ -4,20 +4,35 @@ import { uniqueId } from "lodash";
 const COMMENTS_LIMIT = 10;
 
 interface CommentsContentProps {
-  comments: string[];
+  mainComment?: string;
+  commentedNumeros?: string[];
 }
 
-function CommentsContent({ comments }: CommentsContentProps) {
-  const filteredComments = comments.slice(0, COMMENTS_LIMIT);
-  const nbComments = comments.length;
+function CommentsContent({
+  mainComment,
+  commentedNumeros,
+}: CommentsContentProps) {
+  const filteredComments = commentedNumeros.slice(0, COMMENTS_LIMIT);
+  const nbComments = commentedNumeros.length;
   const remainComments = nbComments - COMMENTS_LIMIT;
 
   return (
     <>
       <Pane marginBottom={8}>
-        <Text color="white">
-          Commentaire{`${comments.length > 0 ? "s" : ""}`} :
-        </Text>
+        {mainComment ? (
+          <Pane
+            whiteSpace="nowrap"
+            overflow="hidden"
+            textOverflow="ellipsis"
+            color="white"
+          >
+            <Text color="white">{mainComment}</Text>
+          </Pane>
+        ) : (
+          <Text color="white">
+            Commentaire{`${commentedNumeros.length > 0 ? "s" : ""}`}
+          </Text>
+        )}
       </Pane>
       {filteredComments.map((comment) => (
         <Pane

components/table-row/table-row-notifications.tsx

@@ -21,7 +21,6 @@ function TableRowNotifications({
   warning,
 }: TableRowNotificationsProps) {
   const { token } = useContext(TokenContext);
-
   return (
     <>
       {comment && token && (

components/voie/voie-heading.tsx

@@ -65,6 +65,11 @@ function VoieHeading({ voie }: VoieHeadingProps) {
               {numeros.length} numéro{numeros.length > 1 ? "s" : ""}
             </Text>
           )}
+          {voie.comment && (
+            <Text color="gray" fontStyle="italic">
+              {voie.comment}
+            </Text>
+          )}
         </Pane>
         {voie.nomAlt && <LanguagePreview nomAlt={voie.nomAlt} />}
       </Heading>

contexts/bal-data.tsx

@@ -39,8 +39,9 @@ interface BALDataContextType {
   isHabilitationValid: boolean;
   parcelles: Array<string>;
   reloadParcelles: () => Promise<void>;
+  setVoies: React.Dispatch<React.SetStateAction<ExtendedVoieDTO[]>>;
   voie: Voie;
-  setVoie: (voie: Voie) => void;
+  setVoie: React.Dispatch<React.SetStateAction<Voie>>;
   toponyme: Toponyme;
   setToponyme: (Toponyme: Toponyme) => void;
   numeros: Array<Numero>;
@@ -298,6 +299,7 @@ export function BalDataContextProvider({
       reloadToponymes,
       reloadBaseLocale,
       setVoie,
+      setVoies,
       setToponyme,
       certifyAllNumeros,
       uncertifyAllNumeros,
@@ -326,6 +328,7 @@ export function BalDataContextProvider({
       initialToponymes,
       voies,
       toponymes,
+      setVoies,
       reloadNumeros,
       reloadVoies,
       reloadToponymes,

lib/openapi-api-bal/index.ts

@@ -44,6 +44,7 @@ export type { UpdateToponymeDTO } from './models/UpdateToponymeDTO';
 export { UpdateVoieDTO } from './models/UpdateVoieDTO';
 export type { ValidatePinCodeDTO } from './models/ValidatePinCodeDTO';
 export { Voie } from './models/Voie';
+export type { VoieMetas } from './models/VoieMetas';
 
 export { BasesLocalesService } from './services/BasesLocalesService';
 export { CommuneService } from './services/CommuneService';

lib/openapi-api-bal/models/CreateVoieDTO.ts

@@ -10,6 +10,7 @@ export type CreateVoieDTO = {
     nomAlt?: Record<string, any> | null;
     typeNumerotation?: CreateVoieDTO.typeNumerotation;
     trace?: LineString;
+    comment?: string | null;
 };
 
 export namespace CreateVoieDTO {

lib/openapi-api-bal/models/ExtendedVoieDTO.ts

@@ -19,12 +19,13 @@ export type ExtendedVoieDTO = {
     centroid: Record<string, any>;
     trace: Record<string, any>;
     bbox: Array<string>;
+    comment: string;
     baseLocale: BaseLocale;
     numeros: Array<Numero>;
     nbNumeros: number;
     nbNumerosCertifies: number;
     isAllCertified: boolean;
-    comments: Array<string>;
+    commentedNumeros: Array<string>;
 };
 
 export namespace ExtendedVoieDTO {

lib/openapi-api-bal/models/UpdateVoieDTO.ts

@@ -10,6 +10,7 @@ export type UpdateVoieDTO = {
     nomAlt?: Record<string, any> | null;
     typeNumerotation?: UpdateVoieDTO.typeNumerotation;
     trace?: LineString;
+    comment?: string | null;
 };
 
 export namespace UpdateVoieDTO {

lib/openapi-api-bal/models/Voie.ts

@@ -19,6 +19,7 @@ export type Voie = {
     centroid: Record<string, any>;
     trace: Record<string, any>;
     bbox: Array<string>;
+    comment: string;
     baseLocale: BaseLocale;
     numeros: Array<Numero>;
 };

lib/openapi-api-bal/models/VoieMetas.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type VoieMetas = {
+    id: string;
+    nbNumeros: number;
+    nbNumerosCertifies: number;
+    isAllCertified: boolean;
+    commentedNumeros: Array<string>;
+};
+

lib/openapi-api-bal/services/BasesLocalesService.ts

@@ -23,6 +23,7 @@ import type { UpdateBaseLocaleDemoDTO } from '../models/UpdateBaseLocaleDemoDTO'
 import type { UpdateBaseLocaleDTO } from '../models/UpdateBaseLocaleDTO';
 import type { UpdateBatchNumeroDTO } from '../models/UpdateBatchNumeroDTO';
 import type { Voie } from '../models/Voie';
+import type { VoieMetas } from '../models/VoieMetas';
 
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
@@ -534,6 +535,24 @@ export class BasesLocalesService {
         });
     }
 
+    /**
+     * Find all Metas Voie in Bal
+     * @param baseLocaleId
+     * @returns VoieMetas
+     * @throws ApiError
+     */
+    public static findVoieMetasByBal(
+        baseLocaleId: string,
+    ): CancelablePromise<Array<VoieMetas>> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/v2/bases-locales/{baseLocaleId}/voies/metas',
+            path: {
+                'baseLocaleId': baseLocaleId,
+            },
+        });
+    }
+
     /**
      * Find all Toponymes in Bal
      * @param baseLocaleId

lib/openapi-api-bal/services/VoiesService.ts

@@ -9,6 +9,7 @@ import type { RestoreVoieDTO } from '../models/RestoreVoieDTO';
 import type { Toponyme } from '../models/Toponyme';
 import type { UpdateVoieDTO } from '../models/UpdateVoieDTO';
 import type { Voie } from '../models/Voie';
+import type { VoieMetas } from '../models/VoieMetas';
 
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
@@ -74,6 +75,24 @@ export class VoiesService {
         });
     }
 
+    /**
+     * Find Voie Metas by id
+     * @param voieId
+     * @returns VoieMetas
+     * @throws ApiError
+     */
+    public static findVoieMetas(
+        voieId: string,
+    ): CancelablePromise<VoieMetas> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/v2/voies/{voieId}/metas',
+            path: {
+                'voieId': voieId,
+            },
+        });
+    }
+
     /**
      * Soft delete Voie by id
      * @param voieId

pages/bal/[balId]/index.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useState, useCallback, useContext, useEffect } from "react";
+import { keyBy } from "lodash";
 import { Pane, Paragraph } from "evergreen-ui";
 
 import TokenContext from "@/contexts/token";
@@ -17,6 +18,9 @@ import {
   Toponyme,
   Voie,
   VoiesService,
+  VoieMetas,
+  ExtendedVoieDTO,
+  BasesLocalesService,
 } from "@/lib/openapi-api-bal";
 import usePublishProcess from "@/hooks/publish-process";
 import HeaderSideBar from "@/components/sidebar/header";
@@ -42,9 +46,15 @@ function BaseLocalePage({ commune }: BaseLocalePageProps) {
   const [onConvertLoading, setOnConvertLoading] = useState<boolean>(false);
 
   const { token } = useContext(TokenContext);
-  const { voies, toponymes, baseLocale, habilitation, isHabilitationValid } =
-    useContext(BalDataContext);
   const { toaster } = useContext(LayoutContext);
+  const {
+    voies,
+    toponymes,
+    baseLocale,
+    habilitation,
+    isHabilitationValid,
+    setVoies,
+  } = useContext(BalDataContext);
   const { reloadTiles } = useContext(MapContext);
   const { setIsRecoveryDisplayed } = useContext(BALRecoveryContext);
   const { handleShowHabilitationProcess } = usePublishProcess(commune);
@@ -62,6 +72,25 @@ function BaseLocalePage({ commune }: BaseLocalePageProps) {
   }
   useHelp(help);
 
+  useEffect(() => {
+    async function addCommentsToVoies() {
+      try {
+        const voieMetas: VoieMetas[] =
+          await BasesLocalesService.findVoieMetasByBal(baseLocale.id);
+        const voiesMetasByVoieId = keyBy(voieMetas, "id");
+        setVoies((voies: ExtendedVoieDTO[]) =>
+          voies.map((v) => ({ ...v, ...voiesMetasByVoieId[v.id] }))
+        );
+      } catch (e) {
+        console.error("Impossible de charger les commentaires de voies", e);
+      }
+    }
+
+    if (token) {
+      addCommentsToVoies();
+    }
+  }, [baseLocale.id, setVoies, token]);
+
   useEffect(() => {
     if (
       token &&