42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { FC } from "react";
|
|
import { BillingLocation } from "../lib/db-types";
|
|
import { deleteLocationById } from "../lib/actions/locationActions";
|
|
import { useFormState } from "react-dom";
|
|
import { Main } from "./Main";
|
|
import { gotoUrl } from "../lib/actions/navigationActions";
|
|
|
|
export interface LocationDeleteFormProps {
|
|
/** location which should be deleted */
|
|
location: BillingLocation
|
|
}
|
|
|
|
export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
|
|
{
|
|
const handleAction = deleteLocationById.bind(null, location._id, location.yearMonth);
|
|
const [ state, dispatch ] = useFormState(handleAction, null);
|
|
|
|
const handleCancel = () => {
|
|
gotoUrl(`/location/${location._id}/edit/`);
|
|
};
|
|
|
|
return(
|
|
<Main>
|
|
<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}>
|
|
<p className="py-6 px-6">
|
|
Please confirm deletion of location “<strong>{location.name}</strong>”.
|
|
</p>
|
|
<div className="pt-4 text-center">
|
|
<button className="btn btn-primary">Confim</button>
|
|
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Main>
|
|
)
|
|
}
|