diff --git a/components/bal/commune-editor.tsx b/components/bal/commune-editor.tsx new file mode 100644 index 00000000..e4e1852e --- /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 ( +
+ ); +} + +export default CommuneEditor; diff --git a/components/langues-regionales-form/index.tsx b/components/langues-regionales-form/index.tsx index 43db64d7..649e7fe8 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 3e6d3dd9..d3654eff 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 (