added payedAmount

This commit is contained in:
2024-01-09 10:22:13 +01:00
parent 8a90c58417
commit 4ffe89fde6
3 changed files with 109 additions and 21 deletions

View File

@@ -6,7 +6,7 @@ import { redirect } from 'next/navigation';
import clientPromise from './mongodb';
import { BillAttachment, BillingLocation } from './db-types';
import { ObjectId } from 'mongodb';
import { auth, withUser } from '@/app/lib/auth';
import { withUser } from '@/app/lib/auth';
import { AuthenticatedUser } from './types/next-auth';
export type State = {
@@ -14,6 +14,7 @@ export type State = {
billName?: string[];
billAttachment?: string[],
billNotes?: string[],
payedAmount?: string[],
};
message?:string | null;
}
@@ -22,8 +23,47 @@ const FormSchema = z.object({
_id: z.string(),
billName: z.coerce.string().min(1, "Bill Name is required."),
billNotes: z.string(),
payedAmount: z.string().nullable().transform((val, ctx) => {
if(!val || val === '') {
return null;
}
const parsed = parseFloat(val.replace(',', '.'));
if (isNaN(parsed)) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Not a number",
});
// This is a special symbol you can use to
// return early from the transform function.
// It has type `never` so it does not affect the
// inferred return type.
return z.NEVER;
}
if (parsed < 0) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Value must be a positive number",
});
// This is a special symbol you can use to
// return early from the transform function.
// It has type `never` so it does not affect the
// inferred return type.
return z.NEVER;
}
return Math.floor(parsed * 100); // value is stored in cents
}),
});
parseFloat
const UpdateBill = FormSchema.omit({ _id: true });
/**
@@ -52,7 +92,6 @@ const serializeAttachment = async (billAttachment: File | null) => {
const fileContents = await billAttachment.arrayBuffer();
const fileContentsBase64 = Buffer.from(fileContents).toString('base64');
// create an object to store the file in the database
return({
fileName,
@@ -75,9 +114,12 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
const { id: userId } = user;
const x = formData.get('payedAmount');
const validatedFields = UpdateBill.safeParse({
billName: formData.get('billName'),
billNotes: formData.get('billNotes'),
payedAmount: formData.get('payedAmount'),
});
// If form validation fails, return errors early. Otherwise, continue...
@@ -92,6 +134,7 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
const {
billName,
billNotes,
payedAmount,
} = validatedFields.data;
const billPaid = formData.get('billPaid') === 'on';
@@ -102,20 +145,23 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
const billAttachment = await serializeAttachment(formData.get('billAttachment') as File);
// if there is an attachment, update the attachment field
// otherwise, do not update the attachment field
const mongoDbSet = billAttachment ? {
"bills.$[elem].name": billName,
"bills.$[elem].paid": billPaid,
"bills.$[elem].attachment": billAttachment,
"bills.$[elem].notes": billNotes,
}: {
"bills.$[elem].name": billName,
"bills.$[elem].paid": billPaid,
"bills.$[elem].notes": billNotes,
};
if(billId) {
// if there is an attachment, update the attachment field
// otherwise, do not update the attachment field
const mongoDbSet = billAttachment ? {
"bills.$[elem].name": billName,
"bills.$[elem].paid": billPaid,
"bills.$[elem].attachment": billAttachment,
"bills.$[elem].notes": billNotes,
"bills.$[elem].payedAmount": payedAmount,
}: {
"bills.$[elem].name": billName,
"bills.$[elem].paid": billPaid,
"bills.$[elem].notes": billNotes,
"bills.$[elem].payedAmount": payedAmount,
};
// find a location with the given locationID
const post = await db.collection<BillingLocation>("lokacije").updateOne(
{
@@ -144,6 +190,7 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
paid: billPaid,
attachment: billAttachment,
notes: billNotes,
payedAmount
}
}
});

View File

@@ -11,20 +11,31 @@ export interface BillAttachment {
/** bill object in the form returned by MongoDB */
export interface BillingLocation {
_id: string;
/** user's ID */
userId: string;
/** user's email */
userEmail?: string | null;
/** name of the location */
name: string;
/** the value is encoded as yyyymm (i.e. 202301) */
yearMonth: number;
/** array of bills */
bills: Bill[];
/** (optional) notes */
notes: string|null;
};
/** Bill basic data */
export interface Bill {
_id: string;
/** bill name */
name: string;
/** is the bill paid */
paid: boolean;
/** payed amount amount in cents */
payedAmount?: number | null;
/** attached document (optional) */
attachment?: BillAttachment|null;
/** (optional) notes */
notes?: string|null;
};

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>);