107 lines
5.1 KiB
TypeScript
107 lines
5.1 KiB
TypeScript
"use client";
|
|
|
|
import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
|
|
import { Bill } from "../lib/db-types";
|
|
import { FC } from "react";
|
|
import { useFormState } from "react-dom";
|
|
import { gotoHome, updateOrAddBill } from "../lib/actions";
|
|
|
|
// Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
|
|
// This is a workaround for that
|
|
const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, prevState:any, formData: FormData) => {
|
|
// URL encode the file name of the attachment so it is correctly sent to the server
|
|
const billAttachment = formData.get('billAttachment') as File;
|
|
formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
|
|
return updateOrAddBill(locationId, billId, prevState, formData);
|
|
}
|
|
|
|
export interface BillEditFormProps {
|
|
locationID: string,
|
|
bill?: Bill
|
|
}
|
|
|
|
export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
|
|
|
|
const { _id: billID, name, paid, attachment, notes } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
|
|
|
|
const initialState = { message: null, errors: {} };
|
|
const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID);
|
|
const [ state, dispatch ] = useFormState(handleAction, initialState);
|
|
|
|
// redirect to the main page
|
|
const handleCancel = () => {
|
|
console.log('handleCancel');
|
|
gotoHome();
|
|
};
|
|
|
|
return(
|
|
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
|
|
<div className="card-body">
|
|
<form action={ dispatch }>
|
|
{
|
|
// don't show the delete button if we are adding a new bill
|
|
bill ?
|
|
<a href={`/bill/${locationID}-${billID}/delete/`}>
|
|
<TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
|
|
</a> : null
|
|
}
|
|
|
|
<input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} required />
|
|
<div id="status-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.billName &&
|
|
state.errors.billName.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
{
|
|
// <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
|
|
|
|
attachment ?
|
|
<a href={`/attachment/${locationID}-${billID}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
|
|
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
|
|
{decodeURIComponent(attachment.fileName)}
|
|
</a>
|
|
: null
|
|
}
|
|
<input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
|
|
<div id="status-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.billAttachment &&
|
|
state.errors.billAttachment.map((error: string) => (
|
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
|
{error}
|
|
</p>
|
|
))}
|
|
</div>
|
|
|
|
<div className="form-control w-32 p-1">
|
|
<label className="cursor-pointer label p-0">
|
|
<span className="label-text">Paid</span>
|
|
<input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} />
|
|
</label>
|
|
</div>
|
|
|
|
<textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Note" defaultValue={notes ?? ''}></textarea>
|
|
<div id="status-error" aria-live="polite" aria-atomic="true">
|
|
{state.errors?.billNotes &&
|
|
state.errors.billNotes.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 type="submit" className="btn btn-primary">Save</button>
|
|
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
|
|
</form>
|
|
</div>
|
|
</div>);
|
|
} |