Administration groupée

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Archive, type LucideProps } from "lucide-react";
import { NuqsAdapter } from "nuqs/adapters/react";
import { useState } from "react";
import { Toaster } from "sonner";
import { DataTable } from "@/components/ui/yayaw-table";
import { adminMutations } from "../shared/admin-mutations";
import { getAdminActions } from "./admin-actions";
import { adminConfig } from "./admin-config";
import { getFormConfig } from "./get-form-config";
import type { ExamplePresentation } from "./presentation";

const getConfig = () => adminConfig;

// Custom bulk actions accept a function component for their icon.
const ArchiveIcon = (props: LucideProps) => <Archive {...props} />;

export default function AdminRecipe(presentation: ExamplePresentation = {}) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <NuqsAdapter>
        <DataTable
          {...presentation}
          customBulkActions={(selection) => [
            {
              id: "archive-products",
              icon: ArchiveIcon,
              label: "Archive",
              confirm: {
                title: "Archive selected products?",
                description:
                  "Archived products remain visible but cannot be edited or selected.",
                confirmLabel: "Archive",
              },
              onClick: async () => {
                const result = adminMutations.bulkUpdate(
                  selection.selectedOriginalRows.map((row) => String(row.id)),
                  { status: "archived" }
                );
                await queryClient.invalidateQueries({
                  queryKey: ["tableData", "recipe-admin"],
                });
                return {
                  ...result,
                  clearSelection: result.success,
                  closeMenu: result.success,
                };
              },
            },
          ]}
          getFormConfig={getFormConfig}
          getRowId={(row) => String(row.id)}
          getTableActions={getAdminActions}
          getTableConfig={getConfig}
          tableId="recipe-admin"
          tableType="products"
          title={presentation.title ?? "Admin"}
        />
        <Toaster />
      </NuqsAdapter>
    </QueryClientProvider>
  );
}

<script setup lang="ts">
import type { ExamplePresentation } from "./presentation";

defineProps<ExamplePresentation>();

import { Archive } from "lucide-vue-next";
import { YayawDataTable } from "@/components/ui/yayaw-table-vue";
import type { BulkAction } from "@/components/ui/yayaw-table-vue/types";
import { adminMutations } from "../shared/admin-mutations";
import { getAdminActions } from "./admin-actions";
import { adminConfig } from "./admin-config";
import { getFormConfig } from "./get-form-config";

const customBulkActions: BulkAction[] = [
  {
    id: "archive-products",
    label: "Archive",
    icon: Archive,
    confirm: {
      title: "Archive selected products?",
      description:
        "Archived products remain visible but cannot be edited or selected.",
      confirmLabel: "Archive",
    },
    handler: async (context) => {
      const result = adminMutations.bulkUpdate(context.selectedIds, {
        status: "archived",
      });
      await context.refresh();
      return {
        ...result,
        clearSelection: result.success,
        closeMenu: result.success,
      };
    },
  },
];
const getRowId = (row: Record<string, unknown>) => String(row.id);
</script>

<template>
  <YayawDataTable v-bind="$props" table-type="products" table-id="recipe-admin" :title="title ?? 'Admin'"
    :config="adminConfig" :get-table-actions="getAdminActions" :custom-bulk-actions="customBulkActions" :get-row-id="getRowId"
    :get-form-config="getFormConfig" />
</template>