ldc-groupe/resources/ts/back/Pages/DynamicPages/Show.tsx

// * Packages
import { ArrowLeftIcon, CheckIcon, CogIcon, StickyNoteIcon, XIcon } from "lucide-react";
import { usePage } from "@inertiajs/react";
import { route } from "ziggy-js";
// * 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 DynamicStatusBadge from "@/back/Components/DynamicPages/DynamicStatusBadge";
import RecursiveContent from "@/back/Components/DynamicPages/DynamicPageDetails";
import { Views } from "@/lib/utils";
import { useFormatedDate } from "@/hooks/use-formated-value";
import {
    AppEnv,
    AuthProp,
    DynamicPageModel,
    PageConfigModel,
    SingleResource,
    TranslationField,
} from "@/back/types/global";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import { renderTranslationCell } from "@/lib/translationCellFallback";

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.dynamicPages;
    const dynamicPageModel = data.data as DynamicPageModel;
    const actionModels = [
        Views.EDITION,
        Views.DUPLICATION,
        Views.ARCHIVATION,
    ];
    const columns = [
        {
            accessorKey: "title",
            header: str(useTrans("validation.attributes.title")).ucFirst().value(),
            cell: ({ value }: { value: TranslationField }) => (
                renderTranslationCell(
                    value
                )
            ),
        },
        {
            accessorKey: "parent_page",
            header: str(useTrans("validation.custom.parent_page")).ucFirst().value(),
            cell: ({ value }: { value: DynamicPageModel }) => auth.policies.dynamicPages.viewAny ? (
                <BtnOptionnalLinkWithTooltip
                    link={route(`back.${modelName}.show`, value)}
                    content={
                        <>
                            <StickyNoteIcon />
                            <span>{value.title[appEnv.locale]}</span>
                        </>
                    }
                    tooltipContent={
                        <p>{useTrans("back.access_model", {
                            params: {
                                model: useTrans(`models.classes.${str(modelName).singular().value()}`, { choice: 1 })
                            }
                        })}</p>
                    }
                    type="button"
                    size="default"
                    variant="secondary"
                />
            ) : <span>{value.title[appEnv.locale]}</span>
        },
        {
            accessorKey: "config",
            header: str(useTrans("validation.custom.config")).ucFirst().value(),
            cell: ({ value }: { value: PageConfigModel }) => auth.policies.pageConfigs.viewAny ? (
                <BtnOptionnalLinkWithTooltip
                    link={route('back.page-configs.show', value)}
                    content={
                        <>
                            <CogIcon />
                            <span>{value.label[appEnv.locale]}</span>
                        </>
                    }
                    tooltipContent={
                        <p>{useTrans("back.access_model", {
                            params: {
                                model: useTrans('models.classes.page-config', { choice: 1 })
                            }
                        })}</p>
                    }
                    type="button"
                    size="default"
                    variant="secondary"
                />
            ) : <span>{value.label[appEnv.locale]}</span>
        },
        {
            accessorKey: "content",
            header: str(useTrans("validation.attributes.content")).ucFirst().value(),
            cell: ({ value }: { value: TranslationField<object | string> }) => {
                if (typeof value[appEnv.locale] === "object" && dynamicPageModel.config?.config?.[appEnv.locale]) {
                    return (
                        <RecursiveContent
                            value={value[appEnv.locale]}
                            config={dynamicPageModel.config.config[appEnv.locale]}
                        />
                    );
                } else if (typeof value[appEnv.locale] === "string" && String(value[appEnv.locale]).trim().length > 0) {
                    return <p>{String(value[appEnv.locale])}</p>;
                }
                return (
                    <span className="text-sm italic text-muted-foreground">
                        {tableNotKnownTrans}
                    </span>
                );
            },
        },
        {
            accessorKey: "status",
            header: str(useTrans(`validation.custom.status`)).ucFirst().value(),
            cell: ({ value }: { value: number }) => <DynamicStatusBadge value={value} />,
        },
        {
            accessorKey: "isLocked",
            header: str(useTrans("validation.custom.locked")).ucFirst().value(),
            cell: ({ value }: { value: boolean }) => (
                <Badge
                    variant="outline"
                    className={`border-0 ${value ? "bg-green-200 dark:bg-green-900" : "bg-red-200 dark:bg-red-900"}`}
                >
                    {value ? <CheckIcon size={15} className="mr-1" /> : <XIcon size={15} className="mr-1" />}
                    {str(useTrans(value ? "back.yes" : "back.no")).ucFirst().value()}
                </Badge>
            ),
        },
        {
            accessorKey: "isRoot",
            header: str(useTrans("validation.custom.root")).ucFirst().value(),
            cell: ({ value }: { value: boolean }) => (
                <Badge
                    variant="outline"
                    className={`border-0 ${value ? "bg-green-200 dark:bg-green-900" : "bg-red-200 dark:bg-red-900"}`}
                >
                    {value ? <CheckIcon size={15} className="mr-1" /> : <XIcon size={15} className="mr-1" />}
                    {str(useTrans(value ? "back.yes" : "back.no")).ucFirst().value()}
                </Badge>
            ),
        },
        {
            accessorKey: "created_at",
            header: str(useTrans("validation.attributes.created_at")).ucFirst().value(),
            cell: ({ value }: { value: string }) => (
                <Badge variant="secondary">{useFormatedDate(value)}</Badge>
            ),
        },
        {
            accessorKey: "updated_at",
            header: str(useTrans("validation.attributes.updated_at")).ucFirst().value(),
            cell: ({ value }: { value: string }) => (
                <Badge variant="secondary">{useFormatedDate(value)}</Badge>
            ),
        },
        {
            accessorKey: "deleted_at",
            header: str(useTrans("validation.attributes.deleted_at")).ucFirst().value(),
            cell: ({ value }: { value: string }) => (
                <Badge variant="secondary">{useFormatedDate(value)}</Badge>
            ),
        },
    ];
    const singularModelName = str(modelName).singular().value();
    const transTitle = useTrans("crud.helpers.visualization_model", {
        params: { model: useTrans(`models.classes.${singularModelName}`, { choice: 1 }) },
    });
    const tableNotKnownTrans = useTrans("back.table_not_known");

    const beforeNode = () => {
        return 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>
        );
    };

    return (
        <AuthenticatedLayout
            title={transTitle}
            beforeNode={beforeNode()}
        >
            <ModelActions
                actions={actionModels}
                modelRoute={modelName}
                model={dynamicPageModel}
                modelUpdatedAt={dynamicPageModel.updated_at.toString()}
            />
            {/* @ts-expect-error Weird error type on cell. */}
            <DetailsTable columns={columns} model={dynamicPageModel} />
        </AuthenticatedLayout>
    );
}