Remove refresh icon and fix Safari/WebKit runtime errors
- Removed manual refresh button from frontend (kept auto-refresh functionality) - Fixed WebKit 'object cannot be found' error by replacing absolute positioning with flexbox - Added lazy loading to images to prevent preload warnings - Cleaned up unused imports and variables: - Removed unused useRef import - Removed unused colors state variable and colorService - Removed unused ColorSwatch import from FilamentTableV2 - Removed unused getModifierIcon function from MaterialBadge - Updated tests to match current implementation - Improved layout stability for better cross-browser compatibility - Removed temporary migration scripts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DaX
@@ -1,17 +1,38 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { filamentService, colorService } from '@/src/services/api';
|
||||
import { Filament } from '@/src/types/filament';
|
||||
import { bambuLabColors, colorsByFinish, getColorHex } from '@/src/data/bambuLabColorsComplete';
|
||||
// Removed unused imports for Bambu Lab color categorization
|
||||
import '@/src/styles/select.css';
|
||||
|
||||
// Colors that only come as refills (no spools)
|
||||
const REFILL_ONLY_COLORS = [
|
||||
'Beige',
|
||||
'Light Gray',
|
||||
'Yellow',
|
||||
'Orange',
|
||||
'Gold',
|
||||
'Bright Green',
|
||||
'Pink',
|
||||
'Magenta',
|
||||
'Maroon Red',
|
||||
'Purple',
|
||||
'Turquoise',
|
||||
'Cobalt Blue',
|
||||
'Brown',
|
||||
'Bronze',
|
||||
'Silver',
|
||||
'Blue Grey',
|
||||
'Dark Gray'
|
||||
];
|
||||
|
||||
interface FilamentWithId extends Filament {
|
||||
id: string;
|
||||
createdAt?: string;
|
||||
updatedAt?: string;
|
||||
bojaHex?: string;
|
||||
boja_hex?: string;
|
||||
}
|
||||
|
||||
export default function AdminDashboard() {
|
||||
@@ -23,8 +44,11 @@ export default function AdminDashboard() {
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [sortField, setSortField] = useState<string>('');
|
||||
const [sortField, setSortField] = useState<string>('boja');
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
|
||||
const [selectedFilaments, setSelectedFilaments] = useState<Set<string>>(new Set());
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [availableColors, setAvailableColors] = useState<Array<{id: string, name: string, hex: string, cena_refill?: number, cena_spulna?: number}>>([]);
|
||||
|
||||
// Initialize dark mode - default to true for admin
|
||||
useEffect(() => {
|
||||
@@ -73,8 +97,29 @@ export default function AdminDashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAllData = async () => {
|
||||
// Fetch both filaments and colors
|
||||
await fetchFilaments();
|
||||
try {
|
||||
const colors = await colorService.getAll();
|
||||
setAvailableColors(colors.sort((a: any, b: any) => a.name.localeCompare(b.name)));
|
||||
} catch (error) {
|
||||
console.error('Error loading colors:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchFilaments();
|
||||
fetchAllData();
|
||||
|
||||
// Refresh when window regains focus
|
||||
const handleFocus = () => {
|
||||
fetchAllData();
|
||||
};
|
||||
window.addEventListener('focus', handleFocus);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('focus', handleFocus);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Sorting logic
|
||||
@@ -87,39 +132,94 @@ export default function AdminDashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const sortedFilaments = [...filaments].sort((a, b) => {
|
||||
if (!sortField) return 0;
|
||||
// Filter and sort filaments
|
||||
const filteredAndSortedFilaments = useMemo(() => {
|
||||
// First, filter by search term
|
||||
let filtered = filaments;
|
||||
if (searchTerm) {
|
||||
const search = searchTerm.toLowerCase();
|
||||
filtered = filaments.filter(f =>
|
||||
f.tip?.toLowerCase().includes(search) ||
|
||||
f.finish?.toLowerCase().includes(search) ||
|
||||
f.boja?.toLowerCase().includes(search) ||
|
||||
f.cena?.toLowerCase().includes(search)
|
||||
);
|
||||
}
|
||||
|
||||
let aVal = a[sortField as keyof FilamentWithId];
|
||||
let bVal = b[sortField as keyof FilamentWithId];
|
||||
// Then sort if needed
|
||||
if (!sortField) return filtered;
|
||||
|
||||
// Handle null/undefined values
|
||||
if (aVal === null || aVal === undefined) aVal = '';
|
||||
if (bVal === null || bVal === undefined) bVal = '';
|
||||
|
||||
// Convert to strings for comparison
|
||||
aVal = String(aVal).toLowerCase();
|
||||
bVal = String(bVal).toLowerCase();
|
||||
|
||||
if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
return [...filtered].sort((a, b) => {
|
||||
let aVal = a[sortField as keyof FilamentWithId];
|
||||
let bVal = b[sortField as keyof FilamentWithId];
|
||||
|
||||
// Handle null/undefined values
|
||||
if (aVal === null || aVal === undefined) aVal = '';
|
||||
if (bVal === null || bVal === undefined) bVal = '';
|
||||
|
||||
// Convert to strings for comparison
|
||||
aVal = String(aVal).toLowerCase();
|
||||
bVal = String(bVal).toLowerCase();
|
||||
|
||||
if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}, [filaments, sortField, sortOrder, searchTerm]);
|
||||
|
||||
const handleSave = async (filament: Partial<FilamentWithId>) => {
|
||||
try {
|
||||
if (filament.id) {
|
||||
await filamentService.update(filament.id, filament);
|
||||
// Extract only the fields the API expects
|
||||
const { id, ...dataForApi } = filament;
|
||||
|
||||
// Ensure numeric fields are numbers
|
||||
const cleanData = {
|
||||
tip: dataForApi.tip || 'PLA',
|
||||
finish: dataForApi.finish || 'Basic',
|
||||
boja: dataForApi.boja || '',
|
||||
boja_hex: dataForApi.boja_hex || '#000000',
|
||||
refill: Number(dataForApi.refill) || 0,
|
||||
spulna: Number(dataForApi.spulna) || 0,
|
||||
cena: dataForApi.cena || '3499'
|
||||
};
|
||||
|
||||
// Validate required fields
|
||||
if (!cleanData.tip || !cleanData.finish || !cleanData.boja) {
|
||||
setError('Tip, Finish, and Boja are required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
if (id) {
|
||||
await filamentService.update(id, cleanData);
|
||||
} else {
|
||||
await filamentService.create(filament);
|
||||
await filamentService.create(cleanData);
|
||||
}
|
||||
|
||||
setEditingFilament(null);
|
||||
setShowAddForm(false);
|
||||
fetchFilaments();
|
||||
} catch (err) {
|
||||
setError('Greška pri čuvanju filamenata');
|
||||
console.error('Save error:', err);
|
||||
fetchAllData();
|
||||
} catch (err: any) {
|
||||
if (err.response?.status === 401 || err.response?.status === 403) {
|
||||
setError('Sesija je istekla. Molimo prijavite se ponovo.');
|
||||
setTimeout(() => {
|
||||
router.push('/upadaj');
|
||||
}, 2000);
|
||||
} else {
|
||||
// Extract error message properly
|
||||
let errorMessage = 'Greška pri čuvanju filamenata';
|
||||
if (err.response?.data?.error) {
|
||||
errorMessage = err.response.data.error;
|
||||
} else if (err.response?.data?.message) {
|
||||
errorMessage = err.response.data.message;
|
||||
} else if (typeof err.response?.data === 'string') {
|
||||
errorMessage = err.response.data;
|
||||
} else if (err.message) {
|
||||
errorMessage = err.message;
|
||||
}
|
||||
|
||||
setError(errorMessage);
|
||||
console.error('Save error:', err.response?.data || err.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -130,13 +230,52 @@ export default function AdminDashboard() {
|
||||
|
||||
try {
|
||||
await filamentService.delete(id);
|
||||
fetchFilaments();
|
||||
fetchAllData();
|
||||
} catch (err) {
|
||||
setError('Greška pri brisanju filamenata');
|
||||
console.error('Delete error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
if (selectedFilaments.size === 0) {
|
||||
setError('Molimo izaberite filamente za brisanje');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Da li ste sigurni da želite obrisati ${selectedFilaments.size} filamenata?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Delete all selected filaments
|
||||
await Promise.all(Array.from(selectedFilaments).map(id => filamentService.delete(id)));
|
||||
setSelectedFilaments(new Set());
|
||||
fetchAllData();
|
||||
} catch (err) {
|
||||
setError('Greška pri brisanju filamenata');
|
||||
console.error('Bulk delete error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleFilamentSelection = (filamentId: string) => {
|
||||
const newSelection = new Set(selectedFilaments);
|
||||
if (newSelection.has(filamentId)) {
|
||||
newSelection.delete(filamentId);
|
||||
} else {
|
||||
newSelection.add(filamentId);
|
||||
}
|
||||
setSelectedFilaments(newSelection);
|
||||
};
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedFilaments.size === filteredAndSortedFilaments.length) {
|
||||
setSelectedFilaments(new Set());
|
||||
} else {
|
||||
setSelectedFilaments(new Set(filteredAndSortedFilaments.map(f => f.id)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('authToken');
|
||||
localStorage.removeItem('tokenExpiry');
|
||||
@@ -156,7 +295,13 @@ export default function AdminDashboard() {
|
||||
<header className="bg-white dark:bg-gray-800 shadow transition-colors">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-6">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">Admin</h1>
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Filamenteka Admin"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-20 sm:h-32 w-auto drop-shadow-lg"
|
||||
/>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto">
|
||||
{!showAddForm && !editingFilament && (
|
||||
<button
|
||||
@@ -166,6 +311,14 @@ export default function AdminDashboard() {
|
||||
Dodaj novi
|
||||
</button>
|
||||
)}
|
||||
{selectedFilaments.size > 0 && (
|
||||
<button
|
||||
onClick={handleBulkDelete}
|
||||
className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 text-sm sm:text-base"
|
||||
>
|
||||
Obriši izabrane ({selectedFilaments.size})
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm sm:text-base"
|
||||
@@ -199,6 +352,22 @@ export default function AdminDashboard() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="mb-6">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pretraži po tipu, finishu, boji ili ceni..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add/Edit Form */}
|
||||
{(showAddForm || editingFilament) && (
|
||||
<div className="mb-8">
|
||||
@@ -206,6 +375,7 @@ export default function AdminDashboard() {
|
||||
key={editingFilament?.id || 'new'}
|
||||
filament={editingFilament || {}}
|
||||
filaments={filaments}
|
||||
availableColors={availableColors}
|
||||
onSave={handleSave}
|
||||
onCancel={() => {
|
||||
setEditingFilament(null);
|
||||
@@ -220,6 +390,14 @@ export default function AdminDashboard() {
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filteredAndSortedFilaments.length > 0 && selectedFilaments.size === filteredAndSortedFilaments.length}
|
||||
onChange={toggleSelectAll}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
</th>
|
||||
<th onClick={() => handleSort('tip')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
@@ -232,11 +410,8 @@ export default function AdminDashboard() {
|
||||
<th onClick={() => handleSort('refill')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('vakum')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Vakuum {sortField === 'vakum' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('otvoreno')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Otvoreno {sortField === 'otvoreno' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
<th onClick={() => handleSort('spulna')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Spulna {sortField === 'spulna' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th onClick={() => handleSort('kolicina')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||
@@ -248,57 +423,96 @@ export default function AdminDashboard() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{sortedFilaments.map((filament) => (
|
||||
{filteredAndSortedFilaments.map((filament) => (
|
||||
<tr key={filament.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedFilaments.has(filament.id)}
|
||||
onChange={() => toggleFilamentSelection(filament.id)}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.tip}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.finish}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
{filament.bojaHex && (
|
||||
{filament.boja_hex && (
|
||||
<div
|
||||
className="w-7 h-7 rounded border border-gray-300 dark:border-gray-600"
|
||||
style={{ backgroundColor: filament.bojaHex }}
|
||||
title={filament.bojaHex}
|
||||
style={{ backgroundColor: filament.boja_hex }}
|
||||
title={filament.boja_hex}
|
||||
/>
|
||||
)}
|
||||
<span>{filament.boja}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
{(() => {
|
||||
const refillCount = parseInt(filament.refill) || 0;
|
||||
if (refillCount > 0) {
|
||||
return <span className="text-green-600 dark:text-green-400 font-semibold">{refillCount}</span>;
|
||||
}
|
||||
return <span className="text-gray-400 dark:text-gray-500">0</span>;
|
||||
})()}
|
||||
{filament.refill > 0 ? (
|
||||
<span className="text-green-600 dark:text-green-400 font-bold">{filament.refill}</span>
|
||||
) : (
|
||||
<span className="text-gray-400 dark:text-gray-500">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
{(() => {
|
||||
const match = filament.vakum?.match(/^(\d+)\s*vakuum/);
|
||||
const vakuumCount = match ? parseInt(match[1]) : 0;
|
||||
if (vakuumCount > 0) {
|
||||
return <span className="text-green-600 dark:text-green-400 font-semibold">{vakuumCount}</span>;
|
||||
}
|
||||
return <span className="text-gray-400 dark:text-gray-500">0</span>;
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
{(() => {
|
||||
const match = filament.otvoreno?.match(/^(\d+)\s*otvorena/);
|
||||
const otvorenCount = match ? parseInt(match[1]) : 0;
|
||||
if (otvorenCount > 0) {
|
||||
return <span className="text-green-600 dark:text-green-400 font-semibold">{otvorenCount}</span>;
|
||||
}
|
||||
return <span className="text-gray-400 dark:text-gray-500">0</span>;
|
||||
})()}
|
||||
{filament.spulna > 0 ? (
|
||||
<span className="text-blue-500 dark:text-blue-400 font-bold">{filament.spulna}</span>
|
||||
) : (
|
||||
<span className="text-gray-400 dark:text-gray-500">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.kolicina}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.cena}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900 dark:text-gray-100">
|
||||
{(() => {
|
||||
// First check if filament has custom prices stored
|
||||
const hasRefill = filament.refill > 0;
|
||||
const hasSpool = filament.spulna > 0;
|
||||
|
||||
if (!hasRefill && !hasSpool) return '-';
|
||||
|
||||
// Parse prices from the cena field if available (format: "3499" or "3499/3999")
|
||||
let refillPrice = 3499;
|
||||
let spoolPrice = 3999;
|
||||
|
||||
if (filament.cena) {
|
||||
const prices = filament.cena.split('/');
|
||||
if (prices.length === 1) {
|
||||
// Single price - use for whatever is in stock
|
||||
refillPrice = parseInt(prices[0]) || 3499;
|
||||
spoolPrice = parseInt(prices[0]) || 3999;
|
||||
} else if (prices.length === 2) {
|
||||
// Two prices - refill/spool format
|
||||
refillPrice = parseInt(prices[0]) || 3499;
|
||||
spoolPrice = parseInt(prices[1]) || 3999;
|
||||
}
|
||||
} else {
|
||||
// Fallback to color defaults if no custom price
|
||||
const colorData = availableColors.find(c => c.name === filament.boja);
|
||||
refillPrice = colorData?.cena_refill || 3499;
|
||||
spoolPrice = colorData?.cena_spulna || 3999;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{hasRefill && (
|
||||
<span className="text-green-600 dark:text-green-400">
|
||||
{refillPrice.toLocaleString('sr-RS')}
|
||||
</span>
|
||||
)}
|
||||
{hasRefill && hasSpool && <span className="mx-1">/</span>}
|
||||
{hasSpool && (
|
||||
<span className="text-blue-500 dark:text-blue-400">
|
||||
{spoolPrice.toLocaleString('sr-RS')}
|
||||
</span>
|
||||
)}
|
||||
<span className="ml-1 text-gray-600 dark:text-gray-400">RSD</span>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log('Editing filament:', filament);
|
||||
setEditingFilament(filament);
|
||||
setShowAddForm(false);
|
||||
}}
|
||||
@@ -334,82 +548,77 @@ export default function AdminDashboard() {
|
||||
function FilamentForm({
|
||||
filament,
|
||||
filaments,
|
||||
availableColors,
|
||||
onSave,
|
||||
onCancel
|
||||
}: {
|
||||
filament: Partial<FilamentWithId>,
|
||||
filaments: FilamentWithId[],
|
||||
availableColors: Array<{id: string, name: string, hex: string, cena_refill?: number, cena_spulna?: number}>,
|
||||
onSave: (filament: Partial<FilamentWithId>) => void,
|
||||
onCancel: () => void
|
||||
}) {
|
||||
const [formData, setFormData] = useState({
|
||||
tip: filament.tip || '',
|
||||
finish: filament.finish || '',
|
||||
tip: filament.tip || (filament.id ? '' : 'PLA'), // Default to PLA for new filaments
|
||||
finish: filament.finish || (filament.id ? '' : 'Basic'), // Default to Basic for new filaments
|
||||
boja: filament.boja || '',
|
||||
bojaHex: filament.bojaHex || '',
|
||||
refill: filament.refill || '',
|
||||
vakum: filament.vakum || '',
|
||||
otvoreno: filament.otvoreno || '',
|
||||
kolicina: filament.kolicina || '',
|
||||
cena: filament.cena || (filament.id ? '' : '3999'), // Default price for new filaments
|
||||
boja_hex: filament.boja_hex || '',
|
||||
refill: filament.refill || 0, // Store as number
|
||||
spulna: REFILL_ONLY_COLORS.includes(filament.boja || '') ? 0 : (filament.spulna || 0), // Store as number
|
||||
kolicina: filament.kolicina || 0, // Default to 0, stored as number
|
||||
cena: '', // Price is now determined by color selection
|
||||
cena_refill: 0,
|
||||
cena_spulna: 0,
|
||||
});
|
||||
|
||||
const [availableColors, setAvailableColors] = useState<Array<{id: string, name: string, hex: string}>>([]);
|
||||
|
||||
// Load colors from API
|
||||
useEffect(() => {
|
||||
const loadColors = async () => {
|
||||
try {
|
||||
const colors = await colorService.getAll();
|
||||
setAvailableColors(colors.sort((a: any, b: any) => a.name.localeCompare(b.name)));
|
||||
} catch (error) {
|
||||
console.error('Error loading colors:', error);
|
||||
// Fallback to colors from existing filaments
|
||||
const existingColors = [...new Set(filaments.map(f => f.boja).filter(Boolean))];
|
||||
const colorObjects = existingColors.map((color, idx) => ({
|
||||
id: `existing-${idx}`,
|
||||
name: color,
|
||||
hex: filaments.find(f => f.boja === color)?.bojaHex || '#000000'
|
||||
}));
|
||||
setAvailableColors(colorObjects.sort((a, b) => a.name.localeCompare(b.name)));
|
||||
}
|
||||
};
|
||||
|
||||
loadColors();
|
||||
|
||||
// Reload colors when window gets focus (in case user added colors in another tab)
|
||||
const handleFocus = () => loadColors();
|
||||
window.addEventListener('focus', handleFocus);
|
||||
|
||||
return () => window.removeEventListener('focus', handleFocus);
|
||||
}, [filaments]);
|
||||
|
||||
// Update form when filament prop changes
|
||||
useEffect(() => {
|
||||
// Extract prices from the cena field if it exists (format: "3499/3999" or just "3499")
|
||||
let refillPrice = 0;
|
||||
let spulnaPrice = 0;
|
||||
|
||||
if (filament.cena) {
|
||||
const prices = filament.cena.split('/');
|
||||
refillPrice = parseInt(prices[0]) || 0;
|
||||
spulnaPrice = prices.length > 1 ? parseInt(prices[1]) || 0 : parseInt(prices[0]) || 0;
|
||||
}
|
||||
|
||||
// Get default prices from color
|
||||
const colorData = availableColors.find(c => c.name === filament.boja);
|
||||
if (!refillPrice && colorData?.cena_refill) refillPrice = colorData.cena_refill;
|
||||
if (!spulnaPrice && colorData?.cena_spulna) spulnaPrice = colorData.cena_spulna;
|
||||
|
||||
setFormData({
|
||||
tip: filament.tip || '',
|
||||
finish: filament.finish || '',
|
||||
tip: filament.tip || (filament.id ? '' : 'PLA'), // Default to PLA for new filaments
|
||||
finish: filament.finish || (filament.id ? '' : 'Basic'), // Default to Basic for new filaments
|
||||
boja: filament.boja || '',
|
||||
bojaHex: filament.bojaHex || '',
|
||||
refill: filament.refill || '',
|
||||
vakum: filament.vakum || '',
|
||||
otvoreno: filament.otvoreno || '',
|
||||
kolicina: filament.kolicina || '',
|
||||
cena: filament.cena || (filament.id ? '' : '3999'), // Default price for new filaments
|
||||
boja_hex: filament.boja_hex || '',
|
||||
refill: filament.refill || 0, // Store as number
|
||||
spulna: filament.spulna || 0, // Store as number
|
||||
kolicina: filament.kolicina || 0, // Default to 0, stored as number
|
||||
cena: filament.cena || '', // Keep original cena for compatibility
|
||||
cena_refill: refillPrice || 3499,
|
||||
cena_spulna: spulnaPrice || 3999,
|
||||
});
|
||||
}, [filament]);
|
||||
}, [filament, availableColors]);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
if (name === 'refill') {
|
||||
// Auto-set price based on refill quantity
|
||||
const refillCount = parseInt(value) || 0;
|
||||
if (name === 'refill' || name === 'spulna' || name === 'cena_refill' || name === 'cena_spulna') {
|
||||
// Convert to number for numeric fields
|
||||
const numValue = parseInt(value) || 0;
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: numValue
|
||||
});
|
||||
} else if (name === 'boja') {
|
||||
// If changing to a refill-only color, reset spulna to 0
|
||||
const isRefillOnly = REFILL_ONLY_COLORS.includes(value);
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: value,
|
||||
// Auto-fill price based on refill status if this is a new filament
|
||||
...(filament.id ? {} : { cena: refillCount > 0 ? '3499' : '3999' })
|
||||
...(isRefillOnly ? { spulna: 0 } : {})
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
@@ -423,18 +632,37 @@ function FilamentForm({
|
||||
e.preventDefault();
|
||||
|
||||
// Calculate total quantity
|
||||
const refillCount = parseInt(formData.refill) || (formData.refill?.toLowerCase() === 'da' ? 1 : 0);
|
||||
const vakuumMatch = formData.vakum?.match(/^(\d+)\s*vakuum/);
|
||||
const vakuumCount = vakuumMatch ? parseInt(vakuumMatch[1]) : (formData.vakum?.toLowerCase().includes('vakuum') ? 1 : 0);
|
||||
const otvorenMatch = formData.otvoreno?.match(/^(\d+)\s*otvorena/);
|
||||
const otvorenCount = otvorenMatch ? parseInt(otvorenMatch[1]) : (formData.otvoreno?.toLowerCase().includes('otvorena') ? 1 : 0);
|
||||
const totalQuantity = refillCount + vakuumCount + otvorenCount;
|
||||
const totalQuantity = formData.refill + formData.spulna;
|
||||
|
||||
onSave({
|
||||
...filament,
|
||||
...formData,
|
||||
kolicina: totalQuantity.toString()
|
||||
});
|
||||
// Use the prices from the form (which can be edited)
|
||||
const refillPrice = formData.cena_refill;
|
||||
const spoolPrice = formData.cena_spulna;
|
||||
|
||||
// Determine the price string based on what's in stock
|
||||
let priceString = '';
|
||||
if (formData.refill > 0 && formData.spulna > 0) {
|
||||
priceString = `${refillPrice}/${spoolPrice}`;
|
||||
} else if (formData.refill > 0) {
|
||||
priceString = String(refillPrice);
|
||||
} else if (formData.spulna > 0) {
|
||||
priceString = String(spoolPrice);
|
||||
} else {
|
||||
priceString = '3499/3999'; // Default when no stock
|
||||
}
|
||||
|
||||
// Pass only the data we want to save
|
||||
const dataToSave = {
|
||||
id: filament.id,
|
||||
tip: formData.tip,
|
||||
finish: formData.finish,
|
||||
boja: formData.boja,
|
||||
boja_hex: formData.boja_hex,
|
||||
refill: formData.refill,
|
||||
spulna: formData.spulna,
|
||||
cena: priceString
|
||||
};
|
||||
|
||||
onSave(dataToSave);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -507,50 +735,38 @@ function FilamentForm({
|
||||
value={formData.boja}
|
||||
onChange={(e) => {
|
||||
const selectedColorName = e.target.value;
|
||||
let hexValue = formData.bojaHex;
|
||||
|
||||
// Use Bambu Lab colors
|
||||
const bambuHex = getColorHex(selectedColorName);
|
||||
if (bambuLabColors.hasOwnProperty(selectedColorName)) {
|
||||
hexValue = bambuHex;
|
||||
}
|
||||
let hexValue = formData.boja_hex;
|
||||
|
||||
// Check available colors from database
|
||||
const dbColor = availableColors.find(c => c.name === selectedColorName);
|
||||
if (dbColor && hexValue === formData.bojaHex) {
|
||||
if (dbColor) {
|
||||
hexValue = dbColor.hex;
|
||||
}
|
||||
|
||||
setFormData({
|
||||
...formData,
|
||||
boja: selectedColorName,
|
||||
bojaHex: hexValue
|
||||
});
|
||||
handleChange({
|
||||
target: {
|
||||
name: 'boja',
|
||||
value: selectedColorName
|
||||
}
|
||||
} as any);
|
||||
|
||||
// Also update the hex value and prices
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
boja_hex: hexValue,
|
||||
cena_refill: dbColor?.cena_refill || prev.cena_refill || 3499,
|
||||
cena_spulna: dbColor?.cena_spulna || prev.cena_spulna || 3999
|
||||
}));
|
||||
}}
|
||||
required
|
||||
className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Izaberite boju</option>
|
||||
{/* Show Bambu Lab colors based on finish */}
|
||||
{formData.finish && colorsByFinish[formData.finish as keyof typeof colorsByFinish] && (
|
||||
<optgroup label={`Bambu Lab ${formData.finish} boje`}>
|
||||
{colorsByFinish[formData.finish as keyof typeof colorsByFinish].map(colorName => (
|
||||
<option key={`bambu-${colorName}`} value={colorName}>
|
||||
{colorName}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)}
|
||||
{/* Show all available colors from database */}
|
||||
{availableColors.length > 0 && (
|
||||
<optgroup label='Ostale boje'>
|
||||
{availableColors.map(color => (
|
||||
<option key={color.id} value={color.name}>
|
||||
{color.name}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)}
|
||||
{availableColors.map(color => (
|
||||
<option key={color.id} value={color.name}>
|
||||
{color.name}
|
||||
</option>
|
||||
))}
|
||||
<option value="custom">Druga boja...</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -562,27 +778,52 @@ function FilamentForm({
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
name="bojaHex"
|
||||
value={formData.bojaHex || '#000000'}
|
||||
name="boja_hex"
|
||||
value={formData.boja_hex || '#000000'}
|
||||
onChange={handleChange}
|
||||
disabled={!!(formData.boja && formData.boja !== 'custom' && bambuLabColors.hasOwnProperty(formData.boja))}
|
||||
disabled={false}
|
||||
className="w-full h-10 px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
/>
|
||||
{formData.bojaHex && (
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">{formData.bojaHex}</span>
|
||||
{formData.boja_hex && (
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">{formData.boja_hex}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena</label>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
|
||||
<span className="text-green-600 dark:text-green-400">Cena Refill</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cena"
|
||||
value={formData.cena}
|
||||
type="number"
|
||||
name="cena_refill"
|
||||
value={formData.cena_refill || availableColors.find(c => c.name === formData.boja)?.cena_refill || 3499}
|
||||
onChange={handleChange}
|
||||
placeholder="npr. 2500"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="3499"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-green-600 dark:text-green-400 font-bold focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
|
||||
<span className="text-blue-500 dark:text-blue-400">Cena Spulna</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="cena_spulna"
|
||||
value={formData.cena_spulna || availableColors.find(c => c.name === formData.boja)?.cena_spulna || 3999}
|
||||
onChange={handleChange}
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="3999"
|
||||
disabled={REFILL_ONLY_COLORS.includes(formData.boja)}
|
||||
className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
|
||||
REFILL_ONLY_COLORS.includes(formData.boja)
|
||||
? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed text-gray-400'
|
||||
: 'bg-white dark:bg-gray-700 text-blue-500 dark:text-blue-400 font-bold focus:outline-none focus:ring-2 focus:ring-blue-500'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -592,20 +833,8 @@ function FilamentForm({
|
||||
<input
|
||||
type="number"
|
||||
name="refill"
|
||||
value={(() => {
|
||||
if (!formData.refill) return 0;
|
||||
const num = parseInt(formData.refill);
|
||||
return isNaN(num) ? (formData.refill.toLowerCase() === 'da' ? 1 : 0) : num;
|
||||
})()}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value) || 0;
|
||||
handleChange({
|
||||
target: {
|
||||
name: 'refill',
|
||||
value: value > 0 ? value.toString() : 'Ne'
|
||||
}
|
||||
} as any);
|
||||
}}
|
||||
value={formData.refill}
|
||||
onChange={handleChange}
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
@@ -614,58 +843,29 @@ function FilamentForm({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Vakuum</label>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
|
||||
Spulna
|
||||
{REFILL_ONLY_COLORS.includes(formData.boja) && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 ml-2">(samo refil postoji)</span>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="vakum"
|
||||
value={(() => {
|
||||
if (!formData.vakum) return 0;
|
||||
const match = formData.vakum.match(/^(\d+)\s*vakuum/);
|
||||
if (match) return parseInt(match[1]);
|
||||
return formData.vakum.toLowerCase().includes('vakuum') ? 1 : 0;
|
||||
})()}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value) || 0;
|
||||
handleChange({
|
||||
target: {
|
||||
name: 'vakum',
|
||||
value: value > 0 ? `${value} vakuum` : 'Ne'
|
||||
}
|
||||
} as any);
|
||||
}}
|
||||
name="spulna"
|
||||
value={formData.spulna}
|
||||
onChange={handleChange}
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
disabled={REFILL_ONLY_COLORS.includes(formData.boja)}
|
||||
className={`w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ${
|
||||
REFILL_ONLY_COLORS.includes(formData.boja)
|
||||
? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed'
|
||||
: 'bg-white dark:bg-gray-700'
|
||||
} text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Otvoreno</label>
|
||||
<input
|
||||
type="number"
|
||||
name="otvoreno"
|
||||
value={(() => {
|
||||
if (!formData.otvoreno) return 0;
|
||||
const match = formData.otvoreno.match(/^(\d+)\s*otvorena/);
|
||||
if (match) return parseInt(match[1]);
|
||||
return formData.otvoreno.toLowerCase().includes('otvorena') ? 1 : 0;
|
||||
})()}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value) || 0;
|
||||
handleChange({
|
||||
target: {
|
||||
name: 'otvoreno',
|
||||
value: value > 0 ? `${value} otvorena` : 'Ne'
|
||||
}
|
||||
} as any);
|
||||
}}
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Total quantity display */}
|
||||
<div>
|
||||
@@ -673,14 +873,7 @@ function FilamentForm({
|
||||
<input
|
||||
type="number"
|
||||
name="kolicina"
|
||||
value={(() => {
|
||||
const refillCount = parseInt(formData.refill) || (formData.refill?.toLowerCase() === 'da' ? 1 : 0);
|
||||
const vakuumMatch = formData.vakum?.match(/^(\d+)\s*vakuum/);
|
||||
const vakuumCount = vakuumMatch ? parseInt(vakuumMatch[1]) : (formData.vakum?.toLowerCase().includes('vakuum') ? 1 : 0);
|
||||
const otvorenMatch = formData.otvoreno?.match(/^(\d+)\s*otvorena/);
|
||||
const otvorenCount = otvorenMatch ? parseInt(otvorenMatch[1]) : (formData.otvoreno?.toLowerCase().includes('otvorena') ? 1 : 0);
|
||||
return refillCount + vakuumCount + otvorenCount;
|
||||
})()}
|
||||
value={formData.refill + formData.spulna}
|
||||
readOnly
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-600 text-gray-900 dark:text-gray-100 cursor-not-allowed"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user