110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
// * Packages
|
|
import { usePage } from "@inertiajs/react";
|
|
import { Row } from "@tanstack/react-table";
|
|
import { FileInputIcon } from "lucide-react";
|
|
// * Other
|
|
import str from "@/hooks/use-string";
|
|
import DataTable from "@/back/Components/Table/DataTable";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import DataTableFilterButton from "@/back/Components/Table/DataTableFilterButton";
|
|
import RenderTranslationCell from "@/back/Components/Table/RenderTranslationCell";
|
|
import { AppEnv, Resource } from "@/back/types/global";
|
|
import { TranslationField } from "@/back/types/i18n";
|
|
import { DocumentModel } from "@/back/types/others";
|
|
import { GetTranslation, Views } from "@/lib/utils";
|
|
|
|
interface Props {
|
|
documents: Resource;
|
|
}
|
|
|
|
const getColumns = (appEnv: AppEnv) => {
|
|
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> }) => (
|
|
<RenderTranslationCell value={row.getValue("name")} />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "path",
|
|
header: ({ column }: { column: { id: string } }) => (
|
|
<DataTableFilterButton
|
|
label={str(GetTranslation(`validation.custom.${column.id}`))
|
|
.ucFirst()
|
|
.value()}
|
|
field={column.id}
|
|
/>
|
|
),
|
|
cell: ({ row }: { row: Row<DocumentModel> }) => {
|
|
return (row.getValue("path") as TranslationField)[
|
|
appEnv.locale
|
|
] ? (
|
|
<a
|
|
target="_blank"
|
|
className="text-blue-500 underline"
|
|
href={`${appEnv.url}/${
|
|
(row.getValue("path") as TranslationField)[
|
|
appEnv.locale
|
|
]
|
|
}`}
|
|
rel="noreferrer"
|
|
>
|
|
{`${appEnv.url}/${
|
|
(row.getValue("path") as TranslationField)[
|
|
appEnv.locale
|
|
]
|
|
}`}
|
|
</a>
|
|
) : (
|
|
<p className="text-muted-foreground italic m-0">
|
|
{GetTranslation("back.table_not_known")}
|
|
</p>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
};
|
|
|
|
export default function AssociatedDocumentList(props: Props) {
|
|
const { documents } = props;
|
|
const { appEnv } = usePage().props as unknown as {
|
|
appEnv: AppEnv;
|
|
};
|
|
const documentColumns = getColumns(appEnv);
|
|
|
|
return (
|
|
<>
|
|
<h3 className="text-2xl font-semibold leading-none tracking-tight flex flex-row w-full items-start my-4">
|
|
<FileInputIcon className="me-2" />
|
|
{str(
|
|
useTrans("back.associated_model", {
|
|
params: {
|
|
model: useTrans("models.classes.document", {
|
|
choice: 2,
|
|
}),
|
|
},
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
</h3>
|
|
<DataTable
|
|
columns={documentColumns}
|
|
modelRoute="documents"
|
|
modelsPaginate={documents}
|
|
actions={[Views.VISUALIZATION, Views.EDITION]}
|
|
/>
|
|
</>
|
|
);
|
|
}
|