mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-08 15:11:21 +02:00
952 lines
39 KiB
TypeScript
952 lines
39 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { X, Loader2, Printer, CheckSquare, Square, Search, Download } from 'lucide-react';
|
||
import {
|
||
api,
|
||
DEFAULT_SPOOL_LABEL_FIELDS,
|
||
SPOOL_LABEL_FIELDS,
|
||
type SpoolLabelField,
|
||
type SpoolLabelTemplate,
|
||
type InventorySpool,
|
||
} from '../api/client';
|
||
import { Button } from './Button';
|
||
import { useToast } from '../contexts/ToastContext';
|
||
import { getSwatchStyle, resolveSpoolColorName } from '../utils/colors';
|
||
import { useColorCatalogVersion } from '../hooks/useColorCatalogVersion';
|
||
|
||
/** Subset of InventorySpool the modal needs for checkbox rendering. */
|
||
type SpoolForLabel = Pick<
|
||
InventorySpool,
|
||
'id' | 'material' | 'subtype' | 'brand' | 'color_name' | 'color_name_is_synthesized' | 'rgba'
|
||
>;
|
||
|
||
interface LabelTemplatePickerModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
/** All spools the modal can choose from. Typically the page's current
|
||
* filter result so the modal stays consistent with what the user sees. */
|
||
availableSpools: SpoolForLabel[];
|
||
/** IDs to pre-check when the modal opens. Per-card icon passes a single ID;
|
||
* the bulk header button passes every visible ID so the user lands in
|
||
* "all checked" and refines downward. */
|
||
initialSelectedIds: number[];
|
||
spoolmanMode: boolean;
|
||
}
|
||
|
||
interface TemplateOption {
|
||
value: SpoolLabelTemplate;
|
||
i18nKey: string;
|
||
fallbackLabel: string;
|
||
fallbackHint: string;
|
||
}
|
||
|
||
const TEMPLATE_OPTIONS: TemplateOption[] = [
|
||
{
|
||
value: 'ams_holder_74x33',
|
||
i18nKey: 'amsHolderSmall',
|
||
fallbackLabel: 'AMS holder — small (74 × 33 mm)',
|
||
fallbackHint: 'Single label per page; matches the printable label from MakerWorld model 752566 (AMS Filament Label Holder).',
|
||
},
|
||
{
|
||
value: 'ams_holder_75x55',
|
||
i18nKey: 'amsHolderLarge',
|
||
fallbackLabel: 'AMS holder — large (75 × 55 mm)',
|
||
fallbackHint: 'Single label per page; fits the cardstock-insert variant of the AMS Filament Label Holder. Roomy enough for swatch, brand, material, ID, and QR code.',
|
||
},
|
||
{
|
||
value: 'box_40x30',
|
||
i18nKey: 'box40x30',
|
||
fallbackLabel: 'Box label (40 × 30 mm)',
|
||
fallbackHint: 'Single label per page; common DK/Brother roll size, good for filament-bag and storage-bin labels.',
|
||
},
|
||
{
|
||
value: 'box_62x29',
|
||
i18nKey: 'box',
|
||
fallbackLabel: 'Box label (62 × 29 mm)',
|
||
fallbackHint: 'Single label per page; sized for Brother PT/QL and Dymo small labels.',
|
||
},
|
||
{
|
||
value: 'avery_l7160',
|
||
i18nKey: 'averyL7160',
|
||
fallbackLabel: 'Avery L7160 — A4 sheet (38.1 × 63.5 mm × 21)',
|
||
fallbackHint: 'EU sheet stock; 21 labels per A4 page.',
|
||
},
|
||
{
|
||
value: 'avery_5160',
|
||
i18nKey: 'avery5160',
|
||
fallbackLabel: 'Avery 5160 — US Letter sheet (25.4 × 66.7 mm × 30)',
|
||
fallbackHint: 'US sheet stock; 30 labels per Letter page.',
|
||
},
|
||
];
|
||
|
||
const SHEET_CAPACITIES: Partial<Record<SpoolLabelTemplate, number>> = {
|
||
avery_l7160: 21,
|
||
avery_5160: 30,
|
||
};
|
||
|
||
type OutputFormat = 'pdf' | 'png';
|
||
type PngDpi = 203 | 300 | 600;
|
||
const PNG_DPIS: PngDpi[] = [203, 300, 600];
|
||
|
||
// What the checkboxes read, keyed by SpoolLabelField (#2981).
|
||
const FIELD_LABELS: Record<SpoolLabelField, { i18nKey: string; fallback: string }> = {
|
||
brand: { i18nKey: 'brand', fallback: 'Brand' },
|
||
material: { i18nKey: 'material', fallback: 'Material and subtype' },
|
||
hex: { i18nKey: 'hex', fallback: 'Colour code' },
|
||
name: { i18nKey: 'name', fallback: 'Colour or filament name' },
|
||
location: { i18nKey: 'location', fallback: 'Storage location' },
|
||
material_number: { i18nKey: 'materialNumber', fallback: 'Material number' },
|
||
temps: { i18nKey: 'temps', fallback: 'Nozzle temperature' },
|
||
weight: { i18nKey: 'weight', fallback: 'Net weight' },
|
||
note: { i18nKey: 'note', fallback: 'Note' },
|
||
added: { i18nKey: 'added', fallback: 'Date added' },
|
||
qr: { i18nKey: 'qr', fallback: 'QR code' },
|
||
spool_id: { i18nKey: 'spoolId', fallback: 'Spool ID' },
|
||
};
|
||
|
||
// Remembered per browser. Printing only needs inventory access, and a server
|
||
// setting would need settings access to save.
|
||
const PREFS_STORAGE_KEY = 'bambuddy-label-print-options';
|
||
|
||
interface LabelPrefs {
|
||
template: SpoolLabelTemplate;
|
||
/** Chosen lines per template: a 40 × 30 roll and an A4 sheet fit different amounts. */
|
||
fields: Partial<Record<SpoolLabelTemplate, SpoolLabelField[]>>;
|
||
monochrome: boolean;
|
||
format: OutputFormat;
|
||
dpi: PngDpi;
|
||
}
|
||
|
||
const DEFAULT_PREFS: LabelPrefs = {
|
||
template: TEMPLATE_OPTIONS[0].value,
|
||
fields: {},
|
||
monochrome: false,
|
||
format: 'pdf',
|
||
dpi: 300,
|
||
};
|
||
|
||
function loadPrefs(): LabelPrefs {
|
||
let raw: unknown;
|
||
try {
|
||
raw = JSON.parse(localStorage.getItem(PREFS_STORAGE_KEY) ?? 'null');
|
||
} catch {
|
||
return DEFAULT_PREFS;
|
||
}
|
||
if (!raw || typeof raw !== 'object') return DEFAULT_PREFS;
|
||
const r = raw as Partial<Record<keyof LabelPrefs, unknown>>;
|
||
const templates = TEMPLATE_OPTIONS.map((o) => o.value);
|
||
const fields: LabelPrefs['fields'] = {};
|
||
if (r.fields && typeof r.fields === 'object') {
|
||
for (const [tpl, list] of Object.entries(r.fields as Record<string, unknown>)) {
|
||
if (!templates.includes(tpl as SpoolLabelTemplate) || !Array.isArray(list)) continue;
|
||
fields[tpl as SpoolLabelTemplate] = list.filter((f): f is SpoolLabelField =>
|
||
(SPOOL_LABEL_FIELDS as readonly string[]).includes(f),
|
||
);
|
||
}
|
||
}
|
||
return {
|
||
template: templates.includes(r.template as SpoolLabelTemplate)
|
||
? (r.template as SpoolLabelTemplate)
|
||
: DEFAULT_PREFS.template,
|
||
fields,
|
||
monochrome: r.monochrome === true,
|
||
format: r.format === 'png' ? 'png' : 'pdf',
|
||
dpi: PNG_DPIS.includes(r.dpi as PngDpi) ? (r.dpi as PngDpi) : DEFAULT_PREFS.dpi,
|
||
};
|
||
}
|
||
|
||
function savePrefs(prefs: LabelPrefs): void {
|
||
try {
|
||
localStorage.setItem(PREFS_STORAGE_KEY, JSON.stringify(prefs));
|
||
} catch {
|
||
// Private mode or storage disabled: the options just aren't remembered.
|
||
}
|
||
}
|
||
|
||
function fieldsFor(prefs: LabelPrefs, template: SpoolLabelTemplate): SpoolLabelField[] {
|
||
return prefs.fields[template] ?? DEFAULT_SPOOL_LABEL_FIELDS;
|
||
}
|
||
|
||
function openBlobInNewTab(blob: Blob): void {
|
||
const url = window.URL.createObjectURL(blob);
|
||
// Do NOT pass `noopener,noreferrer`: per the WindowFeatures spec, `noopener`
|
||
// forces window.open to return `null` even on success, which made the
|
||
// `if (!win)` popup-block fallback below fire on EVERY click — so the blob
|
||
// tab opened (downloading a random-named PDF on systems without an inline
|
||
// viewer) AND the `<a download>` fallback fired (downloading a second copy
|
||
// named bambuddy-labels.pdf). Two identical PDFs per click — issue #1628.
|
||
// The blob is same-origin, the destination is a passive PDF tab with no
|
||
// script context, and `noreferrer` is a no-op for blob URLs, so dropping
|
||
// these flags has no security impact.
|
||
const win = window.open(url, '_blank');
|
||
if (!win) {
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'bambuddy-labels.pdf';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
}
|
||
setTimeout(() => window.URL.revokeObjectURL(url), 60_000);
|
||
}
|
||
|
||
/** Save a PNG, or a ZIP of PNGs when there were several pages. */
|
||
function downloadBlob(blob: Blob, template: SpoolLabelTemplate): void {
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `bambuddy-labels-${template}.${blob.type === 'application/zip' ? 'zip' : 'png'}`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
setTimeout(() => window.URL.revokeObjectURL(url), 60_000);
|
||
}
|
||
|
||
// Thin wrapper over `getSwatchStyle` from utils/colors so the modal's render
|
||
// sites keep their existing call shape. Transparent (alpha=00) spools now
|
||
// render as a checkerboard pattern instead of collapsing to solid black
|
||
// (#1545).
|
||
function swatchStyle(rgba: string | null | undefined): React.CSSProperties {
|
||
return getSwatchStyle(rgba);
|
||
}
|
||
|
||
function labelColorName(s: SpoolForLabel): string | null {
|
||
return resolveSpoolColorName(s.color_name, s.rgba, s.color_name_is_synthesized);
|
||
}
|
||
|
||
function spoolDisplayName(s: SpoolForLabel): string {
|
||
// Resolved, not stored: most Bambu spools arrive with no colour name on the
|
||
// tag, and picking a label template for "PLA Silk" tells you nothing about
|
||
// which of six red spools you are looking at (#3090).
|
||
const head = labelColorName(s) ?? `${s.material}${s.subtype ? ` ${s.subtype}` : ''}`;
|
||
const brand = s.brand ? ` · ${s.brand}` : '';
|
||
return `${head}${brand}`;
|
||
}
|
||
|
||
/** Build a lowercased haystack that the search input matches against. */
|
||
function searchableText(s: SpoolForLabel): string {
|
||
return [labelColorName(s), s.color_name, s.material, s.subtype, s.brand, `#${s.id}`]
|
||
.filter(Boolean)
|
||
.join(' ')
|
||
.toLowerCase();
|
||
}
|
||
|
||
type SortMode = 'id' | 'color';
|
||
|
||
/** Sort key for the "by colour" mode (#1410).
|
||
*
|
||
* Returns a 2-tuple so JS array compare does the right thing without us having
|
||
* to spell out a comparator: ``[bucket, position]``. Chromatic colours
|
||
* (saturation above the threshold) go in bucket 0 ordered by HSL hue, so the
|
||
* sheet reads as a continuous rainbow. Achromatic colours (white / grey /
|
||
* black, plus missing/invalid rgba) go in bucket 1 ordered by lightness so the
|
||
* neutrals trail at the end of the rainbow going dark → light. Multi-colour
|
||
* spools sort on their primary ``rgba``; their ``extra_colors`` stripe is
|
||
* still rendered on the label itself but doesn't drive the sort.
|
||
*/
|
||
function colorSortKey(rgba: string | null | undefined): [number, number] {
|
||
if (!rgba) return [1, 0]; // unknown colour — bucket with the neutrals at black
|
||
const cleaned = rgba.replace(/^#/, '').slice(0, 6);
|
||
if (cleaned.length !== 6) return [1, 0];
|
||
const r = parseInt(cleaned.slice(0, 2), 16);
|
||
const g = parseInt(cleaned.slice(2, 4), 16);
|
||
const b = parseInt(cleaned.slice(4, 6), 16);
|
||
if ([r, g, b].some(Number.isNaN)) return [1, 0];
|
||
|
||
const rn = r / 255;
|
||
const gn = g / 255;
|
||
const bn = b / 255;
|
||
const max = Math.max(rn, gn, bn);
|
||
const min = Math.min(rn, gn, bn);
|
||
const l = (max + min) / 2;
|
||
const delta = max - min;
|
||
// Saturation in the HSL definition. Achromatic cutoff at 0.1 is generous —
|
||
// matches what feels "grey enough" to a user picking colours, without
|
||
// sending dark muted colours like deep navy into the neutrals bucket.
|
||
const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
|
||
if (s < 0.1) return [1, l]; // neutrals: ordered black → white
|
||
|
||
let h = 0;
|
||
if (max === rn) h = ((gn - bn) / delta) % 6;
|
||
else if (max === gn) h = (bn - rn) / delta + 2;
|
||
else h = (rn - gn) / delta + 4;
|
||
h = h * 60;
|
||
if (h < 0) h += 360;
|
||
return [0, h]; // chromatic: ordered by hue 0..360
|
||
}
|
||
|
||
export function LabelTemplatePickerModal({
|
||
isOpen,
|
||
onClose,
|
||
availableSpools,
|
||
initialSelectedIds,
|
||
spoolmanMode,
|
||
}: LabelTemplatePickerModalProps) {
|
||
const { t } = useTranslation();
|
||
// The spool filter below resolves colour names through the catalog; its
|
||
// memo has to recompute when the catalog finishes loading (#3090).
|
||
const colorCatalogVersion = useColorCatalogVersion();
|
||
const { showToast } = useToast();
|
||
const [pending, setPending] = useState(false);
|
||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
|
||
const [search, setSearch] = useState('');
|
||
const [materialFilter, setMaterialFilter] = useState<string>('');
|
||
const [sortMode, setSortMode] = useState<SortMode>('id');
|
||
const [prefs, setPrefs] = useState<LabelPrefs>(DEFAULT_PREFS);
|
||
const [startingPositionInput, setStartingPositionInput] = useState('1');
|
||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||
const [previewLoading, setPreviewLoading] = useState(false);
|
||
const [previewError, setPreviewError] = useState<string | null>(null);
|
||
// The object URL on screen. Freed when its replacement arrives, not when the
|
||
// options change, so the old label stays visible while the new one renders.
|
||
const previewUrlRef = useRef<string | null>(null);
|
||
|
||
// Sync from caller and reset transient state on open. Intentionally not
|
||
// reactive to props while open — once the user starts editing we don't want
|
||
// a parent re-render to clobber their selection / filter / search. The
|
||
// label options come back as the user last left them.
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
const allowed = new Set(availableSpools.map((s) => s.id));
|
||
setSelectedIds(new Set(initialSelectedIds.filter((id) => allowed.has(id))));
|
||
setSearch('');
|
||
setMaterialFilter('');
|
||
setSortMode('id');
|
||
setPrefs(loadPrefs());
|
||
setStartingPositionInput('1');
|
||
setPending(false);
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [isOpen]);
|
||
|
||
const sortedSpools = useMemo(() => {
|
||
const copy = [...availableSpools];
|
||
if (sortMode === 'color') {
|
||
copy.sort((a, b) => {
|
||
const ka = colorSortKey(a.rgba);
|
||
const kb = colorSortKey(b.rgba);
|
||
if (ka[0] !== kb[0]) return ka[0] - kb[0];
|
||
if (ka[1] !== kb[1]) return ka[1] - kb[1];
|
||
// Stable tiebreaker on ID so identical colours print in a deterministic
|
||
// order across renders.
|
||
return a.id - b.id;
|
||
});
|
||
return copy;
|
||
}
|
||
copy.sort((a, b) => a.id - b.id);
|
||
return copy;
|
||
}, [availableSpools, sortMode]);
|
||
|
||
// Material chips are derived from the *full* available set so they stay
|
||
// stable when search/material filter narrows the visible list.
|
||
const materials = useMemo(() => {
|
||
const set = new Set<string>();
|
||
for (const s of sortedSpools) {
|
||
if (s.material) set.add(s.material.toUpperCase());
|
||
}
|
||
return [...set].sort();
|
||
}, [sortedSpools]);
|
||
|
||
const visibleSpools = useMemo(() => {
|
||
// Named so this memo depends on it: searchableText resolves colour names
|
||
// through the catalog, which resolveSpoolColorName reads from module state
|
||
// the linter cannot follow. Without it a query typed before the catalog
|
||
// loads keeps its empty result (#3090).
|
||
void colorCatalogVersion;
|
||
const q = search.trim().toLowerCase();
|
||
return sortedSpools.filter((s) => {
|
||
if (materialFilter && (s.material || '').toUpperCase() !== materialFilter) return false;
|
||
if (q && !searchableText(s).includes(q)) return false;
|
||
return true;
|
||
});
|
||
}, [sortedSpools, search, materialFilter, colorCatalogVersion]);
|
||
|
||
const allVisibleChecked =
|
||
visibleSpools.length > 0 && visibleSpools.every((s) => selectedIds.has(s.id));
|
||
|
||
const template = prefs.template;
|
||
const fields = fieldsFor(prefs, template);
|
||
const fieldsKey = fields.join(',');
|
||
// The preview shows the first spool that will print, in print order.
|
||
const previewSpoolId = sortedSpools.find((s) => selectedIds.has(s.id))?.id ?? null;
|
||
|
||
function showPreview(url: string | null) {
|
||
if (previewUrlRef.current) window.URL.revokeObjectURL(previewUrlRef.current);
|
||
previewUrlRef.current = url;
|
||
setPreviewUrl(url);
|
||
}
|
||
|
||
// Re-render the preview a moment after the last change, dropping any
|
||
// request still in flight so a slow answer can't overwrite a newer one.
|
||
useEffect(() => {
|
||
if (!isOpen || previewSpoolId === null) {
|
||
showPreview(null);
|
||
setPreviewError(null);
|
||
setPreviewLoading(false);
|
||
return;
|
||
}
|
||
const controller = new AbortController();
|
||
setPreviewLoading(true);
|
||
const timer = window.setTimeout(async () => {
|
||
const request = {
|
||
spool_id: previewSpoolId,
|
||
template,
|
||
monochrome: prefs.monochrome,
|
||
fields: fieldsKey ? (fieldsKey.split(',') as SpoolLabelField[]) : [],
|
||
};
|
||
try {
|
||
const blob = spoolmanMode
|
||
? await api.previewSpoolmanSpoolLabel(request, controller.signal)
|
||
: await api.previewSpoolLabel(request, controller.signal);
|
||
if (controller.signal.aborted) return;
|
||
showPreview(window.URL.createObjectURL(blob));
|
||
setPreviewError(null);
|
||
} catch (err) {
|
||
if (controller.signal.aborted) return;
|
||
showPreview(null);
|
||
setPreviewError(err instanceof Error ? err.message : String(err));
|
||
} finally {
|
||
if (!controller.signal.aborted) setPreviewLoading(false);
|
||
}
|
||
}, 250);
|
||
return () => {
|
||
window.clearTimeout(timer);
|
||
controller.abort();
|
||
};
|
||
}, [isOpen, previewSpoolId, template, fieldsKey, prefs.monochrome, spoolmanMode]);
|
||
|
||
// Free the last preview when the modal unmounts.
|
||
useEffect(
|
||
() => () => {
|
||
if (previewUrlRef.current) window.URL.revokeObjectURL(previewUrlRef.current);
|
||
},
|
||
[],
|
||
);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
const selectedCount = selectedIds.size;
|
||
const noSelection = selectedCount === 0;
|
||
const sheetCapacity = SHEET_CAPACITIES[template];
|
||
const startingPosition = Number(startingPositionInput);
|
||
const startingPositionIsValid =
|
||
sheetCapacity === undefined ||
|
||
(Number.isInteger(startingPosition) && startingPosition >= 1 && startingPosition <= sheetCapacity);
|
||
const templateOption = TEMPLATE_OPTIONS.find((o) => o.value === template) ?? TEMPLATE_OPTIONS[0];
|
||
|
||
function updatePrefs(change: Partial<LabelPrefs>) {
|
||
setPrefs((prev) => {
|
||
const next = { ...prev, ...change };
|
||
savePrefs(next);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function setFields(next: SpoolLabelField[]) {
|
||
// Stored in print order, so the saved list reads like the label.
|
||
const ordered = SPOOL_LABEL_FIELDS.filter((f) => next.includes(f));
|
||
updatePrefs({ fields: { ...prefs.fields, [template]: ordered } });
|
||
}
|
||
|
||
function toggleField(field: SpoolLabelField) {
|
||
setFields(fields.includes(field) ? fields.filter((f) => f !== field) : [...fields, field]);
|
||
}
|
||
|
||
function toggleOne(id: number) {
|
||
setSelectedIds((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(id)) next.delete(id);
|
||
else next.add(id);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function selectAllVisible() {
|
||
setSelectedIds((prev) => {
|
||
const next = new Set(prev);
|
||
for (const s of visibleSpools) next.add(s.id);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function deselectVisible() {
|
||
setSelectedIds((prev) => {
|
||
const next = new Set(prev);
|
||
for (const s of visibleSpools) next.delete(s.id);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function clearAll() {
|
||
setSelectedIds(new Set());
|
||
}
|
||
|
||
async function handlePrint() {
|
||
if (noSelection || pending || !startingPositionIsValid) return;
|
||
// Order matters: the backend (labels.py) prints labels in the same order
|
||
// we send IDs. Use the sorted list so a "by colour" sort flows through to
|
||
// the output instead of being clobbered by an ascending-ID re-sort.
|
||
const ids = sortedSpools.filter((s) => selectedIds.has(s.id)).map((s) => s.id);
|
||
const request = {
|
||
spool_ids: ids,
|
||
template,
|
||
monochrome: prefs.monochrome,
|
||
starting_position: sheetCapacity === undefined ? 1 : startingPosition,
|
||
fields,
|
||
format: prefs.format,
|
||
dpi: prefs.dpi,
|
||
};
|
||
setPending(true);
|
||
try {
|
||
const blob = spoolmanMode
|
||
? await api.printSpoolmanSpoolLabels(request)
|
||
: await api.printSpoolLabels(request);
|
||
if (prefs.format === 'pdf') openBlobInNewTab(blob);
|
||
else downloadBlob(blob, template);
|
||
onClose();
|
||
} catch (err) {
|
||
const msg = err instanceof Error ? err.message : String(err);
|
||
showToast(
|
||
t('inventory.labels.error', 'Could not generate labels: {{msg}}', { msg }),
|
||
'error',
|
||
);
|
||
} finally {
|
||
setPending(false);
|
||
}
|
||
}
|
||
|
||
const chipClass = (active: boolean) =>
|
||
`px-2 py-0.5 text-xs rounded-full border transition ${
|
||
active
|
||
? 'bg-bambu-green text-bambu-dark border-bambu-green'
|
||
: 'bg-bambu-dark text-bambu-gray border-bambu-dark-tertiary hover:border-bambu-gray'
|
||
}`;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-start sm:items-center justify-center p-4 overflow-y-auto">
|
||
<div
|
||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||
onClick={onClose}
|
||
/>
|
||
|
||
<div
|
||
data-testid="label-template-picker-panel"
|
||
className="relative w-full max-w-5xl bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl max-h-[90vh] overflow-clip flex flex-col my-auto"
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between p-4 border-b border-bambu-dark-tertiary">
|
||
<div className="flex items-center gap-2">
|
||
<Printer className="w-5 h-5 text-bambu-green" />
|
||
<h2 className="text-lg font-semibold text-white">
|
||
{t('inventory.labels.title', 'Print spool labels')}
|
||
</h2>
|
||
{selectedCount > 0 && (
|
||
<span className="text-sm text-bambu-gray">
|
||
({t('inventory.labels.selectedCount', '{{count}} selected', { count: selectedCount })})
|
||
</span>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-1 text-bambu-gray hover:text-white rounded transition-colors"
|
||
aria-label={t('common.close', 'Close')}
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Two columns from md up: which spools on the left, what the label
|
||
looks like on the right. Stacked and scrolled as one on phones. */}
|
||
<div className="flex-1 min-h-0 overflow-y-auto md:overflow-hidden grid grid-cols-1 md:grid-cols-2">
|
||
<div className="flex flex-col min-h-0 md:border-r border-bambu-dark-tertiary">
|
||
{/* Search + material chips */}
|
||
<div className="p-4 space-y-2 border-b border-bambu-dark-tertiary">
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bambu-gray pointer-events-none" />
|
||
<input
|
||
type="search"
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
placeholder={t('inventory.labels.searchPlaceholder', 'Search name, brand, or #ID')}
|
||
className="w-full pl-9 pr-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white text-sm placeholder:text-bambu-gray focus:outline-none focus:border-bambu-green"
|
||
/>
|
||
</div>
|
||
{materials.length > 1 && (
|
||
<div className="flex flex-wrap items-center gap-1.5">
|
||
<span className="text-xs text-bambu-gray mr-1">
|
||
{t('inventory.labels.filterByMaterial', 'Material:')}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setMaterialFilter('')}
|
||
className={`px-2 py-0.5 text-xs rounded-full border transition ${
|
||
materialFilter === ''
|
||
? 'bg-bambu-green text-bambu-dark border-bambu-green'
|
||
: 'bg-bambu-dark text-bambu-gray border-bambu-dark-tertiary hover:border-bambu-gray'
|
||
}`}
|
||
>
|
||
{t('inventory.labels.allMaterials', 'All')}
|
||
</button>
|
||
{materials.map((m) => (
|
||
<button
|
||
key={m}
|
||
type="button"
|
||
onClick={() => setMaterialFilter(m)}
|
||
className={`px-2 py-0.5 text-xs rounded-full border transition ${
|
||
materialFilter === m
|
||
? 'bg-bambu-green text-bambu-dark border-bambu-green'
|
||
: 'bg-bambu-dark text-bambu-gray border-bambu-dark-tertiary hover:border-bambu-gray'
|
||
}`}
|
||
>
|
||
{m}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
<div className="flex flex-wrap items-center gap-1.5">
|
||
<span className="text-xs text-bambu-gray mr-1">
|
||
{t('inventory.labels.sortBy.label')}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setSortMode('id')}
|
||
className={`px-2 py-0.5 text-xs rounded-full border transition ${
|
||
sortMode === 'id'
|
||
? 'bg-bambu-green text-bambu-dark border-bambu-green'
|
||
: 'bg-bambu-dark text-bambu-gray border-bambu-dark-tertiary hover:border-bambu-gray'
|
||
}`}
|
||
>
|
||
{t('inventory.labels.sortBy.id')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setSortMode('color')}
|
||
className={`px-2 py-0.5 text-xs rounded-full border transition ${
|
||
sortMode === 'color'
|
||
? 'bg-bambu-green text-bambu-dark border-bambu-green'
|
||
: 'bg-bambu-dark text-bambu-gray border-bambu-dark-tertiary hover:border-bambu-gray'
|
||
}`}
|
||
>
|
||
{t('inventory.labels.sortBy.color')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Action bar */}
|
||
<div className="px-4 pt-3 pb-2 flex items-center justify-between gap-3 flex-wrap">
|
||
<span className="text-sm text-bambu-gray">
|
||
{t('inventory.labels.pickSpools', 'Pick which spools to print labels for:')}
|
||
</span>
|
||
<div className="flex items-center gap-3 text-xs">
|
||
<button
|
||
type="button"
|
||
onClick={allVisibleChecked ? deselectVisible : selectAllVisible}
|
||
disabled={visibleSpools.length === 0}
|
||
className="text-bambu-green hover:underline disabled:opacity-50 disabled:no-underline disabled:cursor-not-allowed"
|
||
>
|
||
{allVisibleChecked
|
||
? t('inventory.labels.deselectVisible', 'Deselect visible')
|
||
: t('inventory.labels.selectVisible', 'Select all visible ({{count}})', {
|
||
count: visibleSpools.length,
|
||
})}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={clearAll}
|
||
disabled={selectedCount === 0}
|
||
className="text-bambu-gray hover:text-white hover:underline disabled:opacity-50 disabled:no-underline disabled:cursor-not-allowed"
|
||
>
|
||
{t('inventory.labels.clearAll', 'Clear all')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Spool list */}
|
||
<div className="flex-1 overflow-y-auto px-2 pb-2 min-h-0 max-h-72 md:max-h-none">
|
||
{visibleSpools.length === 0 ? (
|
||
<div className="text-center text-sm text-bambu-gray py-6">
|
||
{sortedSpools.length === 0
|
||
? t('inventory.labels.noSpoolsToShow', 'No spools to show. Adjust your filter and try again.')
|
||
: t('inventory.labels.noMatches', 'No spools match the current search or filter.')}
|
||
</div>
|
||
) : (
|
||
<ul className="space-y-0.5">
|
||
{visibleSpools.map((s) => {
|
||
const checked = selectedIds.has(s.id);
|
||
return (
|
||
<li key={s.id}>
|
||
<label className="flex items-center gap-3 px-2 py-1.5 rounded hover:bg-bambu-dark-tertiary/50 cursor-pointer">
|
||
{checked ? (
|
||
<CheckSquare className="w-4 h-4 text-bambu-green shrink-0" />
|
||
) : (
|
||
<Square className="w-4 h-4 text-bambu-gray shrink-0" />
|
||
)}
|
||
<input
|
||
type="checkbox"
|
||
checked={checked}
|
||
onChange={() => toggleOne(s.id)}
|
||
className="sr-only"
|
||
/>
|
||
<span
|
||
className="w-4 h-4 rounded border border-black/20 shrink-0"
|
||
style={swatchStyle(s.rgba)}
|
||
/>
|
||
<span className="flex-1 min-w-0 truncate text-sm text-white">
|
||
{spoolDisplayName(s)}
|
||
</span>
|
||
<span className="text-xs font-mono text-bambu-gray shrink-0">
|
||
#{s.id}
|
||
</span>
|
||
</label>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="md:overflow-y-auto p-4 space-y-4 border-t md:border-t-0 border-bambu-dark-tertiary">
|
||
{/* Label size */}
|
||
<div className="space-y-1">
|
||
<label htmlFor="label-template" className="text-sm font-medium text-white">
|
||
{t('inventory.labels.template', 'Label size')}
|
||
</label>
|
||
<select
|
||
id="label-template"
|
||
data-testid="label-template-select"
|
||
value={template}
|
||
onChange={(e) => updatePrefs({ template: e.target.value as SpoolLabelTemplate })}
|
||
className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white text-sm focus:outline-none focus:border-bambu-green"
|
||
>
|
||
{TEMPLATE_OPTIONS.map((opt) => (
|
||
<option key={opt.value} value={opt.value}>
|
||
{t(`inventory.labels.templates.${opt.i18nKey}.label`, opt.fallbackLabel)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<p className="text-xs text-bambu-gray">
|
||
{t(`inventory.labels.templates.${templateOption.i18nKey}.hint`, templateOption.fallbackHint)}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Preview */}
|
||
<div className="space-y-1">
|
||
<div className="text-sm font-medium text-white">
|
||
{previewSpoolId === null
|
||
? t('inventory.labels.preview', 'Preview')
|
||
: t('inventory.labels.previewOf', 'Preview of #{{id}}', { id: previewSpoolId })}
|
||
</div>
|
||
<div
|
||
data-testid="label-preview"
|
||
className="relative flex items-center justify-center min-h-40 p-3 rounded-lg bg-bambu-dark border border-bambu-dark-tertiary"
|
||
>
|
||
{previewSpoolId === null ? (
|
||
<span className="text-sm text-bambu-gray text-center">
|
||
{t('inventory.labels.previewNoSelection', 'Select a spool to see its label.')}
|
||
</span>
|
||
) : previewError ? (
|
||
<span className="text-sm text-red-400 text-center">
|
||
{t('inventory.labels.previewError', 'Could not render the preview: {{msg}}', { msg: previewError })}
|
||
</span>
|
||
) : previewUrl ? (
|
||
<img
|
||
src={previewUrl}
|
||
alt={t('inventory.labels.previewAlt', 'Label preview')}
|
||
className="max-h-56 max-w-full object-contain bg-white shadow"
|
||
/>
|
||
) : null}
|
||
{previewLoading && (
|
||
<Loader2 className="absolute top-2 right-2 w-4 h-4 animate-spin text-bambu-green" />
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-bambu-gray">
|
||
{t('inventory.labels.previewHint', 'Lines that don\'t fit on this label size are left out.')}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Label content */}
|
||
<fieldset className="space-y-2">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<legend className="text-sm font-medium text-white">
|
||
{t('inventory.labels.content', 'Print on the label')}
|
||
</legend>
|
||
<button
|
||
type="button"
|
||
onClick={() => setFields(DEFAULT_SPOOL_LABEL_FIELDS)}
|
||
className="text-xs text-bambu-green hover:underline"
|
||
>
|
||
{t('inventory.labels.resetFields', 'Reset to default')}
|
||
</button>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-1">
|
||
{SPOOL_LABEL_FIELDS.map((field) => {
|
||
const checked = fields.includes(field);
|
||
const { i18nKey, fallback } = FIELD_LABELS[field];
|
||
return (
|
||
<label
|
||
key={field}
|
||
className="flex items-center gap-2 py-0.5 cursor-pointer select-none"
|
||
>
|
||
{checked ? (
|
||
<CheckSquare className="w-4 h-4 text-bambu-green shrink-0" />
|
||
) : (
|
||
<Square className="w-4 h-4 text-bambu-gray shrink-0" />
|
||
)}
|
||
<input
|
||
type="checkbox"
|
||
data-testid={`label-field-${field}`}
|
||
checked={checked}
|
||
onChange={() => toggleField(field)}
|
||
className="sr-only"
|
||
/>
|
||
<span className="text-sm text-white">
|
||
{t(`inventory.labels.fields.${i18nKey}`, fallback)}
|
||
</span>
|
||
</label>
|
||
);
|
||
})}
|
||
</div>
|
||
</fieldset>
|
||
|
||
{/* Print options */}
|
||
<div className="space-y-3">
|
||
<label className="inline-flex items-center gap-2 cursor-pointer select-none">
|
||
{prefs.monochrome ? (
|
||
<CheckSquare className="w-4 h-4 text-bambu-green shrink-0" />
|
||
) : (
|
||
<Square className="w-4 h-4 text-bambu-gray shrink-0" />
|
||
)}
|
||
<input
|
||
type="checkbox"
|
||
checked={prefs.monochrome}
|
||
onChange={(e) => updatePrefs({ monochrome: e.target.checked })}
|
||
className="sr-only"
|
||
/>
|
||
<span className="text-sm text-white">
|
||
{t('inventory.labels.monochrome', 'Monochrome (black & white printer)')}
|
||
</span>
|
||
<span className="text-xs text-bambu-gray">
|
||
{t('inventory.labels.monochromeHint', 'Drops the colour swatch and widens the text')}
|
||
</span>
|
||
</label>
|
||
|
||
{sheetCapacity !== undefined && (
|
||
<div className="flex items-start gap-3">
|
||
<label
|
||
htmlFor="label-starting-position"
|
||
className="text-sm text-white whitespace-nowrap pt-1.5"
|
||
>
|
||
{t('inventory.labels.startingPosition', 'Starting label position')}
|
||
</label>
|
||
<input
|
||
id="label-starting-position"
|
||
data-testid="label-starting-position"
|
||
type="number"
|
||
min={1}
|
||
max={sheetCapacity}
|
||
step={1}
|
||
value={startingPositionInput}
|
||
onChange={(event) => setStartingPositionInput(event.target.value)}
|
||
aria-describedby="label-starting-position-help"
|
||
className="w-20 px-2 py-1 bg-bambu-dark border border-bambu-dark-tertiary rounded text-white text-sm focus:outline-none focus:border-bambu-green"
|
||
/>
|
||
<div
|
||
id="label-starting-position-help"
|
||
data-testid="label-starting-position-status"
|
||
className={`text-xs pt-1.5 ${startingPositionIsValid ? 'text-bambu-gray' : 'text-red-400'}`}
|
||
>
|
||
{!startingPositionIsValid
|
||
? t(
|
||
'inventory.labels.startingPositionInvalid',
|
||
'Enter a whole number from 1 to {{capacity}}.',
|
||
{ capacity: sheetCapacity },
|
||
)
|
||
: startingPosition === 1
|
||
? t('inventory.labels.startingPositionFirst', 'Printing starts at position 1.')
|
||
: t(
|
||
'inventory.labels.startingPositionSkipped',
|
||
'Positions 1 through {{lastPosition}} will be left blank on the first sheet.',
|
||
{ lastPosition: startingPosition - 1 },
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex flex-wrap items-center gap-1.5">
|
||
<span className="text-sm text-white mr-1">
|
||
{t('inventory.labels.format', 'Output:')}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
data-testid="label-format-pdf"
|
||
aria-pressed={prefs.format === 'pdf'}
|
||
onClick={() => updatePrefs({ format: 'pdf' })}
|
||
className={chipClass(prefs.format === 'pdf')}
|
||
>
|
||
PDF
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-testid="label-format-png"
|
||
aria-pressed={prefs.format === 'png'}
|
||
onClick={() => updatePrefs({ format: 'png' })}
|
||
className={chipClass(prefs.format === 'png')}
|
||
>
|
||
PNG
|
||
</button>
|
||
{prefs.format === 'png' && (
|
||
<select
|
||
data-testid="label-dpi-select"
|
||
aria-label={t('inventory.labels.dpi', 'Resolution')}
|
||
value={prefs.dpi}
|
||
onChange={(e) => updatePrefs({ dpi: Number(e.target.value) as PngDpi })}
|
||
className="ml-2 px-2 py-0.5 bg-bambu-dark border border-bambu-dark-tertiary rounded text-white text-xs focus:outline-none focus:border-bambu-green"
|
||
>
|
||
{PNG_DPIS.map((dpi) => (
|
||
<option key={dpi} value={dpi}>
|
||
{dpi} dpi
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
</div>
|
||
{prefs.format === 'png' && (
|
||
<p className="text-xs text-bambu-gray">
|
||
{t(
|
||
'inventory.labels.pngHint',
|
||
'For label printer software that takes images. Match your printer\'s resolution; several labels come as a ZIP.',
|
||
)}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-2 px-5 py-3 border-t border-bambu-dark-tertiary">
|
||
<Button variant="secondary" onClick={onClose} disabled={pending}>
|
||
{t('common.cancel', 'Cancel')}
|
||
</Button>
|
||
<Button
|
||
data-testid="label-print-button"
|
||
onClick={handlePrint}
|
||
disabled={noSelection || pending || !startingPositionIsValid}
|
||
>
|
||
{pending ? (
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
) : prefs.format === 'pdf' ? (
|
||
<Printer className="w-4 h-4" />
|
||
) : (
|
||
<Download className="w-4 h-4" />
|
||
)}
|
||
{prefs.format === 'pdf'
|
||
? t('inventory.labels.createPdf', 'Create PDF')
|
||
: t('inventory.labels.downloadPng', 'Download PNG')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|