336 lines
13 KiB
TypeScript
336 lines
13 KiB
TypeScript
// * Packages
|
|
import { usePage } from "@inertiajs/react";
|
|
import { route } from "ziggy-js";
|
|
import { ArrowLeft, FolderIcon, TagIcon } from "lucide-react";
|
|
// * Components shadcn
|
|
import { Badge } from "@/components/ui/badge";
|
|
// * Other
|
|
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
|
|
import DetailsTable from "@/back/Components/Table/DetailsTable";
|
|
import ModelActions from "@/back/Components/ModelActions";
|
|
import { GetFormatedDate, GetTranslation, Views } from "@/lib/utils";
|
|
import { AppEnv, AuthProp, SingleResource } from "@/back/types/global";
|
|
import {
|
|
DocumentModel,
|
|
DocumentCategoryModel,
|
|
DocumentTagModel,
|
|
} from "@/back/types/others";
|
|
import { TranslationField } from "@/back/types/i18n";
|
|
import str from "@/hooks/use-string";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import DocumentStatusBadge from "@/back/Components/Documents/DocumentStatusBadge";
|
|
import YearsEnumeBadge from "@/back/Components/Documents/DocumentExerciceBadge";
|
|
|
|
const getColumns = (
|
|
appEnv: AppEnv,
|
|
viewAnyDocumentCategories: boolean,
|
|
viewAnyDocumentTags: boolean,
|
|
) => {
|
|
return [
|
|
{
|
|
accessorKey: "name",
|
|
header: str(GetTranslation("validation.attributes.name"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: TranslationField }) =>
|
|
value[appEnv.locale] ? (
|
|
value[appEnv.locale]
|
|
) : (
|
|
<p className="text-muted-foreground italic m-0">
|
|
{GetTranslation("back.table_not_known")}
|
|
</p>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "path",
|
|
header: str(GetTranslation("validation.custom.file"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: TranslationField }) =>
|
|
value[appEnv.locale] ? (
|
|
<a
|
|
target="_blank"
|
|
className="text-blue-500 underline"
|
|
href={`${appEnv.url}/${value[appEnv.locale]}`}
|
|
rel="noreferrer"
|
|
>
|
|
{`${appEnv.url}/${value[appEnv.locale]}`}
|
|
</a>
|
|
) : (
|
|
<p className="text-muted-foreground italic m-0">
|
|
{GetTranslation("back.table_not_known")}
|
|
</p>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "issuu_path",
|
|
header: str(GetTranslation("validation.custom.issuu_path"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: TranslationField }) =>
|
|
value[appEnv.locale] ? (
|
|
<a
|
|
target="_blank"
|
|
className="text-blue-500 underline"
|
|
href={value[appEnv.locale]}
|
|
rel="noreferrer"
|
|
>
|
|
{value[appEnv.locale]}
|
|
</a>
|
|
) : (
|
|
<p className="text-muted-foreground italic m-0">
|
|
{GetTranslation("back.table_not_known")}
|
|
</p>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "exercice",
|
|
header: str(
|
|
GetTranslation("back.associated_model", {
|
|
params: {
|
|
model: GetTranslation(
|
|
"models.classes.document-exercice",
|
|
{
|
|
choice: 2,
|
|
},
|
|
),
|
|
},
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: string }) => {
|
|
return <YearsEnumeBadge value={Number(value)} />;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: str(GetTranslation("validation.custom.status"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: string }) => {
|
|
return <DocumentStatusBadge value={Number(value)} />;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "categories",
|
|
header: str(
|
|
GetTranslation("models.classes.document-category", {
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value?: DocumentCategoryModel[] }) => {
|
|
return value !== undefined && value.length > 0 ? (
|
|
<div className="flex flex-row justify-start items-center gap-1.5">
|
|
{value.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: "tags",
|
|
header: str(
|
|
GetTranslation("models.classes.document-tag", { choice: 2 }),
|
|
)
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value?: DocumentTagModel[] }) => {
|
|
return value !== undefined && value.length > 0 ? (
|
|
<div className="flex flex-row justify-start items-center gap-1.5">
|
|
{value.map((item) =>
|
|
viewAnyDocumentTags ? (
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(
|
|
"back.document-tags.show",
|
|
item,
|
|
)}
|
|
content={
|
|
<>
|
|
<TagIcon />
|
|
<span>
|
|
{item.name[appEnv.locale]}
|
|
</span>
|
|
</>
|
|
}
|
|
tooltipContent={
|
|
<p>
|
|
{GetTranslation(
|
|
"back.access_model",
|
|
{
|
|
params: {
|
|
model: GetTranslation(
|
|
"models.classes.document-tag",
|
|
{ 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: "created_at",
|
|
header: str(GetTranslation("validation.attributes.created_at"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: string }) => {
|
|
return (
|
|
<Badge variant="secondary">{GetFormatedDate(value)}</Badge>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "published_at",
|
|
header: str(GetTranslation("validation.custom.published_at"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: string }) => (
|
|
<Badge variant="secondary">
|
|
{GetFormatedDate(value, undefined, true)}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "unpublished_at",
|
|
header: str(GetTranslation("validation.custom.unpublished_at"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: string }) => (
|
|
<Badge variant="secondary">{GetFormatedDate(value)}</Badge>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "updated_at",
|
|
header: str(GetTranslation("validation.attributes.updated_at"))
|
|
.ucFirst()
|
|
.value(),
|
|
cell: ({ value }: { value: string }) => (
|
|
<Badge variant="secondary">{GetFormatedDate(value)}</Badge>
|
|
),
|
|
},
|
|
];
|
|
};
|
|
|
|
export default function Show({
|
|
data,
|
|
modelName,
|
|
}: {
|
|
data: SingleResource;
|
|
modelName: string;
|
|
}) {
|
|
const { auth, appEnv } = usePage().props as unknown as {
|
|
auth: AuthProp;
|
|
appEnv: AppEnv;
|
|
};
|
|
const { viewAny } = auth.policies.documents;
|
|
const { viewAny: viewAnyDocumentCategories } =
|
|
auth.policies.documentCategories;
|
|
const { viewAny: viewAnyDocumentTags } = auth.policies.documentTags;
|
|
const docsModel = data.data as DocumentModel;
|
|
const actionModels = [Views.EDITION, Views.DELETION];
|
|
const singularModelName = str(modelName).singular().value();
|
|
const transTitle = useTrans("crud.helpers.visualization_model", {
|
|
params: {
|
|
model: useTrans(`models.classes.${singularModelName}`, {
|
|
choice: 1,
|
|
}),
|
|
},
|
|
});
|
|
const columns = getColumns(
|
|
appEnv,
|
|
viewAnyDocumentCategories,
|
|
viewAnyDocumentTags,
|
|
);
|
|
|
|
const transBackToList = useTrans("back.crud_back_to_list");
|
|
const beforeNode = () => {
|
|
return (
|
|
viewAny && (
|
|
<div className="flex justify-end items-center gap-x-1.5">
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(`back.${modelName}.index`)}
|
|
content={<ArrowLeft />}
|
|
tooltipContent={<p>{transBackToList}</p>}
|
|
/>
|
|
</div>
|
|
)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout title={transTitle} beforeNode={beforeNode()}>
|
|
<ModelActions
|
|
actions={actionModels}
|
|
modelRoute={modelName}
|
|
model={docsModel}
|
|
modelUpdatedAt={docsModel.updated_at.toString()}
|
|
/>
|
|
{/* @ts-expect-error Weird error type on cell. */}
|
|
<DetailsTable columns={columns} model={docsModel} />
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|