frontend phase 3: geography — addresses, map-pin picker & nurse coverage areas
Three domain services (mirroring the patients/nurse template): services/geography (cached province→city→district lookups; Infinity staleTime + shared geographyKeys), services/addresses (address book CRUD + set-primary; single-primary invariant), and services/serviceAreas (coverage add/remove; areaExists dup-guard, districtId=null = whole city). Four tested composites in src/components/geography: CascadingRegionSelect (drives the cascade queries), AddressMapPicker (map-pin stand-in emitting real lat/lng), AddressForm, AddressCard. Screens: customer address book (/addresses, reached from the profile hub) and nurse coverage editor (/nurse/coverage, new sidebar tab, inline duplicate block + 409). Adds geo/address/coverage i18n namespaces (both locales), location/delete/coverage icons, ADDRESSES/NURSE_COVERAGE routes. Consumes the b4 geography-addresses contract; filed REQ-008 (accept the map pin on create/update) and REQ-009 (provinceId on CustomerAddressDto) for gaps. Gate: npm run check + npm run test:ci (129, +17) + npm run build all green. A 5-dimension adversarial review fixed 3 findings (map-marker RTL transform, page_size→pageSize pagination casing, coverage districts-scope dead-end on district-less cities). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamid
@@ -0,0 +1,164 @@
|
||||
'use client';
|
||||
import { FunctionComponent, useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { AppButton } from '@/components/common';
|
||||
import { cityCentroid } from '@/services/geography/constants';
|
||||
import type { CreateAddressInput, LatLng } from '@/services/addresses/types';
|
||||
import CascadingRegionSelect, { type CascadingRegionValue } from './CascadingRegionSelect';
|
||||
import AddressMapPicker from './AddressMapPicker';
|
||||
|
||||
/** Prefill for edit (or empty for add). `provinceId` is needed to prefill the cascade. */
|
||||
export interface AddressFormInitial {
|
||||
title?: string;
|
||||
provinceId?: number | null;
|
||||
cityId?: number | null;
|
||||
districtId?: number | null;
|
||||
addressLine?: string | null;
|
||||
latitude?: number | null;
|
||||
longitude?: number | null;
|
||||
isPrimary?: boolean;
|
||||
}
|
||||
|
||||
export interface AddressFormProps {
|
||||
initial?: AddressFormInitial;
|
||||
submitting?: boolean;
|
||||
onSubmit: (input: CreateAddressInput) => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
// Only prefill the region when we have the province — a city id without its province can't drive
|
||||
// the (per-province) city query, so the cascade starts fresh instead of showing a dead value.
|
||||
function initialRegion(initial?: AddressFormInitial): CascadingRegionValue {
|
||||
if (initial?.provinceId == null) return { provinceId: null, cityId: null, districtId: null };
|
||||
return { provinceId: initial.provinceId, cityId: initial.cityId ?? null, districtId: initial.districtId ?? null };
|
||||
}
|
||||
|
||||
function initialPin(initial?: AddressFormInitial): LatLng | null {
|
||||
return initial?.latitude != null && initial?.longitude != null
|
||||
? { latitude: initial.latitude, longitude: initial.longitude }
|
||||
: null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The add/edit address form body — the cascading region dropdowns + the map-pin picker + a
|
||||
* title and street address + a "set as primary" toggle. Validation: **city required**, **pin
|
||||
* required** (surfaced inline), title + street required, **district optional**. Emits a
|
||||
* `CreateAddressInput` carrying the picked coordinates. Reused for create and edit.
|
||||
* @component AddressForm
|
||||
*/
|
||||
const AddressForm: FunctionComponent<AddressFormProps> = ({ initial, submitting = false, onSubmit, onCancel }) => {
|
||||
const t = useTranslations('address');
|
||||
const tc = useTranslations('common');
|
||||
|
||||
const [title, setTitle] = useState(initial?.title ?? '');
|
||||
const [region, setRegion] = useState<CascadingRegionValue>(() => initialRegion(initial));
|
||||
const [addressLine, setAddressLine] = useState(initial?.addressLine ?? '');
|
||||
const [pin, setPin] = useState<LatLng | null>(() => initialPin(initial));
|
||||
const [isPrimary, setIsPrimary] = useState(initial?.isPrimary ?? false);
|
||||
|
||||
const [titleError, setTitleError] = useState(false);
|
||||
const [cityError, setCityError] = useState(false);
|
||||
const [lineError, setLineError] = useState(false);
|
||||
const [pinError, setPinError] = useState(false);
|
||||
|
||||
const handleSubmit = () => {
|
||||
const titleInvalid = title.trim().length === 0;
|
||||
const cityInvalid = region.cityId == null;
|
||||
const lineInvalid = addressLine.trim().length === 0;
|
||||
const pinInvalid = pin == null;
|
||||
|
||||
setTitleError(titleInvalid);
|
||||
setCityError(cityInvalid);
|
||||
setLineError(lineInvalid);
|
||||
setPinError(pinInvalid);
|
||||
if (titleInvalid || cityInvalid || lineInvalid || pinInvalid) return;
|
||||
|
||||
onSubmit({
|
||||
title: title.trim(),
|
||||
provinceId: region.provinceId as number,
|
||||
cityId: region.cityId as number,
|
||||
districtId: region.districtId,
|
||||
addressLine: addressLine.trim(),
|
||||
latitude: pin!.latitude,
|
||||
longitude: pin!.longitude,
|
||||
isPrimary,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack sx={{ gap: 2.5 }}>
|
||||
<TextField
|
||||
label={t('title_label')}
|
||||
placeholder={t('title_placeholder')}
|
||||
value={title}
|
||||
onChange={(event) => {
|
||||
setTitle(event.target.value);
|
||||
if (titleError) setTitleError(false);
|
||||
}}
|
||||
error={titleError}
|
||||
helperText={titleError ? t('title_required') : undefined}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<CascadingRegionSelect
|
||||
value={region}
|
||||
onChange={(next) => {
|
||||
setRegion(next);
|
||||
if (cityError && next.cityId != null) setCityError(false);
|
||||
}}
|
||||
cityError={cityError}
|
||||
cityErrorText={t('city_required')}
|
||||
/>
|
||||
|
||||
<AddressMapPicker
|
||||
value={pin}
|
||||
onChange={(next) => {
|
||||
setPin(next);
|
||||
if (pinError) setPinError(false);
|
||||
}}
|
||||
center={cityCentroid(region.cityId)}
|
||||
helperText={t('map_hint')}
|
||||
latLabel={t('map_lat')}
|
||||
lngLabel={t('map_lng')}
|
||||
error={pinError}
|
||||
errorText={t('map_required')}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label={t('line_label')}
|
||||
value={addressLine}
|
||||
onChange={(event) => {
|
||||
setAddressLine(event.target.value);
|
||||
if (lineError) setLineError(false);
|
||||
}}
|
||||
error={lineError}
|
||||
helperText={lineError ? t('line_required') : t('line_hint')}
|
||||
multiline
|
||||
minRows={2}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<FormControlLabel
|
||||
control={<Switch checked={isPrimary} onChange={(event) => setIsPrimary(event.target.checked)} />}
|
||||
label={t('set_primary_toggle')}
|
||||
/>
|
||||
|
||||
<Stack direction="row" sx={{ gap: 1, justifyContent: 'flex-end' }}>
|
||||
{onCancel ? (
|
||||
<AppButton variant="text" onClick={onCancel} disabled={submitting} sx={{ m: 0 }}>
|
||||
{tc('cancel')}
|
||||
</AppButton>
|
||||
) : null}
|
||||
<AppButton color="primary" variant="contained" onClick={handleSubmit} disabled={submitting} sx={{ m: 0 }}>
|
||||
{submitting ? tc('saving') : tc('save')}
|
||||
</AppButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddressForm;
|
||||
Reference in New Issue
Block a user