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

BillEditForm: payed amount in same line with checkbox

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-13 11:16:07 +01:00
parent 54bf5669d9
commit 010bd09d47
1 changed files with 27 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/ui/BillEditForm.tsx
View File

@@ -35,13 +35,17 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
const [ state, dispatch ] = useFormState(handleAction, initialState);
const [ isPaid, setIsPaid ] = React.useState<boolean>(paid);
const [ payedAmount, setPayedAmount ] = React.useState<number>(initialPayedAmount ?? 0);
const [ payedAmount, setPayedAmount ] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount/100}` : "" );
const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsPaid(event.target.checked);
}
const payedAmount_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setPayedAmount(event.target.value);
}
const billAttachment_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
findDecodePdf417(event)
.then(result => {
@@ -51,7 +55,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
billInfo
} = result;
setPayedAmount(billInfo.amount);
setPayedAmount(`${billInfo.amount/100}`);
setBarcodeImage(barcodeImage);
}
});
@@ -98,34 +102,28 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
</p>
))}
</div>
<div className="form-control w-32 p-1">
<label className="cursor-pointer label p-0">
<span className="label-text flex-none w-[6.4em]">Paid</span>
<span>
<div className="flex">
<div className="form-control flex-row">
<label className="cursor-pointer label align-middle">
<span className="label-text mr-[1em]">Paid</span>
<input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} onChange={billPaid_handleChange} />
</span>
</label>
</label>
</div>
<div className="form-control">
<label className="cursor-pointer label">
<span className="label-text mx-[1em]">Amount</span>
<input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-[9.2em]" placeholder="0.00" value={payedAmount} onFocus={e => e.target.select()} onChange={payedAmount_handleChange} />
</label>
</div>
</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>
{
isPaid && <>
<div className="form-control p-1">
<label className="cursor-pointer label p-0 flex">
<span className="label-text flex-none w-[6.4em]">Amount</span>
<input type="text" id="payedAmount" name="payedAmount" className="input input-bordered text-right w-full" placeholder="0.00" defaultValue={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>
</>
}
<input type="hidden" name="barcodeImage" value={barcodeImage} />
{
@@ -133,7 +131,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
<div className="form-control w-[325px] p-1">
<label className="cursor-pointer label p-0">
<span>
<img src={barcodeImage} style={{ maxWidth:"325px" }} />
<img src={barcodeImage} className="max-w-[325px]" />
</span>
</label>
</div> : null