diff --git a/public/locales/de/translations.json b/public/locales/de/translations.json index 1a2ca512..401ca8fe 100644 --- a/public/locales/de/translations.json +++ b/public/locales/de/translations.json @@ -1034,6 +1034,7 @@ "accompanyingDetails": { "appointmentAddress": "Terminadresse", "appointmentPostcode": "Terminpostleitzahl", + "appointmentDistrict": "Terminbezirk", "appointmentDate": "Termindatum", "appointmentTime": "Terminzeit", "refugeeNumber": "Geflüchtetennummer", diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index b21fb0b2..b25fecfa 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -1033,6 +1033,7 @@ "accompanyingDetails": { "appointmentAddress": "Appointment address", "appointmentPostcode": "Appointment postcode", + "appointmentDistrict": "Appointment district", "appointmentDate": "Appointment date", "appointmentTime": "Appointment time", "refugeeNumber": "Refugee number", diff --git a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetails.tsx b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetails.tsx index c605ad03..b65665ac 100644 --- a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetails.tsx +++ b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetails.tsx @@ -1,5 +1,5 @@ "use client"; -import { useApiLanguages } from "@/components/Dashboard/Profile/sections/VolunteerProfile/hooks"; +import { useApiDistricts, useApiLanguages } from "@/components/Dashboard/Profile/sections/VolunteerProfile/hooks"; import { useUpdateOpportunityAccompanyingDetails } from "@/hooks/useUpdateOpportunityAccompanyingDetails"; import { zodResolver } from "@hookform/resolvers/zod"; import { de, enUS } from "date-fns/locale"; @@ -31,6 +31,7 @@ export const AccompanyingDetails = forwardRef(functio useEditingChangeNotifier(isEditing, onEditingChange); const { data: apiLanguages } = useApiLanguages(); + const { data: apiDistricts } = useApiDistricts(); const showFullDetails = isAccompanyingType(opportunity.volunteerType); const minAppointmentDate = useMemo(() => getMinAppointmentDate(), []); @@ -53,6 +54,14 @@ export const AccompanyingDetails = forwardRef(functio }); const appointmentLanguageOptions = appointmentLanguageKeys.map((key) => appointmentLanguageKeyToLabel[key]); + const districtKeyToLabel: Record = {}; + const districtLabelToKey: Record = {}; + apiDistricts.forEach((district) => { + districtKeyToLabel[String(district.id)] = district.title; + districtLabelToKey[district.title] = String(district.id); + }); + const districtOptions = apiDistricts.map((district) => district.title); + const initialFormValues = getInitialFormValues(opportunity.accompanyingDetails); const methods = useForm({ @@ -84,6 +93,8 @@ export const AccompanyingDetails = forwardRef(functio { accompanyingDetails: { appointmentAddress: values.appointmentAddress, + appointmentPostcode: values.appointmentPostcode || undefined, + appointmentDistrict: values.appointmentDistrict || undefined, appointmentDate: values.appointmentDate ? values.appointmentDate.toISOString() : undefined, appointmentTime: values.appointmentTime || undefined, refugeeNumber: values.refugeeNumber, @@ -117,6 +128,8 @@ export const AccompanyingDetails = forwardRef(functio } const languageLabel = (formValues.languagesToTranslate ?? []).map((id) => keyToLabel[id] || id).join(", "); + const districtLabel = + districtKeyToLabel[formValues.appointmentDistrict || ""] || formValues.appointmentDistrict || ""; return ( @@ -130,13 +143,16 @@ export const AccompanyingDetails = forwardRef(functio appointmentLanguageOptions={appointmentLanguageOptions} appointmentLanguageKeyToLabel={appointmentLanguageKeyToLabel} appointmentLanguageLabelToKey={appointmentLanguageLabelToKey} + districtOptions={districtOptions} + districtKeyToLabel={districtKeyToLabel} + districtLabelToKey={districtLabelToKey} onCancel={handleCancel} onSubmit={handleSubmit(onSubmit)} isPending={isPending} minAppointmentDate={minAppointmentDate} /> ) : ( - + )} diff --git a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx index b11e8b86..85e7f73f 100644 --- a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx +++ b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx @@ -8,9 +8,10 @@ import { DateFieldRow, Details } from "./styles"; type Props = { values: AccompanyingDetailsFormData; languageLabel: string; + districtLabel: string; }; -export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) => { +export const AccompanyingDetailsDisplay = ({ values, languageLabel, districtLabel }: Props) => { const { t } = useTranslation(); return ( @@ -31,6 +32,15 @@ export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) => setValue={() => {}} /> + {}} + options={[]} + /> + {values.appointmentDate ? format(values.appointmentDate, "dd.MM.yyyy") : EMPTY_PLACEHOLDER_VALUE} diff --git a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsEdit.tsx b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsEdit.tsx index c2c0299a..51e3c8f3 100644 --- a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsEdit.tsx +++ b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsEdit.tsx @@ -23,6 +23,9 @@ type Props = { appointmentLanguageOptions: string[]; appointmentLanguageKeyToLabel: Record; appointmentLanguageLabelToKey: Record; + districtOptions: string[]; + districtKeyToLabel: Record; + districtLabelToKey: Record; onCancel: () => void; onSubmit: () => void; isPending: boolean; @@ -37,6 +40,9 @@ export const AccompanyingDetailsEdit = ({ appointmentLanguageOptions, appointmentLanguageKeyToLabel, appointmentLanguageLabelToKey, + districtOptions, + districtKeyToLabel, + districtLabelToKey, onCancel, onSubmit, isPending, @@ -81,6 +87,25 @@ export const AccompanyingDetailsEdit = ({ )} /> + }) => ( + { + const label = Array.isArray(value) ? value[0] : value; + field.onChange(districtLabelToKey[label] || label); + }} + options={districtOptions} + errorMessage={errors.appointmentDistrict?.message} + /> + )} + /> +