From bffd6b4ef665a7185b5990a4b0a1b691717ac55c Mon Sep 17 00:00:00 2001 From: Fufeck Date: Wed, 8 Jan 2025 16:45:03 +0100 Subject: [PATCH 1/5] feat: add nomAlt to commune --- components/bal/commune-editor.tsx | 129 ++++++++++++++++++ components/langues-regionales-form/index.tsx | 23 +++- components/sidebar/header.tsx | 29 +++- lib/openapi-api-bal/models/BaseLocale.ts | 1 + .../models/ExtendedBaseLocaleDTO.ts | 1 + .../models/UpdateBaseLocaleDTO.ts | 1 + pages/bal/[balId]/index.tsx | 20 ++- 7 files changed, 196 insertions(+), 8 deletions(-) create mode 100644 components/bal/commune-editor.tsx diff --git a/components/bal/commune-editor.tsx b/components/bal/commune-editor.tsx new file mode 100644 index 000000000..e4e1852ec --- /dev/null +++ b/components/bal/commune-editor.tsx @@ -0,0 +1,129 @@ +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 [nomAlt, setNomAlt] = useState(initialValue?.nomAlt); + 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 = { + nomAlt: Object.keys(nomAlt).length > 0 ? nomAlt : null, + }; + // Add or edit a voie + const submit = toaster( + async () => + BasesLocalesService.updateBaseLocale(initialValue.id, body), + "La bal a bien été modifiée", + "La bal 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, + nomAlt, + closeForm, + setValidationMessages, + toaster, + reloadBaseLocale, + ] + ); + + const onFormCancel = useCallback( + (e) => { + e.preventDefault(); + closeForm(); + }, + [closeForm] + ); + + // Reset validation messages on changes + useEffect(() => { + setValidationMessages(null); + }, [nomAlt, setValidationMessages]); + + return ( +
+ + + + + + + + + + + {closeForm && ( + + )} + +
+ ); +} + +export default CommuneEditor; diff --git a/components/langues-regionales-form/index.tsx b/components/langues-regionales-form/index.tsx index 43db64d71..649e7fe82 100644 --- a/components/langues-regionales-form/index.tsx +++ b/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 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,37 @@ 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.nomAlt && Object.keys(baseLocale.nomAlt).length > 0) { + code = Object.keys(baseLocale.nomAlt)[0]; + } + setNomAlt((prev) => [...prev, { code, value: "", id: uniqueId() }]); }; const onLanguageChange = useCallback( diff --git a/components/sidebar/header.tsx b/components/sidebar/header.tsx index 3e6d3dd9d..d3654eff7 100644 --- a/components/sidebar/header.tsx +++ b/components/sidebar/header.tsx @@ -1,20 +1,41 @@ -import React from "react"; -import { Heading, Pane, Text } from "evergreen-ui"; +import React, { useContext } from "react"; +import { EditIcon, Heading, 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 ( {commune.nom} - {commune.code} + {!isEditing && token && ( + + )} + {baseLocale.nomAlt && } {voies && ( {voies.length} voie{voies.length > 1 ? "s" : ""} diff --git a/lib/openapi-api-bal/models/BaseLocale.ts b/lib/openapi-api-bal/models/BaseLocale.ts index fc65dc2a6..1b1bb93d3 100644 --- a/lib/openapi-api-bal/models/BaseLocale.ts +++ b/lib/openapi-api-bal/models/BaseLocale.ts @@ -15,6 +15,7 @@ export type BaseLocale = { updatedAt: string; deletedAt: string; nom: string; + nomAlt: Record; commune: string; emails: Array; token: string; diff --git a/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts b/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts index 7eeb47a3b..d51e0f053 100644 --- a/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts +++ b/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts @@ -15,6 +15,7 @@ export type ExtendedBaseLocaleDTO = { updatedAt: string; deletedAt: string; nom: string; + nomAlt: Record; commune: string; emails: Array; token: string; diff --git a/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts b/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts index 9e7f4ad7d..8bdf9f456 100644 --- a/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts +++ b/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts @@ -5,6 +5,7 @@ export type UpdateBaseLocaleDTO = { nom?: string; + nomAlt?: Record | null; emails?: Array; }; diff --git a/pages/bal/[balId]/index.tsx b/pages/bal/[balId]/index.tsx index dbdab0a0b..8c5ccdc4c 100644 --- a/pages/bal/[balId]/index.tsx +++ b/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(null); + const [isCommuneFormOpen, setIsCommuneFormOpen] = useState(false); const [isFormOpen, setIsFormOpen] = useState(false); const [toConvert, setToConvert] = useState(null); const [onConvertLoading, setOnConvertLoading] = useState(false); @@ -174,7 +176,14 @@ function BaseLocalePage({ commune }: BaseLocalePageProps) { }} onConfirm={onConvert} /> - + { + setIsCommuneFormOpen(true); + }} + /> + {isCommuneFormOpen && ( + { + setIsCommuneFormOpen(false); + }} + /> + )} + {isFormOpen && selectedTab === TabsEnum.VOIES && ( Date: Mon, 13 Jan 2025 11:24:20 +0100 Subject: [PATCH 2/5] return gfay 1 --- components/bal/commune-editor.tsx | 23 +++++++++++-------- components/langues-regionales-form/index.tsx | 7 ++++-- components/sidebar/header.tsx | 22 +++++++++++++----- lib/openapi-api-bal/models/BaseLocale.ts | 2 +- .../models/ExtendedBaseLocaleDTO.ts | 2 +- .../models/UpdateBaseLocaleDTO.ts | 2 +- 6 files changed, 37 insertions(+), 21 deletions(-) diff --git a/components/bal/commune-editor.tsx b/components/bal/commune-editor.tsx index e4e1852ec..f06ca66cc 100644 --- a/components/bal/commune-editor.tsx +++ b/components/bal/commune-editor.tsx @@ -23,7 +23,9 @@ interface CommuneEditorProps { function CommuneEditor({ initialValue, closeForm }: CommuneEditorProps) { const [isLoading, setIsLoading] = useState(false); - const [nomAlt, setNomAlt] = useState(initialValue?.nomAlt); + const [communeNomsAlt, setCommuneNomsAlt] = useState( + initialValue?.communeNomsAlt + ); const { reloadBaseLocale } = useContext(BalDataContext); const { getValidationMessage, setValidationMessages } = useValidationMessage(); @@ -37,14 +39,15 @@ function CommuneEditor({ initialValue, closeForm }: CommuneEditorProps) { try { const body: UpdateBaseLocaleDTO = { - nomAlt: Object.keys(nomAlt).length > 0 ? nomAlt : null, + communeNomsAlt: + Object.keys(communeNomsAlt).length > 0 ? communeNomsAlt : null, }; - // Add or edit a voie + const submit = toaster( async () => BasesLocalesService.updateBaseLocale(initialValue.id, body), - "La bal a bien été modifiée", - "La bal n’a pas pu être modifiée", + "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); } @@ -61,7 +64,7 @@ function CommuneEditor({ initialValue, closeForm }: CommuneEditorProps) { }, [ initialValue, - nomAlt, + communeNomsAlt, closeForm, setValidationMessages, toaster, @@ -80,7 +83,7 @@ function CommuneEditor({ initialValue, closeForm }: CommuneEditorProps) { // Reset validation messages on changes useEffect(() => { setValidationMessages(null); - }, [nomAlt, setValidationMessages]); + }, [communeNomsAlt, setValidationMessages]); return (
- + diff --git a/components/langues-regionales-form/index.tsx b/components/langues-regionales-form/index.tsx index 649e7fe82..b7005cd84 100644 --- a/components/langues-regionales-form/index.tsx +++ b/components/langues-regionales-form/index.tsx @@ -53,8 +53,11 @@ function LanguesRegionalesForm({ const onAddForm = () => { let code: string = null; - if (baseLocale.nomAlt && Object.keys(baseLocale.nomAlt).length > 0) { - code = Object.keys(baseLocale.nomAlt)[0]; + if ( + baseLocale.communeNomsAlt && + Object.keys(baseLocale.communeNomsAlt).length > 0 + ) { + code = Object.keys(baseLocale.communeNomsAlt)[0]; } setNomAlt((prev) => [...prev, { code, value: "", id: uniqueId() }]); }; diff --git a/components/sidebar/header.tsx b/components/sidebar/header.tsx index d3654eff7..ad2e66388 100644 --- a/components/sidebar/header.tsx +++ b/components/sidebar/header.tsx @@ -1,5 +1,12 @@ import React, { useContext } from "react"; -import { EditIcon, Heading, Pane, Text } from "evergreen-ui"; +import { + Button, + EditIcon, + Heading, + IconButton, + Pane, + Text, +} from "evergreen-ui"; import { BaseLocale, ExtendedVoieDTO } from "@/lib/openapi-api-bal"; import { CommuneType } from "@/types/commune"; @@ -27,15 +34,18 @@ function HeaderSideBar({ {commune.nom} - {commune.code} {!isEditing && token && ( - )} - {baseLocale.nomAlt && } + {baseLocale.communeNomsAlt && ( + + )} {voies && ( {voies.length} voie{voies.length > 1 ? "s" : ""} diff --git a/lib/openapi-api-bal/models/BaseLocale.ts b/lib/openapi-api-bal/models/BaseLocale.ts index 1b1bb93d3..15b6a90f1 100644 --- a/lib/openapi-api-bal/models/BaseLocale.ts +++ b/lib/openapi-api-bal/models/BaseLocale.ts @@ -15,7 +15,7 @@ export type BaseLocale = { updatedAt: string; deletedAt: string; nom: string; - nomAlt: Record; + communeNomsAlt: Record; commune: string; emails: Array; token: string; diff --git a/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts b/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts index d51e0f053..3cb727598 100644 --- a/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts +++ b/lib/openapi-api-bal/models/ExtendedBaseLocaleDTO.ts @@ -15,7 +15,7 @@ export type ExtendedBaseLocaleDTO = { updatedAt: string; deletedAt: string; nom: string; - nomAlt: Record; + communeNomsAlt: Record; commune: string; emails: Array; token: string; diff --git a/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts b/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts index 8bdf9f456..1f8949635 100644 --- a/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts +++ b/lib/openapi-api-bal/models/UpdateBaseLocaleDTO.ts @@ -5,7 +5,7 @@ export type UpdateBaseLocaleDTO = { nom?: string; - nomAlt?: Record | null; + communeNomsAlt?: Record | null; emails?: Array; }; From ecd0482cff1dc6eeab38c791d5c5b73fcd238228 Mon Sep 17 00:00:00 2001 From: Fufeck Date: Mon, 13 Jan 2025 12:04:10 +0100 Subject: [PATCH 3/5] return validation msg --- components/langues-regionales-form/index.tsx | 17 +++++++++++++++-- .../langues-regionales-form/language-field.tsx | 3 --- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/components/langues-regionales-form/index.tsx b/components/langues-regionales-form/index.tsx index b7005cd84..c9c909487 100644 --- a/components/langues-regionales-form/index.tsx +++ b/components/langues-regionales-form/index.tsx @@ -1,6 +1,6 @@ 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"; @@ -97,7 +97,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)} /> @@ -115,6 +114,20 @@ function LanguesRegionalesForm({ > Ajouter une langue régionale + + + {validationMessage && ( + + + {validationMessage} + + )} + ); } diff --git a/components/langues-regionales-form/language-field.tsx b/components/langues-regionales-form/language-field.tsx index 048f5cdb4..2b5392d62 100644 --- a/components/langues-regionales-form/language-field.tsx +++ b/components/langues-regionales-form/language-field.tsx @@ -21,7 +21,6 @@ interface LanguageFieldProps { value: string; }; availableLanguages: Array<{ code: string; label: string }>; - validationMessage: string; onChange: (value: { code: string; value: string }) => void; onDelete: (code: string) => void; } @@ -29,7 +28,6 @@ interface LanguageFieldProps { 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} /> From 2394268259ff576b7d5495883c518af4b6183ee5 Mon Sep 17 00:00:00 2001 From: Fufeck Date: Mon, 13 Jan 2025 12:15:51 +0100 Subject: [PATCH 4/5] no same lang in LanguageInput --- components/langues-regionales-form/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/langues-regionales-form/index.tsx b/components/langues-regionales-form/index.tsx index c9c909487..7719bef59 100644 --- a/components/langues-regionales-form/index.tsx +++ b/components/langues-regionales-form/index.tsx @@ -55,7 +55,10 @@ function LanguesRegionalesForm({ let code: string = null; if ( baseLocale.communeNomsAlt && - Object.keys(baseLocale.communeNomsAlt).length > 0 + Object.keys(baseLocale.communeNomsAlt).length > 0 && + !nomAlt.some( + ({ code }) => code === Object.keys(baseLocale.communeNomsAlt)[0] + ) ) { code = Object.keys(baseLocale.communeNomsAlt)[0]; } From 63d42339e7c9a3cf41b7c0777fd9cfd9292b3515 Mon Sep 17 00:00:00 2001 From: Fufeck Date: Tue, 14 Jan 2025 17:06:58 +0100 Subject: [PATCH 5/5] add validation error message for langue --- components/bal/commune-editor.tsx | 2 +- components/bal/toponyme-editor.tsx | 2 +- components/bal/voie-editor.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/bal/commune-editor.tsx b/components/bal/commune-editor.tsx index f06ca66cc..b992c8958 100644 --- a/components/bal/commune-editor.tsx +++ b/components/bal/commune-editor.tsx @@ -96,7 +96,7 @@ function CommuneEditor({ initialValue, closeForm }: CommuneEditorProps) { diff --git a/components/bal/toponyme-editor.tsx b/components/bal/toponyme-editor.tsx index f7bd912e5..804ad50a0 100644 --- a/components/bal/toponyme-editor.tsx +++ b/components/bal/toponyme-editor.tsx @@ -219,7 +219,7 @@ function ToponymeEditor({ diff --git a/components/bal/voie-editor.tsx b/components/bal/voie-editor.tsx index 38e85d83a..6b9f4a9cd 100644 --- a/components/bal/voie-editor.tsx +++ b/components/bal/voie-editor.tsx @@ -203,7 +203,7 @@ function VoieEditor({