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

Refactor: Complete barcodeImage removal and hub3aText migration

Browse Source 
This commit completes the migration from storing bitmap barcodes to using
decoded HUB-3A text strings, removing all legacy code while maintaining
backward compatibility during the transition period.

Database & Server Actions:
- billActions: Removed commented legacy barcodeImage code
- locationActions: Updated field references in projections
- monthActions: Use hub3aText when copying bills to new months
- printActions: Support both hub3aText and barcodeImage during migration
  - Added @deprecated annotation to barcodeImage field
  - Filter includes bills with either field
  - Pass both fields to support gradual migration

Barcode Decoder:
- Removed barcodeImage field from DecodeResult type
- Deleted copyBarcodeImage() function (58 lines)
  - No longer generating bitmaps during decode
  - Barcodes now generated on-demand from hub3aText
- Cleaner separation: decoder extracts text, component renders barcode

UI Components:
- Pdf417Barcode: Added optional className prop for styling flexibility
  - Removed unnecessary wrapper div
  - Conditional styling (use className or default dimensions)
- PrintPreview: Use Pdf417Barcode component with fallback to legacy barcodeImage
- ViewBillCard: Major cleanup and migration support
  - Removed unused imports (React, updateOrAddBill, useLocale)
  - Removed unused middleware function
  - Removed unused variables and hidden input
  - Prefer hub3aText with Pdf417Barcode, fallback to barcodeImage
  - Clear legacy support comments

Migration Strategy:
All rendering code now follows the pattern:
1. Prefer hub3aText (new field) when available
2. Fallback to barcodeImage (legacy field) if needed
3. Clear comments marking legacy support code
4. Allows gradual migration without breaking existing bills

Benefits:
- More efficient storage (text vs base64 bitmap)
- Barcodes generated on-demand (not stored)
- Cleaner, more maintainable code
- Consistent use of Pdf417Barcode component
- Removed ~60 lines of unused code

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-23 09:03:53 +01:00
parent 89c06e2799
commit 7a5c503ce9
8 changed files with 54 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/lib/actions/billActions.ts
View File

@@ -146,7 +146,6 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
const billPaid = formData.get('billPaid') === 'on';
const billedTo = (formData.get('billedTo') as BilledTo) ?? BilledTo.Tenant;
// const barcodeImage = formData.get('barcodeImage')?.valueOf() as string; // LEGACY FIELD - not used anymore
const hub3aText = formData.get('hub3aText')?.valueOf() as string;
// update the bill in the mongodb
@@ -165,7 +164,6 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
"bills.$[elem].attachment": billAttachment,
"bills.$[elem].notes": billNotes,
"bills.$[elem].payedAmount": payedAmount,
// "bills.$[elem].barcodeImage": barcodeImage, // LEGACY FIELD - not used anymore
"bills.$[elem].hub3aText": hub3aText,
}: {
@@ -174,7 +172,6 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
"bills.$[elem].billedTo": billedTo,
"bills.$[elem].notes": billNotes,
"bills.$[elem].payedAmount": payedAmount,
// "bills.$[elem].barcodeImage": barcodeImage, // LEGACY FIELD - not used anymore
"bills.$[elem].hub3aText": hub3aText,
};
@@ -201,7 +198,6 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
attachment: billAttachment,
notes: billNotes,
payedAmount,
// barcodeImage, // LEGACY FIELD - not used anymore
hub3aText,
};
@@ -266,7 +262,6 @@ export const updateOrAddBill = withUser(async (user:AuthenticatedUser, locationI
attachment: null, // No attachment for subsequent months
notes: billNotes,
payedAmount: null,
// barcodeImage: undefined, // LEGACY FIELD - not used anymore
hub3aText: undefined,
}
}

2
app/lib/actions/locationActions.ts
View File

@@ -432,7 +432,7 @@ export const fetchAllLocations = withUser(async (user:AuthenticatedUser, year:nu
"seenByTenant": 1,
// "bills.attachment": 0,
// "bills.notes": 0,
// "bills.barcodeImage": 1,
// "bills.hub3aText": 1,
},
},
{

2
app/lib/actions/monthActions.ts
View File

@@ -53,7 +53,7 @@ export const addMonth = withUser(async (user:AuthenticatedUser, { year, month }:
attachment: null,
notes: null,
payedAmount: null,
barcodeImage: undefined,
hub3aText: undefined,
} as Bill
})
} as BillingLocation);

15
app/lib/actions/printActions.ts
View File

