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

34
app/ui/BillEditForm.tsx
View File

@@ -35,13 +35,17 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
const [ state, dispatch ] = useFormState(handleAction, initialState); const [ state, dispatch ] = useFormState(handleAction, initialState);
const [ isPaid, setIsPaid ] = React.useState<boolean>(paid); 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 [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const billPaid_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsPaid(event.target.checked); setIsPaid(event.target.checked);
} }
const payedAmount_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setPayedAmount(event.target.value);
}
const billAttachment_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const billAttachment_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
findDecodePdf417(event) findDecodePdf417(event)
.then(result => { .then(result => {
@@ -51,7 +55,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
billInfo billInfo
} = result; } = result;
setPayedAmount(billInfo.amount); setPayedAmount(`${billInfo.amount/100}`);
setBarcodeImage(barcodeImage); setBarcodeImage(barcodeImage);
} }
}); });
@@ -98,24 +102,20 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
</p> </p>
))} ))}
</div> </div>
<div className="flex">
<div className="form-control w-32 p-1"> <div className="form-control flex-row">
<label className="cursor-pointer label p-0"> <label className="cursor-pointer label align-middle">
<span className="label-text flex-none w-[6.4em]">Paid</span> <span className="label-text mr-[1em]">Paid</span>
<span>
<input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} onChange={billPaid_handleChange} /> <input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} onChange={billPaid_handleChange} />
</span>
</label> </label>
</div> </div>
<div className="form-control">
{ <label className="cursor-pointer label">
isPaid && <> <span className="label-text mx-[1em]">Amount</span>
<div className="form-control p-1"> <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 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> </label>
</div> </div>
</div>
<div id="status-error" aria-live="polite" aria-atomic="true"> <div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.payedAmount && {state.errors?.payedAmount &&
state.errors.payedAmount.map((error: string) => ( state.errors.payedAmount.map((error: string) => (
@@ -124,8 +124,6 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
</p> </p>
))} ))}
</div> </div>
</>
}
<input type="hidden" name="barcodeImage" value={barcodeImage} /> <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"> <div className="form-control w-[325px] p-1">
<label className="cursor-pointer label p-0"> <label className="cursor-pointer label p-0">
<span> <span>
<img src={barcodeImage} style={{ maxWidth:"325px" }} /> <img src={barcodeImage} className="max-w-[325px]" />
</span> </span>
</label> </label>
</div> : null </div> : null