Skip to content

Commit

Permalink
feat(local-units): use translation strings for field names in confirm…
Browse files Browse the repository at this point in the history
… changes modal
  • Loading branch information
samshara committed Dec 17, 2024
1 parent a2f6b58 commit 153f5c4
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 85 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@
"localUnitDeleteButtonLabel": "Delete",
"doneButtonLabel": "Done",
"confirmChangesModalHeading": "Confirm the Changes",
"confirmChangesContentQuestion": "Are you sure you want to have these changes in this project?"
"confirmChangesContentQuestion": "Are you sure you want to have these changes in this project?",
"latitude": "Latitude",
"longitude": "Longitude"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,12 @@ import { transformObjectError } from '#utils/restRequest/error';

import LocalUnitDeleteModal from '../../LocalUnitDeleteModal';
import LocalUnitValidateButton from '../../LocalUnitValidateButton';
import localUnitFormFieldLabels from './localUnitFormFieldLabels.ts';
import schema, {
type LocalUnitsRequestPostBody,
type PartialLocalUnits,
TYPE_HEALTH_CARE,
} from './schema';
import useLocalUnitFormFieldLabels from './useLocalUnitFormFieldLabels';

import i18n from './i18n.json';
import styles from './styles.module.css';
Expand All @@ -87,11 +87,6 @@ type VisibilityOptions = NonNullable<GoApiResponse<'/api/v2/global-enums/'>['api
type LocalUnitOptions = GoApiResponse<'/api/v2/local-units-options/'>;
type LocalUnitResponse = GoApiResponse<'/api/v2/local-units/{id}/'>;

function getNestedValue<T extends Record<string, unknown>>(key: string, inputObject: T) {
const flattenedValues = flattenObject(inputObject);
return flattenedValues?.[key] as string;
}

interface Option {
id: number;
name: string;
Expand All @@ -100,7 +95,6 @@ interface Option {
interface ChangedFormField {
key: string,
value: string | undefined,
name: string,
}

const VisibilityOptions = (option: VisibilityOptions) => option.key;
Expand Down Expand Up @@ -145,27 +139,26 @@ function getChangedFormFields(
return;
}

const name = getNestedValue(key, localUnitFormFieldLabels);
const actualKey = getLastSegment(key, '.');
if (Array.isArray(newValue) && Array.isArray(oldValue)) {
if (!compareArrays(newValue, oldValue)) {
const options: Option[] = formFieldOptions?.[actualKey as keyof LocalUnitOptions];
const valuesLabels = newValue.map(
(v: number) => options.find((option: Option) => option.id === v),
).filter(isDefined).map((option) => option.name).join(', ');
changedValues.push({ key, value: valuesLabels, name });
changedValues.push({ key, value: valuesLabels });
}
} else if (newValue !== oldValue) {
const options: Option[] = formFieldOptions?.[actualKey as keyof LocalUnitOptions];
if (isDefined(options)) {
const valueLabel = options.find(
(option: Option) => option.id === newValue,
)?.name;
changedValues.push({ key, value: valueLabel, name });
changedValues.push({ key, value: valueLabel });
} else if (typeof newValue === 'boolean') {
changedValues.push({ key, value: newValue ? 'Yes' : 'No', name });
changedValues.push({ key, value: newValue ? 'Yes' : 'No' }); // TODO: use translations
} else {
changedValues.push({ key, value: newValue as string, name });
changedValues.push({ key, value: newValue as string });
}
}
});
Expand All @@ -190,6 +183,23 @@ function FormColumnContainer(props: FormColumnContainerProps) {
);
}

type LocalUnitTextOutputProps = TextOutputProps & {
localUnitFormKey: string;
}

function LocalUnitTextOutput(props: LocalUnitTextOutputProps) {
const { localUnitFormKey, ...otherProps } = props;
const name = useLocalUnitFormFieldLabels({ key: localUnitFormKey });

return (
<TextOutput
// eslint-disable-next-line react/jsx-props-no-spreading
{...otherProps}
label={name}
/>
);
}

