DaX/Filamenteka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove refresh icon and fix Safari/WebKit runtime errors

Browse Source 
- 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
2025-06-30 22:37:30 +02:00
parent 58b3ff2dec
commit 12e91d4c3e
33 changed files with 1646 additions and 668 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
app/upadaj/colors/page.tsx
View File

@@ -10,6 +10,8 @@ interface Color {
id: string;
name: string;
hex: string;
cena_refill?: number;
cena_spulna?: number;
createdAt?: string;
updatedAt?: string;
}
@@ -24,6 +26,7 @@ export default function ColorsManagement() {
const [darkMode, setDarkMode] = useState(false);
const [mounted, setMounted] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const [selectedColors, setSelectedColors] = useState<Set<string>>(new Set());
// Initialize dark mode - default to true for admin
useEffect(() => {
@@ -80,9 +83,19 @@ export default function ColorsManagement() {
const handleSave = async (color: Partial<Color>) => {
try {
if (color.id) {
await colorService.update(color.id, { name: color.name!, hex: color.hex! });
await colorService.update(color.id, {
name: color.name!,
hex: color.hex!,
cena_refill: color.cena_refill,
cena_spulna: color.cena_spulna
});
} else {
await colorService.create({ name: color.name!, hex: color.hex! });
await colorService.create({
name: color.name!,
hex: color.hex!,
cena_refill: color.cena_refill,
cena_spulna: color.cena_spulna
});
}
setEditingColor(null);
@@ -108,6 +121,54 @@ export default function ColorsManagement() {
}
};
const handleBulkDelete = async () => {
if (selectedColors.size === 0) {
setError('Molimo izaberite boje za brisanje');
return;
}
if (!confirm(`Da li ste sigurni da želite obrisati ${selectedColors.size} boja?`)) {
return;
}
try {
// Delete all selected colors
await Promise.all(Array.from(selectedColors).map(id => colorService.delete(id)));
setSelectedColors(new Set());
fetchColors();
} catch (err) {
setError('Greška pri brisanju boja');
console.error('Bulk delete error:', err);
}
};
const toggleColorSelection = (colorId: string) => {
const newSelection = new Set(selectedColors);
if (newSelection.has(colorId)) {
newSelection.delete(colorId);
} else {
newSelection.add(colorId);
}
setSelectedColors(newSelection);
};
const toggleSelectAll = () => {
const filteredColors = colors.filter(color =>
color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
color.hex.toLowerCase().includes(searchTerm.toLowerCase())
);
const allFilteredSelected = filteredColors.every(c => selectedColors.has(c.id));
if (allFilteredSelected) {
// Deselect all
setSelectedColors(new Set());
} else {
// Select all filtered
setSelectedColors(new Set(filteredColors.map(c => c.id)));
}
};
const handleLogout = () => {
localStorage.removeItem('authToken');
localStorage.removeItem('tokenExpiry');
@@ -149,7 +210,14 @@ export default function ColorsManagement() {
<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-6">
<div className="flex justify-between items-center">
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Upravljanje bojama</h1>
<div className="flex items-center gap-4">
<img
src="/logo.png"
alt="Filamenteka"
className="h-20 sm:h-32 w-auto drop-shadow-lg"
/>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Upravljanje bojama</h1>
</div>
<div className="flex gap-4">
{!showAddForm && !editingColor && (
<button
@@ -159,6 +227,14 @@ export default function ColorsManagement() {
Dodaj novu boju
</button>
)}
{selectedColors.size > 0 && (
<button
onClick={handleBulkDelete}
className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
>
Obriši izabrane ({selectedColors.size})
</button>
)}
<button
onClick={() => router.push('/')}
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
@@ -224,9 +300,25 @@ export default function ColorsManagement() {
<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={(() => {
const filtered = colors.filter(color =>
color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
color.hex.toLowerCase().includes(searchTerm.toLowerCase())
);
return filtered.length > 0 && filtered.every(c => selectedColors.has(c.id));
})()}
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 className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Boja</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Naziv</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hex kod</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Refil</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Spulna</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Akcije</th>
</tr>
</thead>
@@ -238,6 +330,14 @@ export default function ColorsManagement() {
)
.map((color) => (
<tr key={color.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
<td className="px-6 py-4 whitespace-nowrap">
<input
type="checkbox"
checked={selectedColors.has(color.id)}
onChange={() => toggleColorSelection(color.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">
<div
className="w-10 h-10 rounded border-2 border-gray-300 dark:border-gray-600"
@@ -246,6 +346,12 @@ export default function ColorsManagement() {
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.name}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.hex}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600 dark:text-green-400">
{(color.cena_refill || 3499).toLocaleString('sr-RS')} RSD
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-500 dark:text-blue-400">
{(color.cena_spulna || 3999).toLocaleString('sr-RS')} RSD
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button
onClick={() => setEditingColor(color)}
@@ -313,6 +419,8 @@ function ColorForm({
const [formData, setFormData] = useState({
name: color.name || '',
hex: color.hex || '#000000',
cena_refill: color.cena_refill || 3499,
cena_spulna: color.cena_spulna || 3999,
});
// Check if this is a Bambu Lab predefined color
@@ -320,10 +428,10 @@ function ColorForm({
const bambuHex = formData.name ? getColorHex(formData.name) : null;
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
const { name, value, type } = e.target;
setFormData({
...formData,
[name]: value
[name]: type === 'number' ? parseInt(value) || 0 : value
});
};
@@ -334,7 +442,9 @@ function ColorForm({
onSave({
...color,
name: formData.name,
hex: hexToSave
hex: hexToSave,
cena_refill: formData.cena_refill,
cena_spulna: formData.cena_spulna
});
};
@@ -390,6 +500,36 @@ function ColorForm({
)}
</div>
<div>
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena Refil</label>
<input
type="number"
name="cena_refill"
value={formData.cena_refill}
onChange={handleChange}
required
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-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">Cena Spulna</label>
<input
type="number"
name="cena_spulna"
value={formData.cena_spulna}
onChange={handleChange}
required
min="0"
step="1"
placeholder="3999"
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>
<div className="md:col-span-2 flex justify-end gap-4 mt-4">
<button
type="button"