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

import { usePage } from "@inertiajs/react";
import {
  ArrowLeftIcon,
  CheckIcon,
  CogIcon,
  StickyNoteIcon,
  XIcon,
} from "lucide-react";

import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import RecursiveContent from "@/back/Components/DynamicPages/DynamicPageDetails";
import DynamicStatusBadge from "@/back/Components/DynamicPages/DynamicStatusBadge";
import ModelActions from "@/back/Components/ModelActions";
import DetailsTable from "@/back/Components/Table/DetailsTable";
import RenderTranslationCell from "@/back/Components/Table/RenderTranslationCell";
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import { Views } from "@/back/lib/actions";
import type {
  DynamicPageModelWithRelations,
  PageConfigModel,
} from "@/back/types/dynamic-pages";
import type {
  AuthProp,
  ConfigBackend,
  SingleResource,
} from "@/back/types/global";
import type { TranslationField } from "@/back/types/i18n";
import { Badge } from "@/components/ui/badge";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";
import { formatDate } from "@/lib/utils";

const getColumns = (
  appEnv: AppEnv,
  auth: AuthProp,
  modelName: string,
  routeName: string,
  dynamicPageModel: DynamicPageModelWithRelations,
) => {
  return [
    {
      accessorKey: "title",
      header: str(trans("uwil-dynamic-pages::trans.attributes.title"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: TranslationField }) => (
        <RenderTranslationCell value={value} />
      ),
    },
    {
      accessorKey: "parent_page",
      header: str(trans("uwil-dynamic-pages::trans.attributes.parent_page"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: DynamicPageModelWithRelations }) =>
        auth.policies.dynamicPages.viewAny ? (
          <BtnOptionnalLinkWithTooltip
            link={route(`${routeName}${modelName}.show`, {
              id: value.id,
            })}
            content={
              <>
                <StickyNoteIcon />
                <span>{value.title[appEnv.locale]}</span>
              </>
            }
            tooltipContent={
              <p>
                {trans("uwil-dynamic-pages::trans.access_model", {
                  params: {
                    model: trans(
                      `uwil-dynamic-pages::models.classes.${modelName}`,
                      {
                        choice: 1,
                      },
                    ),
                  },
                })}
              </p>
            }
            type="button"
            size="default"
            variant="secondary"
          />
        ) : (
          <span>{value.title[appEnv.locale]}</span>
        ),
    },
    {
      accessorKey: "config",
      header: str(trans("uwil-dynamic-pages::trans.attributes.config"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: PageConfigModel }) =>
        auth.policies.pageConfigs.viewAny ? (
          <BtnOptionnalLinkWithTooltip
            link={route(`${routeName}page-configs.show`, {
              id: value.id,
            })}
            content={
              <>
                <CogIcon />
                <span>{value.label[appEnv.locale]}</span>
              </>
            }
            tooltipContent={
              <p>
                {trans("uwil-dynamic-pages::trans.access_model", {
                  params: {
                    model: trans(
                      "uwil-dynamic-pages::models.classes.page-configs",
                      {
                        choice: 1,
                      },
                    ),
                  },
                })}
              </p>
            }
            type="button"
            size="default"
            variant="secondary"
          />
        ) : (
          <span>{value.label[appEnv.locale]}</span>
        ),
    },
    {
      accessorKey: "content",
      header: str(trans("uwil-dynamic-pages::trans.attributes.content"))
        .ucFirst()
        .value(),
      cell: ({
        value,
      }: {
        value: TranslationField<Record<string, unknown> | string>;
      }) => {
        const localeValue = value[appEnv.locale];
        if (
          typeof localeValue === "object" &&
          dynamicPageModel.config?.config[appEnv.locale]
        ) {
          return (
            <RecursiveContent
              value={localeValue}
              config={dynamicPageModel.config.config[appEnv.locale]}
            />
          );
        }
        if (typeof localeValue === "string" && localeValue.trim().length > 0) {
          return <p>{localeValue}</p>;
        }
        return (
          <span className="text-sm italic text-muted-foreground">
            {trans("uwil-backend::back.table_not_known")}
          </span>
        );
      },
    },
    {
      accessorKey: "status",
      header: str(trans(`uwil-dynamic-pages::trans.attributes.status`))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: number }) => (
        <DynamicStatusBadge value={value} />
      ),
    },
    {
      accessorKey: "isLocked",
      header: str(trans("uwil-dynamic-pages::trans.attributes.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(
            trans(value ? "uwil-backend::back.yes" : "uwil-backend::back.no"),
          )
            .ucFirst()
            .value()}
        </Badge>
      ),
    },
    {
      accessorKey: "isRoot",
      header: str(trans("uwil-dynamic-pages::trans.attributes.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(
            trans(value ? "uwil-backend::back.yes" : "uwil-backend::back.no"),
          )
            .ucFirst()
            .value()}
        </Badge>
      ),
    },
    {
      accessorKey: "created_at",
      header: str(trans("uwil-dynamic-pages::trans.attributes.created_at"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <Badge variant="secondary">{formatDate(value)}</Badge>
      ),
    },
    {
      accessorKey: "updated_at",
      header: str(trans("uwil-dynamic-pages::trans.attributes.updated_at"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <Badge variant="secondary">{formatDate(value)}</Badge>
      ),
    },
    {
      accessorKey: "deleted_at",
      header: str(trans("uwil-dynamic-pages::trans.attributes.deleted_at"))
        .ucFirst()
        .value(),
      cell: ({ value }: { value: string }) => (
        <Badge variant="secondary">{formatDate(value)}</Badge>
      ),
    },
  ];
};

export default function Show({
  data,
  modelName,
}: Readonly<{
  data: SingleResource;
  modelName: string;
}>) {
  const { auth, appEnv, configBackend } = usePage().props as unknown as {
    auth: AuthProp;
    appEnv: AppEnv;
    configBackend: ConfigBackend;
  };
  const { viewAny } = auth.policies.dynamicPages;
  const routeName = configBackend.routes.name;
  const dynamicPageModel = data.data as DynamicPageModelWithRelations;
  const actionModels = [Views.EDITION, Views.DUPLICATION, Views.ARCHIVATION];
  const columns = getColumns(
    appEnv,
    auth,
    modelName,
    routeName,
    dynamicPageModel,
  );
  const transTitle = trans("uwil-backend::crud.helpers.visualization_model", {
    params: {
      model: trans(`uwil-dynamic-pages::models.classes.${modelName}`, {
        choice: 1,
      }),
    },
  });

  const transBackToList = trans("uwil-backend::back.crud_back_to_list");
  const beforeNode = () => {
    return (
      viewAny && (
        <div className="flex justify-end items-center gap-x-1.5">
          <BtnOptionnalLinkWithTooltip
            link={route(`${routeName}${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>
  );
}