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

import { usePage } from "@inertiajs/react";
import { type Row } from "@tanstack/react-table";
import {
  ArchiveIcon,
  ArrowLeftIcon,
  CogIcon,
  HouseIcon,
  LockIcon,
  PlusIcon,
  StickyNoteIcon,
  TriangleAlertIcon,
} from "lucide-react";

import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import DynamicStatusBadge from "@/back/Components/DynamicPages/DynamicStatusBadge";
import SoftdeleteWarning from "@/back/Components/SoftdeleteWarning";
import DataTable from "@/back/Components/Table/DataTable";
import DataTableFilterButton from "@/back/Components/Table/DataTableFilterButton";
import DataTableSearch from "@/back/Components/Table/DataTableSearch";
import RenderTranslationCell from "@/back/Components/Table/RenderTranslationCell";
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import { Views } from "@/back/lib/actions";
import type {
  DynamicPageModel,
  PageConfigModel,
} from "@/back/types/dynamic-pages";
import type { AuthProp, ConfigBackend, Resource } from "@/back/types/global";
import { Badge } from "@/components/ui/badge";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";
import { formatDate } from "@/lib/utils";

const getColumns = (
  appEnv: AppEnv,
  modelName: string,
  routeName: string,
  viewAny: boolean,
  viewAnyPageConfigs: boolean,
) => {
  return [
    {
      accessorKey: "title",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-dynamic-pages::trans.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<DynamicPageModel> }) => (
        <div className="flex justify-center items-center">
          <RenderTranslationCell value={row.getValue("title")} />
          {row.original.isRoot && (
            <Tooltip>
              <TooltipTrigger asChild>
                <HouseIcon size={15} className="ms-1" />
              </TooltipTrigger>
              <TooltipContent>
                {trans("uwil-dynamic-pages::trans.page_root")}
              </TooltipContent>
            </Tooltip>
          )}
        </div>
      ),
    },
    {
      accessorKey: "parent_page",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-dynamic-pages::trans.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<DynamicPageModel> }) => {
        if (row.getValue("parent_page")) {
          const dynamicPageModel =
            row.getValue<DynamicPageModel>("parent_page");
          const cellValue = dynamicPageModel.title[appEnv.locale];
          let value = <span>{cellValue}</span>;
          if (viewAny && dynamicPageModel.deleted_at === null) {
            value = (
              <BtnOptionnalLinkWithTooltip
                link={route(`${routeName}${modelName}.show`, {
                  id: dynamicPageModel.id,
                })}
                content={
                  <>
                    <StickyNoteIcon />
                    {value}
                  </>
                }
                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"
              />
            );
          }
          if (dynamicPageModel.deleted_at !== null) {
            value = (
              <div className="flex flex-row justify-center items-center">
                <Badge variant="outline">{value}</Badge>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <TriangleAlertIcon
                      size={15}
                      className="text-destructive ms-1"
                    />
                  </TooltipTrigger>
                  <TooltipContent>
                    {trans("uwil-dynamic-pages::trans.page_archived")}
                  </TooltipContent>
                </Tooltip>
              </div>
            );
          }
          return value;
        }
        return (
          <p className="text-muted-foreground italic m-0">
            {trans("uwil-backend::back.table_not_known")}
          </p>
        );
      },
    },
    {
      accessorKey: "config",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-dynamic-pages::trans.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<DynamicPageModel> }) => {
        if (row.getValue("config")) {
          const pageConfigModel = row.getValue<PageConfigModel>("config");
          const cellValue = pageConfigModel.label[appEnv.locale];
          let value = <span>{cellValue}</span>;
          if (viewAnyPageConfigs && pageConfigModel.deleted_at === null) {
            value = (
              <BtnOptionnalLinkWithTooltip
                link={route(`${routeName}page-configs.show`, {
                  id: pageConfigModel.id,
                })}
                content={
                  <>
                    <CogIcon />
                    {value}
                  </>
                }
                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"
              />
            );
          }
          if (pageConfigModel.deleted_at !== null) {
            value = (
              <div className="flex flex-row justify-center items-center">
                <Badge variant="outline">{value}</Badge>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <TriangleAlertIcon
                      size={15}
                      className="text-destructive ms-1"
                    />
                  </TooltipTrigger>
                  <TooltipContent>
                    {trans("uwil-dynamic-pages::trans.config_archived")}
                  </TooltipContent>
                </Tooltip>
              </div>
            );
          }
          return value;
        }
        return (
          <p className="text-muted-foreground italic m-0">
            {trans("uwil-backend::back.table_not_known")}
          </p>
        );
      },
    },
    {
      accessorKey: "status",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-dynamic-pages::trans.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<DynamicPageModel> }) => (
        <div className="flex justify-center items-center">
          <DynamicStatusBadge value={row.getValue("status")} />
          {row.original.isLocked && (
            <Tooltip>
              <TooltipTrigger asChild>
                <LockIcon size={15} className="ms-1" />
              </TooltipTrigger>
              <TooltipContent>
                {trans("uwil-dynamic-pages::trans.page_locked")}
              </TooltipContent>
            </Tooltip>
          )}
        </div>
      ),
    },
    {
      accessorKey: "updated_at",
      header: ({ column }: { column: { id: string } }) => (
        <DataTableFilterButton
          label={str(trans(`uwil-dynamic-pages::trans.attributes.${column.id}`))
            .ucFirst()
            .value()}
          field={column.id}
        />
      ),
      cell: ({ row }: { row: Row<DynamicPageModel> }) => (
        <Badge variant="secondary">
          {formatDate(row.getValue("updated_at"))}
        </Badge>
      ),
    },
  ];
};

