282 lines
11 KiB
TypeScript
282 lines
11 KiB
TypeScript
// * Packages
|
|
import { route } from "ziggy-js";
|
|
import { usePage } from "@inertiajs/react";
|
|
import { Row } from "@tanstack/react-table";
|
|
import { FolderIcon, PlusIcon, TagIcon, TriangleAlertIcon } from "lucide-react";
|
|
// * 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 BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import DocumentStatusBadge from "@/back/Components/Documents/DocumentStatusBadge";
|
|
import Filters from "@/back/Components/Documents/Filters";
|
|
import { cn, GetFormatedDate, GetTranslation, Views } from "@/lib/utils";
|
|
import RenderTranslationCell from "@/back/Components/Table/RenderTranslationCell";
|
|
import { AppEnv, AuthProp, Resource } from "@/back/types/global";
|
|
import { DocumentModel, DocumentCategoryModel } from "@/back/types/others";
|
|
import str from "@/hooks/use-string";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
const getColumns = (appEnv: AppEnv, viewAnyDocumentCategories: boolean) => {
|
|
return [
|
|
{
|
|
accessorKey: "name",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(
|
|
GetTranslation(`validation.attributes.${column.id}`),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DocumentModel> }) => {
|
|
const { locale } = appEnv;
|
|
|
|
const issuuPath = row.original.issuu_path;
|
|
const { path } = row.original;
|
|
const hasIssuuPathForLocale = Boolean(issuuPath?.[locale]);
|
|
const hasPathForLocale = Boolean(path?.[locale]);
|
|
|
|
const hasLink = hasIssuuPathForLocale || hasPathForLocale;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
!hasLink &&
|
|
"flex items-center justify-center gap-1",
|
|
)}
|
|
>
|
|
{!hasLink && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<TriangleAlertIcon className="text-red-500 size-5" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>
|
|
{str(
|
|
GetTranslation(
|
|
"back.document.no_link",
|
|
),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
<RenderTranslationCell value={row.getValue("name")} />
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "categories",
|
|
header: () => (
|
|
<p className="text-center">
|
|
{str(
|
|
GetTranslation("models.classes.document-category", {
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
</p>
|
|
),
|
|
cell: ({ row }: { row: Row<DocumentCategoryModel[]> }) => {
|
|
const categories = row.getValue(
|
|
"categories",
|
|
) as DocumentCategoryModel[];
|
|
return categories && categories.length > 0 ? (
|
|
<div className="flex flex-row flex-wrap justify-center items-center gap-1.5">
|
|
{categories.map((item) =>
|
|
viewAnyDocumentCategories ? (
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(
|
|
"back.document-categories.show",
|
|
item,
|
|
)}
|
|
content={
|
|
<>
|
|
<FolderIcon />
|
|
<span>
|
|
{item.name[appEnv.locale]}
|
|
</span>
|
|
</>
|
|
}
|
|
tooltipContent={
|
|
<p>
|
|
{GetTranslation(
|
|
"back.access_model",
|
|
{
|
|
params: {
|
|
model: GetTranslation(
|
|
"models.classes.document-category",
|
|
{ choice: 1 },
|
|
),
|
|
},
|
|
},
|
|
)}
|
|
</p>
|
|
}
|
|
type="button"
|
|
size="default"
|
|
variant="secondary"
|
|
/>
|
|
) : (
|
|
<Badge variant="outline">
|
|
{item.name[appEnv.locale]}
|
|
</Badge>
|
|
),
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-muted-foreground italic m-0">
|
|
{GetTranslation("back.table_not_known")}
|
|
</p>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(GetTranslation(`validation.custom.${column.id}`))
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DocumentModel> }) => {
|
|
return (
|
|
<DocumentStatusBadge
|
|
value={Number(row.getValue("status"))}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "published_at",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(GetTranslation(`validation.custom.${column.id}`))
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DocumentModel> }) => (
|
|
<Badge variant="secondary">
|
|
{GetFormatedDate(row.getValue("published_at"))}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "updated_at",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(
|
|
GetTranslation(`validation.attributes.${column.id}`),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DocumentModel> }) => (
|
|
<Badge variant="secondary">
|
|
{GetFormatedDate(row.getValue("updated_at"))}
|
|
</Badge>
|
|
),
|
|
},
|
|
];
|
|
};
|
|
|
|
export default function Index({
|
|
documentsModel,
|
|
searchFields,
|
|
modelName,
|
|
}: {
|
|
documentsModel: Resource;
|
|
searchFields: string;
|
|
modelName: string;
|
|
}) {
|
|
const { auth, appEnv } = usePage().props as unknown as {
|
|
auth: AuthProp;
|
|
appEnv: AppEnv;
|
|
};
|
|
const { create } = auth.policies.documents;
|
|
const { viewAny: viewAnyDocumentCategories } =
|
|
auth.policies.documentCategories;
|
|
const { viewAny: viewAnyDocumentTags } = auth.policies.documentTags;
|
|
const actionModels = [Views.VISUALIZATION, Views.EDITION, Views.DELETION];
|
|
const columns = getColumns(appEnv, viewAnyDocumentTags);
|
|
const transModel = useTrans(
|
|
`models.classes.${str(modelName).singular().value()}`,
|
|
{ choice: 2 },
|
|
);
|
|
const transTitle = str(transModel).ucFirst().value();
|
|
const transAccessToDocumentCategory = useTrans("back.crud_access_to", {
|
|
params: {
|
|
target: useTrans("models.classes.document-category", { choice: 2 }),
|
|
},
|
|
});
|
|
const transAccessToDocumentTag = useTrans("back.crud_access_to", {
|
|
params: {
|
|
target: useTrans("models.classes.document-tag", { choice: 2 }),
|
|
},
|
|
});
|
|
const transAddEntry = useTrans("back.crud_add_entry");
|
|
const afterNode = () => {
|
|
return (
|
|
<div className="flex justify-end items-center gap-x-1.5">
|
|
{viewAnyDocumentCategories && (
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(`back.document-categories.index`)}
|
|
content={<FolderIcon />}
|
|
tooltipContent={<p>{transAccessToDocumentCategory}</p>}
|
|
variant="outline"
|
|
/>
|
|
)}
|
|
{viewAnyDocumentTags && (
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(`back.document-tags.index`)}
|
|
content={<TagIcon />}
|
|
tooltipContent={<p>{transAccessToDocumentTag}</p>}
|
|
variant="outline"
|
|
/>
|
|
)}
|
|
{create && (
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(`back.${modelName}.create`)}
|
|
content={<PlusIcon />}
|
|
tooltipContent={<p>{transAddEntry}</p>}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout title={transTitle} afterNode={afterNode()}>
|
|
<DataTableSearch modelRoute={modelName} searchFields={searchFields}>
|
|
<Filters />
|
|
</DataTableSearch>
|
|
<DataTable
|
|
columns={columns}
|
|
modelRoute={modelName}
|
|
modelsPaginate={documentsModel}
|
|
actions={actionModels}
|
|
/>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|