Bill Edit Form: saving all the fields

app/lib/actions.ts

@@ -9,15 +9,17 @@ import { ObjectId } from 'mongodb';
 export type State = {
     errors?: {
         billName?: string[];
+        billAttachment?: string[],
+        billNotes?: string[],
     };
     message?:string | null;
 }
 
 const FormSchema = z.object({
     _id: z.string(),
-    billName: z.string({
+    billName: z.coerce.string().min(1, "Bill Name is required."),
-      invalid_type_error: 'Please select a bill name',
+    billAttachment: z.object({ }),
-    }),
+    billNotes: z.string(),
   });
 
 const UpdateBill = FormSchema.omit({ _id: true });
@@ -26,6 +28,8 @@ export async function updateBill(locationId: string, billId:string, prevState:St
 
     const validatedFields = UpdateBill.safeParse({
         billName: formData.get('billName'),
+        billAttachment: formData.get('billAttachment'),
+        billNotes: formData.get('billNotes'),
     });
 
     // If form validation fails, return errors early. Otherwise, continue...
@@ -39,8 +43,12 @@ export async function updateBill(locationId: string, billId:string, prevState:St
 
     const {
         billName,
+        billAttachment,
+        billNotes,
     } = validatedFields.data;
 
+    const billPaid = formData.get('billPaid') === 'on';
+
     // update the bill in the mongodb
     const client = await clientPromise;
     const db = client.db("rezije");
@@ -53,6 +61,9 @@ export async function updateBill(locationId: string, billId:string, prevState:St
         {
             $set: {
                 "bills.$[elem].name": billName,
+                "bills.$[elem].paid": billPaid,
+                "bills.$[elem].attachment": billAttachment,
+                "bills.$[elem].notes": billNotes,
             }
         }, {
             arrayFilters: [
@@ -60,8 +71,6 @@ export async function updateBill(locationId: string, billId:string, prevState:St
             ]
         });
 
-    console.log("updateBill.success", post);
-
     // clear the cache for the path
     revalidatePath('/');
     // go to the bill list

app/ui/BillEditForm.tsx

@@ -23,7 +23,17 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
         <div className="card-body">
             <form action={ dispatch }>
                 <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
-                <input id="billName" name="billName" type="text" placeholder="Naziv računa" className="input input-bordered w-full" defaultValue={name} />
+
+                <input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} />
+                <div id="status-error" aria-live="polite" aria-atomic="true">
+                    {state.errors?.billName &&
+                    state.errors.billName.map((error: string) => (
+                        <p className="mt-2 text-sm text-red-500" key={error}>
+                        {error}
+                        </p>
+                    ))}
+                </div>
+
                 {
                     // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
                     // <a href="#document.pdf" className='text-center block max-w-[24em] text-nowrap truncate inline-block'>
@@ -31,15 +41,41 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
                     // 2023-22-12 document GSKG račun za 2023.pdf
                     // </a>
                 }
-                <input type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
+                <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
+                <div id="status-error" aria-live="polite" aria-atomic="true">
+                    {state.errors?.billAttachment &&
+                    state.errors.billAttachment.map((error: string) => (
+                        <p className="mt-2 text-sm text-red-500" key={error}>
+                        {error}
+                        </p>
+                    ))}
+                </div>
+
                 <div className="form-control w-32 p-1">
                     <label className="cursor-pointer label p-0">
-                    <span className="label-text">Plaćeno</span> 
+                        <span className="label-text">Paid</span> 
-                    <input type="checkbox" className="toggle toggle-success" defaultChecked={paid} />
+                        <input id="billPaid" name="billPaid" type="checkbox" className="toggle toggle-success" defaultChecked={paid} />
                     </label>
                 </div>
-                <textarea className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Napomena"></textarea>
+
-                <button type="submit" className="btn btn-primary">Spremi</button>
+                <textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Note"></textarea>
+                <div id="status-error" aria-live="polite" aria-atomic="true">
+                    {state.errors?.billNotes &&
+                    state.errors.billNotes.map((error: string) => (
+                        <p className="mt-2 text-sm text-red-500" key={error}>
+                        {error}
+                        </p>
+                    ))}
+                </div>
+
+                <div id="status-error" aria-live="polite" aria-atomic="true">
+                    {state.message &&
+                    <p className="mt-2 text-sm text-red-500">
+                    {state.message}
+                    </p>
+                    }
+                </div>
+                <button type="submit" className="btn btn-primary">Save</button>
             </form>
         </div>
     </div>);