Dodo
84 lines
3.8 KiB
Markdown
84 lines
3.8 KiB
Markdown
# Religion Dialog Dropdown + Radius Fix
|
|
|
|
## Problem
|
|
|
|
1. The religion-edit flow (`marker-edit-dialog.tsx`) uses an older `SelectDropdown`
|
|
(`@/components/ui/dropdown`) for the religion-type field, while the create
|
|
flow (`religion-dialog.tsx`) already uses the shared `dropdown-menu.tsx`
|
|
primitives. The two dialogs look inconsistent.
|
|
2. The edit dialog only offers 3 religion types (mosque/church/synagogue),
|
|
while the create dialog offers 7 (+ cathedral, temple, vihara, klenteng).
|
|
As a side effect, editing a cathedral/temple/vihara/klenteng POI shows no
|
|
type selector at all (`isReligion` is false for those types).
|
|
3. The edit dialog has no way to change a religion POI's radius, even though
|
|
the create dialog lets you set one.
|
|
4. Radius circles never render on the map. Root cause: the live `poi_markers`
|
|
table is missing the `radius_meters` column entirely — the running
|
|
`pba-new-backend-1` container was built before this column was added to
|
|
`db-init.js` / `poi.routes.js`, so radius data never persists.
|
|
|
|
## Design
|
|
|
|
### 1. Shared `RadiusSlider` component
|
|
New file: `frontend/components/poverty/radius-slider.tsx`.
|
|
|
|
Extract the slider markup currently inline in `religion-dialog.tsx`
|
|
(0-2000m range input, step 50, live value badge, "0 = tidak tampilkan
|
|
lingkaran" hint). Props:
|
|
|
|
```ts
|
|
{ value: number; onChange: (v: number) => void }
|
|
```
|
|
|
|
Both dialogs render it inside their own `<Field label="Radius Jangkauan (meter)">`.
|
|
|
|
### 2. `marker-edit-dialog.tsx`
|
|
- Replace `SelectDropdown` with `DropdownMenu` / `DropdownMenuTrigger` /
|
|
`DropdownMenuContent` / `DropdownMenuRadioGroup` / `DropdownMenuRadioItem`
|
|
from `@/components/ui/dropdown-menu`, mirroring the trigger styling and
|
|
icon rendering used in `religion-dialog.tsx`.
|
|
- Expand `RELIGION_OPTIONS` to the same 7 entries as `religion-dialog.tsx`
|
|
(mosque/church/cathedral/temple/vihara/klenteng/synagogue, with Indonesian
|
|
labels and icons).
|
|
- Add `radiusMeters` state, populated from `row.radius_meters ?? 0` in the
|
|
existing POI-loading `useEffect`.
|
|
- Render `<Field label="Radius Jangkauan (meter)"><RadiusSlider .../></Field>`
|
|
only when `isReligion`.
|
|
- On submit, when `isReligion`: include `radius_meters: radiusMeters` in the
|
|
PUT body, and include `radius: radiusMeters` in the `meta` passed to
|
|
`onUpdated` so the map redraws the circle immediately.
|
|
- Remove the now-dead `SelectDropdown` import.
|
|
|
|
### 3. `components/ui/dropdown.tsx`
|
|
Remove the now-unused `SelectDropdown` / `SelectOption` / `dropdownSpring`
|
|
exports (confirmed unused elsewhere via grep).
|
|
|
|
### 4. `religion-dialog.tsx`
|
|
Replace the inline slider block with `<RadiusSlider value={radiusMeters}
|
|
onChange={setRadiusMeters} />`. No behavior change, just dedup.
|
|
|
|
### 5. Backend DB migration
|
|
Run `docker compose up -d --build backend` from `/Users/pangkywaradjodi/pba-new`
|
|
so `initDb()` re-runs `ALTER TABLE poi_markers ADD COLUMN IF NOT EXISTS
|
|
radius_meters INT DEFAULT 0` against the live database. Verify with
|
|
`\d poi_markers` afterward.
|
|
|
|
## Data flow after the fix
|
|
|
|
- **Create** (`religion-dialog.tsx`): POST `/poi` with `radius_meters` → now
|
|
persists correctly once the column exists.
|
|
- **Edit** (`marker-edit-dialog.tsx`): GET `/poi/:id` returns `radius_meters`
|
|
→ loaded into the slider → PUT `/poi/:id` saves it → `onUpdated` updates
|
|
`userMarkers` → `leaflet-map.tsx` redraws the circle (existing
|
|
circle-drawing logic is already correct, it just never received real data).
|
|
- **Page load**: GET `/poi` already maps `radius_meters` → `meta.radius`, so
|
|
existing POIs with a radius now render circles too.
|
|
|
|
## Testing
|
|
|
|
- Rebuild backend, confirm `radius_meters` column exists.
|
|
- Manual flow via dev server: create a religion POI with radius > 0 → circle
|
|
appears. Edit an existing religion POI (including a cathedral/temple/etc.),
|
|
change type via the new dropdown, adjust radius, save → circle updates.
|
|
Reload page → circle persists.
|