Etiketten-Vorlagen: gespeicherte Exporte mit frei waehlbaren Spalten
Der Etikettenexport konnte genau eine Sache, und zwar unveraenderlich: sechs
feste Spalten ueber Einzelstuecke. Was fehlte, war genau das, was ein Etikett
brauchbar macht - die eigenen Felder. Eine Kabellaenge oder die Kapazitaet einer
Powerbank steht laengst am Artikel, kam aber in keiner CSV vor. Und jede
Zusammenstellung war beim naechsten Mal wieder weg: Kategorien im React-State,
Trennzeichen im localStorage, Spalten hartkodiert.
Jetzt gibt es benannte Vorlagen mit eigener Spaltenwahl und Reihenfolge, fuer
Einzelstuecke, Artikel und Lagerorte. Eine Tabelle nach dem Vorbild von
DashboardLayout: benannt, Nutzlast als JSON-Text. Ohne user_id - eine Vorlage
gehoert allen, nicht einem Konto.
Spaltenschluessel fuer eigene Felder ist die ID, nicht der key: FieldDefinition.key
ist nur JE KATEGORIE eindeutig, zwei Kategorien duerfen beide "kapazitaet" fuehren.
Die CSV entsteht jetzt im Server statt im Browser. Mit waehlbaren Spalten,
eigenen Feldern und drei Bezugsarten gehoert das an eine Stelle - und zwar
dorthin, wo es sich pruefen laesst. Formel-Injektionsschutz, BOM und CRLF sind
aus der Browser-Fassung mitgenommen. Der Grund, aus dem der QR-Inhalt bisher im
Browser entstand ("nur die Oberflaeche kennt die oeffentliche Adresse"), gilt
allein fuer Lagerorte; dafuer reicht sie ihre Herkunft als Parameter durch.
Die beiden alten Abschnitte weichen den Vorlagen. Beim ersten Start entstehen
zwei mitgelieferte, die genau die bisherigen Spalten fuehren - wer nichts
einstellt, bekommt dasselbe Ergebnis wie vorher.
Dazu laesst sich eine P-touch-Datei hinterlegen. Geprueft wird ueber Endung und
ZIP-Inhalt (label.xml), nicht ueber den Content-Type: Fuer .lbx meldet der
Browser meist application/octet-stream. Eine .lbx merkt sich den Pfad zu ihrer
Datenquelle - auf einem fremden Rechner muss die CSV in P-touch einmal neu
verknuepft werden. Das laesst sich von hier aus nicht loesen; die Datei
dabeizuhaben erspart trotzdem das Suchen.
Sicherung auf Version 4: Vorlagen kommen mit, Kategorien als Pfad und eigene
Felder als Label, weil IDs zwischen zwei Instanzen nicht dieselben sind. Die
.lbx als Base64 - das erste Binaerformat in dieser Sicherung, vertretbar bei
wenigen Kilobyte und einer Vorlage, die ohne ihre Datei nur eine halbe waere.
23 neue Tests (343 gesamt), dazu im Browser durchgespielt: Kabel-Kategorie mit
eigenem Feld, Spalte hinzugefuegt, CSV mit "Länge (m)" und dem Wert, .lbx
hoch- und wieder heruntergeladen (Pruefsumme identisch), PNG und Nicht-ZIP
sauber abgelehnt.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
7372590171
commit
c741df5963
@@ -3,6 +3,7 @@ import { api } from "../api";
|
||||
import { useConfirm } from "../confirm";
|
||||
import Icon from "../components/Icon";
|
||||
import { asTree } from "../categoryTree";
|
||||
import EtikettenVorlagen from "../components/EtikettenVorlagen";
|
||||
import { itemDeepLink } from "../qr";
|
||||
|
||||
// Baut die Etiketten-CSV mit wählbarem Trennzeichen (BOM für Excel-Umlaute).
|
||||
@@ -362,83 +363,7 @@ export default function Transfer() {
|
||||
{mdInfo && <p className="muted small">{mdInfo}</p>}
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<div className="card-head"><Icon name="tag" /><h2>QR-Etiketten-Export (P-touch & Co.)</h2></div>
|
||||
<p className="muted small mt-0">
|
||||
Je Einzelstück eine Zeile: <strong>QR-Inhalt</strong>, UID, Produkt, Marke, Kategorie,
|
||||
Lagerort. In der Etiketten-Software (z.B. P-touch) als <strong>Datenbank</strong>{" "}
|
||||
verknüpfen – sie erzeugt QR-Code und Text automatisch. Ohne Auswahl kommen alle
|
||||
Einzelstücke. Wählst du eine Kategorie, kommen ihre <strong>Unterkategorien
|
||||
automatisch mit</strong> – sie erscheinen unten als „enthalten".
|
||||
</p>
|
||||
<label style={{ maxWidth: 340 }}>
|
||||
Trennzeichen (für die Etiketten-Software)
|
||||
<select value={labelDelim} onChange={(e) => changeDelim(e.target.value)}>
|
||||
<option value=",">Komma ( , ) – z.B. P-touch</option>
|
||||
<option value=";">Semikolon ( ; ) – z.B. Excel (Deutsch)</option>
|
||||
<option value={"\t"}>Tabulator</option>
|
||||
</select>
|
||||
</label>
|
||||
<div className="kat-check-liste">
|
||||
{objTree.map((c) => {
|
||||
const enthalten = abgedecktVon(c.id);
|
||||
const direkt = selCats.has(c.id);
|
||||
return (
|
||||
<label key={c.id}
|
||||
className={`check-inline ${enthalten ? "kat-enthalten" : ""}`}
|
||||
style={{ paddingLeft: c.depth * 18 }}
|
||||
title={enthalten ? `über „${enthalten}" enthalten` : undefined}>
|
||||
<input type="checkbox" checked={direkt || enthalten != null}
|
||||
disabled={enthalten != null}
|
||||
onChange={(e) => toggleCat(c.id, e.target.checked)} />
|
||||
<span>{c.name}</span>
|
||||
{enthalten != null && (
|
||||
<span className="badge nowrap">enthalten</span>
|
||||
)}
|
||||
{enthalten == null && direkt && hatKinder(c.id) && (
|
||||
<span className="badge nowrap">inkl. Unterkategorien</span>
|
||||
)}
|
||||
{enthalten == null && !direkt && hatKinder(c.id) && (
|
||||
<span className="muted small nowrap">+ Unterkategorien</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
{objTree.length === 0 && (
|
||||
<span className="muted small">Noch keine Gegenstands-Kategorien.</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="field-inline" style={{ marginTop: "var(--sp-3)" }}>
|
||||
<button className="btn primary" disabled={labelBusy} onClick={exportLabels}>
|
||||
<Icon name="download" size={16} />{labelBusy ? "Exportiere…" : "Etiketten-CSV herunterladen"}
|
||||
</button>
|
||||
{selCats.size > 0 && (
|
||||
<button type="button" className="btn ghost" onClick={() => setSelCats(new Set())}>
|
||||
Auswahl zurücksetzen ({selCats.size})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{labelInfo && <p className="muted small">{labelInfo}</p>}
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<div className="card-head"><Icon name="location" /><h2>Lagerort-Etiketten-Export (P-touch & Co.)</h2></div>
|
||||
<p className="muted small mt-0">
|
||||
Je Lagerort eine Zeile: <strong>QR-Inhalt</strong>, ID, Lagerort und der{" "}
|
||||
<strong>Pfad</strong> (z.B. „Hedingen → Keller"). In der Etiketten-Software als{" "}
|
||||
<strong>Datenbank</strong> verknüpfen. Verwendet dasselbe Trennzeichen wie oben.
|
||||
Ein gescannter Lagerort-QR öffnet den Ort in der App/Weboberfläche.
|
||||
</p>
|
||||
<div className="field-inline">
|
||||
<button className="btn primary" disabled={locBusy || !locations.length} onClick={exportLocationLabels}>
|
||||
<Icon name="download" size={16} />{locBusy ? "Exportiere…" : "Lagerort-Etiketten-CSV herunterladen"}
|
||||
</button>
|
||||
<span className="muted small" style={{ alignSelf: "center" }}>
|
||||
{locations.length} Lagerort{locations.length === 1 ? "" : "e"}
|
||||
</span>
|
||||
</div>
|
||||
{locInfo && <p className="muted small">{locInfo}</p>}
|
||||
</section>
|
||||
<EtikettenVorlagen onError={setError} />
|
||||
|
||||
<section className="card">
|
||||
<div className="card-head"><Icon name="package" /><h2>CSV-Aufbau</h2></div>
|
||||
|
||||
Reference in New Issue
Block a user