diff --git a/src/pages/AddLocation/index.tsx b/src/pages/AddLocation/index.tsx index c7b126c..63d596f 100755 --- a/src/pages/AddLocation/index.tsx +++ b/src/pages/AddLocation/index.tsx @@ -4,7 +4,7 @@ import { LocationInfo } from "../../domains/LocationInfo"; import { DropdownInput } from "../../components"; import { IndonesiaRegionsInfo, LocationType } from "../../types/common"; import { Regency, emptyRegency } from "../../domains"; -import { Form } from './types'; +import { Form, MenuItem } from './types'; import { enumKeys } from "../../utils"; import './style.css'; import { createLocationService } from "../../services/locations"; @@ -27,6 +27,7 @@ function AddLocation() { regency: emptyRegency(), thumbnails: [], amenities: [], + restaurant_menu: [], }) const [showAmenitiesModal, setShowAmenitiesModal] = useState(false) const [submitLoading, setSubmitLoading ] = useState(false) @@ -66,7 +67,24 @@ function AddLocation() { function onChangeLocationType(e: ChangeEvent) { const value = (e.target as HTMLSelectElement).value as LocationType - setForm({ ...form, location_type: value, amenities: [] }) + setForm({ ...form, location_type: value, amenities: [], restaurant_menu: [] }) + } + + function onAddMenuItem(e: TargetedEvent) { + e.preventDefault() + setForm({ ...form, restaurant_menu: [...form.restaurant_menu, { name: '', price: 0, category: '', description: '' }] }) + } + + function onChangeMenuItem(idx: number, field: keyof MenuItem, value: string) { + const updated = form.restaurant_menu.map((item, i) => + i === idx ? { ...item, [field]: field === 'price' ? parseInt(value) || 0 : value } : item + ) + setForm({ ...form, restaurant_menu: updated }) + } + + function onDeleteMenuItem(e: TargetedEvent, idx: number) { + e.preventDefault() + setForm({ ...form, restaurant_menu: form.restaurant_menu.filter((_, i) => i !== idx) }) } async function onSubmitForm(e: TargetedEvent) { @@ -95,6 +113,9 @@ function AddLocation() { if (form.amenities.length > 0) { formData.append("amenities", JSON.stringify(form.amenities)) } + if (form.restaurant_menu.length > 0) { + formData.append("restaurant_menu", JSON.stringify(form.restaurant_menu)) + } for(let i = 0; i < tempThumbnailArr.length; i++) { formData.append("thumbnail", tempThumbnailArr[i]) @@ -199,6 +220,42 @@ function AddLocation() { )) } + {form.location_type === LocationType.Culinary && ( +
+ Restaurant Menu + {form.restaurant_menu.map((item, idx) => ( +
+
+
+ Name * + onChangeMenuItem(idx, 'name', (e.target as HTMLInputElement).value)} /> +
+
+ Price (IDR) * + onChangeMenuItem(idx, 'price', (e.target as HTMLInputElement).value)} /> +
+
+ Category + +
+
+ Description + onChangeMenuItem(idx, 'description', (e.target as HTMLInputElement).value)} /> +
+ onDeleteMenuItem(e, idx)} style={{ cursor: 'pointer', color: '#ed4245', fontWeight: 'bold', paddingBottom: 4 }}>✕ +
+
+ ))} + +
+ )} {(form.location_type === LocationType.Accommodation || form.location_type === LocationType.Culinary || form.location_type === LocationType.Mall) && (