126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import { DataType } from "./schema";
|
|
import { usePaginatedData } from "./hooks";
|
|
import { FormComponent } from "./FormComponent";
|
|
import { SearchComponent } from "./SearchComponent";
|
|
import { getTranslation, LanguageKey } from "./language";
|
|
import { ActionButtonsComponent } from "./ActionButtonsComponent";
|
|
import { SortingComponent } from "./SortingComponent";
|
|
import { PaginationToolsComponent } from "./PaginationToolsComponent";
|
|
import { DataDisplayComponent } from "./DataDisplayComponent";
|
|
|
|
interface TemplateProps {
|
|
lang?: LanguageKey;
|
|
}
|
|
|
|
// Main template component
|
|
function TemplateApp({ lang = "en" }: TemplateProps) {
|
|
const t = getTranslation(lang);
|
|
const { data, pagination, loading, error, updatePagination, refetch } =
|
|
usePaginatedData();
|
|
|
|
const [mode, setMode] = useState<"list" | "create" | "view" | "update">(
|
|
"list"
|
|
);
|
|
const [selectedItem, setSelectedItem] = useState<DataType | null>(null);
|
|
|
|
const handleCreateClick = () => {
|
|
setSelectedItem(null);
|
|
setMode("create");
|
|
};
|
|
|
|
const handleViewClick = (item: DataType) => {
|
|
setSelectedItem(item);
|
|
setMode("view");
|
|
};
|
|
|
|
const handleUpdateClick = (item: DataType) => {
|
|
setSelectedItem(item);
|
|
setMode("update");
|
|
};
|
|
|
|
const handleFormSubmit = async (data: DataType) => {
|
|
console.log("Submitting form data:", data);
|
|
// Here you would call your API to save the data
|
|
// await saveData(data);
|
|
|
|
// After saving, refresh the list and go back to list view
|
|
setMode("list");
|
|
setSelectedItem(null);
|
|
refetch();
|
|
};
|
|
|
|
const handleFormCancel = () => {
|
|
setMode("list");
|
|
setSelectedItem(null);
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-6">
|
|
<h1 className="text-2xl font-bold mb-6">{t.title}</h1>
|
|
|
|
{/* Search Component */}
|
|
{mode === "list" && (
|
|
<SearchComponent
|
|
onSearch={(query: Record<string, string>) => {
|
|
// Update pagination with both page reset and new query
|
|
updatePagination({
|
|
page: 1,
|
|
query: query,
|
|
});
|
|
}}
|
|
lang={lang}
|
|
/>
|
|
)}
|
|
|
|
{/* Action Buttons Component */}
|
|
{mode === "list" && (
|
|
<ActionButtonsComponent onCreateClick={handleCreateClick} lang={lang} />
|
|
)}
|
|
|
|
{/* Sorting Component */}
|
|
{mode === "list" && (
|
|
<SortingComponent
|
|
pagination={pagination}
|
|
updatePagination={updatePagination}
|
|
lang={lang}
|
|
/>
|
|
)}
|
|
|
|
{/* Pagination Tools Component */}
|
|
{mode === "list" && (
|
|
<PaginationToolsComponent
|
|
pagination={pagination}
|
|
updatePagination={updatePagination}
|
|
lang={lang}
|
|
/>
|
|
)}
|
|
|
|
{/* Data Display - Only shown in list mode */}
|
|
{mode === "list" && (
|
|
<DataDisplayComponent
|
|
data={data}
|
|
loading={loading}
|
|
error={error}
|
|
onViewClick={handleViewClick}
|
|
onUpdateClick={handleUpdateClick}
|
|
lang={lang}
|
|
/>
|
|
)}
|
|
|
|
{(mode === "create" || mode === "update" || mode === "view") && (
|
|
<FormComponent
|
|
initialData={selectedItem || undefined}
|
|
onSubmit={handleFormSubmit}
|
|
onCancel={handleFormCancel}
|
|
readOnly={mode === "view"}
|
|
lang={lang}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TemplateApp;
|