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

fix: bill edit form formatting was falling apart

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-17 16:07:12 +01:00
parent c7c7bf2924
commit 9deec817b1
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/ui/BillEditForm.tsx
View File

@@ -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) => (