117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Models } from '@/lib/appwrite';
|
|
|
|
interface CatalogoProdutoFormProps {
|
|
onSubmit: (data: { descricao: string }) => Promise<boolean>;
|
|
onCancel?: () => void;
|
|
initialData?: Models.Document | null;
|
|
loading?: boolean;
|
|
}
|
|
|
|
type CatalogoProdutoDocument = Models.Document & {
|
|
descricao?: string;
|
|
};
|
|
|
|
const CatalogoProdutoForm: React.FC<CatalogoProdutoFormProps> = ({
|
|
onSubmit,
|
|
onCancel,
|
|
initialData,
|
|
loading = false,
|
|
}) => {
|
|
const [formData, setFormData] = useState<{ descricao: string }>({ descricao: '' });
|
|
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (initialData) {
|
|
const document = initialData as CatalogoProdutoDocument;
|
|
setFormData({ descricao: document.descricao || '' });
|
|
} else {
|
|
setFormData({ descricao: '' });
|
|
}
|
|
}, [initialData]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const success = await onSubmit(formData);
|
|
if (success) {
|
|
setMessage({
|
|
type: 'success',
|
|
text: initialData ? '🔄 Catálogo de produto atualizado com sucesso!' : '🎉 Catálogo de produto cadastrado com sucesso!'
|
|
});
|
|
if (!initialData) {
|
|
setFormData({ descricao: '' });
|
|
}
|
|
setTimeout(() => setMessage(null), 3000);
|
|
} else {
|
|
setMessage({ type: 'error', text: initialData ? 'Erro ao atualizar catálogo de produto' : 'Erro ao cadastrar catálogo de produto' });
|
|
}
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
if (message) setMessage(null);
|
|
};
|
|
|
|
return (
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="bg-white rounded-lg shadow-md p-6">
|
|
<div className="mb-6">
|
|
<h2 className="text-2xl font-bold text-black mb-2">
|
|
{initialData ? 'Editar Catálogo de Produto' : 'Novo Catálogo de Produto'}
|
|
</h2>
|
|
<p className="text-black">
|
|
{initialData ? 'Atualize os dados do catálogo de produto.' : 'Cadastre um novo catálogo de produto na plataforma SaveInMed.'}
|
|
</p>
|
|
</div>
|
|
|
|
{message && (
|
|
<div className={`mb-4 p-4 rounded-md ${message.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
|
|
{message.text}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="descricao" className="block text-sm font-medium text-black mb-2">
|
|
Descrição do Produto *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="descricao"
|
|
name="descricao"
|
|
value={formData.descricao}
|
|
onChange={handleChange}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed text-gray-900 bg-white"
|
|
disabled={loading}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
|
>
|
|
{loading ? 'â³ Processando...' : initialData ? 'Atualizar' : 'Cadastrar'}
|
|
</button>
|
|
{onCancel && (
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
disabled={loading}
|
|
className="flex-1 bg-black text-white py-2 px-4 rounded-md hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors cursor-pointer"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default CatalogoProdutoForm;
|
|
|
|
|