knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemente bill add

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-05 14:20:00 +01:00
parent 73029fb28a
commit 245cc38717
9 changed files with 69 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/ui/BillEditForm.tsx
View File

@@ -4,31 +4,29 @@ 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, updateBill } from "../lib/actions";
import { redirect } from 'next/navigation';
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 updateBill2 = (locationId: string, billId:string, prevState:any, formData: FormData) => {
console.log('updateBill2', formData.get('billAttachment'));
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 updateBill(locationId, billId, prevState, formData);
return updateOrAddBill(locationId, billId, prevState, formData);
}
export interface BillEditFormProps {
locationID: string,
bill: Bill
bill?: Bill
}
export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, name, paid, attachment, notes } }) => {
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 updateBillWithId = updateBill2.bind(null, locationID, id);
const [ state, dispatch ] = useFormState(updateBillWithId, initialState);
const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID);
const [ state, dispatch ] = useFormState(handleAction, initialState);
// redirect to the main page
const handleCancel = () => {
@@ -40,9 +38,13 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, nam
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<div className="card-body">
<form action={ dispatch }>
<a href={`/bill/${locationID}-${id}/delete/`}>
<TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
</a>
{
// 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">
@@ -57,7 +59,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, nam
// <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}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
<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>