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

added payedAmount

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-09 10:22:13 +01:00
parent 8a90c58417
commit 4ffe89fde6
3 changed files with 109 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/ui/BillEditForm.tsx
View File

@@ -2,7 +2,7 @@
import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Bill } from "../lib/db-types";
import { FC } from "react";
import React, { FC } from "react";
import { useFormState } from "react-dom";
import { gotoHome, updateOrAddBill } from "../lib/billActions";
@@ -22,18 +22,24 @@ export interface BillEditFormProps {
export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
const { _id: billID, name, paid, attachment, notes } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
const { _id: billID, name, paid, attachment, notes, payedAmount } = 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);
const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
// redirect to the main page
const handleCancel = () => {
console.log('handleCancel');
gotoHome();
};
const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsPaid(event.target.checked);
}
return(
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<div className="card-body">
@@ -77,11 +83,32 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
<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} />
<span className="label-text flex-none w-[6.4em]">Paid</span>
<span>
<input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} onChange={billPaid_handleChange} />
</span>
</label>
</div>
{
isPaid && <>
<div className="form-control p-1">
<label className="cursor-pointer label p-0">
<span className="label-text flex-none w-[6.4em]">Amount</span>
<input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right" placeholder="0.00" defaultValue={payedAmount === null || payedAmount === undefined ? undefined : payedAmount / 100}/>
</label>
</div>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.payedAmount &&
state.errors.payedAmount.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</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 &&
@@ -92,6 +119,11 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
))}
</div>
<div className="pt-4">
<button type="submit" className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
</div>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.message &&
<p className="mt-2 text-sm text-red-500">
@@ -99,8 +131,6 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
</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>);