omni-rest 0.3.2 → 0.3.3

package/dist/cli.mjs

@@ -1105,11 +1105,15 @@ function generateTableFile(config, modelConfig) {
   if (bulkDelete) {
     hookImports.push(useBulkDeleteHook);
   }
+  lines.push(`import { useState } from "react";`);
   lines.push(`import DataTable from "../data-table";`);
   lines.push(`import { ${columnsVar} } from "./${Model}Columns";`);
   lines.push(`import { ${hookImports.join(", ")} } from "../../hooks/use${Model}";`);
+  lines.push(`import { ${Model}Form } from "./${Model}Form";`);
+  lines.push(`import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "../ui/dialog";`);
   lines.push(``);
   lines.push(`export function ${Model}Table() {`);
+  lines.push(`  const [isCreateOpen, setIsCreateOpen] = useState(false);`);
   lines.push(`  const { data } = ${useListHook}();`);
   lines.push(`  const ${varName}Delete = ${useDeleteHook}();`);
   if (bulkDelete) {
@@ -1117,22 +1121,40 @@ function generateTableFile(config, modelConfig) {
   }
   lines.push(``);
   lines.push(`  return (`);
+  lines.push(`    <>`);
   const dtProps = [
-    `      columns={${columnsVar}}`,
-    `      data={data?.data ?? []}`,
-    `      onRowDelete={(row) => ${varName}Delete.mutate(row.id)}`
+    `        title="${models}"`,
+    `        description="Manage ${models.toLowerCase()} in your system"`,
+    `        columns={${columnsVar}}`,
+    `        data={data?.data ?? []}`,
+    `        toggleAction={() => setIsCreateOpen(true)}`,
+    `        actionText="Create ${Model}"`,
+    `        onRowDelete={(row: any) => ${varName}Delete.mutate(row.id)}`
   ];
   if (bulkDelete) {
-    dtProps.push(`      onMultiDelete={(rows) => ${varName}BulkDelete.mutate(rows.map((r) => r.id))}`);
+    dtProps.push(`        onMultiDelete={(rows: any[]) => ${varName}BulkDelete.mutate(rows.map((r) => r.id))}`);
   }
   if (canExport) {
-    dtProps.push(`      canExport={true}`);
+    dtProps.push(`        canExport={true}`);
   }
-  lines.push(`    <DataTable`);
+  lines.push(`      <DataTable`);
   for (const prop of dtProps) {
     lines.push(prop);
   }
-  lines.push(`    />`);
+  lines.push(`      />`);
+  lines.push(``);
+  lines.push(`      <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>`);
+  lines.push(`        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">`);
+  lines.push(`          <DialogHeader>`);
+  lines.push(`            <DialogTitle>Create New ${Model}</DialogTitle>`);
+  lines.push(`            <DialogDescription>`);
+  lines.push(`              Fill in the information below to create a new ${varName}.`);
+  lines.push(`            </DialogDescription>`);
+  lines.push(`          </DialogHeader>`);
+  lines.push(`          <${Model}Form onSuccess={() => setIsCreateOpen(false)} />`);
+  lines.push(`        </DialogContent>`);
+  lines.push(`      </Dialog>`);
+  lines.push(`    </>`);
   lines.push(`  );`);
   lines.push(`}`);
   lines.push(``);
@@ -1171,7 +1193,7 @@ function generateFormFile(config, modelConfig) {
     );
   }
   lines.push(``);
-  lines.push(`export function ${name}Form({ id }: { id?: string }) {`);
+  lines.push(`export function ${name}Form({ id, onSuccess }: { id?: string; onSuccess?: () => void }) {`);
   lines.push(`  const create${name} = useCreate${name}();`);
   lines.push(`  const update${name} = useUpdate${name}();`);
   for (const { fieldName, relatedModel } of relationalFieldMeta) {
@@ -1221,24 +1243,36 @@ function generateFormFile(config, modelConfig) {
     });
     lines.push(`  ];`);
     lines.push(``);
+    lines.push(`  const handleSubmit = (data: any) => {`);
+    lines.push(`    const mutation = id ? update${name}.mutate({ id, data }) : create${name}.mutate(data);`);
+    lines.push(`    if (onSuccess) {`);
+    lines.push(`      // Call onSuccess after mutation completes`);
+    lines.push(`      Promise.resolve(mutation).then(() => onSuccess()).catch(() => {});`);
+    lines.push(`    }`);
+    lines.push(`  };`);
+    lines.push(``);
     lines.push(`  return (`);
     lines.push(`    <FormGenerator`);
     lines.push(`      fields={fields}`);
     lines.push(`      schema={${name}CreateSchema}`);
-    lines.push(
-      `      onSubmit={(data) => id ? update${name}.mutate({ id, data }) : create${name}.mutate(data)}`
-    );
+    lines.push(`      onSubmit={handleSubmit}`);
     lines.push(`      steps={steps}`);
     lines.push(`    />`);
     lines.push(`  );`);
   } else {
+    lines.push(`  const handleSubmit = (data: any) => {`);
+    lines.push(`    const mutation = id ? update${name}.mutate({ id, data }) : create${name}.mutate(data);`);
+    lines.push(`    if (onSuccess) {`);
+    lines.push(`      // Call onSuccess after mutation completes`);
+    lines.push(`      Promise.resolve(mutation).then(() => onSuccess()).catch(() => {});`);
+    lines.push(`    }`);
+    lines.push(`  };`);
+    lines.push(``);
     lines.push(`  return (`);
     lines.push(`    <FormGenerator`);
     lines.push(`      fields={fields}`);
     lines.push(`      schema={${name}CreateSchema}`);
-    lines.push(
-      `      onSubmit={(data) => id ? update${name}.mutate({ id, data }) : create${name}.mutate(data)}`
-    );
+    lines.push(`      onSubmit={handleSubmit}`);
     lines.push(`    />`);
     lines.push(`  );`);
   }