export default function Index({
  dynamicPageModels,
  searchFields,
  modelName,
}: {
  dynamicPageModels: Resource;
  searchFields: string;
  modelName: string;
}) {
  const { auth, appEnv, configBackend } = usePage().props as unknown as {
    auth: AuthProp;
    appEnv: AppEnv;
    configBackend: ConfigBackend;
  };
  const { viewAny, viewTrash, create } = auth.policies.dynamicPages;
  const { viewAny: viewAnyPageConfigs } = auth.policies.pageConfigs;
  const routeName = configBackend.routes.name;
  const isArchiveRoute = route().current(`${routeName}${modelName}.trash`);
  const actionModels = isArchiveRoute
    ? [Views.RESTORATION, Views.FORCEDELETION]
    : [
        Views.VISUALIZATION,
        Views.EDITION,
        Views.DUPLICATION,
        Views.ARCHIVATION,
      ];

  const columns = getColumns(
    appEnv,
    modelName,
    routeName,
    viewAny,
    viewAnyPageConfigs,
  );

  const transModel = trans(`uwil-dynamic-pages::models.classes.${modelName}`, {
    choice: 2,
  });
  const transArchiveTitle = trans("uwil-backend::crud.helpers.archives_model", {
    params: { model: transModel },
  });
  const transTitle = str(isArchiveRoute ? transArchiveTitle : transModel)
    .ucFirst()
    .value();
  const transBackToList = trans("uwil-backend::back.crud_back_to_list");
  const beforeNode = () => {
    return (
      isArchiveRoute &&
      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>
      )
    );
  };
  const transAccessToArchived = trans("uwil-backend::back.crud_access_to", {
    params: {
      target: trans("uwil-backend::back.archived_entries"),
    },
  });
  const transAddEntry = trans("uwil-backend::back.crud_add_entry");
  const afterNode = () => {
    return (
      !isArchiveRoute && (
        <div className="flex justify-end items-center gap-x-1.5">
          {viewTrash && (
            <BtnOptionnalLinkWithTooltip
              link={route(`${routeName}${modelName}.trash`)}
              content={<ArchiveIcon />}
              tooltipContent={<p>{transAccessToArchived}</p>}
              variant="outline"
            />
          )}
          {create && (
            <BtnOptionnalLinkWithTooltip
              link={route(`${routeName}${modelName}.create`)}
              content={<PlusIcon />}
              tooltipContent={<p>{transAddEntry}</p>}
            />
          )}
        </div>
      )
    );
  };

  return (
    <AuthenticatedLayout
      title={transTitle}
      beforeNode={beforeNode()}
      afterNode={afterNode()}
    >
      {isArchiveRoute && <SoftdeleteWarning />}
      <DataTableSearch
        modelRoute={modelName}
        prefixRoute={routeName}
        searchFields={searchFields}
        isArchiveRoute={isArchiveRoute}
      />
      <DataTable
        columns={columns}
        modelRoute={modelName}
        modelsPaginate={dynamicPageModels}
        actions={actionModels}
      />
    </AuthenticatedLayout>
  );
}