interface Props {
readOnly?: boolean;
onSuccess?: () => void;
Expand Down Expand Up @@ -529,8 +539,8 @@ function LocalUnitsForm(props: Props) {
const localUnitFormFieldRendererParams = useCallback((
_: string,
item: ChangedFormField,
): TextOutputProps => ({
label: item.name,
): LocalUnitTextOutputProps => ({
localUnitFormKey: item.key,
value: item.value,
strongLabel: true,
}), []);
Expand Down Expand Up @@ -1308,7 +1318,7 @@ function LocalUnitsForm(props: Props) {
>
<RawList
data={localUnitChangedFormFields}
renderer={TextOutput}
renderer={LocalUnitTextOutput}
keySelector={stringKeySelector}
rendererParams={localUnitFormFieldRendererParams}
/>
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { useTranslation } from '@ifrc-go/ui/hooks';

import i18n from './i18n.json';

interface Props {
key: string;
}
function useLocalUnitFormFieldLabels(props: Props) {
const {
key,
} = props;

const strings = useTranslation(i18n);
const localUnitFormFieldLabels = {
type: strings.type,
visibility: strings.visibility,
date_of_data: strings.dateOfUpdate,
subtype: strings.subtype,
english_branch_name: strings.localUnitNameEn,
local_branch_name: strings.localUnitNameLocal,
level: strings.coverage,
focal_person_en: strings.focalPersonEn,
focal_person_loc: strings.focalPersonLocal,
source_en: strings.sourceEn,
source_loc: strings.sourceLocal,
country: strings.country,
address_en: strings.addressEn,
address_loc: strings.addressLocal,
city_en: strings.localityEn,
city_loc: strings.localityLocal,
postCode: strings.postCode,
phone: strings.phone,
email: strings.email,
link: strings.website,
'location_json.lat': strings.latitude,
'location_json.lng': strings.longitude,
'health.affiliation': strings.affiliation,
'health.other_affiliation': strings.otherAffiliation,
'health.functionality': strings.functionality,
'health.is_teaching_hospital': strings.teachingHospital,
'health.hospital_type': strings.hospitalType,
'health.is_in_patient_capacity': strings.inPatientCapacity,
'health.is_isolation_rooms_wards': strings.isolationRoomsWards,
'health.focal_point_position': strings.focalPointPosition,
'health.focal_point_email': strings.focalPointEmail,
'health.focal_point_phone_number': strings.focalPointPhoneNumber,
'health.health_facility_type': strings.healthFacilityType,
'health.other_facility_type': strings.otherFacilityType,
'health.primary_health_care_center': strings.primaryHealthCareCenter,
'health.speciality': strings.specialist,
'health.general_medical_services': strings.generalMedicalServices,
'health.specialized_medical_beyond_primary_level': strings.specializedMedicalService,
'health.other_services': strings.otherServices,
'health.blood_services': strings.bloodServices,
'health.professional_training_facilities': strings.professionalTrainingFacilities,
'health.number_of_isolation_rooms': strings.numberOfIsolationRooms,
'health.maximum_capacity': strings.maximumCapacity,
'health.is_warehousing': strings.warehousing,
'health.is_cold_chain': strings.coldChain,
'health.ambulance_type_a': strings.ambulanceTypeA,
'health.ambulance_type_b': strings.ambulanceTypeB,
'health.ambulance_type_c': strings.ambulanceTypeC,
'health.total_number_of_human_resource': strings.totalNumberOfHumanResources,
'health.general_practitioner': strings.generalPractitioner,
'health.specialist': strings.specialist,
'health.residents_doctor': strings.residentsDoctor,
'health.nurse': strings.nurse,
'health.dentist': strings.dentist,
'health.nursing_aid': strings.nursingAid,
'health.midwife': strings.midwife,
'health.other_medical_heal': strings.otherMedicalHeal,
'health.other_profiles': strings.otherProfiles,
'health.feedback': strings.commentsNS,
};

const value = localUnitFormFieldLabels[key as keyof typeof localUnitFormFieldLabels];
return [value];
}

export default useLocalUnitFormFieldLabels;

0 comments on commit 153f5c4

Please sign in to comment.