@@ -1314,6 +1348,35 @@ function generateMenuData(config) {
   lines.push(``);
   return lines.join("\n");
 }
+
+// src/frontend/codegen/providers.ts
+function generateProvidersFile(config) {
+  const { staleTime, gcTime } = config;
+  const lines = [];
+  lines.push(`'use client'`);
+  lines.push(``);
+  lines.push(`import { QueryClient, QueryClientProvider } from '@tanstack/react-query'`);
+  lines.push(`import { useState } from 'react'`);
+  lines.push(``);
+  lines.push(`export function Providers({ children }: { children: React.ReactNode }) {`);
+  lines.push(`  const [queryClient] = useState(() => new QueryClient({`);
+  lines.push(`    defaultOptions: {`);
+  lines.push(`      queries: {`);
+  lines.push(`        staleTime: ${staleTime},`);
+  lines.push(`        gcTime: ${gcTime},`);
+  lines.push(`      },`);
+  lines.push(`    },`);
+  lines.push(`  }))`);
+  lines.push(``);
+  lines.push(`  return (`);
+  lines.push(`    <QueryClientProvider client={queryClient}>`);
+  lines.push(`      {children}`);
+  lines.push(`    </QueryClientProvider>`);
+  lines.push(`  )`);
+  lines.push(`}`);
+  lines.push(``);
+  return lines.join("\n");
+}
 var GREEN = "\x1B[32m";
 var YELLOW = "\x1B[33m";
 var BLUE = "\x1B[34m";
@@ -1424,6 +1487,11 @@ async function generateAll(config) {
   }
   const baseResults = await copyBaseComponents(outputDir, packageRoot);
   results.push(...baseResults);
+  if (framework === "nextjs" && structure.usesAppRouter) {
+    const providersContent = generateProvidersFile(config);
+    const providersPath = path3.join(outputDir, "components", "providers.tsx");
+    results.push(await writeFile(providersPath, providersContent));
+  }
   if (generateMenu) {
     const menuContent = generateMenuData(config);
     const menuPath = path3.join(outputDir, "lib", "menu-data.ts");