feat: implement template update functionality with file handling and validation
This commit is contained in:
143
src/components/TemplateEditForm.js
Normal file
143
src/components/TemplateEditForm.js
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function TemplateEditForm({ template, onTemplateUpdated, onCancel }) {
|
||||
const [updating, setUpdating] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
templateName: "",
|
||||
description: "",
|
||||
});
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (template) {
|
||||
setFormData({
|
||||
templateName: template.template_name || "",
|
||||
description: template.description || "",
|
||||
});
|
||||
}
|
||||
}, [template]);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.templateName.trim()) {
|
||||
alert("Proszę podać nazwę szablonu");
|
||||
return;
|
||||
}
|
||||
|
||||
setUpdating(true);
|
||||
|
||||
try {
|
||||
const updateData = new FormData();
|
||||
updateData.append("templateName", formData.templateName);
|
||||
updateData.append("description", formData.description);
|
||||
|
||||
const file = fileInputRef.current?.files[0];
|
||||
if (file) {
|
||||
updateData.append("file", file);
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/templates/${template.template_id}`, {
|
||||
method: "PUT",
|
||||
body: updateData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const updatedTemplate = await response.json();
|
||||
onTemplateUpdated(updatedTemplate);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(`Błąd podczas aktualizacji: ${error.error}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
alert("Błąd podczas aktualizacji szablonu");
|
||||
} finally {
|
||||
setUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
if (!template) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nazwa szablonu *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="templateName"
|
||||
value={formData.templateName}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="np. Umowa projektowa"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Opis
|
||||
</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleInputChange}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Opcjonalny opis szablonu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nowy plik DOCX (opcjonalnie)
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
accept=".docx"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Zostaw puste, aby zachować obecny plik. Max 10MB.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Obecny plik: {template.original_filename}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={updating}
|
||||
>
|
||||
{updating ? "Aktualizowanie..." : "Aktualizuj szablon"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={updating}
|
||||
>
|
||||
Anuluj
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -3,9 +3,11 @@
|
||||
import { useState } from "react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
import TemplateEditForm from "./TemplateEditForm";
|
||||
|
||||
export default function TemplateList({ templates, onTemplateDeleted }) {
|
||||
export default function TemplateList({ templates, onTemplateDeleted, onTemplateUpdated }) {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
|
||||
const handleDelete = async (templateId) => {
|
||||
if (!confirm("Czy na pewno chcesz usunąć ten szablon?")) {
|
||||
@@ -32,6 +34,19 @@ export default function TemplateList({ templates, onTemplateDeleted }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (templateId) => {
|
||||
setEditingId(templateId);
|
||||
};
|
||||
|
||||
const handleEditCancel = () => {
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
const handleTemplateUpdated = (updatedTemplate) => {
|
||||
onTemplateUpdated(updatedTemplate);
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return "0 Bytes";
|
||||
const k = 1024;
|
||||
@@ -90,54 +105,74 @@ export default function TemplateList({ templates, onTemplateDeleted }) {
|
||||
key={template.template_id}
|
||||
className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium text-gray-900">
|
||||
{template.template_name}
|
||||
</h4>
|
||||
<Badge variant="success" size="xs">
|
||||
Aktywny
|
||||
</Badge>
|
||||
{editingId === template.template_id ? (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 mb-4">
|
||||
Edytuj szablon: {template.template_name}
|
||||
</h4>
|
||||
<TemplateEditForm
|
||||
template={template}
|
||||
onTemplateUpdated={handleTemplateUpdated}
|
||||
onCancel={handleEditCancel}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium text-gray-900">
|
||||
{template.template_name}
|
||||
</h4>
|
||||
<Badge variant="success" size="xs">
|
||||
Aktywny
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{template.description && (
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<span>
|
||||
Plik: {template.original_filename}
|
||||
</span>
|
||||
<span>
|
||||
Rozmiar: {formatFileSize(template.file_size)}
|
||||
</span>
|
||||
<span>
|
||||
Dodano: {formatDate(template.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{template.description && (
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
{template.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<span>
|
||||
Plik: {template.original_filename}
|
||||
</span>
|
||||
<span>
|
||||
Rozmiar: {formatFileSize(template.file_size)}
|
||||
</span>
|
||||
<span>
|
||||
Dodano: {formatDate(template.created_at)}
|
||||
</span>
|
||||
<div className="flex gap-2 ml-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => window.open(template.file_path, "_blank")}
|
||||
>
|
||||
Pobierz
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(template.template_id)}
|
||||
>
|
||||
Edytuj
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(template.template_id)}
|
||||
disabled={deletingId === template.template_id}
|
||||
>
|
||||
{deletingId === template.template_id ? "Usuwanie..." : "Usuń"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 ml-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => window.open(template.file_path, "_blank")}
|
||||
>
|
||||
Pobierz
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(template.template_id)}
|
||||
disabled={deletingId === template.template_id}
|
||||
>
|
||||
{deletingId === template.template_id ? "Usuwanie..." : "Usuń"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user