@@ -9,7 +9,12 @@ import { unstable_noStore as noStore } from 'next/cache';
export interface PrintBarcodeData {
locationName: string;
billName: string;
barcodeImage: string;
/**
* LEGACY SUPPORT ... untill all bills have been migrated
* @deprecated Use `hub3aText` instead.
*/
barcodeImage?: string;
hub3aText?: string;
payedAmount?: number | null;
}
@@ -42,11 +47,15 @@ export const fetchBarcodeDataForPrint = withUser(async (user: AuthenticatedUser,
for (const location of locations) {
for (const bill of location.bills) {
// Only include bills that have barcode images
if (bill.barcodeImage && bill.barcodeImage.trim() !== "") {
if ( ( bill.hub3aText && bill.hub3aText.trim() !== "") ||
// LEGACY SUPPORT ... untill all bills have been migrated
(bill.barcodeImage && bill.barcodeImage.trim() !== "")
) {
printData.push({
locationName: location.name,
billName: bill.name,
barcodeImage: bill.barcodeImage,
barcodeImage: bill.barcodeImage, // LEGACY SUPPORT ... untill all bills have been migrated
hub3aText: bill.hub3aText,
payedAmount: bill.payedAmount
});
}

54
app/lib/pdf/barcodeDecoder.ts
View File

@@ -206,7 +206,6 @@ const pdf2canvas = async function (pdfFile:File): Promise<Array<HTMLCanvasElemen
export type DecodeResult = {
hub3aText: string,
billInfo: BillInfo,
barcodeImage: string,
};
/**
@@ -278,7 +277,6 @@ const decodeFromCanvas = async (canvas:HTMLCanvasElement): Promise<Array<DecodeR
codesFoundInSection.push({
hub3aText,
billInfo: parseHubText(hub3aText),
barcodeImage: copyBarcodeImage(sectionCanvas, result)
});
}
@@ -311,58 +309,6 @@ const decodeFromCanvas = async (canvas:HTMLCanvasElement): Promise<Array<DecodeR
}
}
/**
* Copies bar code from the given canvas
*
*/
const copyBarcodeImage = (canvas:HTMLCanvasElement, decoderResult:Result):string => {
// get coordinates of bar code
const points = decoderResult.getResultPoints();
// get outter coordinates of the bar code
const codeLocation = points.reduce((acc, point) => {
const x = point.getX();
const y = point.getY();
let result = {
top: y < acc.top ? y: acc.top,
left: x < acc.left ? x: acc.left,
bottom: y > acc.bottom ? y: acc.bottom,
right: x > acc.right ? x: acc.right
};
return({
...result,
width: result.right - result.left,
height: result.bottom - result.top,
});
}, {
top: Number.MAX_SAFE_INTEGER,
left: Number.MAX_SAFE_INTEGER,
bottom: 0,
right: 0,
width: 0,
height: 0
});
// copy section of the canvas containing bar code to another canvas
const tempCanvas = document.createElement('canvas');
const tempContext = tempCanvas.getContext('2d');
tempCanvas.width = codeLocation.width;
tempCanvas.height = codeLocation.height;
// Draw the portion of the original canvas onto the temporary canvas
// Assuming you want to copy a 100x100 pixels square starting from (50, 50) of the original canvas
tempContext?.drawImage(canvas, codeLocation.left, codeLocation.top, codeLocation.width, codeLocation.height, 0, 0, codeLocation.width, codeLocation.height);
// Convert the temporary canvas to a data URL
const dataURL = tempCanvas.toDataURL();
return(dataURL);
}
/** Finds PDF417 code within a base64 encoded image and decodes it */
export const decodeFromImage = async (imageBase64:string): Promise<DecodeResult[]|null> => {
return(await decodeFromCanvas( await image2canvas(imageBase64) ));

6
app/ui/Pdf417Barcode.tsx
View File

@@ -5,7 +5,7 @@ import { generateBarcode } from '../lib/pdf/pdf417';
import { renderBarcode } from '../lib/pdf/renderBarcode';
import { EncodePayment, PaymentParams } from 'hub-3a-payment-encoder';
export const Pdf417Barcode:FC<{hub3aText:string}> = ({hub3aText: hub3a_text}) => {
export const Pdf417Barcode:FC<{hub3aText:string, className?: string}> = ({hub3aText: hub3a_text, className}) => {
const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);
useEffect(() => {
@@ -24,8 +24,6 @@ export const Pdf417Barcode:FC<{hub3aText:string}> = ({hub3aText: hub3a_text}) =>
}
return (
<div>
<img src={bitmapData} style={{ width: "350px", height: "92px" }} />
</div>
<img src={bitmapData} className={className} style={className ? undefined : { width: "350px", height: "92px" }} />
);
}

22
app/ui/PrintPreview.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { PrintBarcodeData } from '../lib/actions/printActions';
import { Pdf417Barcode } from './Pdf417Barcode';
export interface PrintPreviewProps {
data: PrintBarcodeData[];
@@ -141,12 +142,21 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
</td>
<td className="border-2 border-gray-800 px-3 py-1.5 text-center">
<div className="flex justify-center items-center">
<img
src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`}
alt={`Barcode for ${item.billName}`}
className="max-h-28 w-auto border border-gray-300 rounded print-barcode-img"
style={{ maxWidth: '270px' }}
/>
{
item.hub3aText ?
<Pdf417Barcode hub3aText={item.hub3aText} className="max-h-28 w-auto border border-gray-300 rounded print-barcode-img" />
: (
// LEGACY SUPPORT ... untill all bills have been migrated
item.barcodeImage ?
<img
src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`}
alt={`Barcode for ${item.billName}`}
className="max-h-28 w-auto border border-gray-300 rounded print-barcode-img"
style={{ maxWidth: '270px' }}
/> : null
)
}
</div>
</td>
</tr>

46
app/ui/ViewBillCard.tsx
View File

@@ -2,20 +2,11 @@
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 { FC } from "react";
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);
}
import { useTranslations } from "next-intl";
import { Pdf417Barcode } from "./Pdf417Barcode";
export interface ViewBillCardProps {
location: BillingLocation,
@@ -25,11 +16,9 @@ export interface ViewBillCardProps {
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;
const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage, hub3aText } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
const { _id: locationID } = location;
return(
@@ -48,7 +37,6 @@ export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
<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">
@@ -71,13 +59,23 @@ export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
: 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
hub3aText ?
<div className="form-control p-1">
<label className="cursor-pointer label p-2 grow bg-white">
<Pdf417Barcode hub3aText={hub3aText} />
</label>
<p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
</div> :
(
// LEGACY SUPPORT ... untill all bills have been migrated
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">