Bill Edit Form: dovršen fetch

This commit is contained in:
2024-01-04 15:38:58 +01:00
parent f11987dd3a
commit 76ddedf652
7 changed files with 75 additions and 16 deletions

View File

@@ -1,9 +1,14 @@
import { FC } from "react"
import { Bill } from "../lib/db-types"
import { Bill, Location } from "@/app/lib/db-types"
import Link from "next/link"
import { ObjectId } from "mongodb";
export interface BillBadgeProps {
locationId: ObjectId,
bill: Bill
};
export const BillBadge:FC<BillBadgeProps> = ({bill: { name, paid }}) =>
<div className={`badge badge-lg ${paid} ${paid?"badge-success":" badge-outline"} cursor-pointer`}>{name}</div>
export const BillBadge:FC<BillBadgeProps> = ({ locationId, bill: { _id: billId, name, paid }}) =>
<Link href={`/bills/${locationId}-${billId}/edit`} className={`badge badge-lg ${paid} ${paid?"badge-success":" badge-outline"} cursor-pointer`}>
{name}
</Link>;

View File

@@ -1,22 +1,26 @@
import { Cog8ToothIcon, DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Bill } from "../lib/db-types";
import { FC } from "react";
import { ObjectId } from "mongodb";
export interface BillEditFormProps {
invoiceID: string,
bill: Bill
}
export const BillEditForm:FC<BillEditFormProps> = ({ bill: { name, description, paid } }) =>
export const BillEditForm:FC<BillEditFormProps> = ({ bill: { name, paid } }) =>
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<div className="card-body">
<form>
<TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
<input type="text" placeholder="Naziv računa" className="input input-bordered w-full" value="GSKG" />
<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'>
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
2023-22-12 document GSKG račun za 2023.pdf
</a>
<input type="text" placeholder="Naziv računa" className="input input-bordered w-full" defaultValue={name} />
{
// <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'>
// <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
// 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" />
<div className="form-control w-32 p-1">
<label className="cursor-pointer label p-0">

View File

@@ -10,14 +10,14 @@ export interface LocationCardProps {
location: Location
}
export const LocationCard:FC<LocationCardProps> = ({location: { name, yearMonth, bills }}) =>
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) =>
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
<h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
<div className="card-actions">
{
bills.map(bill => <BillBadge key={`${bill.id}`} bill={bill} />)
bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
}
<div className="tooltip" data-tip="Dodaj novi tip računa">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />