93 lines
4.1 KiB
TypeScript
93 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { TrashIcon } from "@heroicons/react/24/outline";
|
|
import { FC } from "react";
|
|
import { BillingLocation, YearMonth } from "../lib/db-types";
|
|
import { updateOrAddLocation } from "../lib/actions/locationActions";
|
|
import { useFormState } from "react-dom";
|
|
import Link from "next/link";
|
|
|
|
export type LocationEditFormProps = {
|
|
/** location which should be edited */
|
|
location: BillingLocation,
|
|
/** year adn month at a new billing location should be assigned */
|
|
yearMonth?: undefined
|
|
} | {
|
|
/** location which should be edited */
|
|
location?: undefined,
|
|
/** year adn month at a new billing location should be assigned */
|
|
yearMonth: YearMonth
|
|
}
|
|
|
|
export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth }) =>
|
|
{
|
|
const initialState = { message: null, errors: {} };
|
|
const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
|
|
const [ state, dispatch ] = useFormState(handleAction, initialState);
|
|
|
|
let { year, month } = location ? location.yearMonth : yearMonth;
|
|
|
|
return(
|
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
|
<div className="card-body">
|
|
<form action={dispatch}>
|
|
{
|
|
location &&
|
|
<Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
|
|
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
|
|
</Link>
|
|
}
|
|
<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 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>
|
|
<div className="pt-4">
|
|
<button className="btn btn-primary w-[5.5em]">Save</button>
|
|
<Link className="btn btn-neutral w-[5.5em] ml-3" href={`/?year=${year}&month=${month}`}>Cancel</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const LocationEditFormSkeleton:FC = () =>
|
|
{
|
|
return(
|
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
|
<div className="card-body skeleton">
|
|
<div id="locationName" className="input input-bordered w-full"></div>
|
|
<div id="locationNotes" className="textarea textarea-bordered my-1 w-full block"></div>
|
|
<div className="pt-4">
|
|
<div className="btn btn-neutral w-[5.5em]"></div>
|
|
<div className="btn btn-neutral w-[5.5em] ml-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|