Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
83182503e3 | ||
|
|
ffef7a50de | ||
|
|
ffb4de7fba | ||
|
|
dd9ab3736b |
@@ -232,7 +232,13 @@ export type Product = {
|
|||||||
input_mode: 'text' | 'datei';
|
input_mode: 'text' | 'datei';
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Format = { id: number; key: string; name: string; product: number };
|
export type Format = {
|
||||||
|
id: number; key: string; name: string; product: number;
|
||||||
|
/** Familie fürs Ausrichtungs-Dropdown (z. B. A5, A6). Leer = eigener Eintrag. */
|
||||||
|
family?: string | null;
|
||||||
|
/** Ausrichtung innerhalb der Familie. Leer = keine Wahl. */
|
||||||
|
orientation?: 'hoch' | 'quer' | null;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Produkt-Schlüssel, die für den angemeldeten Kunden individuell freigeschaltet
|
* Produkt-Schlüssel, die für den angemeldeten Kunden individuell freigeschaltet
|
||||||
@@ -268,6 +274,31 @@ export async function fetchFormats(): Promise<Format[]> {
|
|||||||
return data?.data ?? [];
|
return data?.data ?? [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formate für den Textmengencheck: alle mit show_check=true. Das sind die
|
||||||
|
* Text-Seiten-Formate (A4, A5, DIN lang, A6) – unabhängig davon, ob sie im
|
||||||
|
* öffentlichen Konfigurator bestellbar sind. Adress-Postkarten sind ausgenommen.
|
||||||
|
*/
|
||||||
|
export async function fetchCheckFormats(): Promise<Format[]> {
|
||||||
|
const felder = 'fields=id,key,name,product,family,orientation';
|
||||||
|
try {
|
||||||
|
const data = await request(
|
||||||
|
`/items/formats?${felder}&filter[show_check][_eq]=true&limit=-1`,
|
||||||
|
{ auth: false },
|
||||||
|
);
|
||||||
|
const rows: Format[] = data?.data ?? [];
|
||||||
|
if (rows.length) return rows;
|
||||||
|
} catch {
|
||||||
|
/* Feld show_check evtl. noch nicht angelegt → Fallback unten. */
|
||||||
|
}
|
||||||
|
// Fallback (z. B. vor dem Directus-Bootstrap): aktive Formate, damit der Check nutzbar bleibt.
|
||||||
|
const aktiv = await request(
|
||||||
|
`/items/formats?${felder}&filter[active][_eq]=true&limit=-1`,
|
||||||
|
{ auth: false },
|
||||||
|
);
|
||||||
|
return aktiv?.data ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Preis & Bestellung (Extension skrift-orders) ─────────────────────────── */
|
/* ── Preis & Bestellung (Extension skrift-orders) ─────────────────────────── */
|
||||||
|
|
||||||
export type QuoteLine = { label: string; amount: number; per_unit?: boolean };
|
export type QuoteLine = { label: string; amount: number; per_unit?: boolean };
|
||||||
@@ -394,6 +425,8 @@ export type PreviewInput = {
|
|||||||
realistic?: boolean;
|
realistic?: boolean;
|
||||||
envelope_labeling?: string;
|
envelope_labeling?: string;
|
||||||
envelope_text?: string;
|
envelope_text?: string;
|
||||||
|
/** Textmengencheck: unbegrenzt, ohne Vorschau-Kontingent. */
|
||||||
|
check?: boolean;
|
||||||
entries: unknown[];
|
entries: unknown[];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -584,23 +584,6 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
|
|||||||
useEffect(() => { setPreviewSession(null); },
|
useEffect(() => { setPreviewSession(null); },
|
||||||
[textTemplate, font, format, realistisch, labeling, needsEnvelope, umschlagText, entries]);
|
[textTemplate, font, format, realistisch, labeling, needsEnvelope, umschlagText, entries]);
|
||||||
|
|
||||||
// Empfängerzeilen an die Menge angleichen (nur im Tabellenmodus). Gilt auch im
|
|
||||||
// Extern-Modus: die (vom Betreiber vorgegebene) Menge erzeugt die passende
|
|
||||||
// Anzahl Zeilen – egal ob mit oder ohne Kuvert/Empfänger.
|
|
||||||
useEffect(() => {
|
|
||||||
// Bei vielen Empfängern (Tabelle unpraktisch) wird auf Excel verwiesen und
|
|
||||||
// nicht synchronisiert – AUSSER im Extern-Modus ohne Empfänger-Schritt, wo die
|
|
||||||
// Menge einfach N Blanko-Dokumente erzeugen muss (auch über der Tabellengrenze).
|
|
||||||
if (nurUpload && (!externModus || empfaengerSchritt)) return;
|
|
||||||
setEntries((prev) => {
|
|
||||||
if (prev.length === quantity) return prev;
|
|
||||||
if (prev.length < quantity) {
|
|
||||||
return [...prev, ...Array.from({ length: quantity - prev.length }, leereEntry)];
|
|
||||||
}
|
|
||||||
return prev.slice(0, quantity);
|
|
||||||
});
|
|
||||||
}, [quantity, nurUpload, externModus, empfaengerSchritt]);
|
|
||||||
|
|
||||||
// Extern-Preset (vom Betreiber im Direktlink gesetzt) – der Kunde wählt nichts:
|
// Extern-Preset (vom Betreiber im Direktlink gesetzt) – der Kunde wählt nichts:
|
||||||
// ?extern=1&versand=sammel|einzeln&kuvert=0|1&beschriftung=empfaenger|freitext|keine&menge=N
|
// ?extern=1&versand=sammel|einzeln&kuvert=0|1&beschriftung=empfaenger|freitext|keine&menge=N
|
||||||
// Die Menge ist maßgeblich (greift immer); nur ein Excel-Import passt sie an die
|
// Die Menge ist maßgeblich (greift immer); nur ein Excel-Import passt sie an die
|
||||||
@@ -806,6 +789,27 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
|
|||||||
const eigeneImText = genutztePlatzhalter.filter((p) => !standardSet.has(p.toLowerCase()));
|
const eigeneImText = genutztePlatzhalter.filter((p) => !standardSet.has(p.toLowerCase()));
|
||||||
/** Platzhalter im individuellen Umschlagtext – analog zur Text-Tabelle. */
|
/** Platzhalter im individuellen Umschlagtext – analog zur Text-Tabelle. */
|
||||||
const genutztePlatzhalterUmschlag = useMemo(() => textPlatzhalter(umschlagText), [umschlagText]);
|
const genutztePlatzhalterUmschlag = useMemo(() => textPlatzhalter(umschlagText), [umschlagText]);
|
||||||
|
|
||||||
|
// Müssen pro Dokument eigene Daten erfasst werden? Das ist der Fall bei einem
|
||||||
|
// Empfänger-/Individualtext-Schritt oder bei eigenen Platzhaltern im Brieftext
|
||||||
|
// (jede Zeile trägt andere Werte → oberhalb der Tabellengrenze via Excel).
|
||||||
|
const zeilenDatenNoetig = !!empfaengerSchritt || eigeneImText.length > 0;
|
||||||
|
|
||||||
|
// Empfängerzeilen an die Menge angleichen. Unterhalb der Tabellengrenze immer;
|
||||||
|
// darüber nur, wenn KEINE Pflicht-Zeilendaten nötig sind (z. B. identische
|
||||||
|
// Sammelkarten ohne Empfängerliste) – dann erzeugt die Menge N Blanko-Zeilen.
|
||||||
|
// Werden pro Zeile Daten gebraucht, bleibt es beim Excel-Upload (nicht syncen).
|
||||||
|
// Im Extern-Modus wie bisher: syncen außer bei Empfänger-/Individualtext-Schritt.
|
||||||
|
useEffect(() => {
|
||||||
|
if (nurUpload && (externModus ? empfaengerSchritt : zeilenDatenNoetig)) return;
|
||||||
|
setEntries((prev) => {
|
||||||
|
if (prev.length === quantity) return prev;
|
||||||
|
if (prev.length < quantity) {
|
||||||
|
return [...prev, ...Array.from({ length: quantity - prev.length }, leereEntry)];
|
||||||
|
}
|
||||||
|
return prev.slice(0, quantity);
|
||||||
|
});
|
||||||
|
}, [quantity, nurUpload, externModus, empfaengerSchritt, zeilenDatenNoetig]);
|
||||||
/**
|
/**
|
||||||
* Entry für den Versand ans Backend: löst ALLE im Text/Umschlag genutzten
|
* Entry für den Versand ans Backend: löst ALLE im Text/Umschlag genutzten
|
||||||
* Platzhalter explizit auf (Standard-Platzhalter aus der Adresse via standardWert,
|
* Platzhalter explizit auf (Standard-Platzhalter aus der Adresse via standardWert,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
import { fetchFormats, fetchSettings, generatePreview } from '../lib/api';
|
import { fetchCheckFormats, fetchSettings, generatePreview } from '../lib/api';
|
||||||
import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';
|
import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';
|
||||||
|
|
||||||
/** Schriftarten wie im Konfigurator/manuellen Druck. */
|
/** Schriftarten wie im Konfigurator/manuellen Druck. */
|
||||||
@@ -87,7 +87,9 @@ function overflowMeldung(overflow?: PreviewOverflow[]) {
|
|||||||
export default function Textmenge() {
|
export default function Textmenge() {
|
||||||
const [formate, setFormate] = useState<Format[]>([]);
|
const [formate, setFormate] = useState<Format[]>([]);
|
||||||
const [settings, setSettings] = useState<PublicSettings | null>(null);
|
const [settings, setSettings] = useState<PublicSettings | null>(null);
|
||||||
const [format, setFormat] = useState('a4');
|
// Format wird über Familie (A4/A5/A6/DIN lang) + optionale Ausrichtung (hoch/quer) gewählt.
|
||||||
|
const [familie, setFamilie] = useState('');
|
||||||
|
const [ausrichtung, setAusrichtung] = useState('');
|
||||||
const [font, setFont] = useState('tilda');
|
const [font, setFont] = useState('tilda');
|
||||||
const [realistic, setRealistic] = useState(true);
|
const [realistic, setRealistic] = useState(true);
|
||||||
const [text, setText] = useState('');
|
const [text, setText] = useState('');
|
||||||
@@ -99,15 +101,45 @@ export default function Textmenge() {
|
|||||||
const [gross, setGross] = useState(false);
|
const [gross, setGross] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchFormats()
|
fetchCheckFormats().then(setFormate).catch(() => {});
|
||||||
.then((f) => {
|
|
||||||
setFormate(f);
|
|
||||||
setFormat(f.find((x) => x.key === 'a4')?.key ?? f[0]?.key ?? 'a4');
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
fetchSettings().then(setSettings).catch(() => {});
|
fetchSettings().then(setSettings).catch(() => {});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Formate zu Familien gruppieren (gleiche family = ein Eintrag mit Ausrichtungen).
|
||||||
|
// Formate ohne family bilden je einen eigenen Eintrag (Label = Name).
|
||||||
|
const familien = useMemo(() => {
|
||||||
|
const map = new Map<string, Format[]>();
|
||||||
|
for (const f of formate) {
|
||||||
|
const label = (f.family && f.family.trim()) || f.name;
|
||||||
|
if (!map.has(label)) map.set(label, []);
|
||||||
|
map.get(label)!.push(f);
|
||||||
|
}
|
||||||
|
return [...map.entries()].map(([label, items]) => ({ label, items }));
|
||||||
|
}, [formate]);
|
||||||
|
|
||||||
|
// Aktuelle Familie + verfügbare Ausrichtungen + effektiv gewähltes Format.
|
||||||
|
const aktuelleFamilie = familien.find((fm) => fm.label === familie) ?? familien[0] ?? null;
|
||||||
|
const ausrichtungen = (aktuelleFamilie?.items ?? []).filter((f) => f.orientation);
|
||||||
|
const hatAusrichtung = ausrichtungen.length > 1;
|
||||||
|
const gewaehltesFormat = aktuelleFamilie
|
||||||
|
? (hatAusrichtung
|
||||||
|
? (aktuelleFamilie.items.find((f) => f.orientation === ausrichtung) ?? aktuelleFamilie.items[0])
|
||||||
|
: aktuelleFamilie.items[0])
|
||||||
|
: null;
|
||||||
|
const formatKey = gewaehltesFormat?.key ?? 'a4';
|
||||||
|
|
||||||
|
// Standardauswahl setzen / reparieren, wenn Formate geladen sind oder sich die Familie ändert.
|
||||||
|
useEffect(() => {
|
||||||
|
if (!familien.length) return;
|
||||||
|
const gueltig = familien.some((fm) => fm.label === familie);
|
||||||
|
if (!gueltig) {
|
||||||
|
const start = familien.find((fm) => fm.items.some((f) => f.key === 'a4')) ?? familien[0];
|
||||||
|
setFamilie(start.label);
|
||||||
|
const ori = start.items.filter((f) => f.orientation);
|
||||||
|
setAusrichtung(ori.length > 1 ? (ori[0].orientation ?? '') : '');
|
||||||
|
}
|
||||||
|
}, [familien, familie]);
|
||||||
|
|
||||||
// Escape schließt die Großansicht.
|
// Escape schließt die Großansicht.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!gross) return;
|
if (!gross) return;
|
||||||
@@ -142,7 +174,7 @@ export default function Textmenge() {
|
|||||||
setDoc(null);
|
setDoc(null);
|
||||||
setFehler(null);
|
setFehler(null);
|
||||||
setGross(false);
|
setGross(false);
|
||||||
}, [text, font, format, realistic]);
|
}, [text, font, formatKey, realistic]);
|
||||||
|
|
||||||
async function generieren() {
|
async function generieren() {
|
||||||
if (!text.trim() || laedt) return;
|
if (!text.trim() || laedt) return;
|
||||||
@@ -153,8 +185,9 @@ export default function Textmenge() {
|
|||||||
client_id: clientId(),
|
client_id: clientId(),
|
||||||
text,
|
text,
|
||||||
font,
|
font,
|
||||||
format,
|
format: formatKey,
|
||||||
realistic,
|
realistic,
|
||||||
|
check: true,
|
||||||
entries: [{}],
|
entries: [{}],
|
||||||
});
|
});
|
||||||
if (ergebnis.has_overflow) {
|
if (ergebnis.has_overflow) {
|
||||||
@@ -185,13 +218,34 @@ export default function Textmenge() {
|
|||||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||||
<label className="sk-field" style={{ flex: '1 1 200px' }}>
|
<label className="sk-field" style={{ flex: '1 1 200px' }}>
|
||||||
<span className="sk-label">Format</span>
|
<span className="sk-label">Format</span>
|
||||||
<select className="sk-input" value={format} onChange={(e) => setFormat(e.target.value)}>
|
<select
|
||||||
{formate.length === 0 && <option value="a4">A4</option>}
|
className="sk-input"
|
||||||
{formate.map((f) => (
|
value={aktuelleFamilie?.label ?? ''}
|
||||||
<option key={f.key} value={f.key}>{f.name}</option>
|
onChange={(e) => {
|
||||||
|
setFamilie(e.target.value);
|
||||||
|
const fam = familien.find((fm) => fm.label === e.target.value);
|
||||||
|
const ori = (fam?.items ?? []).filter((f) => f.orientation);
|
||||||
|
setAusrichtung(ori.length > 1 ? (ori[0].orientation ?? '') : '');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{familien.length === 0 && <option value="">A4</option>}
|
||||||
|
{familien.map((fm) => (
|
||||||
|
<option key={fm.label} value={fm.label}>{fm.label}</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
|
{hatAusrichtung && (
|
||||||
|
<label className="sk-field" style={{ flex: '1 1 200px' }}>
|
||||||
|
<span className="sk-label">Ausrichtung</span>
|
||||||
|
<select className="sk-input" value={ausrichtung} onChange={(e) => setAusrichtung(e.target.value)}>
|
||||||
|
{ausrichtungen.map((f) => (
|
||||||
|
<option key={f.key} value={f.orientation ?? ''}>
|
||||||
|
{f.orientation === 'hoch' ? 'Hochformat' : f.orientation === 'quer' ? 'Querformat' : f.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
<label className="sk-field" style={{ flex: '1 1 200px' }}>
|
<label className="sk-field" style={{ flex: '1 1 200px' }}>
|
||||||
<span className="sk-label">Schriftart</span>
|
<span className="sk-label">Schriftart</span>
|
||||||
<select className="sk-input" value={font} onChange={(e) => setFont(e.target.value)}>
|
<select className="sk-input" value={font} onChange={(e) => setFont(e.target.value)}>
|
||||||
|
|||||||
Reference in New Issue
Block a user