implementiran share by link

2024-12-13 17:50:12 +01:00
parent 439de9d305
commit 4ab61f9917
15 changed files with 312 additions and 15 deletions
--- a/app/ui/ViewBillCard.tsx
+++ b/app/ui/ViewBillCard.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { DocumentIcon, CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import { Bill, BillingLocation } from "../lib/db-types";
+import React, { FC } from "react";
+import { updateOrAddBill } from "../lib/actions/billActions";
+import Link from "next/link";
+import { formatYearMonth } from "../lib/format";
+import { useLocale, useTranslations } from "next-intl";
+
+// 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
+const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, billYear:number|undefined, billMonth:number|undefined, prevState:any, formData: FormData) => {
+    // URL encode the file name of the attachment so it is correctly sent to the server
+    const billAttachment = formData.get('billAttachment') as File;
+    formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
+    return updateOrAddBill(locationId, billId, billYear, billMonth, prevState, formData);
+}
+
+export interface ViewBillCardProps {
+    location: BillingLocation,
+    bill?: Bill,
+}
+
+export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
+
+    const t = useTranslations("bill-edit-form");
+    const locale = useLocale();
+
+    const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
+
+    const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
+
+
+    return(
+    <div className="card card-compact card-bordered bg-base-100 shadow-s">
+        <div className="card-body">
+            <h2 className="card-title">{`${formatYearMonth(location.yearMonth)} ${location.name}`}</h2>
+            <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                <h3 className="text-xl dark:text-neutral-300">{name}</h3>
+            </span>
+            <p className={`flex textarea textarea-bordered max-w-[400px] w-full block ${paid ? "bg-green-950" : "bg-red-950"}`}>
+                <span className="font-bold uppercase">{t("paid-checkbox")}</span>
+                <span className="text-right inline-block grow">{paid ? <CheckCircleIcon className="h-[1em] w-[1em] ml-[.5em] text-2xl inline-block text-green-500"/> : <XCircleIcon className="h-[1em] w-[1em] text-2xl inline-block text-red-500" />}</span>
+            </p>
+
+            <p className="flex textarea textarea-bordered max-w-[400px] w-full block">
+                <span className="font-bold uppercase">{t("payed-amount")}</span>
+                <span className="text-right inline-block grow">{payedAmount ? payedAmount/100 : ""}</span>
+            </p>
+            <input type="hidden" name="barcodeImage" value={barcodeImage} />
+            {
+                notes ?
+                        <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                            <p className="font-bold uppercase">{t("notes-placeholder")}</p>
+                            <p className="leading-[1.4em]">
+                                {notes}
+                            </p>
+                        </span>
+                    : null
+            }
+            {
+                attachment ?
+                <span className="textarea textarea-bordered max-w-[400px] w-full grow">
+                    <p className="font-bold uppercase">{t("attachment")}</p>
+                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-2'>
+                        <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                            {decodeURIComponent(attachment.fileName)}
+                    </Link>
+                </span>
+                : null
+            }
+            {
+                barcodeImage ?
+                <div className="p-1">
+                    <label className="label p-2 grow bg-white">
+                        <img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
+                    </label>
+                    <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
+                </div> : null
+            }
+
+            <div className="text-right">
+                <Link className="btn btn-neutral ml-3" href={`/share/location/${locationID}`}>{t("back-button")}</Link>
+            </div>
+
+        </div>
+    </div>);
+}