feat: Etiketten-Seitenlayout auf dem A4-Bogen frei waehlbar
- LabelTemplate bekommt columns/rows (optional, leer = automatisch passend), plus konfigurierbare Raender/Abstaende - damit ein Etikett exakt auf das vorgedruckte Raster eines physischen Etikettenbogens (z.B. Avery) gelegt werden kann statt nur automatisch berechnet - Startposition beim Drucken waehlbar, fuer bereits angebrochene Boegen (erste Seite startet ab der gewaehlten Position, Folgeseiten wieder von vorne)
This commit is contained in:
1 parent
9659b8d266
commit
c6941a797f
11 files changed
+357
-27
No files matched your search
+9
@@ -0,0 +1,9 @@
|
|||||||
|
-- Explicit A4 sheet layout per LabelTemplate: columns/rows (nullable, null =
|
||||||
|
-- auto-fit) plus configurable page margins and gaps, so a template can be
|
||||||
|
-- made to match a specific physical label sheet's exact printed grid.
|
||||||
|
ALTER TABLE "LabelTemplate" ADD COLUMN "columns" INTEGER;
|
||||||
|
ALTER TABLE "LabelTemplate" ADD COLUMN "rows" INTEGER;
|
||||||
|
ALTER TABLE "LabelTemplate" ADD COLUMN "marginTopMm" DOUBLE PRECISION NOT NULL DEFAULT 5;
|
||||||
|
ALTER TABLE "LabelTemplate" ADD COLUMN "marginLeftMm" DOUBLE PRECISION NOT NULL DEFAULT 5;
|
||||||
|
ALTER TABLE "LabelTemplate" ADD COLUMN "gapXMm" DOUBLE PRECISION NOT NULL DEFAULT 2;
|
||||||
|
ALTER TABLE "LabelTemplate" ADD COLUMN "gapYMm" DOUBLE PRECISION NOT NULL DEFAULT 2;
|
||||||
@@ -864,6 +864,17 @@ model LabelTemplate {
|
|||||||
elements Json @default("[]")
|
elements Json @default("[]")
|
||||||
widthMm Float @default(90)
|
widthMm Float @default(90)
|
||||||
heightMm Float @default(35)
|
heightMm Float @default(35)
|
||||||
|
// A4 sheet layout. columns/rows are nullable: null means "auto-fit as many
|
||||||
|
// as fit" (the original behaviour); a real label sheet product (e.g. a
|
||||||
|
// specific Avery SKU) publishes an exact columns/rows/margin/gap grid, so
|
||||||
|
// setting these lets a template's printed positions match the physical,
|
||||||
|
// pre-die-cut sheet instead of just whatever the naive fit computes.
|
||||||
|
columns Int?
|
||||||
|
rows Int?
|
||||||
|
marginTopMm Float @default(5)
|
||||||
|
marginLeftMm Float @default(5)
|
||||||
|
gapXMm Float @default(2)
|
||||||
|
gapYMm Float @default(2)
|
||||||
isDefault Boolean @default(false)
|
isDefault Boolean @default(false)
|
||||||
active Boolean @default(true)
|
active Boolean @default(true)
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import {
|
|||||||
ArrayMaxSize,
|
ArrayMaxSize,
|
||||||
IsArray,
|
IsArray,
|
||||||
IsBoolean,
|
IsBoolean,
|
||||||
|
IsInt,
|
||||||
IsNumber,
|
IsNumber,
|
||||||
IsOptional,
|
IsOptional,
|
||||||
IsString,
|
IsString,
|
||||||
@@ -36,6 +37,47 @@ export class CreateLabelTemplateDto {
|
|||||||
@Min(10)
|
@Min(10)
|
||||||
heightMm?: number;
|
heightMm?: number;
|
||||||
|
|
||||||
|
@ApiPropertyOptional({
|
||||||
|
description:
|
||||||
|
'Spalten pro A4-Bogen. Leer = automatisch so viele wie passen.',
|
||||||
|
})
|
||||||
|
@IsOptional()
|
||||||
|
@IsInt()
|
||||||
|
@Min(1)
|
||||||
|
columns?: number;
|
||||||
|
|
||||||
|
@ApiPropertyOptional({
|
||||||
|
description: 'Zeilen pro A4-Bogen. Leer = automatisch so viele wie passen.',
|
||||||
|
})
|
||||||
|
@IsOptional()
|
||||||
|
@IsInt()
|
||||||
|
@Min(1)
|
||||||
|
rows?: number;
|
||||||
|
|
||||||
|
@ApiPropertyOptional()
|
||||||
|
@IsOptional()
|
||||||
|
@IsNumber()
|
||||||
|
@Min(0)
|
||||||
|
marginTopMm?: number;
|
||||||
|
|
||||||
|
@ApiPropertyOptional()
|
||||||
|
@IsOptional()
|
||||||
|
@IsNumber()
|
||||||
|
@Min(0)
|
||||||
|
marginLeftMm?: number;
|
||||||
|
|
||||||
|
@ApiPropertyOptional()
|
||||||
|
@IsOptional()
|
||||||
|
@IsNumber()
|
||||||
|
@Min(0)
|
||||||
|
gapXMm?: number;
|
||||||
|
|
||||||
|
@ApiPropertyOptional()
|
||||||
|
@IsOptional()
|
||||||
|
@IsNumber()
|
||||||
|
@Min(0)
|
||||||
|
gapYMm?: number;
|
||||||
|
|
||||||
@ApiPropertyOptional()
|
@ApiPropertyOptional()
|
||||||
@IsOptional()
|
@IsOptional()
|
||||||
@IsBoolean()
|
@IsBoolean()
|
||||||
|
|||||||
@@ -4,8 +4,10 @@ import {
|
|||||||
Delete,
|
Delete,
|
||||||
Get,
|
Get,
|
||||||
Param,
|
Param,
|
||||||
|
ParseIntPipe,
|
||||||
Patch,
|
Patch,
|
||||||
Post,
|
Post,
|
||||||
|
Query,
|
||||||
Res,
|
Res,
|
||||||
} from '@nestjs/common';
|
} from '@nestjs/common';
|
||||||
import { ApiBearerAuth, ApiTags } from '@nestjs/swagger';
|
import { ApiBearerAuth, ApiTags } from '@nestjs/swagger';
|
||||||
@@ -65,11 +67,14 @@ export class LabelTemplatesController {
|
|||||||
async print(
|
async print(
|
||||||
@Param('id') id: string,
|
@Param('id') id: string,
|
||||||
@Param('bottlingBatchId') bottlingBatchId: string,
|
@Param('bottlingBatchId') bottlingBatchId: string,
|
||||||
|
@Query('startPosition', new ParseIntPipe({ optional: true }))
|
||||||
|
startPosition: number | undefined,
|
||||||
@Res() res: Response,
|
@Res() res: Response,
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
const pdf = await this.labelTemplatesService.renderLabelsPdf(
|
const pdf = await this.labelTemplatesService.renderLabelsPdf(
|
||||||
id,
|
id,
|
||||||
bottlingBatchId,
|
bottlingBatchId,
|
||||||
|
startPosition,
|
||||||
);
|
);
|
||||||
res.setHeader('Content-Type', 'application/pdf');
|
res.setHeader('Content-Type', 'application/pdf');
|
||||||
res.setHeader(
|
res.setHeader(
|
||||||
|
|||||||
@@ -64,6 +64,12 @@ describe('LabelTemplatesService', () => {
|
|||||||
elements,
|
elements,
|
||||||
widthMm: 90,
|
widthMm: 90,
|
||||||
heightMm: 35,
|
heightMm: 35,
|
||||||
|
columns: null,
|
||||||
|
rows: null,
|
||||||
|
marginTopMm: 5,
|
||||||
|
marginLeftMm: 5,
|
||||||
|
gapXMm: 2,
|
||||||
|
gapYMm: 2,
|
||||||
isDefault: false,
|
isDefault: false,
|
||||||
active: true,
|
active: true,
|
||||||
};
|
};
|
||||||
@@ -213,5 +219,56 @@ describe('LabelTemplatesService', () => {
|
|||||||
// A PDF with an embedded raster image contains an XObject /Image entry.
|
// A PDF with an embedded raster image contains an XObject /Image entry.
|
||||||
expect(pdf.toString('latin1')).toContain('/Image');
|
expect(pdf.toString('latin1')).toContain('/Image');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function countPages(pdf: Buffer): number {
|
||||||
|
const matches = pdf.toString('latin1').match(/\/Type\s*\/Page[^s]/g);
|
||||||
|
return matches ? matches.length : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
it('uses an explicit columns/rows override instead of auto-fitting', async () => {
|
||||||
|
prisma.labelTemplate.findUnique.mockResolvedValue({
|
||||||
|
...template,
|
||||||
|
columns: 1,
|
||||||
|
rows: 1,
|
||||||
|
});
|
||||||
|
prisma.bottlingBatch.findUnique.mockResolvedValue({
|
||||||
|
id: 'batch-1',
|
||||||
|
jarSize: 500,
|
||||||
|
jarCount: 3,
|
||||||
|
lotNumber: 'L-001',
|
||||||
|
date: new Date('2026-06-01T00:00:00.000Z'),
|
||||||
|
bestBeforeDate: new Date('2028-06-01T00:00:00.000Z'),
|
||||||
|
honeyBatch: { batchNumber: 'HB-001', honeyType: 'Bluetenhonig' },
|
||||||
|
product: { name: 'Glas 500g' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const pdf = await service.renderLabelsPdf('template-1', 'batch-1');
|
||||||
|
|
||||||
|
expect(countPages(pdf)).toBe(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('skips already-used slots on the first sheet via startPosition, but not later sheets', async () => {
|
||||||
|
prisma.labelTemplate.findUnique.mockResolvedValue({
|
||||||
|
...template,
|
||||||
|
columns: 2,
|
||||||
|
rows: 1,
|
||||||
|
});
|
||||||
|
prisma.bottlingBatch.findUnique.mockResolvedValue({
|
||||||
|
id: 'batch-1',
|
||||||
|
jarSize: 500,
|
||||||
|
jarCount: 3,
|
||||||
|
lotNumber: 'L-001',
|
||||||
|
date: new Date('2026-06-01T00:00:00.000Z'),
|
||||||
|
bestBeforeDate: new Date('2028-06-01T00:00:00.000Z'),
|
||||||
|
honeyBatch: { batchNumber: 'HB-001', honeyType: 'Bluetenhonig' },
|
||||||
|
product: { name: 'Glas 500g' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const pdf = await service.renderLabelsPdf('template-1', 'batch-1', 2);
|
||||||
|
|
||||||
|
// perPage=2, skip=1: label 1 fills the remaining slot on page 1,
|
||||||
|
// labels 2-3 fill both slots of page 2.
|
||||||
|
expect(countPages(pdf)).toBe(2);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -13,12 +13,21 @@ import {
|
|||||||
} from './label-element.types';
|
} from './label-element.types';
|
||||||
|
|
||||||
const MM_TO_PT = 72 / 25.4;
|
const MM_TO_PT = 72 / 25.4;
|
||||||
const PAGE_MARGIN_MM = 5;
|
|
||||||
const LABEL_GAP_MM = 2;
|
|
||||||
const A4_WIDTH_MM = 210;
|
const A4_WIDTH_MM = 210;
|
||||||
const A4_HEIGHT_MM = 297;
|
const A4_HEIGHT_MM = 297;
|
||||||
const QR_SOURCE_SIZE_PX = 400;
|
const QR_SOURCE_SIZE_PX = 400;
|
||||||
|
|
||||||
|
interface SheetLayout {
|
||||||
|
widthMm: number;
|
||||||
|
heightMm: number;
|
||||||
|
columns: number | null;
|
||||||
|
rows: number | null;
|
||||||
|
marginTopMm: number;
|
||||||
|
marginLeftMm: number;
|
||||||
|
gapXMm: number;
|
||||||
|
gapYMm: number;
|
||||||
|
}
|
||||||
|
|
||||||
function formatDate(date: Date): string {
|
function formatDate(date: Date): string {
|
||||||
return date.toLocaleDateString('de-DE');
|
return date.toLocaleDateString('de-DE');
|
||||||
}
|
}
|
||||||
@@ -151,6 +160,7 @@ export class LabelTemplatesService {
|
|||||||
async renderLabelsPdf(
|
async renderLabelsPdf(
|
||||||
templateId: string,
|
templateId: string,
|
||||||
bottlingBatchId: string,
|
bottlingBatchId: string,
|
||||||
|
startPosition = 1,
|
||||||
): Promise<Buffer> {
|
): Promise<Buffer> {
|
||||||
const template = await this.findById(templateId);
|
const template = await this.findById(templateId);
|
||||||
const bottlingBatch = await this.prisma.bottlingBatch.findUnique({
|
const bottlingBatch = await this.prisma.bottlingBatch.findUnique({
|
||||||
@@ -193,19 +203,28 @@ export class LabelTemplatesService {
|
|||||||
|
|
||||||
return this.renderPdf(
|
return this.renderPdf(
|
||||||
elements,
|
elements,
|
||||||
template.widthMm,
|
{
|
||||||
template.heightMm,
|
widthMm: template.widthMm,
|
||||||
|
heightMm: template.heightMm,
|
||||||
|
columns: template.columns,
|
||||||
|
rows: template.rows,
|
||||||
|
marginTopMm: template.marginTopMm,
|
||||||
|
marginLeftMm: template.marginLeftMm,
|
||||||
|
gapXMm: template.gapXMm,
|
||||||
|
gapYMm: template.gapYMm,
|
||||||
|
},
|
||||||
bottlingBatch.jarCount,
|
bottlingBatch.jarCount,
|
||||||
qrCodeBuffer,
|
qrCodeBuffer,
|
||||||
|
startPosition,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderPdf(
|
private renderPdf(
|
||||||
elements: LabelElement[],
|
elements: LabelElement[],
|
||||||
widthMm: number,
|
layout: SheetLayout,
|
||||||
heightMm: number,
|
|
||||||
copies: number,
|
copies: number,
|
||||||
qrCodeBuffer: Buffer | null,
|
qrCodeBuffer: Buffer | null,
|
||||||
|
startPosition: number,
|
||||||
): Promise<Buffer> {
|
): Promise<Buffer> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const doc = new PDFDocument({ size: 'A4', margin: 0 });
|
const doc = new PDFDocument({ size: 'A4', margin: 0 });
|
||||||
@@ -214,27 +233,34 @@ export class LabelTemplatesService {
|
|||||||
doc.on('end', () => resolve(Buffer.concat(chunks)));
|
doc.on('end', () => resolve(Buffer.concat(chunks)));
|
||||||
doc.on('error', (error: Error) => reject(error));
|
doc.on('error', (error: Error) => reject(error));
|
||||||
|
|
||||||
const usableWidthMm = A4_WIDTH_MM - 2 * PAGE_MARGIN_MM;
|
const { widthMm, heightMm, marginTopMm, marginLeftMm, gapXMm, gapYMm } =
|
||||||
const usableHeightMm = A4_HEIGHT_MM - 2 * PAGE_MARGIN_MM;
|
layout;
|
||||||
const columns = Math.max(
|
const usableWidthMm = A4_WIDTH_MM - 2 * marginLeftMm;
|
||||||
1,
|
const usableHeightMm = A4_HEIGHT_MM - 2 * marginTopMm;
|
||||||
Math.floor((usableWidthMm + LABEL_GAP_MM) / (widthMm + LABEL_GAP_MM)),
|
const columns =
|
||||||
);
|
layout.columns ??
|
||||||
const rows = Math.max(
|
Math.max(1, Math.floor((usableWidthMm + gapXMm) / (widthMm + gapXMm)));
|
||||||
1,
|
const rows =
|
||||||
Math.floor((usableHeightMm + LABEL_GAP_MM) / (heightMm + LABEL_GAP_MM)),
|
layout.rows ??
|
||||||
);
|
Math.max(
|
||||||
|
1,
|
||||||
|
Math.floor((usableHeightMm + gapYMm) / (heightMm + gapYMm)),
|
||||||
|
);
|
||||||
const perPage = columns * rows;
|
const perPage = columns * rows;
|
||||||
|
// startPosition only skips ahead on the first sheet (partially-used
|
||||||
|
// physical sheet, e.g. a few labels already peeled off) - every sheet
|
||||||
|
// after that always starts fresh at the top-left slot.
|
||||||
|
const skip = Math.min(Math.max(0, startPosition - 1), perPage - 1);
|
||||||
|
|
||||||
for (let index = 0; index < copies; index += 1) {
|
for (let index = 0; index < copies; index += 1) {
|
||||||
const onPage = index % perPage;
|
const slotOnPage = (skip + index) % perPage;
|
||||||
if (index > 0 && onPage === 0) {
|
if (index > 0 && slotOnPage === 0) {
|
||||||
doc.addPage({ size: 'A4', margin: 0 });
|
doc.addPage({ size: 'A4', margin: 0 });
|
||||||
}
|
}
|
||||||
const column = onPage % columns;
|
const column = slotOnPage % columns;
|
||||||
const row = Math.floor(onPage / columns);
|
const row = Math.floor(slotOnPage / columns);
|
||||||
const xMm = PAGE_MARGIN_MM + column * (widthMm + LABEL_GAP_MM);
|
const xMm = marginLeftMm + column * (widthMm + gapXMm);
|
||||||
const yMm = PAGE_MARGIN_MM + row * (heightMm + LABEL_GAP_MM);
|
const yMm = marginTopMm + row * (heightMm + gapYMm);
|
||||||
const originX = xMm * MM_TO_PT;
|
const originX = xMm * MM_TO_PT;
|
||||||
const originY = yMm * MM_TO_PT;
|
const originY = yMm * MM_TO_PT;
|
||||||
const w = widthMm * MM_TO_PT;
|
const w = widthMm * MM_TO_PT;
|
||||||
|
|||||||
@@ -7,6 +7,8 @@ import { toast } from "sonner";
|
|||||||
import { fetchLabelTemplates, printLabels } from "@/lib/label-templates/api";
|
import { fetchLabelTemplates, printLabels } from "@/lib/label-templates/api";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@@ -17,6 +19,7 @@ import {
|
|||||||
|
|
||||||
export function PrintLabelsCard({ bottlingBatchId }: { bottlingBatchId: string }) {
|
export function PrintLabelsCard({ bottlingBatchId }: { bottlingBatchId: string }) {
|
||||||
const [templateId, setTemplateId] = useState("");
|
const [templateId, setTemplateId] = useState("");
|
||||||
|
const [startPosition, setStartPosition] = useState(1);
|
||||||
const { data: templates } = useQuery({
|
const { data: templates } = useQuery({
|
||||||
queryKey: ["label-templates"],
|
queryKey: ["label-templates"],
|
||||||
queryFn: fetchLabelTemplates,
|
queryFn: fetchLabelTemplates,
|
||||||
@@ -28,9 +31,13 @@ export function PrintLabelsCard({ bottlingBatchId }: { bottlingBatchId: string }
|
|||||||
const selectedTemplate = activeTemplates.find(
|
const selectedTemplate = activeTemplates.find(
|
||||||
(template) => template.id === effectiveTemplateId,
|
(template) => template.id === effectiveTemplateId,
|
||||||
);
|
);
|
||||||
|
const slotsPerSheet =
|
||||||
|
selectedTemplate?.columns && selectedTemplate?.rows
|
||||||
|
? selectedTemplate.columns * selectedTemplate.rows
|
||||||
|
: undefined;
|
||||||
|
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: () => printLabels(effectiveTemplateId, bottlingBatchId),
|
mutationFn: () => printLabels(effectiveTemplateId, bottlingBatchId, startPosition),
|
||||||
onError: () => toast.error("Etiketten konnten nicht erstellt werden"),
|
onError: () => toast.error("Etiketten konnten nicht erstellt werden"),
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -65,6 +72,23 @@ export function PrintLabelsCard({ bottlingBatchId }: { bottlingBatchId: string }
|
|||||||
))}
|
))}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label htmlFor="print-start-position">
|
||||||
|
Startposition auf dem Bogen (1 = oben links)
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="print-start-position"
|
||||||
|
type="number"
|
||||||
|
inputMode="numeric"
|
||||||
|
min={1}
|
||||||
|
max={slotsPerSheet}
|
||||||
|
value={startPosition}
|
||||||
|
onChange={(event) => setStartPosition(Math.max(1, Number(event.target.value)))}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Für bereits angebrochene Bögen: Position der ersten noch freien Etikette.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
disabled={!effectiveTemplateId || mutation.isPending}
|
disabled={!effectiveTemplateId || mutation.isPending}
|
||||||
|
|||||||
@@ -40,6 +40,12 @@ export default function EditLabelTemplatePage() {
|
|||||||
elements: template.elements,
|
elements: template.elements,
|
||||||
widthMm: template.widthMm,
|
widthMm: template.widthMm,
|
||||||
heightMm: template.heightMm,
|
heightMm: template.heightMm,
|
||||||
|
columns: template.columns,
|
||||||
|
rows: template.rows,
|
||||||
|
marginTopMm: template.marginTopMm,
|
||||||
|
marginLeftMm: template.marginLeftMm,
|
||||||
|
gapXMm: template.gapXMm,
|
||||||
|
gapYMm: template.gapYMm,
|
||||||
isDefault: template.isDefault,
|
isDefault: template.isDefault,
|
||||||
}}
|
}}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
|
|||||||
+129
-2
@@ -74,6 +74,12 @@ export interface LabelDesignerValue {
|
|||||||
elements: LabelElement[];
|
elements: LabelElement[];
|
||||||
widthMm: number;
|
widthMm: number;
|
||||||
heightMm: number;
|
heightMm: number;
|
||||||
|
columns: number | null;
|
||||||
|
rows: number | null;
|
||||||
|
marginTopMm: number;
|
||||||
|
marginLeftMm: number;
|
||||||
|
gapXMm: number;
|
||||||
|
gapYMm: number;
|
||||||
isDefault: boolean;
|
isDefault: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -117,6 +123,12 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
|
|||||||
const [name, setName] = useState(initial?.name ?? "");
|
const [name, setName] = useState(initial?.name ?? "");
|
||||||
const [widthMm, setWidthMm] = useState(initial?.widthMm ?? 90);
|
const [widthMm, setWidthMm] = useState(initial?.widthMm ?? 90);
|
||||||
const [heightMm, setHeightMm] = useState(initial?.heightMm ?? 35);
|
const [heightMm, setHeightMm] = useState(initial?.heightMm ?? 35);
|
||||||
|
const [columns, setColumns] = useState<number | null>(initial?.columns ?? null);
|
||||||
|
const [rows, setRows] = useState<number | null>(initial?.rows ?? null);
|
||||||
|
const [marginTopMm, setMarginTopMm] = useState(initial?.marginTopMm ?? 5);
|
||||||
|
const [marginLeftMm, setMarginLeftMm] = useState(initial?.marginLeftMm ?? 5);
|
||||||
|
const [gapXMm, setGapXMm] = useState(initial?.gapXMm ?? 2);
|
||||||
|
const [gapYMm, setGapYMm] = useState(initial?.gapYMm ?? 2);
|
||||||
const [isDefault, setIsDefault] = useState(initial?.isDefault ?? false);
|
const [isDefault, setIsDefault] = useState(initial?.isDefault ?? false);
|
||||||
const [elements, setElements] = useState<LabelElement[]>(initial?.elements ?? []);
|
const [elements, setElements] = useState<LabelElement[]>(initial?.elements ?? []);
|
||||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||||
@@ -190,7 +202,19 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleExport() {
|
function handleExport() {
|
||||||
const payload: LabelDesignerValue = { name, elements, widthMm, heightMm, isDefault };
|
const payload: LabelDesignerValue = {
|
||||||
|
name,
|
||||||
|
elements,
|
||||||
|
widthMm,
|
||||||
|
heightMm,
|
||||||
|
columns,
|
||||||
|
rows,
|
||||||
|
marginTopMm,
|
||||||
|
marginLeftMm,
|
||||||
|
gapXMm,
|
||||||
|
gapYMm,
|
||||||
|
isDefault,
|
||||||
|
};
|
||||||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
|
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
@@ -221,6 +245,12 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
|
|||||||
if (typeof value.name === "string" && value.name && !name) setName(value.name);
|
if (typeof value.name === "string" && value.name && !name) setName(value.name);
|
||||||
if (typeof value.widthMm === "number") setWidthMm(value.widthMm);
|
if (typeof value.widthMm === "number") setWidthMm(value.widthMm);
|
||||||
if (typeof value.heightMm === "number") setHeightMm(value.heightMm);
|
if (typeof value.heightMm === "number") setHeightMm(value.heightMm);
|
||||||
|
if (typeof value.columns === "number" || value.columns === null) setColumns(value.columns);
|
||||||
|
if (typeof value.rows === "number" || value.rows === null) setRows(value.rows);
|
||||||
|
if (typeof value.marginTopMm === "number") setMarginTopMm(value.marginTopMm);
|
||||||
|
if (typeof value.marginLeftMm === "number") setMarginLeftMm(value.marginLeftMm);
|
||||||
|
if (typeof value.gapXMm === "number") setGapXMm(value.gapXMm);
|
||||||
|
if (typeof value.gapYMm === "number") setGapYMm(value.gapYMm);
|
||||||
}
|
}
|
||||||
setSelectedId(null);
|
setSelectedId(null);
|
||||||
toast.success("Vorlage importiert.");
|
toast.success("Vorlage importiert.");
|
||||||
@@ -238,7 +268,19 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
|
|||||||
}
|
}
|
||||||
setIsSubmitting(true);
|
setIsSubmitting(true);
|
||||||
try {
|
try {
|
||||||
await onSubmit({ name, elements, widthMm, heightMm, isDefault });
|
await onSubmit({
|
||||||
|
name,
|
||||||
|
elements,
|
||||||
|
widthMm,
|
||||||
|
heightMm,
|
||||||
|
columns,
|
||||||
|
rows,
|
||||||
|
marginTopMm,
|
||||||
|
marginLeftMm,
|
||||||
|
gapXMm,
|
||||||
|
gapYMm,
|
||||||
|
isDefault,
|
||||||
|
});
|
||||||
router.push("/settings/label-templates");
|
router.push("/settings/label-templates");
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("Vorlage konnte nicht gespeichert werden.");
|
toast.error("Vorlage konnte nicht gespeichert werden.");
|
||||||
@@ -298,6 +340,91 @@ export function LabelDesigner({ initial, onSubmit, submitLabel }: LabelDesignerP
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Seiten-Layout (A4)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Spalten/Zeilen leer lassen, um automatisch so viele einzuplanen wie passen. Feste
|
||||||
|
Werte eintragen, um exakt zum vorgedruckten Raster eines Etikettenbogens (z.B.
|
||||||
|
Avery-Vorlage) zu passen.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
|
<Label htmlFor="designer-columns">Spalten</Label>
|
||||||
|
<Input
|
||||||
|
id="designer-columns"
|
||||||
|
type="number"
|
||||||
|
inputMode="numeric"
|
||||||
|
placeholder="Auto"
|
||||||
|
value={columns ?? ""}
|
||||||
|
onChange={(event) =>
|
||||||
|
setColumns(event.target.value === "" ? null : Number(event.target.value))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
|
<Label htmlFor="designer-rows">Zeilen</Label>
|
||||||
|
<Input
|
||||||
|
id="designer-rows"
|
||||||
|
type="number"
|
||||||
|
inputMode="numeric"
|
||||||
|
placeholder="Auto"
|
||||||
|
value={rows ?? ""}
|
||||||
|
onChange={(event) =>
|
||||||
|
setRows(event.target.value === "" ? null : Number(event.target.value))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
|
<Label htmlFor="designer-margin-top">Rand oben (mm)</Label>
|
||||||
|
<Input
|
||||||
|
id="designer-margin-top"
|
||||||
|
type="number"
|
||||||
|
inputMode="decimal"
|
||||||
|
value={marginTopMm}
|
||||||
|
onChange={(event) => setMarginTopMm(Number(event.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
|
<Label htmlFor="designer-margin-left">Rand links (mm)</Label>
|
||||||
|
<Input
|
||||||
|
id="designer-margin-left"
|
||||||
|
type="number"
|
||||||
|
inputMode="decimal"
|
||||||
|
value={marginLeftMm}
|
||||||
|
onChange={(event) => setMarginLeftMm(Number(event.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
|
<Label htmlFor="designer-gap-x">Abstand horizontal (mm)</Label>
|
||||||
|
<Input
|
||||||
|
id="designer-gap-x"
|
||||||
|
type="number"
|
||||||
|
inputMode="decimal"
|
||||||
|
value={gapXMm}
|
||||||
|
onChange={(event) => setGapXMm(Number(event.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
|
<Label htmlFor="designer-gap-y">Abstand vertikal (mm)</Label>
|
||||||
|
<Input
|
||||||
|
id="designer-gap-y"
|
||||||
|
type="number"
|
||||||
|
inputMode="decimal"
|
||||||
|
value={gapYMm}
|
||||||
|
onChange={(event) => setGapYMm(Number(event.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="flex flex-row items-center justify-between gap-2">
|
<CardHeader className="flex flex-row items-center justify-between gap-2">
|
||||||
<CardTitle className="text-base">Elemente</CardTitle>
|
<CardTitle className="text-base">Elemente</CardTitle>
|
||||||
|
|||||||
@@ -27,9 +27,14 @@ export function deactivateLabelTemplate(id: string): Promise<LabelTemplate> {
|
|||||||
return apiFetch<LabelTemplate>(`/label-templates/${id}`, { method: "DELETE" });
|
return apiFetch<LabelTemplate>(`/label-templates/${id}`, { method: "DELETE" });
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function printLabels(templateId: string, bottlingBatchId: string): Promise<void> {
|
export async function printLabels(
|
||||||
|
templateId: string,
|
||||||
|
bottlingBatchId: string,
|
||||||
|
startPosition?: number,
|
||||||
|
): Promise<void> {
|
||||||
|
const query = startPosition && startPosition > 1 ? `?startPosition=${startPosition}` : "";
|
||||||
const { blob, filename } = await apiFetchBlob(
|
const { blob, filename } = await apiFetchBlob(
|
||||||
`/label-templates/${templateId}/print/${bottlingBatchId}`,
|
`/label-templates/${templateId}/print/${bottlingBatchId}${query}`,
|
||||||
"etiketten.pdf",
|
"etiketten.pdf",
|
||||||
);
|
);
|
||||||
downloadBlob(blob, filename);
|
downloadBlob(blob, filename);
|
||||||
|
|||||||
@@ -75,6 +75,12 @@ export interface LabelTemplate {
|
|||||||
elements: LabelElement[];
|
elements: LabelElement[];
|
||||||
widthMm: number;
|
widthMm: number;
|
||||||
heightMm: number;
|
heightMm: number;
|
||||||
|
columns: number | null;
|
||||||
|
rows: number | null;
|
||||||
|
marginTopMm: number;
|
||||||
|
marginLeftMm: number;
|
||||||
|
gapXMm: number;
|
||||||
|
gapYMm: number;
|
||||||
isDefault: boolean;
|
isDefault: boolean;
|
||||||
active: boolean;
|
active: boolean;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
@@ -86,6 +92,12 @@ export interface CreateLabelTemplateInput {
|
|||||||
elements: LabelElement[];
|
elements: LabelElement[];
|
||||||
widthMm?: number;
|
widthMm?: number;
|
||||||
heightMm?: number;
|
heightMm?: number;
|
||||||
|
columns?: number | null;
|
||||||
|
rows?: number | null;
|
||||||
|
marginTopMm?: number;
|
||||||
|
marginLeftMm?: number;
|
||||||
|
gapXMm?: number;
|
||||||
|
gapYMm?: number;
|
||||||
isDefault?: boolean;
|
isDefault?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,5 +106,11 @@ export interface UpdateLabelTemplateInput {
|
|||||||
elements?: LabelElement[];
|
elements?: LabelElement[];
|
||||||
widthMm?: number;
|
widthMm?: number;
|
||||||
heightMm?: number;
|
heightMm?: number;
|
||||||
|
columns?: number | null;
|
||||||
|
rows?: number | null;
|
||||||
|
marginTopMm?: number;
|
||||||
|
marginLeftMm?: number;
|
||||||
|
gapXMm?: number;
|
||||||
|
gapYMm?: number;
|
||||||
isDefault?: boolean;
|
isDefault?: boolean;
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user