feat: implement template update functionality with file handling and validation

This commit is contained in:
2025-12-18 11:00:01 +01:00
parent 75b8bfd84f
commit 8b11dc5083
4 changed files with 338 additions and 45 deletions

View File

@@ -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>