Recipe-app main
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import { updateCanonicalName } from '../../inventory/actions';
|
||||
|
||||
type Props = {
|
||||
id: number;
|
||||
currentCanonicalName: string | null;
|
||||
};
|
||||
|
||||
export default function CanonicalNameForm({
|
||||
id,
|
||||
currentCanonicalName,
|
||||
}: Props) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
const form = e.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await updateCanonicalName(formData);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Okänt fel');
|
||||
}
|
||||
});
|
||||
}}
|
||||
style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}
|
||||
>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<input
|
||||
name="canonicalName"
|
||||
type="text"
|
||||
defaultValue={currentCanonicalName || ''}
|
||||
placeholder="Canonical name"
|
||||
style={{ padding: '0.4rem', minWidth: '220px' }}
|
||||
/>
|
||||
<button type="submit" disabled={isPending} style={{ padding: '0.4rem 0.75rem' }}>
|
||||
{isPending ? 'Sparar...' : 'Spara'}
|
||||
</button>
|
||||
{error ? <span style={{ color: 'crimson' }}>{error}</span> : null}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import type { MergePreview, Product } from '../../../features/inventory/types';
|
||||
import { mergeProducts } from '../../inventory/actions';
|
||||
|
||||
type Props = {
|
||||
products: Product[];
|
||||
};
|
||||
|
||||
export default function MergePreviewForm({ products }: Props) {
|
||||
const [sourceProductId, setSourceProductId] = useState('');
|
||||
const [targetProductId, setTargetProductId] = useState('');
|
||||
const [preview, setPreview] = useState<MergePreview | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [isConfirming, setIsConfirming] = useState(false);
|
||||
|
||||
const fetchPreview = () => {
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
setPreview(null);
|
||||
setIsConfirming(false);
|
||||
|
||||
if (!sourceProductId || !targetProductId) {
|
||||
setError('Välj både source och target.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (sourceProductId === targetProductId) {
|
||||
setError('Source och target kan inte vara samma produkt.');
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/admin/merge-preview-proxy?sourceProductId=${sourceProductId}&targetProductId=${targetProductId}`,
|
||||
{
|
||||
method: 'GET',
|
||||
cache: 'no-store',
|
||||
},
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || 'Kunde inte hämta preview.');
|
||||
}
|
||||
|
||||
const data: MergePreview = await res.json();
|
||||
setPreview(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Okänt fel');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirmMerge = () => {
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
if (!preview) {
|
||||
setError('Ingen preview finns att bekräfta.');
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.set('sourceProductId', String(preview.source.id));
|
||||
formData.set('targetProductId', String(preview.target.id));
|
||||
|
||||
await mergeProducts(formData);
|
||||
|
||||
setSuccessMessage(
|
||||
`Produkten "${preview.source.canonicalName || preview.source.name}" slogs ihop med "${preview.target.canonicalName || preview.target.name}".`,
|
||||
);
|
||||
setPreview(null);
|
||||
setIsConfirming(false);
|
||||
setSourceProductId('');
|
||||
setTargetProductId('');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Okänt fel');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
marginBottom: '1.5rem',
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: 0 }}>Förhandsgranska merge</h2>
|
||||
|
||||
<div style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: '1fr 1fr' }}>
|
||||
<label>
|
||||
Source product (ska bort)
|
||||
<br />
|
||||
<select
|
||||
value={sourceProductId}
|
||||
onChange={(e) => setSourceProductId(e.target.value)}
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
>
|
||||
<option value="">Välj source</option>
|
||||
{products.map((product) => (
|
||||
<option key={product.id} value={product.id}>
|
||||
{product.canonicalName || product.name} (ID {product.id})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Target product (ska behållas)
|
||||
<br />
|
||||
<select
|
||||
value={targetProductId}
|
||||
onChange={(e) => setTargetProductId(e.target.value)}
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
>
|
||||
<option value="">Välj target</option>
|
||||
{products.map((product) => (
|
||||
<option key={product.id} value={product.id}>
|
||||
{product.canonicalName || product.name} (ID {product.id})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={fetchPreview}
|
||||
disabled={isPending}
|
||||
style={{ padding: '0.6rem 1rem' }}
|
||||
>
|
||||
{isPending ? 'Hämtar preview...' : 'Förhandsgranska merge'}
|
||||
</button>
|
||||
|
||||
{preview ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsConfirming((prev) => !prev)}
|
||||
disabled={isPending}
|
||||
style={{ padding: '0.6rem 1rem' }}
|
||||
>
|
||||
{isConfirming ? 'Avbryt bekräftelse' : 'Gå vidare till bekräftelse'}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
|
||||
{successMessage ? <p style={{ color: 'green', margin: 0 }}>{successMessage}</p> : null}
|
||||
|
||||
{preview ? (
|
||||
<div style={{ display: 'grid', gap: '1rem' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
}}
|
||||
>
|
||||
<article style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem' }}>
|
||||
<h3 style={{ marginTop: 0 }}>Source</h3>
|
||||
<div><strong>ID:</strong> {preview.source.id}</div>
|
||||
<div><strong>Namn:</strong> {preview.source.name}</div>
|
||||
<div><strong>Canonical:</strong> {preview.source.canonicalName || 'Saknas'}</div>
|
||||
<div><strong>Normalized:</strong> {preview.source.normalizedName}</div>
|
||||
<div><strong>Aktiv:</strong> {preview.source.isActive ? 'Ja' : 'Nej'}</div>
|
||||
<div><strong>Inventory count:</strong> {preview.source.inventoryCount}</div>
|
||||
</article>
|
||||
|
||||
<article style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem' }}>
|
||||
<h3 style={{ marginTop: 0 }}>Target</h3>
|
||||
<div><strong>ID:</strong> {preview.target.id}</div>
|
||||
<div><strong>Namn:</strong> {preview.target.name}</div>
|
||||
<div><strong>Canonical:</strong> {preview.target.canonicalName || 'Saknas'}</div>
|
||||
<div><strong>Normalized:</strong> {preview.target.normalizedName}</div>
|
||||
<div><strong>Aktiv:</strong> {preview.target.isActive ? 'Ja' : 'Nej'}</div>
|
||||
<div><strong>Inventory count:</strong> {preview.target.inventoryCount}</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
background: '#fafafa',
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginTop: 0 }}>Det här kommer att hända</h3>
|
||||
<div>
|
||||
<strong>Inventory som flyttas:</strong> {preview.outcome.inventoryItemsToMove}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Source soft-deletas:</strong>{' '}
|
||||
{preview.outcome.sourceWillBeSoftDeleted ? 'Ja' : 'Nej'}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Target förblir aktiv:</strong>{' '}
|
||||
{preview.outcome.targetWillRemainActive ? 'Ja' : 'Nej'}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{isConfirming ? (
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid #e0b4b4',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
background: '#fff6f6',
|
||||
display: 'grid',
|
||||
gap: '0.75rem',
|
||||
}}
|
||||
>
|
||||
<h3 style={{ marginTop: 0 }}>Bekräfta merge</h3>
|
||||
<p style={{ margin: 0 }}>
|
||||
Du är på väg att slå ihop{' '}
|
||||
<strong>{preview.source.canonicalName || preview.source.name}</strong> in i{' '}
|
||||
<strong>{preview.target.canonicalName || preview.target.name}</strong>.
|
||||
</p>
|
||||
<p style={{ margin: 0 }}>
|
||||
Source-produkten kommer att soft-deletas och kan återställas senare, men
|
||||
inventory flyttas till target.
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={confirmMerge}
|
||||
disabled={isPending}
|
||||
style={{ padding: '0.75rem 1rem' }}
|
||||
>
|
||||
{isPending ? 'Slår ihop...' : 'Bekräfta merge'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsConfirming(false)}
|
||||
disabled={isPending}
|
||||
style={{ padding: '0.75rem 1rem' }}
|
||||
>
|
||||
Avbryt
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { fetchJson } from '../../../lib/api';
|
||||
import type { Product } from '../../../features/inventory/types';
|
||||
import CanonicalNameForm from './CanonicalNameForm';
|
||||
import MergePreviewForm from './MergePreviewForm';
|
||||
|
||||
export default async function AdminProductsPage() {
|
||||
const products = await fetchJson<Product[]>('/api/products');
|
||||
|
||||
return (
|
||||
<main style={{ padding: '1.5rem', maxWidth: '1100px', margin: '0 auto' }}>
|
||||
<h1>Admin: Produkter</h1>
|
||||
<p>Här kan du granska och standardisera produktnamn.</p>
|
||||
|
||||
<MergePreviewForm products={products} />
|
||||
|
||||
<div style={{ display: 'grid', gap: '1rem' }}>
|
||||
{products.map((product) => (
|
||||
<article
|
||||
key={product.id}
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>ID:</strong> {product.id}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Namn:</strong> {product.name}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Canonical name:</strong> {product.canonicalName || 'Saknas'}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Normalized:</strong> {product.normalizedName}
|
||||
</div>
|
||||
|
||||
<CanonicalNameForm
|
||||
id={product.id}
|
||||
currentCanonicalName={product.canonicalName}
|
||||
/>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user