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

implemented bill deletion + var rename

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-05 13:54:25 +01:00
parent 4ffe2de6ea
commit 86135199a9
12 changed files with 122 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/attachment/[id]/not-found.tsx
View File

@@ -1,18 +1,4 @@
import Link from 'next/link';
import { FaceFrownIcon } from '@heroicons/react/24/outline';
import { NotFoundPage } from '@/app/ui/NotFoundPage';
export default function NotFound() {
return (
<main className="flex h-full flex-col items-center justify-center gap-2">
<FaceFrownIcon className="w-10 text-gray-400" />
<h2 className="text-xl font-semibold">404 File Not Found</h2>
<p>Could not find the requested attachment.</p>
<Link
href="/"
className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
>
Go Back
</Link>
</main>
);
}
export default () =>
<NotFoundPage title="404 File Not Found" description="Could not find the requested attachment." />;

6
app/attachment/[id]/route.tsx
View File

@@ -1,10 +1,10 @@
import { fetchBillById } from '@/app/lib/fetchBillById';
import { fetchBillById } from '@/app/lib/actions';
import { notFound } from 'next/navigation';
export async function GET(request: Request, { params:{ id } }: { params: { id:string } }) {
const [invoiceID, billID] = id.split('-');
const [locationID, billID] = id.split('-');
const bill = await fetchBillById(invoiceID, billID);
const bill = await fetchBillById(locationID, billID);
if(!bill?.attachment) {
notFound();

4
app/bills/[id]/delete/not-found.tsx Normal file
View File

@@ -0,0 +1,4 @@
import { NotFoundPage } from '@/app/ui/NotFoundPage';
export default () =>
<NotFoundPage title="404 Bill Not Found" description="Could not find the requested Bill." />;

12
app/bills/[id]/delete/page.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { deleteBillById } from '@/app/lib/actions';
import { notFound, redirect } from 'next/navigation';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
const [locationID, billID] = id.split('-');
if(await deleteBillById(locationID, billID) === 0) {
return(notFound());
}
redirect(`/`);
}

20
app/bills/[id]/edit/not-found.tsx
View File

@@ -1,18 +1,4 @@
import Link from 'next/link';
import { FaceFrownIcon } from '@heroicons/react/24/outline';
import { NotFoundPage } from '@/app/ui/NotFoundPage';
export default function NotFound() {
return (
<main className="flex h-full flex-col items-center justify-center gap-2">
<FaceFrownIcon className="w-10 text-gray-400" />
<h2 className="text-xl font-semibold">404 Bill Not Found</h2>
<p>Could not find the requested Bill.</p>
<Link
href="/"
className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
>
Go Back
</Link>
</main>
);
}
export default () =>
<NotFoundPage title="404 Bill Not Found" description="Could not find the requested Bill." />;

12
app/bills/[id]/edit/page.tsx
View File

@@ -1,5 +1,5 @@
import { PlainLocation, PlainBill, MongoLocation } from '@/app/lib/db-types';
import { fetchBillById } from '@/app/lib/fetchBillById';
import { BillingLocation, Bill } from '@/app/lib/db-types';
import { fetchBillById } from '@/app/lib/actions';
import clientPromise from '@/app/lib/mongodb';
import { BillEditForm } from '@/app/ui/BillEditForm';
import { ObjectId } from 'mongodb';
@@ -7,16 +7,16 @@ import { notFound } from 'next/navigation';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
const [invoiceID, billID] = id.split('-');
const [locationID, billID] = id.split('-');
const bill = await fetchBillById(invoiceID, billID);
const bill = await fetchBillById(locationID, billID);
if (!bill) {
notFound();
return(notFound());
}
return (
<main>
<BillEditForm invoiceID={invoiceID} bill={bill} />
<BillEditForm locationID={locationID} bill={bill} />
</main>
);
}

57
app/lib/actions.ts
View File

