feat: add functionality for managing deleted products, including restoration and permanent deletion
This commit is contained in:
Nils-Johan Gynther
@@ -0,0 +1,180 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
type DeletedProduct = {
|
||||
id: number;
|
||||
name: string;
|
||||
normalizedName: string;
|
||||
canonicalName?: string | null;
|
||||
category?: string | null;
|
||||
brand?: string | null;
|
||||
deletedAt?: string | null;
|
||||
};
|
||||
|
||||
export default function DeletedProductsView() {
|
||||
const [products, setProducts] = useState<DeletedProduct[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [pendingId, setPendingId] = useState<number | null>(null);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const fetchDeleted = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
fetch('/api/admin/deleted-products')
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (Array.isArray(data)) setProducts(data);
|
||||
else setError('Kunde inte ladda raderade produkter.');
|
||||
})
|
||||
.catch(() => setError('Nätverksfel. Försök igen.'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => { fetchDeleted(); }, [fetchDeleted]);
|
||||
|
||||
const handleRestore = async (id: number) => {
|
||||
if (!confirm('Återställ produkten?')) return;
|
||||
setPendingId(id);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/deleted-products/${id}`, { method: 'POST' });
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
setError(d?.error ?? 'Kunde inte återställa produkten.');
|
||||
} else {
|
||||
setProducts((prev) => prev.filter((p) => p.id !== id));
|
||||
}
|
||||
} catch {
|
||||
setError('Nätverksfel. Försök igen.');
|
||||
} finally {
|
||||
setPendingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePermanentDelete = async (id: number, name: string) => {
|
||||
if (!confirm(`Radera "${name}" permanent? Detta kan inte ångras.`)) return;
|
||||
setPendingId(id);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/deleted-products/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
setError(d?.error ?? 'Kunde inte radera produkten permanent.');
|
||||
} else {
|
||||
setProducts((prev) => prev.filter((p) => p.id !== id));
|
||||
}
|
||||
} catch {
|
||||
setError('Nätverksfel. Försök igen.');
|
||||
} finally {
|
||||
setPendingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const filtered = products.filter((p) =>
|
||||
p.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(p.canonicalName ?? '').toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
if (loading) return <p style={{ color: '#888' }}>Laddar raderade produkter...</p>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p style={{ color: '#555', marginBottom: '1rem' }}>
|
||||
Här visas produkter som mjukraderats. Du kan återställa dem eller radera dem permanent.
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div style={{ color: '#c00', background: '#fff0f0', border: '1px solid #fcc', borderRadius: 6, padding: '0.5rem 1rem', marginBottom: '1rem' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', alignItems: 'center' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Sök på namn..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{ padding: '0.4rem 0.75rem', borderRadius: 6, border: '1px solid #ccc', fontSize: '0.9rem', minWidth: 220 }}
|
||||
/>
|
||||
<span style={{ color: '#888', fontSize: '0.85rem' }}>
|
||||
{filtered.length} av {products.length} produkter
|
||||
</span>
|
||||
<button
|
||||
onClick={fetchDeleted}
|
||||
style={{ marginLeft: 'auto', padding: '0.35rem 0.75rem', borderRadius: 6, border: '1px solid #ccc', background: '#f8f8f8', cursor: 'pointer', fontSize: '0.85rem' }}
|
||||
>
|
||||
Uppdatera
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<p style={{ color: '#888', fontStyle: 'italic' }}>Inga raderade produkter hittades.</p>
|
||||
) : (
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#f2f2f2', textAlign: 'left' }}>
|
||||
<th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>ID</th>
|
||||
<th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Namn</th>
|
||||
<th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Canonical name</th>
|
||||
<th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Kategori</th>
|
||||
<th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Raderades</th>
|
||||
<th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Åtgärder</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map((p) => (
|
||||
<tr key={p.id} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '0.5rem 0.75rem', color: '#888' }}>{p.id}</td>
|
||||
<td style={{ padding: '0.5rem 0.75rem', fontWeight: 500 }}>{p.name}</td>
|
||||
<td style={{ padding: '0.5rem 0.75rem', color: '#666' }}>{p.canonicalName || '–'}</td>
|
||||
<td style={{ padding: '0.5rem 0.75rem', color: '#666' }}>{p.category || '–'}</td>
|
||||
<td style={{ padding: '0.5rem 0.75rem', color: '#999', fontSize: '0.8rem' }}>
|
||||
{p.deletedAt ? new Date(p.deletedAt).toLocaleDateString('sv-SE') : '–'}
|
||||
</td>
|
||||
<td style={{ padding: '0.5rem 0.75rem' }}>
|
||||
<div style={{ display: 'flex', gap: '0.4rem' }}>
|
||||
<button
|
||||
disabled={pendingId === p.id}
|
||||
onClick={() => handleRestore(p.id)}
|
||||
style={{
|
||||
padding: '0.25rem 0.6rem',
|
||||
borderRadius: 5,
|
||||
border: '1px solid #3a7d44',
|
||||
background: '#eafaf1',
|
||||
color: '#276032',
|
||||
cursor: pendingId === p.id ? 'not-allowed' : 'pointer',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Återställ
|
||||
</button>
|
||||
<button
|
||||
disabled={pendingId === p.id}
|
||||
onClick={() => handlePermanentDelete(p.id, p.name)}
|
||||
style={{
|
||||
padding: '0.25rem 0.6rem',
|
||||
borderRadius: 5,
|
||||
border: '1px solid #c00',
|
||||
background: '#fff0f0',
|
||||
color: '#c00',
|
||||
cursor: pendingId === p.id ? 'not-allowed' : 'pointer',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Radera permanent
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user