implemented location edit

app/ui/LocationEditForm.tsx

@@ -1,18 +1,76 @@
+"use client";
+
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
+import { BillingLocation } from "../lib/db-types";
+import { updateOrAddLocation } from "../lib/locationActions";
+import { useFormState } from "react-dom";
+import { gotoHome } from "../lib/billActions";
 
 export interface LocationEditFormProps {
-
+    /** location which should be edited */
+    location?: BillingLocation
 }
 
-export const LocationEditForm:FC<LocationEditFormProps> = () =>
-<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
-    <div className="card-body">
-    <form>
-        <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
-        <input type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue="Budakova" />
-        <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Stan u Budakovoj"></textarea>
-        <button className="btn btn-primary">Spremi</button>
-    </form>
-    </div>
-</div>
+export const LocationEditForm:FC<LocationEditFormProps> = ({ location }) =>
+{
+    const initialState = { message: null, errors: {} };
+    const handleAction = updateOrAddLocation.bind(null, location?._id);
+    const [ state, dispatch ] = useFormState(handleAction, initialState);
+
+    // redirect to the main page
+    const handleCancel = () => {
+        console.log('handleCancel');
+        gotoHome();
+    };
+
+    return(
+        <main>
+            <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
+                <div className="card-body">
+                    <form action={dispatch}>
+                        {
+                            // show delete button only if location is set (otherwise it's a add operation)
+                            location ?
+                                <a href={`/location/${location._id}/delete`} className="card-subtitle tooltip" data-tip="Delete Location">
+                                    <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
+                                </a> : null
+                        }
+
+                        <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
+                        <div id="status-error" aria-live="polite" aria-atomic="true">
+                            {state.errors?.locationName &&
+                            state.errors.locationName.map((error: string) => (
+                                <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                                </p>
+                            ))}
+                        </div>
+
+                        <textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
+                        <div id="status-error" aria-live="polite" aria-atomic="true">
+                            {state.errors?.locationNotes &&
+                            state.errors.locationNotes.map((error: string) => (
+                                <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                                </p>
+                            ))}
+                        </div>
+
+                        <div id="status-error" aria-live="polite" aria-atomic="true">
+                            {
+                                state.message &&
+                                    <p className="mt-2 text-sm text-red-500">
+                                        {state.message}
+                                    </p>
+                            }
+                        </div>
+
+                        <button className="btn btn-primary">Save</button>
+                        <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                    </form>
+                </div>
+            </div>
+        </main>
+    )
+}