feat: add nomAlt to commune

components/bal/commune-editor.tsx

@@ -0,0 +1,132 @@
+import { useState, useContext, useCallback, useEffect } from "react";
+import { Pane, Button, Label } from "evergreen-ui";
+
+import BalDataContext from "@/contexts/bal-data";
+
+import useValidationMessage from "@/hooks/validation-messages";
+
+import Form from "@/components/form";
+import FormInput from "@/components/form-input";
+import LanguesRegionalesForm from "@/components/langues-regionales-form";
+import {
+  BaseLocale,
+  BasesLocalesService,
+  UpdateBaseLocaleDTO,
+} from "@/lib/openapi-api-bal";
+import LayoutContext from "@/contexts/layout";
+
+interface CommuneEditorProps {
+  initialValue?: BaseLocale;
+  closeForm: () => void;
+  onSubmitted?: () => void;
+}
+
+function CommuneEditor({ initialValue, closeForm }: CommuneEditorProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [communeNomsAlt, setCommuneNomsAlt] = useState(
+    initialValue?.communeNomsAlt
+  );
+  const { reloadBaseLocale } = useContext(BalDataContext);
+  const { getValidationMessage, setValidationMessages } =
+    useValidationMessage();
+  const { toaster } = useContext(LayoutContext);
+
+  const onFormSubmit = useCallback(
+    async (e) => {
+      e.preventDefault();
+      setValidationMessages(null);
+      setIsLoading(true);
+
+      try {
+        const body: UpdateBaseLocaleDTO = {
+          communeNomsAlt:
+            Object.keys(communeNomsAlt).length > 0 ? communeNomsAlt : null,
+        };
+
+        const submit = toaster(
+          async () =>
+            BasesLocalesService.updateBaseLocale(initialValue.id, body),
+          "Le nom de la commune en langue régional a bien été modifié",
+          "Le nom de la commune en langue régional n’a pas pu être modifiée",
+          (err) => {
+            setValidationMessages(err.body.message);
+          }
+        );
+
+        await submit();
+        await reloadBaseLocale();
+        closeForm();
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      initialValue,
+      communeNomsAlt,
+      closeForm,
+      setValidationMessages,
+      toaster,
+      reloadBaseLocale,
+    ]
+  );
+
+  const onFormCancel = useCallback(
+    (e) => {
+      e.preventDefault();
+      closeForm();
+    },
+    [closeForm]
+  );
+
+  // Reset validation messages on changes
+  useEffect(() => {
+    setValidationMessages(null);
+  }, [communeNomsAlt, setValidationMessages]);
+
+  return (
+    <Form
+      editingId={initialValue?.id}
+      closeForm={closeForm}
+      onFormSubmit={onFormSubmit}
+    >
+      <Pane>
+        <FormInput>
+          <Label>Nom en langue régionale de la commune</Label>
+          <LanguesRegionalesForm
+            initialValue={initialValue?.communeNomsAlt}
+            validationMessage={getValidationMessage("langAlt")}
+            handleLanguages={setCommuneNomsAlt}
+            autoOpen={true}
+          />
+        </FormInput>
+      </Pane>
+
+      <Pane>
+        <Button
+          isLoading={isLoading}
+          type="submit"
+          appearance="primary"
+          intent="success"
+        >
+          {isLoading ? "En cours…" : "Enregistrer"}
+        </Button>
+
+        {closeForm && (
+          <Button
+            disabled={isLoading}
+            appearance="minimal"
+            marginLeft={8}
+            display="inline-flex"
+            onClick={onFormCancel}
+          >
+            Annuler
+          </Button>
+        )}
+      </Pane>
+    </Form>
+  );
+}
+
+export default CommuneEditor;

components/langues-regionales-form/index.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { reduce, uniqueId } from "lodash";
-import { Button, AddIcon } from "evergreen-ui";
+import { Button, AddIcon, Text, ErrorIcon, Pane } from "evergreen-ui";
 
 import languesRegionales from "@ban-team/shared-data/langues-regionales.json";
 
 import LanguageField from "./language-field";
+import BalDataContext from "@/contexts/bal-data";
 
 function objectToArray(obj) {
   if (obj) {
@@ -25,21 +26,43 @@ function languagesArrayToObj(arr) {
   );
 }
 
+function getInitialValue(initialValue: any, autoOpen: boolean) {
+  if (initialValue) {
+    return objectToArray(initialValue);
+  } else if (autoOpen) {
+    return [{ code: "", value: "", id: uniqueId() }];
+  }
+  return [];
+}
+
 interface LanguesRegionalesFormProps {
   initialValue?: any;
   validationMessage?: string;
   handleLanguages: (value: any) => void;
+  autoOpen?: boolean;
 }
 
 function LanguesRegionalesForm({
   initialValue,
   validationMessage,
   handleLanguages,
+  autoOpen = false,
 }: LanguesRegionalesFormProps) {
-  const [nomAlt, setNomAlt] = useState(objectToArray(initialValue));
+  const { baseLocale } = useContext(BalDataContext);
+  const [nomAlt, setNomAlt] = useState(getInitialValue(initialValue, autoOpen));
 
   const onAddForm = () => {
-    setNomAlt((prev) => [...prev, { code: null, value: "", id: uniqueId() }]);
+    let code: string = null;
+    if (
+      baseLocale.communeNomsAlt &&
+      Object.keys(baseLocale.communeNomsAlt).length > 0 &&
+      !nomAlt.some(
+        ({ code }) => code === Object.keys(baseLocale.communeNomsAlt)[0]
+      )
+    ) {
+      code = Object.keys(baseLocale.communeNomsAlt)[0];
+    }
+    setNomAlt((prev) => [...prev, { code, value: "", id: uniqueId() }]);
   };
 
   const onLanguageChange = useCallback(
@@ -77,7 +100,6 @@ function LanguesRegionalesForm({
           availableLanguages={languesRegionales.filter(
             ({ code }) => !nomAlt.map(({ code }) => code).includes(code)
           )}
-          validationMessage={validationMessage}
           onChange={(value) => onLanguageChange(value, language.id)}
           onDelete={() => onRemoveLanguage(language.id)}
         />
@@ -95,6 +117,20 @@ function LanguesRegionalesForm({
       >
         Ajouter une langue régionale
       </Button>
+
+      <Pane marginTop={8}>
+        {validationMessage && (
+          <Text color="danger" fontStyle="italic">
+            <ErrorIcon
+              size={14}
+              color="danger"
+              marginRight={4}
+              marginBottom={-1}
+            />
+            {validationMessage}
+          </Text>
+        )}
+      </Pane>
     </>
   );
 }

components/langues-regionales-form/language-field.tsx

@@ -21,15 +21,13 @@ interface LanguageFieldProps {
     value: string;
   };
   availableLanguages: Array<{ code: string; label: string }>;
-  validationMessage: string;
   onChange: (value: { code: string; value: string }) => void;
   onDelete: (code: string) => void;
 }
 
 function LanguageField({
   initialValue,
   availableLanguages,
-  validationMessage,
   onChange,
   onDelete,
 }: LanguageFieldProps) {
@@ -105,7 +103,6 @@ function LanguageField({
           isRequired={false}
           placeholder={`Nom en ${codeISO ? languageLabel : "langue régionale"}`}
           value={input}
-          validationMessage={validationMessage}
           onChange={handleLanguageChange}
           isDisabled={!codeISO}
         />

components/sidebar/header.tsx

@@ -1,20 +1,51 @@
-import React from "react";
-import { Heading, Pane, Text } from "evergreen-ui";
+import React, { useContext } from "react";
+import {
+  Button,
+  EditIcon,
+  Heading,
+  IconButton,
+  Pane,
+  Text,
+} from "evergreen-ui";
 
-import { ExtendedVoieDTO } from "@/lib/openapi-api-bal";
+import { BaseLocale, ExtendedVoieDTO } from "@/lib/openapi-api-bal";
 import { CommuneType } from "@/types/commune";
+import LanguagePreview from "../bal/language-preview";
+import TokenContext from "@/contexts/token";
+import BalDataContext from "@/contexts/bal-data";
 
 interface HeaderSideBarProps {
+  baseLocale: BaseLocale;
   commune: CommuneType;
   voies: ExtendedVoieDTO[];
+  openForm: () => void;
 }
 
-function HeaderSideBar({ commune, voies }: HeaderSideBarProps) {
+function HeaderSideBar({
+  baseLocale,
+  commune,
+  voies,
+  openForm,
+}: HeaderSideBarProps) {
+  const { token } = useContext(TokenContext);
+  const { editingId, isEditing, numeros } = useContext(BalDataContext);
   return (
     <Pane display="flex" flexDirection="column" background="tint1" padding={16}>
       <Heading>
         {commune.nom} - {commune.code}
+        {!isEditing && token && (
+          <IconButton
+            icon={EditIcon}
+            marginTop={-4}
+            size="large"
+            appearance="minimal"
+            onClick={openForm}
+          />
+        )}
       </Heading>
+      {baseLocale.communeNomsAlt && (
+        <LanguagePreview nomAlt={baseLocale.communeNomsAlt} />
+      )}
       {voies && (
         <Text>
           {voies.length} voie{voies.length > 1 ? "s" : ""}

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

@@ -15,6 +15,7 @@ export type BaseLocale = {
     updatedAt: string;
     deletedAt: string;
     nom: string;
+    communeNomsAlt: Record<string, any>;
     commune: string;
     emails: Array<string>;
     token: string;

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

@@ -15,6 +15,7 @@ export type ExtendedBaseLocaleDTO = {
     updatedAt: string;
     deletedAt: string;
     nom: string;
+    communeNomsAlt: Record<string, any>;
     commune: string;
     emails: Array<string>;
     token: string;

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

@@ -5,6 +5,7 @@
 
 export type UpdateBaseLocaleDTO = {
     nom?: string;
+    communeNomsAlt?: Record<string, any> | null;
     emails?: Array<string>;
 };
 

pages/bal/[balId]/index.tsx

@@ -33,6 +33,7 @@ import MapContext from "@/contexts/map";
 import LayoutContext from "@/contexts/layout";
 import ToponymesList from "@/components/bal/toponymes-list";
 import ConvertVoieWarning from "@/components/convert-voie-warning";
+import CommuneEditor from "@/components/bal/commune-editor";
 
 interface BaseLocalePageProps {
   selectedTab: TabsEnum;
@@ -41,6 +42,7 @@ interface BaseLocalePageProps {
 
 function BaseLocalePage({ commune }: BaseLocalePageProps) {
   const [editedItem, setEditedItem] = useState<Voie | Toponyme | null>(null);
+  const [isCommuneFormOpen, setIsCommuneFormOpen] = useState<boolean>(false);
   const [isFormOpen, setIsFormOpen] = useState<boolean>(false);
   const [toConvert, setToConvert] = useState<string | null>(null);
   const [onConvertLoading, setOnConvertLoading] = useState<boolean>(false);
@@ -174,7 +176,14 @@ function BaseLocalePage({ commune }: BaseLocalePageProps) {
         }}
         onConfirm={onConvert}
       />
-      <HeaderSideBar commune={commune} voies={voies} />
+      <HeaderSideBar
+        baseLocale={baseLocale}
+        commune={commune}
+        voies={voies}
+        openForm={() => {
+          setIsCommuneFormOpen(true);
+        }}
+      />
       <Pane
         position="relative"
         display="flex"
@@ -183,6 +192,15 @@ function BaseLocalePage({ commune }: BaseLocalePageProps) {
         width="100%"
         overflow="hidden"
       >
+        {isCommuneFormOpen && (
+          <CommuneEditor
+            initialValue={baseLocale as BaseLocale}
+            closeForm={() => {
+              setIsCommuneFormOpen(false);
+            }}
+          />
+        )}
+
         {isFormOpen && selectedTab === TabsEnum.VOIES && (
           <VoieEditor
             initialValue={editedItem as Voie}