@@ -4,8 +4,7 @@ import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import clientPromise from './mongodb';
import { ObjectId } from 'mongodb';
import { BillAttachment } from './db-types';
import { BillAttachment, Bill } from './db-types';
export type State = {
errors?: {
@@ -113,7 +112,7 @@ export async function updateBill(locationId: string, billId:string, prevState:St
// find a location with the given locationID
const post = await db.collection<Location>("lokacije").updateOne(
const post = await db.collection<BillingLocation>("lokacije").updateOne(
{
_id: locationId // find a location with the given locationID
},
@@ -121,7 +120,7 @@ export async function updateBill(locationId: string, billId:string, prevState:St
$set: mongoDbSet
}, {
arrayFilters: [
{ "elem._id": { $eq: new ObjectId(billId) } } // find a bill with the given billID
{ "elem._id": { $eq: billId } } // find a bill with the given billID
]
});
@@ -133,4 +132,54 @@ export async function updateBill(locationId: string, billId:string, prevState:St
export async function gotoHome() {
redirect('/');
}
export const fetchBillById = async (locationID:string, billID:string) => {
const client = await clientPromise;
const db = client.db("rezije");
// find a location with the given locationID
const billLocation = await db.collection<BillingLocation>("lokacije").findOne({ _id: locationID })
if(!billLocation) {
console.log(`Location ${locationID} not found`);
return(null);
}
// find a bill with the given billID
const Bill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
if(!Bill) {
console.log('Bill not found');
return(null);
}
const { _id, ...billBase } = Bill;
return({
id: _id.toString(),
...billBase
} as Bill);
}
export const deleteBillById = async (locationID:string, billID:string) => {
const client = await clientPromise;
const db = client.db("rezije");
// find a location with the given locationID
const post = await db.collection<BillingLocation>("lokacije").updateOne(
{
_id: locationID // find a location with the given locationID
},
{
// remove the bill with the given billID
$pull: {
bills: {
_id: billID
}
}
});
return(post.modifiedCount);
}

36
app/lib/db-types.ts
View File

@@ -8,42 +8,20 @@ export interface BillAttachment {
fileContentsBase64: string;
};
/** Bill basic data */
export interface LocationBase {
/** bill object in the form returned by MongoDB */
export interface BillingLocation {
_id: string;
name: string;
/** the value is encoded as yyyymm (i.e. 202301) */
yearMonth: number;
bills: Bill[];
};
/** bill object in the form returned by MongoDB */
export interface MongoLocation {
_id: ObjectId;
bills: MongoBill[];
};
/** plain-object Location version */
export interface PlainLocation {
id: string;
bills: PlainBill[];
};
/** Bill basic data */
export interface BillBase {
export interface Bill {
_id: string;
name: string;
paid: boolean;
attachment?: BillAttachment|null;
notes?: string|null;
};
/** bill object in the form returned by MongoDB */
export interface MongoBill extends BillBase {
_id: ObjectId;
};
/** plain-object bill version */
export interface PlainBill extends BillBase {
id: string;
};
};

33
app/lib/fetchBillById.ts
View File

@@ -1,31 +1,2 @@
import { PlainBill, MongoLocation } from '@/app/lib/db-types';
import clientPromise from '@/app/lib/mongodb';
export const fetchBillById = async (locationID:string, billID:string) => {
const client = await clientPromise;
const db = client.db("rezije");
// find a location with the given locationID
const billLocation = await db.collection<MongoLocation>("lokacije").findOne({ _id: locationID })
if(!billLocation) {
console.log(`Location ${locationID} not found`);
return(null);
}
// find a bill with the given billID
const mongoBill = billLocation?.bills.find(({ _id }) => _id.toString() === billID);
if(!mongoBill) {
console.log('Bill not found');
return(null);
}
const { _id, ...billBase } = mongoBill;
return({
id: _id.toString(),
...billBase
} as PlainBill);
}
import { Bill, BillingLocation } from '@/app/lib/db-types';
import clientPromise from '@/app/lib/mongodb';

5
app/ui/BillBadge.tsx
View File

@@ -1,10 +1,9 @@
import { FC } from "react"
import { Bill, Location } from "@/app/lib/db-types"
import { Bill } from "@/app/lib/db-types"
import Link from "next/link"
import { ObjectId } from "mongodb";
export interface BillBadgeProps {
locationId: ObjectId,
locationId: string,
bill: Bill
};

16
app/ui/BillEditForm.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
import { PlainBill } from "../lib/db-types";
import { Bill } from "../lib/db-types";
import { FC } from "react";
import { useFormState } from "react-dom";
import { gotoHome, updateBill } from "../lib/actions";
@@ -20,14 +20,14 @@ const updateBill2 = (locationId: string, billId:string, prevState:any, formData:
}
export interface BillEditFormProps {
invoiceID: string,
bill: PlainBill
locationID: string,
bill: Bill
}
export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name, paid, attachment, notes } }) => {
export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill: { id, name, paid, attachment, notes } }) => {
const initialState = { message: null, errors: {} };
const updateBillWithId = updateBill2.bind(null, invoiceID, id);
const updateBillWithId = updateBill2.bind(null, locationID, id);
const [ state, dispatch ] = useFormState(updateBillWithId, initialState);
// redirect to the main page
@@ -40,7 +40,9 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<div className="card-body">
<form action={ dispatch }>
<TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
<a href={`/bills/${locationID}-${id}/delete/`}>
<TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
</a>
<input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} required />
<div id="status-error" aria-live="polite" aria-atomic="true">
@@ -55,7 +57,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ invoiceID, bill: { id, name
// <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
attachment ?
<a href={`/attachment/${invoiceID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
<a href={`/attachment/${locationID}-${id}/${attachment.fileName}`} target="_blank" className='text-center block 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)}
</a>

18
app/ui/NotFoundPage.tsx Normal file
View File

@@ -0,0 +1,18 @@
import Link from 'next/link';
import { FaceFrownIcon } from "@heroicons/react/24/outline";
import { FC } from 'react';
export interface NotFoundPageProps {
title?:string,
description?:string,
}
export const NotFoundPage:FC<NotFoundPageProps> = ({ title="404 Not Found", description="Could not find the requested content." }) =>
<main className="flex h-full flex-col items-center justify-center gap-2">
<FaceFrownIcon className="w-10 text-gray-400" />
<h2 className="text-xl font-semibold">{title}</h2>
<p>{description}</p>
<Link href="/" className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400">
Go Back
</Link>
</main>