313 lines
12 KiB
JavaScript
313 lines
12 KiB
JavaScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Button, Card, Input, Select, Textarea, Loading } from '../../../../shared/components';
|
|
import { useToast } from '@hykocx/zen/toast';
|
|
|
|
/**
|
|
* Item Edit Page Component
|
|
* Page for editing an existing item
|
|
*/
|
|
const ItemEditPage = ({ itemId, user }) => {
|
|
const router = useRouter();
|
|
const toast = useToast();
|
|
|
|
const [categories, setCategories] = useState([]);
|
|
const [item, setItem] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
unit_price: '',
|
|
sku: '',
|
|
category_id: '',
|
|
is_active: true
|
|
});
|
|
|
|
const [errors, setErrors] = useState({});
|
|
|
|
useEffect(() => {
|
|
loadCategoriesAndItem();
|
|
}, [itemId]);
|
|
|
|
const loadCategoriesAndItem = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// Load categories
|
|
const categoriesResponse = await fetch('/zen/api/admin/categories?limit=1000&is_active=true', {
|
|
credentials: 'include'
|
|
});
|
|
const categoriesData = await categoriesResponse.json();
|
|
|
|
if (categoriesData.success) {
|
|
setCategories(categoriesData.categories || []);
|
|
}
|
|
|
|
// Load item
|
|
const itemResponse = await fetch(`/zen/api/admin/items?id=${itemId}`, {
|
|
credentials: 'include'
|
|
});
|
|
const itemData = await itemResponse.json();
|
|
|
|
if (itemData.success && itemData.item) {
|
|
const loadedItem = itemData.item;
|
|
setItem(loadedItem);
|
|
|
|
setFormData({
|
|
name: loadedItem.name || '',
|
|
description: loadedItem.description || '',
|
|
unit_price: loadedItem.unit_price || '',
|
|
sku: loadedItem.sku || '',
|
|
category_id: loadedItem.category_id || '',
|
|
is_active: loadedItem.is_active !== undefined ? loadedItem.is_active : true
|
|
});
|
|
} else {
|
|
toast.error("Article introuvable");
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading data:', error);
|
|
toast.error("Échec du chargement de l'article");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (field, value) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[field]: value
|
|
}));
|
|
|
|
if (errors[field]) {
|
|
setErrors(prev => ({
|
|
...prev,
|
|
[field]: null
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleCheckboxChange = (e) => {
|
|
const { name, checked } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: checked
|
|
}));
|
|
};
|
|
|
|
const validateForm = () => {
|
|
const newErrors = {};
|
|
|
|
if (!formData.name.trim()) {
|
|
newErrors.name = "Le nom de l'article est requis";
|
|
}
|
|
|
|
if (!formData.unit_price || formData.unit_price <= 0) {
|
|
newErrors.unit_price = "Le prix unitaire doit être supérieur à 0";
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSaving(true);
|
|
|
|
const submitData = {
|
|
...formData,
|
|
category_id: formData.category_id === '' || formData.category_id === 'null' ? null : parseInt(formData.category_id)
|
|
};
|
|
|
|
const response = await fetch(`/zen/api/admin/items?id=${itemId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'include',
|
|
body: JSON.stringify(submitData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
toast.success("Article mis à jour avec succès");
|
|
router.push('/admin/invoice/items');
|
|
} else {
|
|
toast.error(data.message || "Échec de la mise à jour de l'article");
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating item:', error);
|
|
toast.error("Échec de la mise à jour de l'article");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-64 flex items-center justify-center">
|
|
<Loading />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!item) {
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'article</h1>
|
|
<p className="mt-1 text-xs text-neutral-400">Article introuvable</p>
|
|
</div>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => router.push('/admin/invoice/items')}
|
|
>
|
|
← Retour aux articles
|
|
</Button>
|
|
</div>
|
|
<Card>
|
|
<div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg">
|
|
<p className="font-medium">Article introuvable</p>
|
|
<p className="text-sm mt-1">L'article que vous recherchez n'existe pas ou a été supprimé.</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'article</h1>
|
|
<p className="mt-1 text-xs text-neutral-400">Article : {item.name}</p>
|
|
</div>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => router.push('/admin/invoice/items')}
|
|
>
|
|
← Retour aux articles
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Item Information */}
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-neutral-900 dark:text-white">Informations de l'article</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="md:col-span-2">
|
|
<Input
|
|
label="Nom *"
|
|
value={formData.name}
|
|
onChange={(value) => handleInputChange('name', value)}
|
|
placeholder="Saisir le nom de l'article..."
|
|
error={errors.name}
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<Textarea
|
|
label="Description"
|
|
value={formData.description}
|
|
onChange={(value) => handleInputChange('description', value)}
|
|
rows={3}
|
|
placeholder="Décrivez l'article..."
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="Prix unitaire *"
|
|
type="number"
|
|
value={formData.unit_price}
|
|
onChange={(value) => handleInputChange('unit_price', value)}
|
|
min="0"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
error={errors.unit_price}
|
|
/>
|
|
|
|
<Input
|
|
label="SKU"
|
|
value={formData.sku}
|
|
onChange={(value) => handleInputChange('sku', value)}
|
|
placeholder="Saisir le SKU..."
|
|
/>
|
|
|
|
<Select
|
|
label="Catégorie"
|
|
value={formData.category_id || ''}
|
|
onChange={(value) => handleInputChange('category_id', value)}
|
|
options={[
|
|
{ value: '', label: "Aucune" },
|
|
...categories.map((category) => ({
|
|
value: category.id,
|
|
label: category.parent_title
|
|
? `${category.title} (${category.parent_title})`
|
|
: category.title
|
|
}))
|
|
]}
|
|
disabled={loading}
|
|
/>
|
|
|
|
<div className="flex items-center pt-6">
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
name="is_active"
|
|
checked={formData.is_active}
|
|
onChange={handleCheckboxChange}
|
|
className="w-5 h-5 text-blue-600 bg-neutral-100 dark:bg-neutral-800 border-neutral-300 dark:border-neutral-700 rounded focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<span className="ml-2 text-sm text-neutral-700 dark:text-neutral-300">
|
|
Actif (disponible à l'utilisation)
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-end gap-3">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
onClick={() => router.push('/admin/invoice/items')}
|
|
disabled={saving}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="success"
|
|
loading={saving}
|
|
disabled={saving}
|
|
>
|
|
{saving ? "Mise à jour..." : "Mettre à jour l'article"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ItemEditPage;
|
|
|