mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-09-30 11:12:35 +02:00
maziggy
1d344a8536
The app was built dark-first, so hundreds of hardcoded Tailwind semantic text/icon utilities at light shades (text-amber-400, text-blue-300, ...) had no dark: variant. With darkMode:'class' they applied in light theme too, producing washed-out text on pale tints and white cards — including the three reported spots (AMS Drying banner, Archives no-3MF warning, debug-logging banner). Give each a theme-aware pair: a darker readable shade in light theme with the original pinned to dark:, so dark theme is unchanged. ~100 files. The bambu-* CSS-variable palette (self-correcting) and the dark-only SpoolBuddy kiosk are left untouched. Plain text-white is already theme-aware via the existing index.css .text-white override, so it needed no changes.
650 lines
29 KiB
TypeScript
650 lines
29 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { X, Loader2, Package, Search } from 'lucide-react';
|
|
import { api } from '../api/client';
|
|
import type { InventorySpool, SpoolAssignment } from '../api/client';
|
|
import { Button } from './Button';
|
|
import { ConfirmModal } from './ConfirmModal';
|
|
import { useToast } from '../contexts/ToastContext';
|
|
import { filterSpoolsByQuery } from '../utils/inventorySearch';
|
|
import { getSwatchStyle } from '../utils/colors';
|
|
|
|
interface AssignSpoolModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
printerId: number;
|
|
amsId: number;
|
|
trayId: number;
|
|
trayInfo?: {
|
|
type: string;
|
|
material?: string;
|
|
profile?: string;
|
|
color: string;
|
|
location: string;
|
|
};
|
|
spoolmanEnabled?: boolean;
|
|
}
|
|
|
|
export function AssignSpoolModal({ isOpen, onClose, printerId, amsId, trayId, trayInfo, spoolmanEnabled }: AssignSpoolModalProps) {
|
|
const { t } = useTranslation();
|
|
const queryClient = useQueryClient();
|
|
const { showToast } = useToast();
|
|
const [disableFiltering, setDisableFiltering] = useState(false);
|
|
const [selectedSpoolId, setSelectedSpoolId] = useState<number | null>(null);
|
|
const [selectedSpoolmanSpoolId, setSelectedSpoolmanSpoolId] = useState<number | null>(null);
|
|
useEffect(() => {
|
|
setSelectedSpoolId(null);
|
|
setSelectedSpoolmanSpoolId(null);
|
|
}, [disableFiltering]);
|
|
const [searchFilter, setSearchFilter] = useState('');
|
|
const [pendingAssignId, setPendingAssignId] = useState<number | null>(null);
|
|
const [showMismatchConfirm, setShowMismatchConfirm] = useState(false);
|
|
// Profile-only mismatch no longer triggers the popup — the backend's
|
|
// `apply_spool_to_slot_via_mqtt` pushes the spool's slicer profile to the
|
|
// AMS slot on every assign anyway, so warning the user about a profile
|
|
// delta then "fixing" it during the same action was friction without
|
|
// benefit (#1552). Material mismatch still warns because the firmware can
|
|
// refuse a print when type doesn't match; combined material+profile
|
|
// mismatches keep the profile detail in the same popup as the material
|
|
// warning.
|
|
const [mismatchDetails, setMismatchDetails] = useState<{
|
|
type: 'material' | 'partial' | 'material_profile' | 'partial_profile';
|
|
spoolMaterial: string;
|
|
trayMaterial: string;
|
|
spoolProfile?: string;
|
|
trayProfile?: string;
|
|
} | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setDisableFiltering(false);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
// Unique cache key — different consumers of `['inventory-spools']` call
|
|
// `getSpools()` with different `includeArchived` arguments (InventoryPage:
|
|
// true, SpoolBuddyDashboard / SpoolBuddyInventoryPage: false), but they
|
|
// all share the same key. React Query treats them as one query and
|
|
// serves whichever response landed first, so a SpoolBuddy component
|
|
// priming the cache with the archived-excluded payload makes the picker
|
|
// miss spools that *are* archived OR (more subtly) miss any spool that
|
|
// wasn't yet present when SpoolBuddy ran its initial fetch. The picker
|
|
// gets its own key + a fetch-everything call so this consumer is never
|
|
// at the mercy of someone else's cache state. Archived spools are then
|
|
// explicitly excluded client-side because the backend rejects archived
|
|
// assignments with HTTP 400 anyway, so listing them would only let the
|
|
// user click a button that fails.
|
|
const { data: spools, isLoading } = useQuery({
|
|
queryKey: ['inventory-spools', 'assign-modal'],
|
|
queryFn: () => api.getSpools(true),
|
|
enabled: isOpen && !spoolmanEnabled,
|
|
});
|
|
|
|
const { data: assignments } = useQuery({
|
|
queryKey: ['spool-assignments'],
|
|
queryFn: () => api.getAssignments(),
|
|
enabled: isOpen,
|
|
});
|
|
|
|
const { data: settings } = useQuery({
|
|
queryKey: ['settings'],
|
|
queryFn: () => api.getSettings(),
|
|
enabled: isOpen,
|
|
});
|
|
|
|
const { data: spoolmanSpools, isLoading: spoolmanLoading } = useQuery({
|
|
queryKey: ['spoolman-inventory-spools', 'assign-modal'],
|
|
queryFn: () => api.getSpoolmanInventorySpools(false),
|
|
enabled: isOpen && !!spoolmanEnabled,
|
|
});
|
|
|
|
// Spoolman SlotAssignments across all printers — used to filter out spools
|
|
// already bound to another slot. Without this filter the modal offers spools
|
|
// that are already in use elsewhere (e.g. an h2d-1 slot's spool appearing
|
|
// in the x1c-2 assign list), and assigning would silently steal it from
|
|
// the other printer's slot.
|
|
const { data: allSpoolmanAssignments } = useQuery({
|
|
queryKey: ['spoolman-slot-assignments-all'],
|
|
queryFn: () => api.getSpoolmanSlotAssignments(),
|
|
enabled: isOpen && !!spoolmanEnabled,
|
|
});
|
|
|
|
// ids of spools already in some Spoolman slot — excluding the current slot
|
|
// (so a user could in theory re-pick the same spool, though the modal is
|
|
// typically only opened from empty slots).
|
|
const assignedSpoolmanSpoolIds = useMemo(() => {
|
|
if (!allSpoolmanAssignments) return new Set<number>();
|
|
return new Set(
|
|
allSpoolmanAssignments
|
|
.filter(a => !(a.printer_id === printerId && a.ams_id === amsId && a.tray_id === trayId))
|
|
.map(a => a.spoolman_spool_id),
|
|
);
|
|
}, [allSpoolmanAssignments, printerId, amsId, trayId]);
|
|
|
|
// #1414: nudge the printer to republish its state after we assign a
|
|
// spool. The backend assign-spool path already issues an MQTT command,
|
|
// but firmware (especially A1 mini external slots and any non-RFID
|
|
// assignment) doesn't always echo the new tray state back on its own,
|
|
// so the printer card sits on stale data and the user has to press
|
|
// Force-refresh to see the assignment. Calling /refresh-status forces
|
|
// a pushall the way the Force-refresh button does. Failures are
|
|
// intentionally swallowed — the assignment itself succeeded; if the
|
|
// refresh is offline the next poll / websocket update will catch up.
|
|
const nudgePrinterRepublish = () => {
|
|
api.refreshPrinterStatus(printerId).catch(() => {});
|
|
queryClient.invalidateQueries({ queryKey: ['printerStatus', printerId] });
|
|
};
|
|
|
|
const assignMutation = useMutation({
|
|
mutationFn: (spoolId: number) =>
|
|
api.assignSpool({ spool_id: spoolId, printer_id: printerId, ams_id: amsId, tray_id: trayId }),
|
|
onSuccess: (newAssignment) => {
|
|
// Immediately update cache so UI reflects the new assignment without waiting for refetch
|
|
queryClient.setQueryData<SpoolAssignment[]>(['spool-assignments'], (old) => {
|
|
const filtered = (old || []).filter(a =>
|
|
!(a.printer_id === printerId && a.ams_id === amsId && a.tray_id === trayId)
|
|
);
|
|
filtered.push(newAssignment);
|
|
return filtered;
|
|
});
|
|
queryClient.invalidateQueries({ queryKey: ['spool-assignments'] });
|
|
nudgePrinterRepublish();
|
|
// When the AMS slot was empty at assign time (tray_state ∈ {9, 10}), the
|
|
// backend persists the assignment but deliberately skips the MQTT
|
|
// `ams_filament_setting` push because Bambu firmware drops it silently
|
|
// for empty slots. `on_ams_change` re-fires the configuration once a
|
|
// spool is detected in the slot (#1680). The success-but-pending case
|
|
// gets a distinct toast so the user understands the slot hasn't been
|
|
// configured on the printer yet — saying "AMS slot configured" reads
|
|
// as a lie in that state. Mirror of `spoolbuddy/AssignToAmsModal.tsx`,
|
|
// which has handled this since the SpoolBuddy assign flow shipped.
|
|
const toastKey = newAssignment.pending_config
|
|
? 'inventory.assignPendingInsert'
|
|
: 'inventory.assignSuccess';
|
|
showToast(t(toastKey), 'success');
|
|
setShowMismatchConfirm(false);
|
|
setPendingAssignId(null);
|
|
setMismatchDetails(null);
|
|
onClose();
|
|
},
|
|
onError: (error: Error) => {
|
|
showToast(`${t('inventory.assignFailed')}: ${error.message}`, 'error');
|
|
},
|
|
});
|
|
|
|
const assignSpoolmanMutation = useMutation({
|
|
mutationFn: (spoolmanSpoolId: number) =>
|
|
api.assignSpoolmanSlot({
|
|
spoolman_spool_id: spoolmanSpoolId,
|
|
printer_id: printerId,
|
|
ams_id: amsId,
|
|
tray_id: trayId,
|
|
}),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['spoolman-inventory-spools'] });
|
|
queryClient.invalidateQueries({ queryKey: ['spoolman-slot-assignments'] });
|
|
nudgePrinterRepublish();
|
|
showToast(t('inventory.assignSuccess'), 'success');
|
|
onClose();
|
|
},
|
|
onError: (error: Error) => {
|
|
showToast(`${t('inventory.assignFailed')}: ${error.message}`, 'error');
|
|
},
|
|
});
|
|
|
|
// --- Material/profile mismatch logic ---
|
|
const normalizeValue = (value: string | undefined | null) =>
|
|
(value ?? '').trim().toUpperCase();
|
|
|
|
const checkMaterialMatch = (
|
|
spoolMaterial: string | undefined | null,
|
|
trayMaterial: string | undefined | null
|
|
): 'exact' | 'partial' | 'none' => {
|
|
const normalizedSpool = normalizeValue(spoolMaterial);
|
|
const normalizedTray = normalizeValue(trayMaterial);
|
|
|
|
if (!normalizedSpool || !normalizedTray) return 'none';
|
|
if (normalizedSpool === normalizedTray) return 'exact';
|
|
if (normalizedTray.includes(normalizedSpool) || normalizedSpool.includes(normalizedTray)) {
|
|
return 'partial';
|
|
}
|
|
|
|
return 'none';
|
|
};
|
|
|
|
// Bambu Studio / OrcaSlicer profile names carry a printer/nozzle/variant qualifier after
|
|
// `@` (e.g. "Devil Design PLA Basic @Bambu Lab H2D 0.4 nozzle (Custom)"), while the tray's
|
|
// profile is typically the bare base name. Strip the qualifier before comparing so identical
|
|
// base profiles don't trigger a mismatch warning (#1047).
|
|
const stripProfileQualifier = (value: string) => value.split('@')[0].trim();
|
|
|
|
const checkProfileMatch = (
|
|
spoolProfile: string | undefined | null,
|
|
trayProfile: string | undefined | null
|
|
): boolean => {
|
|
const normalizedSpoolProfile = stripProfileQualifier(normalizeValue(spoolProfile));
|
|
const normalizedTrayProfile = stripProfileQualifier(normalizeValue(trayProfile));
|
|
|
|
if (!normalizedSpoolProfile || !normalizedTrayProfile) return false;
|
|
|
|
return normalizedSpoolProfile === normalizedTrayProfile;
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
// Filter out spools already assigned to other slots
|
|
const assignedSpoolIds = new Set(
|
|
(assignments || [])
|
|
.filter(a => !(a.printer_id === printerId && a.ams_id === amsId && a.tray_id === trayId))
|
|
.map(a => a.spool_id)
|
|
);
|
|
// Show every spool that isn't already taken by another slot — including
|
|
// RFID-tagged Bambu Lab spools (#1133). The earlier "manual spools only"
|
|
// gate (tag_uid && tray_uuid both null) blocked the workflow where a
|
|
// user has a Bambu Lab spool in inventory but doesn't want to scan it
|
|
// via SpoolBuddy NFC every time and just wants to pick it from the list.
|
|
// External slots (amsId 254/255) have always been allowed to pick from
|
|
// any spool because the slot itself has no RFID reader; that
|
|
// distinction collapses now that AMS slots also accept any spool.
|
|
//
|
|
// The "Show all spools" toggle (disableFiltering) bypasses BOTH this
|
|
// gate and the material/profile filter below, making it a real escape
|
|
// hatch for cases where MQTT has auto-reassigned a spool to another
|
|
// slot a fraction of a second after a manual unassign — without this,
|
|
// the toggle's label is a lie ("Show all" but actually filters by
|
|
// assignment). The backend's assign_spool route is upsert-per-
|
|
// (printer, ams, tray), so picking a spool that's currently taken by
|
|
// a different slot creates a second assignment row; that's a foot-gun
|
|
// for normal flows but exactly the recovery path the toggle is for.
|
|
const availableSpools = spools?.filter((spool: InventorySpool) =>
|
|
!spool.archived_at &&
|
|
(disableFiltering || !assignedSpoolIds.has(spool.id))
|
|
);
|
|
|
|
// Filtering logic with toggle: search filter always applies, AMS tray profile filter is optional.
|
|
// Show a spool if EITHER the slicer profile matches exactly OR the material overlaps with the
|
|
// tray's material (partial-match both directions — "PLA" spool accepts a "PLA Basic" slot and
|
|
// vice versa). Manually-added inventory spools typically have no slicer_filament_name; gating
|
|
// on strict profile equality alone hid them even when the material matched (#1047).
|
|
let filteredSpools = availableSpools;
|
|
if (!disableFiltering) {
|
|
const trayProfile = stripProfileQualifier(normalizeValue(trayInfo?.profile));
|
|
const trayMaterial = normalizeValue(trayInfo?.material || trayInfo?.type);
|
|
if (trayProfile || trayMaterial) {
|
|
filteredSpools = filteredSpools?.filter((spool: InventorySpool) => {
|
|
const spoolProfile = stripProfileQualifier(normalizeValue(spool.slicer_filament_name || spool.slicer_filament));
|
|
const spoolMaterial = normalizeValue(spool.material);
|
|
if (trayProfile && spoolProfile && spoolProfile === trayProfile) return true;
|
|
if (trayMaterial && spoolMaterial) {
|
|
return (
|
|
spoolMaterial === trayMaterial ||
|
|
trayMaterial.includes(spoolMaterial) ||
|
|
spoolMaterial.includes(trayMaterial)
|
|
);
|
|
}
|
|
// Neither side has filterable info on whatever dimension remains — show it.
|
|
return !spoolProfile && !spoolMaterial;
|
|
});
|
|
}
|
|
}
|
|
if (searchFilter && filteredSpools) {
|
|
filteredSpools = filterSpoolsByQuery(filteredSpools, searchFilter);
|
|
}
|
|
|
|
const handleAssign = () => {
|
|
if (selectedSpoolmanSpoolId !== null) {
|
|
assignSpoolmanMutation.mutate(selectedSpoolmanSpoolId);
|
|
return;
|
|
}
|
|
if (!selectedSpoolId) return;
|
|
const selectedSpool = spools?.find((spool: InventorySpool) => spool.id === selectedSpoolId);
|
|
if (!selectedSpool) {
|
|
showToast(t('inventory.assignFailed'), 'error');
|
|
return;
|
|
}
|
|
|
|
if (!settings?.disable_filament_warnings && trayInfo) {
|
|
const trayMaterial = trayInfo.material || trayInfo.type;
|
|
const materialMatchResult = checkMaterialMatch(selectedSpool.material, trayMaterial);
|
|
const spoolProfile = selectedSpool.slicer_filament_name || selectedSpool.slicer_filament;
|
|
const trayProfile = trayInfo.profile || trayInfo.type;
|
|
const profileMatches = checkProfileMatch(spoolProfile, trayProfile);
|
|
|
|
// Only material-bearing mismatches warn — profile-only deltas are
|
|
// silently resolved by the backend's AMS reconfigure on every assign
|
|
// (#1552).
|
|
if (materialMatchResult !== 'exact') {
|
|
let mismatchType: 'material' | 'partial' | 'material_profile' | 'partial_profile';
|
|
if (materialMatchResult === 'none' && !profileMatches) {
|
|
mismatchType = 'material_profile';
|
|
} else if (materialMatchResult === 'partial' && !profileMatches) {
|
|
mismatchType = 'partial_profile';
|
|
} else if (materialMatchResult === 'none') {
|
|
mismatchType = 'material';
|
|
} else {
|
|
mismatchType = 'partial';
|
|
}
|
|
|
|
setPendingAssignId(selectedSpoolId);
|
|
setMismatchDetails({
|
|
type: mismatchType,
|
|
spoolMaterial: selectedSpool.material || '',
|
|
trayMaterial: trayMaterial || '',
|
|
spoolProfile: spoolProfile || undefined,
|
|
trayProfile: trayProfile || undefined,
|
|
});
|
|
setShowMismatchConfirm(true);
|
|
return;
|
|
}
|
|
}
|
|
assignMutation.mutate(selectedSpoolId);
|
|
};
|
|
|
|
const handleConfirmMismatch = () => {
|
|
if (!pendingAssignId) return;
|
|
assignMutation.mutate(pendingAssignId);
|
|
setShowMismatchConfirm(false);
|
|
setPendingAssignId(null);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 z-[100] 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 className="relative w-full max-w-2xl bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl max-h-[90vh] overflow-hidden 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">
|
|
<Package className="w-5 h-5 text-bambu-green" />
|
|
<h2 className="text-lg font-semibold text-white">{t('inventory.assignSpool')}</h2>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1 text-bambu-gray hover:text-white rounded transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-4 space-y-4 overflow-y-auto">
|
|
{/* Tray info */}
|
|
{trayInfo && (
|
|
<div className="p-3 bg-bambu-dark rounded-lg border border-bambu-dark-tertiary">
|
|
<p className="text-xs text-bambu-gray mb-1">{t('inventory.selectSpool')}:</p>
|
|
<div className="flex items-center gap-2">
|
|
{trayInfo.color && (
|
|
<span
|
|
className="w-4 h-4 rounded-full border border-black/20"
|
|
style={{ backgroundColor: `#${trayInfo.color}` }}
|
|
/>
|
|
)}
|
|
<span className="text-white font-medium">{trayInfo.type || t('ams.emptySlot')}</span>
|
|
<span className="text-bambu-gray">({trayInfo.location})</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Search filter */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bambu-gray" />
|
|
<input
|
|
type="text"
|
|
value={searchFilter}
|
|
onChange={(e) => setSearchFilter(e.target.value)}
|
|
placeholder={t('inventory.searchSpools')}
|
|
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>
|
|
|
|
{/* Spool list */}
|
|
<div className="space-y-3">
|
|
{!spoolmanEnabled && (isLoading ? (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="w-6 h-6 text-bambu-green animate-spin" />
|
|
</div>
|
|
) : filteredSpools && filteredSpools.length > 0 ? (
|
|
<div className="max-h-96 overflow-y-auto grid grid-cols-2 sm:grid-cols-3 gap-2">
|
|
{filteredSpools.map((spool: InventorySpool) => (
|
|
<button
|
|
key={spool.id}
|
|
onClick={() => { setSelectedSpoolId(spool.id); setSelectedSpoolmanSpoolId(null); }}
|
|
title={spool.note || undefined}
|
|
className={`p-2.5 rounded-lg border text-left transition-colors ${
|
|
selectedSpoolId === spool.id
|
|
? 'bg-bambu-green/20 border-bambu-green'
|
|
: 'bg-bambu-dark border-bambu-dark-tertiary hover:border-bambu-gray'
|
|
}`}
|
|
>
|
|
<p className="text-white text-sm font-medium truncate">
|
|
{spool.brand ? `${spool.brand} ` : ''}{spool.material}{spool.subtype ? ` ${spool.subtype}` : ''}
|
|
</p>
|
|
<div className="flex items-center gap-1.5 mt-1">
|
|
{spool.rgba && (
|
|
<span
|
|
className="w-3 h-3 rounded-full border border-black/20 flex-shrink-0"
|
|
style={getSwatchStyle(spool.rgba)}
|
|
/>
|
|
)}
|
|
<span className="text-xs text-bambu-gray truncate">{spool.color_name || ''}</span>
|
|
</div>
|
|
{spool.label_weight && (
|
|
<p className="text-xs text-bambu-gray mt-1">
|
|
{Math.max(0, Math.round(spool.label_weight - spool.weight_used))} / {spool.label_weight}g
|
|
</p>
|
|
)}
|
|
{spool.note && (
|
|
<p className="text-[10px] text-bambu-gray/70 mt-1 truncate" title={spool.note}>
|
|
{spool.note}
|
|
</p>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : availableSpools && availableSpools.length === 0 ? (
|
|
<div className="text-center py-8 text-bambu-gray">
|
|
<p>{t('inventory.noAvailableSpools')}</p>
|
|
{/* Diagnostic counter — when the picker is empty, having
|
|
the raw fetch / filter counts visible makes a
|
|
"spool I expected to see is missing" report
|
|
immediately answerable: if `total fetched` is 0 the
|
|
backend / cache returned nothing; if it's > 0 then
|
|
the archived / assigned-elsewhere filter ate the
|
|
spool and the toggle is the right escape hatch. */}
|
|
{spools && (
|
|
<p className="text-[10px] mt-2 opacity-60">
|
|
{spools.length} fetched · {spools.filter(s => s.archived_at).length} archived ·{' '}
|
|
{spools.filter(s => assignedSpoolIds.has(s.id)).length} assigned to other slots
|
|
</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-bambu-gray">
|
|
<p>{t('inventory.noSpoolsMatch')}</p>
|
|
{availableSpools && (
|
|
<p className="text-[10px] mt-2 opacity-60">
|
|
{availableSpools.length} unassigned spools — {(availableSpools.length) - (filteredSpools?.length ?? 0)} filtered by tray match. Try "Show all spools".
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{spoolmanEnabled && (
|
|
<>
|
|
{spoolmanLoading ? (
|
|
<div className="flex justify-center py-4">
|
|
<Loader2 className="w-5 h-5 text-bambu-green animate-spin" />
|
|
</div>
|
|
) : spoolmanSpools && spoolmanSpools.filter(s => !s.archived_at && !assignedSpoolmanSpoolIds.has(s.id)).length > 0 ? (
|
|
<>
|
|
<p className="text-xs font-medium text-bambu-gray uppercase tracking-wide pt-1">
|
|
{t('inventory.spoolmanSpools')}
|
|
</p>
|
|
<div className="max-h-64 overflow-y-auto grid grid-cols-2 sm:grid-cols-3 gap-2">
|
|
{filterSpoolsByQuery(spoolmanSpools.filter(s => !s.archived_at && !assignedSpoolmanSpoolIds.has(s.id)), searchFilter)
|
|
.map((spool: InventorySpool) => (
|
|
<button
|
|
key={`spoolman-${spool.id}`}
|
|
onClick={() => {
|
|
setSelectedSpoolmanSpoolId(spool.id);
|
|
setSelectedSpoolId(null);
|
|
}}
|
|
title={spool.note || undefined}
|
|
className={`p-2.5 rounded-lg border text-left transition-colors ${
|
|
selectedSpoolmanSpoolId === spool.id
|
|
? 'bg-bambu-green/20 border-bambu-green'
|
|
: 'bg-bambu-dark border-bambu-dark-tertiary hover:border-bambu-gray'
|
|
}`}
|
|
>
|
|
<p className="text-white text-sm font-medium truncate">
|
|
{spool.brand ? `${spool.brand} ` : ''}{spool.material}{spool.subtype ? ` ${spool.subtype}` : ''}
|
|
</p>
|
|
<div className="flex items-center gap-1.5 mt-1">
|
|
{spool.rgba && (
|
|
<span
|
|
className="w-3 h-3 rounded-full border border-black/20 flex-shrink-0"
|
|
style={getSwatchStyle(spool.rgba)}
|
|
/>
|
|
)}
|
|
<span className="text-xs text-bambu-gray truncate">{spool.color_name || ''}</span>
|
|
</div>
|
|
{spool.label_weight && (
|
|
<p className="text-xs text-bambu-gray mt-1">
|
|
{Math.max(0, Math.round(spool.label_weight - spool.weight_used))} / {spool.label_weight}g
|
|
</p>
|
|
)}
|
|
{spool.note && (
|
|
<p className="text-[10px] text-bambu-gray/70 mt-1 truncate" title={spool.note}>
|
|
{spool.note}
|
|
</p>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer with filtering toggle */}
|
|
<div className="flex justify-between items-center p-4 border-t border-bambu-dark-tertiary">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
id="disable-filtering-toggle"
|
|
type="checkbox"
|
|
checked={disableFiltering}
|
|
onChange={() => setDisableFiltering(v => !v)}
|
|
className="accent-bambu-green w-4 h-4 rounded focus:ring-0 border-bambu-dark-tertiary"
|
|
/>
|
|
<label htmlFor="disable-filtering-toggle" className="text-xs text-bambu-gray select-none cursor-pointer">
|
|
{t('inventory.showAllSpools')}
|
|
</label>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="secondary" onClick={onClose}>
|
|
{t('common.cancel')}
|
|
</Button>
|
|
<Button
|
|
onClick={handleAssign}
|
|
disabled={(!selectedSpoolId && selectedSpoolmanSpoolId === null) || assignMutation.isPending || assignSpoolmanMutation.isPending}
|
|
>
|
|
{(assignMutation.isPending || assignSpoolmanMutation.isPending) ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
{t('inventory.assigning')}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Package className="w-4 h-4" />
|
|
{t('inventory.assignSpool')}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{assignMutation.isError && (
|
|
<div className="mx-4 mb-4 p-2 bg-red-100 dark:bg-red-500/20 border border-red-300 dark:border-red-500/50 rounded text-sm text-red-700 dark:text-red-400">
|
|
{(assignMutation.error as Error).message}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{showMismatchConfirm && trayInfo && selectedSpoolId && mismatchDetails && (() => {
|
|
let message = '';
|
|
|
|
if (mismatchDetails.type === 'material') {
|
|
message = t('inventory.assignMismatchMessage', {
|
|
spoolMaterial: mismatchDetails.spoolMaterial,
|
|
trayMaterial: mismatchDetails.trayMaterial,
|
|
location: trayInfo.location,
|
|
});
|
|
} else if (mismatchDetails.type === 'partial') {
|
|
message = t('inventory.assignPartialMismatchMessage', {
|
|
spoolMaterial: mismatchDetails.spoolMaterial,
|
|
trayMaterial: mismatchDetails.trayMaterial,
|
|
location: trayInfo.location,
|
|
});
|
|
} else if (mismatchDetails.type === 'material_profile') {
|
|
message = `${t('inventory.assignMismatchMessage', {
|
|
spoolMaterial: mismatchDetails.spoolMaterial,
|
|
trayMaterial: mismatchDetails.trayMaterial,
|
|
location: trayInfo.location,
|
|
})}\n\n${t('inventory.assignProfileMismatchMessage', {
|
|
spoolProfile: mismatchDetails.spoolProfile || t('common.unknown'),
|
|
trayProfile: mismatchDetails.trayProfile || t('common.unknown'),
|
|
location: trayInfo.location,
|
|
})}`;
|
|
} else if (mismatchDetails.type === 'partial_profile') {
|
|
message = `${t('inventory.assignPartialMismatchMessage', {
|
|
spoolMaterial: mismatchDetails.spoolMaterial,
|
|
trayMaterial: mismatchDetails.trayMaterial,
|
|
location: trayInfo.location,
|
|
})}\n\n${t('inventory.assignProfileMismatchMessage', {
|
|
spoolProfile: mismatchDetails.spoolProfile || t('common.unknown'),
|
|
trayProfile: mismatchDetails.trayProfile || t('common.unknown'),
|
|
location: trayInfo.location,
|
|
})}`;
|
|
}
|
|
|
|
// Always tell the user the AMS slot is going to be reconfigured —
|
|
// the existing wording made "Assign Anyway" sound like the popup was
|
|
// a no-op confirmation, when the backend in fact pushes the spool's
|
|
// profile to the slot on every assign (#1552).
|
|
message = `${message}\n\n${t('inventory.assignReconfigureNote')}`;
|
|
|
|
return (
|
|
<ConfirmModal
|
|
title={t('inventory.assignMismatchTitle')}
|
|
message={message}
|
|
confirmText={t('inventory.assignMismatchConfirm')}
|
|
variant="warning"
|
|
// Sit above the AssignSpoolModal wrapper (z-[100], #1336) —
|
|
// without this the mismatch dialog is hidden behind its parent.
|
|
overlayZIndex="z-[110]"
|
|
isLoading={assignMutation.isPending}
|
|
onConfirm={handleConfirmMismatch}
|
|
onCancel={() => {
|
|
if (!assignMutation.isPending) {
|
|
setShowMismatchConfirm(false);
|
|
setPendingAssignId(null);
|
|
setMismatchDetails(null);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
})()}
|
|
</>
|
|
);
|
|
}
|