341 lines
14 KiB
TypeScript
341 lines
14 KiB
TypeScript
// * Packages
|
|
import { route } from "ziggy-js";
|
|
import {
|
|
ArchiveIcon,
|
|
ArrowLeftIcon,
|
|
CogIcon,
|
|
HouseIcon,
|
|
LockIcon,
|
|
PlusIcon,
|
|
StickyNoteIcon,
|
|
TriangleAlertIcon,
|
|
} from "lucide-react";
|
|
import { usePage } from "@inertiajs/react";
|
|
import { Row } from "@tanstack/react-table";
|
|
// * Components shadcn
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
// * Other
|
|
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
|
|
import DataTable from "@/back/Components/Table/DataTable";
|
|
import DataTableSearch from "@/back/Components/Table/DataTableSearch";
|
|
import DataTableFilterButton from "@/back/Components/Table/DataTableFilterButton";
|
|
import SoftdeleteWarning from "@/back/Components/SoftdeleteWarning";
|
|
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import DynamicStatusBadge from "@/back/Components/DynamicPages/DynamicStatusBadge";
|
|
import { useFormatedDate } from "@/hooks/use-formated-value";
|
|
import { Views } from "@/lib/utils";
|
|
import {
|
|
AppEnv,
|
|
AuthProp,
|
|
DynamicPageModel,
|
|
PageConfigModel,
|
|
Resource,
|
|
TranslationField,
|
|
} from "@/back/types/global";
|
|
import str from "@/hooks/use-string";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import { renderTranslationCell } from "@/lib/translationCellFallback";
|
|
|
|
export default function Index({
|
|
dynamicPageModels,
|
|
searchFields,
|
|
modelName,
|
|
}: {
|
|
dynamicPageModels: Resource;
|
|
searchFields: string;
|
|
modelName: string;
|
|
}) {
|
|
const { auth, appEnv } = usePage().props as unknown as {
|
|
auth: AuthProp;
|
|
appEnv: AppEnv;
|
|
};
|
|
const { viewAny, viewTrash, create } = auth.policies.dynamicPages;
|
|
const { viewAny: viewAnyPageConfigs } = auth.policies.pageConfigs;
|
|
const isArchiveRoute = route().current(`back.${modelName}.trash`);
|
|
const actionModels = isArchiveRoute ? [
|
|
Views.RESTORATION,
|
|
Views.FORCEDELETION,
|
|
] : [
|
|
Views.VISUALIZATION,
|
|
Views.EDITION,
|
|
Views.DUPLICATION,
|
|
Views.ARCHIVATION,
|
|
];
|
|
|
|
const columns = [
|
|
{
|
|
accessorKey: "title",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(useTrans(`validation.attributes.${column.id}`)).ucFirst().value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DynamicPageModel> }) => (
|
|
<div className="flex justify-center items-center">
|
|
{renderTranslationCell(row.getValue("title") as TranslationField)}
|
|
{row.original.isRoot && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<HouseIcon size={15} className="ms-1" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{useTrans("back.page_root")}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "parent_page",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(useTrans(`validation.custom.${column.id}`))
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DynamicPageModel> }) => {
|
|
if (row.getValue("parent_page")) {
|
|
const dynamicPageModel = row.getValue("parent_page") as DynamicPageModel;
|
|
const cellValue = dynamicPageModel.title[appEnv.locale];
|
|
let value = <span>{cellValue}</span>;
|
|
if (viewAny) {
|
|
value = (
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(
|
|
`back.${modelName}.show`,
|
|
dynamicPageModel,
|
|
)}
|
|
content={
|
|
<>
|
|
<StickyNoteIcon />
|
|
{value}
|
|
</>
|
|
}
|
|
tooltipContent={
|
|
<p>
|
|
{useTrans("back.access_model", {
|
|
params: {
|
|
model: useTrans(
|
|
"models.classes.dynamic-page",
|
|
{ choice: 1 },
|
|
),
|
|
},
|
|
})}
|
|
</p>
|
|
}
|
|
type="button"
|
|
size="default"
|
|
variant="secondary"
|
|
/>
|
|
);
|
|
}
|
|
if (dynamicPageModel.deleted_at !== null) {
|
|
value = (
|
|
<div className="flex flex-row justify-center items-center">
|
|
<Badge variant="outline">
|
|
{value}
|
|
</Badge>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<TriangleAlertIcon
|
|
size={15}
|
|
className="text-destructive ms-1"
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{useTrans("back.group_archived")}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
return value;
|
|
}
|
|
return (
|
|
<p className="text-muted-foreground italic m-0">
|
|
{useTrans("back.table_not_known")}
|
|
</p>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "config",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(useTrans(`validation.custom.${column.id}`))
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DynamicPageModel> }) => {
|
|
if (row.getValue("config")) {
|
|
const pageConfigModel = row.getValue("config") as PageConfigModel;
|
|
const cellValue = pageConfigModel.label[appEnv.locale];
|
|
let value = <span>{cellValue}</span>;
|
|
if (viewAnyPageConfigs) {
|
|
value = (
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(
|
|
`back.page-configs.show`,
|
|
pageConfigModel,
|
|
)}
|
|
content={
|
|
<>
|
|
<CogIcon />
|
|
{value}
|
|
</>
|
|
}
|
|
tooltipContent={
|
|
<p>
|
|
{useTrans("back.access_model", {
|
|
params: {
|
|
model: useTrans(
|
|
"models.classes.page-config",
|
|
{ choice: 1 },
|
|
),
|
|
},
|
|
})}
|
|
</p>
|
|
}
|
|
type="button"
|
|
size="default"
|
|
variant="secondary"
|
|
/>
|
|
);
|
|
}
|
|
if (pageConfigModel.deleted_at !== null) {
|
|
value = (
|
|
<div className="flex flex-row justify-center items-center">
|
|
<Badge variant="outline">
|
|
{value}
|
|
</Badge>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<TriangleAlertIcon
|
|
size={15}
|
|
className="text-destructive ms-1"
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{useTrans("back.config_archived")}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
return value;
|
|
}
|
|
return (
|
|
<p className="text-muted-foreground italic m-0">
|
|
{useTrans("back.table_not_known")}
|
|
</p>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(useTrans(`validation.custom.${column.id}`))
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DynamicPageModel> }) => (
|
|
<div className="flex justify-center items-center">
|
|
<DynamicStatusBadge value={row.getValue("status")} />
|
|
{row.original.isLocked && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<LockIcon size={15} className="ms-1" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{useTrans("back.page_locked")}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "updated_at",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(useTrans(`validation.attributes.${column.id}`)).ucFirst().value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DynamicPageModel> }) => (
|
|
<Badge variant="secondary">
|
|
{useFormatedDate(row.getValue("updated_at"))}
|
|
</Badge>
|
|
),
|
|
},
|
|
];
|
|
|
|
const transModel = useTrans(`models.classes.${str(modelName).singular().value()}`, { choice: 2 });
|
|
const transArchiveTitle = useTrans("crud.helpers.archives_model", { params: { model: transModel } })
|
|
const transTitle = str(isArchiveRoute ? transArchiveTitle : transModel).ucFirst().value();
|
|
|
|
const beforeNode = () => {
|
|
return isArchiveRoute && viewAny && (
|
|
<div className="flex justify-end items-center gap-x-1.5">
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(`back.${modelName}.index`)}
|
|
content={<ArrowLeftIcon />}
|
|
tooltipContent={<p>{useTrans("back.crud_back_to_list")}</p>}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
const afterNode = () => {
|
|
return !isArchiveRoute && (
|
|
<div className="flex justify-end items-center gap-x-1.5">
|
|
{viewTrash && <BtnOptionnalLinkWithTooltip
|
|
link={route(`back.${modelName}.trash`)}
|
|
content={<ArchiveIcon />}
|
|
tooltipContent={<p>{useTrans("back.crud_access_to", {
|
|
params: { target: useTrans('back.archived_entries')}
|
|
})}</p>}
|
|
variant="outline"
|
|
/>}
|
|
{create && <BtnOptionnalLinkWithTooltip
|
|
link={route(`back.${modelName}.create`)}
|
|
content={<PlusIcon />}
|
|
tooltipContent={<p>{useTrans("back.crud_add_entry")}</p>}
|
|
/>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
title={transTitle}
|
|
beforeNode={beforeNode()}
|
|
afterNode={afterNode()}
|
|
>
|
|
{isArchiveRoute && <SoftdeleteWarning />}
|
|
<DataTableSearch
|
|
modelRoute={modelName}
|
|
searchFields={searchFields}
|
|
/>
|
|
<DataTable
|
|
columns={columns}
|
|
modelRoute={modelName}
|
|
modelsPaginate={dynamicPageModels}
|
|
actions={actionModels}
|
|
/>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|