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 BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import RenderTranslationCell from "@/back/Components/Table/RenderTranslationCell";
import { GetFormatedDate, GetTranslation, Views } from "@/lib/utils";
import { AppEnv, AuthProp, SingleResource } from "@/back/types/global";
import {
    DynamicPageModelWithRelations,
    PageConfigModel,
} from "@/back/types/dynamic-pages";
import { TranslationField } from "@/back/types/i18n";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";

const getColumns = (
    appEnv: AppEnv,
    auth: AuthProp,
    modelName: string,
    dynamicPageModel: DynamicPageModelWithRelations,
) => {
    return [
        {
            accessorKey: "title",
            header: str(GetTranslation("validation.attributes.title"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: TranslationField }) => (
                <RenderTranslationCell value={value} />
            ),
        },
        {
            accessorKey: "parent_page",
            header: str(GetTranslation("validation.custom.parent_page"))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: DynamicPageModelWithRelations }) =>
                auth.policies.dynamicPages.viewAny ? (
                    <BtnOptionnalLinkWithTooltip
                        link={route(`back.${modelName}.show`, value)}
                        content={
                            <>
                                <StickyNoteIcon />
                                <span>{value.title[appEnv.locale]}</span>
                            </>
                        }
                        tooltipContent={
                            <p>
                                {GetTranslation("back.access_model", {
                                    params: {
                                        model: GetTranslation(
                                            `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(GetTranslation("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>
                                {GetTranslation("back.access_model", {
                                    params: {
                                        model: GetTranslation(
                                            "models.classes.page-config",
                                            { choice: 1 },
                                        ),
                                    },
                                })}
                            </p>
                        }
                        type="button"
                        size="default"
                        variant="secondary"
                    />
                ) : (
                    <span>{value.label[appEnv.locale]}</span>
                ),
        },
        {
            accessorKey: "content",
            header: str(GetTranslation("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]
                            }
                        />
                    );
                }
                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">
                        {GetTranslation("back.table_not_known")}
                    </span>
                );
            },
        },
        {
            accessorKey: "status",
            header: str(GetTranslation(`validation.custom.status`))
                .ucFirst()
                .value(),
            cell: ({ value }: { value: number }) => (
                <DynamicStatusBadge value={value} />
            ),
        },
        {
            accessorKey: "isLocked",
            header: str(GetTranslation("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(GetTranslation(value ? "back.yes" : "back.no"))
                        .ucFirst()
                        .value()}
                </Badge>
            ),
        },
        {
            accessorKey: "isRoot",
            header: str(GetTranslation("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(GetTranslation(value ? "back.yes" : "back.no"))
                        .ucFirst()
                        .value()}
                </Badge>
            ),
        },
        {
            accessorKey: "created_at",
            header: str(GetTranslation("validation.attributes.created_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>
            ),
        },
        {
            accessorKey: "deleted_at",
            header: str(GetTranslation("validation.attributes.deleted_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.dynamicPages;
    const dynamicPageModel = data.data as DynamicPageModelWithRelations;
    const actionModels = [Views.EDITION, Views.DUPLICATION, Views.ARCHIVATION];
    const columns = getColumns(appEnv, auth, modelName, dynamicPageModel);
    const singularModelName = str(modelName).singular().value();
    const transTitle = useTrans("crud.helpers.visualization_model", {
        params: {
            model: useTrans(`models.classes.${singularModelName}`, {
                choice: 1,
            }),
        },
    });

    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={<ArrowLeftIcon />}
                        tooltipContent={<p>{transBackToList}</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>
    );
}