From 9deec817b1d2b77902538927e210f0d849b2971a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Wed, 17 Jan 2024 16:07:12 +0100
Subject: [PATCH] fix: bill edit form formatting was falling apart

---
 app/ui/BillEditForm.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index 9d25dba..a7739ac 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { Bill } from "../lib/db-types";
+import { Bill, BillingLocation } from "../lib/db-types";
 import React, { FC } from "react";
 import { useFormState } from "react-dom";
 import { updateOrAddBill } from "../lib/actions/billActions";
 import Link from "next/link";
 import { gotoHome } from "../lib/actions/navigationActions";
+import { formatYearMonth } from "../lib/format";
 
 // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
 // This is a workaround for that
@@ -18,15 +19,16 @@ const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined,
 }
 
 export interface BillEditFormProps {
-    locationID: string,
+    location: BillingLocation,
     bill?: Bill,
-    billYear?: number
 }
 
-export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill, billYear }) => {
+export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
 
     const { _id: billID, name, paid, attachment, notes, payedAmount } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
 
+    const { yearMonth:{year: billYear}, _id: locationID } = location;
+
     const initialState = { message: null, errors: {} };
     const handleAction = updateOrAddBillMiddleware.bind(null, locationID, billID, billYear);
     const [ state, dispatch ] = useFormState(handleAction, initialState);
@@ -45,6 +47,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill, billYear
     return(
     <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s">
         <div className="card-body">
+            <h2 className="card-title">{`${formatYearMonth(location.yearMonth)} ${location.name}`}</h2>
             <form action={ dispatch }>
                 {
                     // don't show the delete button if we are adding a new bill
@@ -67,13 +70,13 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill, billYear
                     // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
 
                     attachment ? 
-                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
+                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center w-full max-w-[24em] text-nowrap truncate inline-block mt-4'>
                         <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                         {decodeURIComponent(attachment.fileName)}
                     </Link>
                     : null
                 }
-                <input id="billAttachment" name="billAttachment" 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 max-w-sm w-full file-input-xs my-2 block" />
                 <div id="status-error" aria-live="polite" aria-atomic="true">
                     {state.errors?.billAttachment &&
                     state.errors.billAttachment.map((error: string) => (
@@ -111,7 +114,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill, billYear
                     </>
                 }
 
-                <textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Note" defaultValue={notes ?? ''}></textarea>
+                <textarea id="billNotes" name="billNotes" className="textarea textarea-bordered my-2 max-w-lg w-full block" placeholder="Note" defaultValue={notes ?? ''}></textarea>
                 <div id="status-error" aria-live="polite" aria-atomic="true">
                     {state.errors?.billNotes &&
                     state.errors.billNotes.map((error: string) => (