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

Merge branch 'feature/bill-edit-form-improvements' into develop

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-13 11:27:06 +01:00
parent 54bf5669d9 aa6cc8714f
commit 46dd5e283a
3 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/ui/AddLocationButton.tsx
View File

@@ -1,4 +1,4 @@
import { PlusCircleIcon } from "@heroicons/react/24/outline"; import { PlusCircleIcon, HomeIcon } from "@heroicons/react/24/outline";
import { YearMonth } from "../lib/db-types"; import { YearMonth } from "../lib/db-types";
import { formatYearMonth } from "../lib/format"; import { formatYearMonth } from "../lib/format";
import Link from "next/link"; import Link from "next/link";
@@ -12,8 +12,9 @@ export interface AddLocationButtonProps {
export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth}) => export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth}) =>
<div className="card card-compact card-bordered bg-base-100 shadow-s my-1"> <div className="card card-compact card-bordered bg-base-100 shadow-s my-1">
<Link href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip="Add a new billing location"> <Link href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
<span className='grid self-center' data-tip="Add a new billing location"> <span className='flex self-center' data-tip="Add a new billing location">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" /> <HomeIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.6em] mt-[-.4em]" />
</span> </span>
</Link> </Link>
</div>; </div>;

7
app/ui/AddMonthButton.tsx
View File

@@ -1,4 +1,4 @@
import { PlusCircleIcon } from "@heroicons/react/24/outline"; import { PlusCircleIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
import React from "react"; import React from "react";
import { formatYearMonth } from "../lib/format"; import { formatYearMonth } from "../lib/format";
import { YearMonth } from "../lib/db-types"; import { YearMonth } from "../lib/db-types";
@@ -11,8 +11,9 @@ export interface AddMonthButtonProps {
export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) => export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) =>
<div className="card card-compact shadow-s mb-4"> <div className="card card-compact shadow-s mb-4">
<Link href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec"> <Link href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
<span className='grid self-center'> <span className='flex self-center'>
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" /> <CalendarDaysIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-xl text-green-500 ml-[-.4em] mt-[-.4em]" />
</span> </span>
</Link> </Link>
</div>; </div>;

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