Switch auth to plain-text password env var (remove bcrypt)
- Replace ADMIN_PASSWORD_HASH with ADMIN_PASSWORD in auth route and docker-compose - Remove bcryptjs / @types/bcryptjs dependencies - Delete scripts/hashPassword.ts (no longer needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -101,6 +101,8 @@ const modules = {
|
||||
}>
|
||||
) => put<Module>(`/modules/${id}`, data),
|
||||
delete: (id: string) => del<null>(`/modules/${id}`),
|
||||
move: (id: string, rackId: string, uPosition: number) =>
|
||||
post<Module>(`/modules/${id}/move`, { rackId, uPosition }),
|
||||
getPorts: (id: string) => get<Port[]>(`/modules/${id}/ports`),
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import { useState, useEffect, type FormEvent } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import type { ModuleType } from '../../types';
|
||||
import { Modal } from '../ui/Modal';
|
||||
@@ -17,6 +17,8 @@ interface AddModuleModalProps {
|
||||
onClose: () => void;
|
||||
rackId: string;
|
||||
uPosition: number;
|
||||
/** Pre-select a type (e.g. from a palette drag) — skips the type picker step. */
|
||||
initialType?: ModuleType;
|
||||
}
|
||||
|
||||
const ALL_TYPES: ModuleType[] = [
|
||||
@@ -24,17 +26,29 @@ const ALL_TYPES: ModuleType[] = [
|
||||
'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
|
||||
];
|
||||
|
||||
export function AddModuleModal({ open, onClose, rackId, uPosition }: AddModuleModalProps) {
|
||||
export function AddModuleModal({ open, onClose, rackId, uPosition, initialType }: AddModuleModalProps) {
|
||||
const { addModule } = useRackStore();
|
||||
const [selectedType, setSelectedType] = useState<ModuleType | null>(null);
|
||||
const [name, setName] = useState('');
|
||||
const [uSize, setUSize] = useState(1);
|
||||
const [portCount, setPortCount] = useState(0);
|
||||
const [selectedType, setSelectedType] = useState<ModuleType | null>(initialType ?? null);
|
||||
const [name, setName] = useState(initialType ? MODULE_TYPE_LABELS[initialType] : '');
|
||||
const [uSize, setUSize] = useState(initialType ? MODULE_U_DEFAULTS[initialType] : 1);
|
||||
const [portCount, setPortCount] = useState(initialType ? MODULE_PORT_DEFAULTS[initialType] : 0);
|
||||
const [ipAddress, setIpAddress] = useState('');
|
||||
const [manufacturer, setManufacturer] = useState('');
|
||||
const [model, setModel] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Sync state when modal opens with a new initialType (e.g. drag-drop reuse)
|
||||
useEffect(() => {
|
||||
if (open && initialType) {
|
||||
setSelectedType(initialType);
|
||||
setName(MODULE_TYPE_LABELS[initialType]);
|
||||
setUSize(MODULE_U_DEFAULTS[initialType]);
|
||||
setPortCount(MODULE_PORT_DEFAULTS[initialType]);
|
||||
} else if (!open) {
|
||||
reset();
|
||||
}
|
||||
}, [open, initialType]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
function handleTypeSelect(type: ModuleType) {
|
||||
setSelectedType(type);
|
||||
setName(MODULE_TYPE_LABELS[type]);
|
||||
|
||||
@@ -14,7 +14,7 @@ interface PortConfigModalProps {
|
||||
}
|
||||
|
||||
export function PortConfigModal({ portId, open, onClose }: PortConfigModalProps) {
|
||||
const { racks, updateModuleLocal } = useRackStore();
|
||||
const { racks, fetchRacks } = useRackStore();
|
||||
const [port, setPort] = useState<Port | null>(null);
|
||||
const [vlans, setVlans] = useState<Vlan[]>([]);
|
||||
const [label, setLabel] = useState('');
|
||||
@@ -82,12 +82,8 @@ export function PortConfigModal({ portId, open, onClose }: PortConfigModalProps)
|
||||
vlans: vlanAssignments,
|
||||
});
|
||||
|
||||
// Refresh racks to reflect changes
|
||||
const portsInRack = racks.flatMap((r) => r.modules).find((m) => m.ports.some((p) => p.id === portId));
|
||||
if (portsInRack) {
|
||||
const updatedPorts = await apiClient.modules.getPorts(portsInRack.id);
|
||||
updateModuleLocal(portsInRack.id, { ports: updatedPorts });
|
||||
}
|
||||
// Refresh all rack state so port dots and VLAN assignments are current
|
||||
await fetchRacks();
|
||||
|
||||
toast.success('Port saved');
|
||||
onClose();
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
/**
|
||||
* DevicePalette — sidebar showing all available device types.
|
||||
*
|
||||
* SCAFFOLD: Currently a static visual list. Full drag-to-rack DnD requires
|
||||
* @dnd-kit integration with the RackColumn drop targets (see roadmap).
|
||||
*/
|
||||
import { useDraggable } from '@dnd-kit/core';
|
||||
import type { ModuleType } from '../../types';
|
||||
import { MODULE_TYPE_LABELS, MODULE_TYPE_COLORS, MODULE_U_DEFAULTS, MODULE_PORT_DEFAULTS } from '../../lib/constants';
|
||||
import {
|
||||
MODULE_TYPE_LABELS,
|
||||
MODULE_TYPE_COLORS,
|
||||
MODULE_U_DEFAULTS,
|
||||
MODULE_PORT_DEFAULTS,
|
||||
} from '../../lib/constants';
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
const ALL_TYPES: ModuleType[] = [
|
||||
@@ -13,44 +13,51 @@ const ALL_TYPES: ModuleType[] = [
|
||||
'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
|
||||
];
|
||||
|
||||
interface DevicePaletteProps {
|
||||
/** Called when user clicks a device type to place it. */
|
||||
onSelect?: (type: ModuleType) => void;
|
||||
function PaletteItem({ type }: { type: ModuleType }) {
|
||||
const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
|
||||
id: `palette-${type}`,
|
||||
data: { type },
|
||||
});
|
||||
|
||||
const colors = MODULE_TYPE_COLORS[type];
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
{...listeners}
|
||||
{...attributes}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-2 py-1.5 rounded border text-left w-full cursor-grab active:cursor-grabbing transition-all select-none',
|
||||
colors.bg,
|
||||
colors.border,
|
||||
isDragging ? 'opacity-40' : 'hover:brightness-125'
|
||||
)}
|
||||
aria-label={`Drag ${MODULE_TYPE_LABELS[type]} onto a rack slot`}
|
||||
>
|
||||
<div className={cn('w-2 h-2 rounded-sm shrink-0 brightness-150', colors.bg)} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-xs font-medium text-white truncate">
|
||||
{MODULE_TYPE_LABELS[type]}
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-400">
|
||||
{MODULE_U_DEFAULTS[type]}U · {MODULE_PORT_DEFAULTS[type]} ports
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DevicePalette({ onSelect }: DevicePaletteProps) {
|
||||
export function DevicePalette() {
|
||||
return (
|
||||
<aside className="w-44 shrink-0 flex flex-col bg-slate-800 border-r border-slate-700 overflow-y-auto">
|
||||
<div className="px-3 py-2 border-b border-slate-700">
|
||||
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Devices</p>
|
||||
<p className="text-[10px] text-slate-600 mt-0.5">Click a slot, then choose type</p>
|
||||
<p className="text-[10px] text-slate-600 mt-0.5">Drag onto a slot or click a slot</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-2">
|
||||
{ALL_TYPES.map((type) => {
|
||||
const colors = MODULE_TYPE_COLORS[type];
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => onSelect?.(type)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-2 py-1.5 rounded border text-left w-full hover:brightness-125 transition-all',
|
||||
colors.bg,
|
||||
colors.border
|
||||
)}
|
||||
aria-label={`Add ${MODULE_TYPE_LABELS[type]}`}
|
||||
>
|
||||
<div className={cn('w-2 h-2 rounded-sm shrink-0', colors.bg, 'brightness-150')} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-xs font-medium text-white truncate">
|
||||
{MODULE_TYPE_LABELS[type]}
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-400">
|
||||
{MODULE_U_DEFAULTS[type]}U · {MODULE_PORT_DEFAULTS[type]} ports
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{ALL_TYPES.map((type) => (
|
||||
<PaletteItem key={type} type={type} />
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { Trash2, MapPin } from 'lucide-react';
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { Trash2, MapPin, GripVertical } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import type { Rack } from '../../types';
|
||||
import { buildOccupancyMap } from '../../lib/utils';
|
||||
@@ -10,14 +12,29 @@ import { useRackStore } from '../../store/useRackStore';
|
||||
|
||||
interface RackColumnProps {
|
||||
rack: Rack;
|
||||
/** ID of the module currently being dragged — render its slots as droppable ghosts. */
|
||||
draggingModuleId?: string | null;
|
||||
}
|
||||
|
||||
export function RackColumn({ rack }: RackColumnProps) {
|
||||
export function RackColumn({ rack, draggingModuleId }: RackColumnProps) {
|
||||
const { deleteRack } = useRackStore();
|
||||
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
// Sortable for rack reorder
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: rack.id,
|
||||
data: { dragType: 'rack' },
|
||||
});
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.4 : 1,
|
||||
};
|
||||
|
||||
const occupancy = buildOccupancyMap(rack.modules);
|
||||
const renderedModuleIds = new Set<string>();
|
||||
|
||||
async function handleDelete() {
|
||||
setDeleting(true);
|
||||
@@ -32,20 +49,21 @@ export function RackColumn({ rack }: RackColumnProps) {
|
||||
}
|
||||
}
|
||||
|
||||
// Build the slot render list — modules span multiple U slots
|
||||
const slots: Array<{ u: number; moduleId: string | null }> = [];
|
||||
const renderedModuleIds = new Set<string>();
|
||||
|
||||
for (let u = 1; u <= rack.totalU; u++) {
|
||||
const moduleId = occupancy.get(u) ?? null;
|
||||
slots.push({ u, moduleId });
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col min-w-[200px] w-48 shrink-0">
|
||||
{/* Rack header */}
|
||||
<div ref={setNodeRef} style={style} className="flex flex-col min-w-[200px] w-48 shrink-0">
|
||||
{/* Rack header — drag handle for reorder */}
|
||||
<div className="flex items-center gap-1 bg-slate-700 border border-slate-600 rounded-t-lg px-2 py-1.5 group">
|
||||
{/* Drag handle */}
|
||||
<div
|
||||
{...listeners}
|
||||
{...attributes}
|
||||
className="cursor-grab active:cursor-grabbing text-slate-500 hover:text-slate-300 transition-colors shrink-0 touch-none"
|
||||
aria-label="Drag to reorder rack"
|
||||
>
|
||||
<GripVertical size={13} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-semibold text-slate-100 truncate">{rack.name}</div>
|
||||
{rack.location && (
|
||||
@@ -55,6 +73,7 @@ export function RackColumn({ rack }: RackColumnProps) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setConfirmDeleteOpen(true)}
|
||||
aria-label={`Delete rack ${rack.name}`}
|
||||
@@ -66,16 +85,25 @@ export function RackColumn({ rack }: RackColumnProps) {
|
||||
|
||||
{/* U-slot body */}
|
||||
<div className="border-x border-slate-600 bg-[#1e2433] flex flex-col">
|
||||
{slots.map(({ u, moduleId }) => {
|
||||
{Array.from({ length: rack.totalU }, (_, i) => i + 1).map((u) => {
|
||||
const moduleId = occupancy.get(u) ?? null;
|
||||
|
||||
if (moduleId) {
|
||||
const module = rack.modules.find((m) => m.id === moduleId);
|
||||
if (!module) return null;
|
||||
|
||||
// Only render the block on its first U (top)
|
||||
// Only render ModuleBlock at its top U
|
||||
if (module.uPosition !== u) return null;
|
||||
if (renderedModuleIds.has(moduleId)) return null;
|
||||
renderedModuleIds.add(moduleId);
|
||||
|
||||
// If this module is being dragged, show empty droppable slot(s) instead
|
||||
if (moduleId === draggingModuleId) {
|
||||
return (
|
||||
<RackSlot key={`ghost-${u}`} rackId={rack.id} uPosition={u} />
|
||||
);
|
||||
}
|
||||
|
||||
return <ModuleBlock key={module.id} module={module} />;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,56 +1,205 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragStartEvent,
|
||||
type DragEndEvent,
|
||||
} from '@dnd-kit/core';
|
||||
import { SortableContext, horizontalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
|
||||
import { toast } from 'sonner';
|
||||
import { useRackStore } from '../../store/useRackStore';
|
||||
import { apiClient } from '../../api/client';
|
||||
import { RackToolbar } from './RackToolbar';
|
||||
import { RackColumn } from './RackColumn';
|
||||
import { DevicePalette } from './DevicePalette';
|
||||
import { AddModuleModal } from '../modals/AddModuleModal';
|
||||
import { RackSkeleton } from '../ui/Skeleton';
|
||||
import type { ModuleType } from '../../types';
|
||||
import { MODULE_TYPE_COLORS, MODULE_TYPE_LABELS } from '../../lib/constants';
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
interface PendingDrop {
|
||||
rackId: string;
|
||||
uPosition: number;
|
||||
type: ModuleType;
|
||||
}
|
||||
|
||||
function DragOverlayItem({ type }: { type: ModuleType }) {
|
||||
const colors = MODULE_TYPE_COLORS[type];
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'px-3 py-1.5 rounded border text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none',
|
||||
colors.bg,
|
||||
colors.border
|
||||
)}
|
||||
>
|
||||
{MODULE_TYPE_LABELS[type]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ModuleDragOverlay({ label }: { label: string }) {
|
||||
return (
|
||||
<div className="px-3 py-1.5 rounded border bg-slate-600 border-slate-400 text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none">
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RackPlanner() {
|
||||
const { racks, loading, fetchRacks } = useRackStore();
|
||||
const { racks, loading, fetchRacks, moveModule, updateRack } = useRackStore();
|
||||
const canvasRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Drag state
|
||||
const [activePaletteType, setActivePaletteType] = useState<ModuleType | null>(null);
|
||||
const [activeDragModuleLabel, setActiveDragModuleLabel] = useState<string | null>(null);
|
||||
const [draggingModuleId, setDraggingModuleId] = useState<string | null>(null);
|
||||
const [pendingDrop, setPendingDrop] = useState<PendingDrop | null>(null);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRacks().catch(() => toast.error('Failed to load racks'));
|
||||
}, [fetchRacks]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-[#0f1117]">
|
||||
<RackToolbar rackCanvasRef={canvasRef} />
|
||||
function handleDragStart(event: DragStartEvent) {
|
||||
const data = event.active.data.current as Record<string, unknown>;
|
||||
if (data?.dragType === 'palette') {
|
||||
setActivePaletteType(data.type as ModuleType);
|
||||
} else if (data?.dragType === 'module') {
|
||||
setDraggingModuleId(data.moduleId as string);
|
||||
setActiveDragModuleLabel(data.label as string);
|
||||
}
|
||||
}
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Main rack canvas */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<RackSkeleton />
|
||||
) : racks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
|
||||
<div className="w-16 h-16 bg-slate-800 rounded-xl border border-slate-700 flex items-center justify-center">
|
||||
<svg width="32" height="32" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="1" y="2" width="16" height="3" rx="1" fill="#475569" />
|
||||
<rect x="1" y="7" width="16" height="3" rx="1" fill="#475569" opacity="0.7" />
|
||||
<rect x="1" y="12" width="16" height="3" rx="1" fill="#475569" opacity="0.4" />
|
||||
</svg>
|
||||
async function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event;
|
||||
setActivePaletteType(null);
|
||||
setActiveDragModuleLabel(null);
|
||||
setDraggingModuleId(null);
|
||||
|
||||
if (!over) return;
|
||||
|
||||
const dragData = active.data.current as Record<string, unknown>;
|
||||
const dropData = over.data.current as Record<string, unknown> | undefined;
|
||||
|
||||
// --- Palette → slot: open AddModuleModal pre-filled ---
|
||||
if (dragData?.dragType === 'palette' && dropData?.dropType === 'slot') {
|
||||
setPendingDrop({
|
||||
type: dragData.type as ModuleType,
|
||||
rackId: dropData.rackId as string,
|
||||
uPosition: dropData.uPosition as number,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Module → slot: move the module ---
|
||||
if (dragData?.dragType === 'module' && dropData?.dropType === 'slot') {
|
||||
const moduleId = dragData.moduleId as string;
|
||||
const targetRackId = dropData.rackId as string;
|
||||
const targetUPosition = dropData.uPosition as number;
|
||||
|
||||
// No-op if dropped on own position
|
||||
if (dragData.fromRackId === targetRackId && dragData.fromUPosition === targetUPosition) return;
|
||||
|
||||
try {
|
||||
await moveModule(moduleId, targetRackId, targetUPosition);
|
||||
toast.success('Module moved');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'Move failed');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Rack header → rack header: reorder racks ---
|
||||
if (dragData?.dragType === 'rack' && over.data.current?.dragType === 'rack') {
|
||||
const oldIndex = racks.findIndex((r) => r.id === active.id);
|
||||
const newIndex = racks.findIndex((r) => r.id === over.id);
|
||||
if (oldIndex === newIndex) return;
|
||||
|
||||
const reordered = arrayMove(racks, oldIndex, newIndex);
|
||||
// Persist new displayOrder values
|
||||
try {
|
||||
await Promise.all(
|
||||
reordered.map((rack, idx) =>
|
||||
rack.displayOrder !== idx ? apiClient.racks.update(rack.id, { displayOrder: idx }) : Promise.resolve(rack)
|
||||
)
|
||||
);
|
||||
// Refresh store to sync
|
||||
await fetchRacks();
|
||||
} catch {
|
||||
toast.error('Failed to save rack order');
|
||||
await fetchRacks(); // rollback
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rackIds = racks.map((r) => r.id);
|
||||
|
||||
return (
|
||||
<DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
|
||||
<div className="flex flex-col h-screen bg-[#0f1117]">
|
||||
<RackToolbar rackCanvasRef={canvasRef} />
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<DevicePalette />
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<RackSkeleton />
|
||||
) : racks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
|
||||
<div className="w-16 h-16 bg-slate-800 rounded-xl border border-slate-700 flex items-center justify-center">
|
||||
<svg width="32" height="32" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="1" y="2" width="16" height="3" rx="1" fill="#475569" />
|
||||
<rect x="1" y="7" width="16" height="3" rx="1" fill="#475569" opacity="0.7" />
|
||||
<rect x="1" y="12" width="16" height="3" rx="1" fill="#475569" opacity="0.4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-300 font-medium">No racks yet</p>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
Click <strong className="text-slate-300">Add Rack</strong> in the toolbar to create your first rack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-300 font-medium">No racks yet</p>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
Click <strong className="text-slate-300">Add Rack</strong> in the toolbar to create your first rack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
ref={canvasRef}
|
||||
className="flex gap-4 p-4 min-h-full items-start"
|
||||
style={{ background: '#0f1117' }}
|
||||
>
|
||||
{racks.map((rack) => (
|
||||
<RackColumn key={rack.id} rack={rack} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<SortableContext items={rackIds} strategy={horizontalListSortingStrategy}>
|
||||
<div
|
||||
ref={canvasRef}
|
||||
className="flex gap-4 p-4 min-h-full items-start"
|
||||
style={{ background: '#0f1117' }}
|
||||
>
|
||||
{racks.map((rack) => (
|
||||
<RackColumn key={rack.id} rack={rack} draggingModuleId={draggingModuleId} />
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DragOverlay dropAnimation={null}>
|
||||
{activePaletteType && <DragOverlayItem type={activePaletteType} />}
|
||||
{activeDragModuleLabel && <ModuleDragOverlay label={activeDragModuleLabel} />}
|
||||
</DragOverlay>
|
||||
|
||||
{pendingDrop && (
|
||||
<AddModuleModal
|
||||
open={true}
|
||||
onClose={() => setPendingDrop(null)}
|
||||
rackId={pendingDrop.rackId}
|
||||
uPosition={pendingDrop.uPosition}
|
||||
initialType={pendingDrop.type}
|
||||
/>
|
||||
)}
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,33 @@
|
||||
import { useState } from 'react';
|
||||
import { useDroppable } from '@dnd-kit/core';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { U_HEIGHT_PX } from '../../lib/constants';
|
||||
import { cn } from '../../lib/utils';
|
||||
import { AddModuleModal } from '../modals/AddModuleModal';
|
||||
|
||||
interface RackSlotProps {
|
||||
rackId: string;
|
||||
uPosition: number;
|
||||
/** True if this slot is occupied (skips rendering — ModuleBlock renders instead) */
|
||||
occupied?: boolean;
|
||||
}
|
||||
|
||||
export function RackSlot({ rackId, uPosition, occupied = false }: RackSlotProps) {
|
||||
export function RackSlot({ rackId, uPosition }: RackSlotProps) {
|
||||
const [addModuleOpen, setAddModuleOpen] = useState(false);
|
||||
|
||||
if (occupied) return null;
|
||||
const { setNodeRef, isOver } = useDroppable({
|
||||
id: `slot-${rackId}-${uPosition}`,
|
||||
data: { dropType: 'slot', rackId, uPosition },
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="w-full border border-dashed border-slate-700/50 hover:border-blue-500/50 hover:bg-blue-500/5 transition-colors group cursor-pointer flex items-center justify-between px-2"
|
||||
ref={setNodeRef}
|
||||
className={cn(
|
||||
'w-full border border-dashed transition-colors group cursor-pointer flex items-center justify-between px-2',
|
||||
isOver
|
||||
? 'border-blue-400 bg-blue-500/15'
|
||||
: 'border-slate-700/50 hover:border-blue-500/50 hover:bg-blue-500/5'
|
||||
)}
|
||||
style={{ height: U_HEIGHT_PX }}
|
||||
onClick={() => setAddModuleOpen(true)}
|
||||
role="button"
|
||||
@@ -26,12 +35,22 @@ export function RackSlot({ rackId, uPosition, occupied = false }: RackSlotProps)
|
||||
aria-label={`Add module at U${uPosition}`}
|
||||
onKeyDown={(e) => e.key === 'Enter' && setAddModuleOpen(true)}
|
||||
>
|
||||
<span className="text-[10px] text-slate-600 group-hover:text-slate-500 font-mono">
|
||||
<span
|
||||
className={cn(
|
||||
'text-[10px] font-mono transition-colors',
|
||||
isOver ? 'text-blue-400' : 'text-slate-600 group-hover:text-slate-500'
|
||||
)}
|
||||
>
|
||||
U{uPosition}
|
||||
</span>
|
||||
<Plus
|
||||
size={10}
|
||||
className="text-slate-700 group-hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
className={cn(
|
||||
'transition-opacity',
|
||||
isOver
|
||||
? 'text-blue-400 opacity-100'
|
||||
: 'text-slate-700 group-hover:text-blue-500 opacity-0 group-hover:opacity-100'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ interface RackState {
|
||||
deleteRack: (id: string) => Promise<void>;
|
||||
// Module CRUD (optimistic update helpers)
|
||||
addModule: (rackId: string, data: Parameters<typeof apiClient.racks.addModule>[1]) => Promise<Module>;
|
||||
moveModule: (moduleId: string, targetRackId: string, targetUPosition: number) => Promise<void>;
|
||||
updateModuleLocal: (moduleId: string, data: Partial<Module>) => void;
|
||||
removeModuleLocal: (moduleId: string) => void;
|
||||
// Selection
|
||||
@@ -68,6 +69,24 @@ export const useRackStore = create<RackState>((set, get) => ({
|
||||
return module;
|
||||
},
|
||||
|
||||
moveModule: async (moduleId, targetRackId, targetUPosition) => {
|
||||
const updated = await apiClient.modules.move(moduleId, targetRackId, targetUPosition);
|
||||
set((s) => {
|
||||
// Remove from source rack, insert into target rack
|
||||
const racks = s.racks.map((r) => ({
|
||||
...r,
|
||||
modules: r.modules.filter((m) => m.id !== moduleId),
|
||||
}));
|
||||
return {
|
||||
racks: racks.map((r) =>
|
||||
r.id === targetRackId
|
||||
? { ...r, modules: [...r.modules, updated].sort((a, b) => a.uPosition - b.uPosition) }
|
||||
: r
|
||||
),
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
updateModuleLocal: (moduleId, data) => {
|
||||
set((s) => ({
|
||||
racks: s.racks.map((r) => ({
|
||||
|
||||
Reference in New Issue
Block a user