cabloy 5.1.65 → 5.1.67

package/zova/src/suite/cabloy-basic/modules/basic-details/src/.metadata/component/blockForm.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerBlockFormProps } from '../../component/blockForm/controller.jsx';
+
+import { ControllerBlockForm } from '../../component/blockForm/controller.jsx';
+export type ZBlockFormProps = {
+  controllerRef?: (ref: ControllerBlockForm) => void;
+} & ControllerBlockFormProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerBlockFormProps,
+  keyof typeof ControllerBlockForm.$propsDefault
+>;
+declare module 'zova-module-basic-details' {
+  export interface ControllerBlockForm {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZBlockForm = defineComponent((_props: ZBlockFormProps) => {
+  useController(ControllerBlockForm, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions(ControllerBlockForm.$componentOptions));
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-details:blockForm': ControllerBlockFormProps;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/.metadata/index.ts

@@ -1,7 +1,43 @@
 // eslint-disable
+/** service: begin */
+export * from '../service/detail.jsx';
+
+import 'zova-module-a-bean';
+declare module 'zova-module-a-bean' {
+  
+    export interface IServiceRecord {
+      'basic-details:detail': never;
+    }
+
+  
+}
+declare module 'zova-module-basic-details' {
+  
+        export interface ServiceDetail {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface ServiceDetail {
+          get $beanFullName(): 'basic-details.service.detail';
+          get $onionName(): 'basic-details:detail';
+          
+        } 
+}
+/** service: end */
+/** service: begin */
+import { ServiceDetail } from '../service/detail.jsx';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordGeneral {
+    'basic-details.service.detail': ServiceDetail;
+  }
+}
+/** service: end */
 /** controller: begin */
 export * from '../component/actionCreate/controller.jsx';
 export * from '../component/blockDetails/controller.jsx';
+export * from '../component/blockForm/controller.jsx';
 export * from '../component/blockTable/controller.jsx';
 export * from '../component/blockToolbarBulk/controller.jsx';
 export * from '../component/formFieldDetails/controller.jsx';
@@ -23,6 +59,11 @@ declare module 'zova-module-basic-details' {
           get scope(): ScopeModuleBasicDetails;
         }
 
+        export interface ControllerBlockForm {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
         export interface ControllerBlockTable {
           /** @internal */
           get scope(): ScopeModuleBasicDetails;
@@ -42,6 +83,7 @@ declare module 'zova-module-basic-details' {
 /** controller: begin */
 import { ControllerActionCreate } from '../component/actionCreate/controller.jsx';
 import { ControllerBlockDetails } from '../component/blockDetails/controller.jsx';
+import { ControllerBlockForm } from '../component/blockForm/controller.jsx';
 import { ControllerBlockTable } from '../component/blockTable/controller.jsx';
 import { ControllerBlockToolbarBulk } from '../component/blockToolbarBulk/controller.jsx';
 import { ControllerFormFieldDetails } from '../component/formFieldDetails/controller.jsx';
@@ -50,6 +92,7 @@ declare module 'zova' {
   export interface IBeanRecordLocal {
     'basic-details.controller.actionCreate': ControllerActionCreate;
 'basic-details.controller.blockDetails': ControllerBlockDetails;
+'basic-details.controller.blockForm': ControllerBlockForm;
 'basic-details.controller.blockTable': ControllerBlockTable;
 'basic-details.controller.blockToolbarBulk': ControllerBlockToolbarBulk;
 'basic-details.controller.formFieldDetails': ControllerFormFieldDetails;
@@ -62,6 +105,8 @@ export * from './component/actionCreate.js';
 import { ZActionCreate } from './component/actionCreate.js';
 export * from './component/blockDetails.js';
 import { ZBlockDetails } from './component/blockDetails.js';
+export * from './component/blockForm.js';
+import { ZBlockForm } from './component/blockForm.js';
 export * from './component/blockTable.js';
 import { ZBlockTable } from './component/blockTable.js';
 export * from './component/blockToolbarBulk.js';
@@ -71,6 +116,7 @@ import { ZFormFieldDetails } from './component/formFieldDetails.js';
 export const components = {
   'actionCreate': ZActionCreate,
 'blockDetails': ZBlockDetails,
+'blockForm': ZBlockForm,
 'blockTable': ZBlockTable,
 'blockToolbarBulk': ZBlockToolbarBulk,
 'formFieldDetails': ZFormFieldDetails,
@@ -80,6 +126,7 @@ declare module 'zova' {
 export interface IComponentRecord {
   'basic-details:actionCreate': ControllerActionCreate;
 'basic-details:blockDetails': ControllerBlockDetails;
+'basic-details:blockForm': ControllerBlockForm;
 'basic-details:blockTable': ControllerBlockTable;
 'basic-details:blockToolbarBulk': ControllerBlockToolbarBulk;
 'basic-details:formFieldDetails': ControllerFormFieldDetails;
@@ -87,6 +134,7 @@ export interface IComponentRecord {
 export interface IZovaComponentRecord {
   'basic-details:actionCreate': typeof ZActionCreate;
 'basic-details:blockDetails': typeof ZBlockDetails;
+'basic-details:blockForm': typeof ZBlockForm;
 'basic-details:blockTable': typeof ZBlockTable;
 'basic-details:blockToolbarBulk': typeof ZBlockToolbarBulk;
 'basic-details:formFieldDetails': typeof ZFormFieldDetails;
@@ -94,19 +142,42 @@ export interface IZovaComponentRecord {
 }
 /** components: end */
 /** tableCell: begin */
+export * from '../bean/tableCell.actionDelete.jsx';
 export * from '../bean/tableCell.actionOperationsRow.jsx';
+export * from '../bean/tableCell.actionUpdate.jsx';
+export * from '../bean/tableCell.actionView.jsx';
+export * from '../bean/tableCell.lineNumber.jsx';
+import { ITableCellOptionsActionDelete } from '../bean/tableCell.actionDelete.jsx';
 import { ITableCellOptionsActionOperationsRow } from '../bean/tableCell.actionOperationsRow.jsx';
+import { ITableCellOptionsActionUpdate } from '../bean/tableCell.actionUpdate.jsx';
+import { ITableCellOptionsActionView } from '../bean/tableCell.actionView.jsx';
+import { ITableCellOptionsLineNumber } from '../bean/tableCell.lineNumber.jsx';
 import 'zova-module-a-table';
 declare module 'zova-module-a-table' {
   
     export interface ITableCellRecord {
-      'basic-details:actionOperationsRow': ITableCellOptionsActionOperationsRow;
+      'basic-details:actionDelete': ITableCellOptionsActionDelete;
+'basic-details:actionOperationsRow': ITableCellOptionsActionOperationsRow;
+'basic-details:actionUpdate': ITableCellOptionsActionUpdate;
+'basic-details:actionView': ITableCellOptionsActionView;
+'basic-details:lineNumber': ITableCellOptionsLineNumber;
     }
 
   
 }
 declare module 'zova-module-basic-details' {
   
+        export interface TableCellActionDelete {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface TableCellActionDelete {
+          get $beanFullName(): 'basic-details.tableCell.actionDelete';
+          get $onionName(): 'basic-details:actionDelete';
+          get $onionOptions(): ITableCellOptionsActionDelete;
+        }
+
         export interface TableCellActionOperationsRow {
           /** @internal */
           get scope(): ScopeModuleBasicDetails;
@@ -116,18 +187,94 @@ declare module 'zova-module-basic-details' {
           get $beanFullName(): 'basic-details.tableCell.actionOperationsRow';
           get $onionName(): 'basic-details:actionOperationsRow';
           get $onionOptions(): ITableCellOptionsActionOperationsRow;
+        }
+
+        export interface TableCellActionUpdate {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface TableCellActionUpdate {
+          get $beanFullName(): 'basic-details.tableCell.actionUpdate';
+          get $onionName(): 'basic-details:actionUpdate';
+          get $onionOptions(): ITableCellOptionsActionUpdate;
+        }
+
+        export interface TableCellActionView {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface TableCellActionView {
+          get $beanFullName(): 'basic-details.tableCell.actionView';
+          get $onionName(): 'basic-details:actionView';
+          get $onionOptions(): ITableCellOptionsActionView;
+        }
+
+        export interface TableCellLineNumber {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface TableCellLineNumber {
+          get $beanFullName(): 'basic-details.tableCell.lineNumber';
+          get $onionName(): 'basic-details:lineNumber';
+          get $onionOptions(): ITableCellOptionsLineNumber;
         } 
 }
 /** tableCell: end */
 /** tableCell: begin */
+import { TableCellActionDelete } from '../bean/tableCell.actionDelete.jsx';
 import { TableCellActionOperationsRow } from '../bean/tableCell.actionOperationsRow.jsx';
+import { TableCellActionUpdate } from '../bean/tableCell.actionUpdate.jsx';
+import { TableCellActionView } from '../bean/tableCell.actionView.jsx';
+import { TableCellLineNumber } from '../bean/tableCell.lineNumber.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordGeneral {
-    'basic-details.tableCell.actionOperationsRow': TableCellActionOperationsRow;
+    'basic-details.tableCell.actionDelete': TableCellActionDelete;
+'basic-details.tableCell.actionOperationsRow': TableCellActionOperationsRow;
+'basic-details.tableCell.actionUpdate': TableCellActionUpdate;
+'basic-details.tableCell.actionView': TableCellActionView;
+'basic-details.tableCell.lineNumber': TableCellLineNumber;
   }
 }
 /** tableCell: end */
+/** command: begin */
+export * from '../bean/command.delete.jsx';
+import { ICommandOptionsDelete } from '../bean/command.delete.jsx';
+import 'zova-module-a-command';
+declare module 'zova-module-a-command' {
+  
+    export interface ICommandRecord {
+      'basic-details:delete': ICommandOptionsDelete;
+    }
+
+  
+}
+declare module 'zova-module-basic-details' {
+  
+        export interface CommandDelete {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface CommandDelete {
+          get $beanFullName(): 'basic-details.command.delete';
+          get $onionName(): 'basic-details:delete';
+          get $onionOptions(): ICommandOptionsDelete;
+        } 
+}
+/** command: end */
+/** command: begin */
+import { CommandDelete } from '../bean/command.delete.jsx';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordGeneral {
+    'basic-details.command.delete': CommandDelete;
+  }
+}
+/** command: end */
 /** locale: begin */
 import { locales } from './locales.js';
 /** locale: end */

package/zova/src/suite/cabloy-basic/modules/basic-details/src/bean/command.delete.tsx

@@ -0,0 +1,47 @@
+import type {
+  ICommandExecute,
+  ICommandDetailsRowOptionsBase,
+  NextCommandExecute,
+} from 'zova-module-a-command';
+import type { IJsxRenderContextBase, IJsxRenderContextDetails } from 'zova-module-a-openapi';
+import type { IJsxRenderContextTableCell } from 'zova-module-a-table';
+
+import { isNil } from '@cabloy/utils';
+import { BeanBase } from 'zova';
+import { Command } from 'zova-module-a-command';
+
+export type TypeCommandDeleteResult = unknown;
+
+export interface ICommandOptionsDelete extends ICommandDetailsRowOptionsBase<TypeCommandDeleteResult> {}
+
+type DetailItem = Record<string, any>;
+
+@Command<ICommandOptionsDelete>()
+export class CommandDelete extends BeanBase implements ICommandExecute {
+  execute(
+    _options: ICommandOptionsDelete,
+    renderContext: IJsxRenderContextBase,
+    next: NextCommandExecute,
+  ) {
+    const { $celScope } = renderContext as IJsxRenderContextDetails;
+    const $$details = $celScope.$$details;
+    if (!$$details) throw new Error('should provide $$details in cell scope');
+    const { cellContext } = renderContext as IJsxRenderContextTableCell;
+    const row = cellContext?.row;
+    if (!row) throw new Error('should provide row in cell context');
+    const detailItem = row.original as DetailItem;
+    const detailItemIndex = row.index;
+    const detailItemId = detailItem.id;
+    const detailItems = $$details.data as DetailItem[];
+    if (!isNil(detailItemId)) {
+      $$details.data = detailItems.map(item => {
+        return item.id === detailItemId ? { ...item, deleted: true } : item;
+      });
+    } else {
+      $$details.data = detailItems.filter((_item, index) => {
+        return index !== detailItemIndex;
+      });
+    }
+    return next();
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/bean/tableCell.actionDelete.tsx

@@ -0,0 +1,52 @@
+import type { IResourceDetailsActionRowOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextTableCell,
+  ITableCellRender,
+  NextTableCellRender,
+} from 'zova-module-a-table';
+
+import { BeanBase } from 'zova';
+import { ZIcon } from 'zova-module-a-icon';
+import { TableCell } from 'zova-module-a-table';
+
+import { ICommandOptionsDelete } from './command.delete.jsx';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceDetailsActionRowRecord {
+    'basic-details:actionDelete'?: ITableCellOptionsActionDelete;
+  }
+}
+
+export interface ITableCellOptionsActionDelete extends IResourceDetailsActionRowOptionsBase {}
+
+@TableCell<ITableCellOptionsActionDelete>({
+  class: 'btn btn-outline btn-error join-item',
+})
+export class TableCellActionDelete extends BeanBase implements ITableCellRender {
+  render(
+    options: ITableCellOptionsActionDelete,
+    renderContext: IJsxRenderContextTableCell,
+    _next: NextTableCellRender,
+  ) {
+    const { $host } = renderContext;
+    return (
+      <button
+        class={options.class}
+        type="button"
+        onClick={async () => {
+          const confirmed = await $host.$performCommand('basic-commands:confirm', {
+            text: this.scope.locale.DeleteConfirm(),
+          });
+          if (!confirmed) return;
+          await $host.$performCommand(
+            'basic-details:delete',
+            options as Partial<ICommandOptionsDelete>,
+            renderContext,
+          );
+        }}
+      >
+        <ZIcon name="::delete" width={24}></ZIcon>
+      </button>
+    );
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/bean/tableCell.actionOperationsRow.tsx

@@ -1,16 +1,21 @@
 import type {
   IResourceDetailsActionRowOptionsBase,
   IResourceRenderDetailsActionRowOptionsAction,
+  TypeTableCellRenderComponent,
 } from 'zova-module-a-openapi';
 import type {
   IJsxRenderContextTableCell,
+  IJsxRenderContextTableColumn,
   ITableCellRender,
   NextTableCellRender,
 } from 'zova-module-a-table';
 
+import { VNode } from 'vue';
 import { BeanBase } from 'zova';
 import { TableCell } from 'zova-module-a-table';
 
+import { checkPermission } from '../lib/utils.js';
+
 declare module 'zova-module-a-openapi' {
   export interface IResourceDetailsActionRowRecord {
     'basic-details:actionOperationsRow'?: ITableCellOptionsActionOperationsRow;
@@ -21,14 +26,47 @@ export interface ITableCellOptionsActionOperationsRow extends IResourceDetailsAc
   actions?: IResourceRenderDetailsActionRowOptionsAction[];
 }
 
-@TableCell<ITableCellOptionsActionOperationsRow>()
+@TableCell<ITableCellOptionsActionOperationsRow>({
+  class: 'join',
+})
 export class TableCellActionOperationsRow extends BeanBase implements ITableCellRender {
+  async checkVisible(
+    options: ITableCellOptionsActionOperationsRow,
+    renderContext: IJsxRenderContextTableColumn,
+  ): Promise<boolean> {
+    const { $celScope, $$table } = renderContext;
+    const actions = options.actions;
+    if (!actions || actions.length === 0) return false;
+    // renders
+    const renders: TypeTableCellRenderComponent[] = [];
+    for (const action of actions) {
+      const actionName = action.name;
+      const actionRender = action.render;
+      const permissionHint = action.options?.permission;
+      if (checkPermission($celScope.formMeta!.formScene!, permissionHint)) {
+        if (!actionRender) throw new Error(`should specify action render: ${actionName}`);
+        renders.push(actionRender);
+      }
+    }
+    await $$table.cellRenderPrepare(renders);
+    return renders.length > 0;
+  }
+
   render(
-    _options: ITableCellOptionsActionOperationsRow,
-    _renderContext: IJsxRenderContextTableCell,
-    next: NextTableCellRender,
+    options: ITableCellOptionsActionOperationsRow,
+    renderContext: IJsxRenderContextTableCell,
+    _next: NextTableCellRender,
   ) {
-    return <div>sssss</div>;
-    return next();
+    const { $celScope, $$table } = renderContext;
+    const actions = options.actions;
+    if (!actions || actions.length === 0) return;
+    const domActions: VNode[] = [];
+    actions.forEach((action, index) => {
+      const permissionHint = action.options?.permission;
+      if (!checkPermission($celScope.formMeta!.formScene!, permissionHint)) return;
+      const options2 = Object.assign({ key: index }, action.options);
+      domActions.push($$table.cellRender(action.render!, options2, renderContext));
+    });
+    return <div class={options.class}>{domActions}</div>;
   }
 }

package/zova/src/suite/cabloy-basic/modules/basic-details/src/bean/tableCell.actionUpdate.tsx

@@ -0,0 +1,73 @@
+import type { IResourceDetailsActionRowOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextTableCell,
+  ITableCellRender,
+  NextTableCellRender,
+} from 'zova-module-a-table';
+import type { AppModalItem, IModalDialogOptions } from 'zova-module-basic-app';
+
+import { BeanBase, deepExtend } from 'zova';
+import { TypeFormOnSubmitData } from 'zova-module-a-form';
+import { IIconRecord, ZIcon } from 'zova-module-a-icon';
+import { TableCell } from 'zova-module-a-table';
+
+import { ServiceDetail } from '../service/detail.jsx';
+import { IDialogFormOptions } from '../types/dialogForm.js';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceDetailsActionRowRecord {
+    'basic-details:actionUpdate'?: ITableCellOptionsActionUpdate;
+  }
+}
+
+export interface ITableCellOptionsActionUpdate extends IResourceDetailsActionRowOptionsBase {
+  dialogOptions?: IModalDialogOptions & { icon?: keyof IIconRecord; title?: string };
+}
+
+@TableCell<ITableCellOptionsActionUpdate>({
+  class: 'btn btn-outline btn-primary join-item',
+})
+export class TableCellActionUpdate extends BeanBase implements ITableCellRender {
+  render(
+    options: ITableCellOptionsActionUpdate,
+    renderContext: IJsxRenderContextTableCell,
+    _next: NextTableCellRender,
+  ) {
+    const { ctx, $celScope, cellContext } = renderContext;
+    return (
+      <button
+        class={options.class}
+        type="button"
+        onClick={async () => {
+          const $$details = $celScope.$$details;
+          if (!$$details) throw new Error('should provide $$details in cell scope');
+          const detailItem = cellContext.row.original as Record<string, any>;
+          const detailItemIndex = cellContext.row.index;
+          const serverDetail = await ctx.bean._newBean(ServiceDetail, true, {
+            locale: this.scope.locale,
+            schema: $$details.schemaForm,
+            data: deepExtend({}, detailItem),
+            formScene: 'edit',
+            schemaScene: 'form',
+            icon: options.dialogOptions?.icon,
+            title: options.dialogOptions?.title ?? this.scope.locale.EditDetail(),
+            dialogOptions: options.dialogOptions,
+            onSubmitData: (
+              data: TypeFormOnSubmitData<Record<string, any>>,
+              dialog: AppModalItem,
+            ) => {
+              const detailItemNew = deepExtend({}, detailItem, data.value);
+              $$details.data = $$details.data.map((item, index) => {
+                return index === detailItemIndex ? detailItemNew : item;
+              });
+              dialog.close();
+            },
+          } satisfies IDialogFormOptions);
+          serverDetail.openDialogForm();
+        }}
+      >
+        <ZIcon name="::draft" width={24}></ZIcon>
+      </button>
+    );
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/bean/tableCell.actionView.tsx

@@ -0,0 +1,64 @@
+import type { IResourceDetailsActionRowOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextTableCell,
+  ITableCellRender,
+  NextTableCellRender,
+} from 'zova-module-a-table';
+
+import { BeanBase } from 'zova';
+import { IIconRecord } from 'zova-module-a-icon';
+import { TableCell } from 'zova-module-a-table';
+import { IModalDialogOptions } from 'zova-module-basic-app';
+
+import { ServiceDetail } from '../service/detail.jsx';
+import { IDialogFormOptions } from '../types/dialogForm.js';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceDetailsActionRowRecord {
+    'basic-details:actionView'?: ITableCellOptionsActionView;
+  }
+}
+
+export interface ITableCellOptionsActionView extends IResourceDetailsActionRowOptionsBase {
+  dialogOptions?: IModalDialogOptions & { icon?: keyof IIconRecord; title?: string };
+}
+
+@TableCell<ITableCellOptionsActionView>({
+  class: 'hover:text-blue-500',
+})
+export class TableCellActionView extends BeanBase implements ITableCellRender {
+  render(
+    options: ITableCellOptionsActionView,
+    renderContext: IJsxRenderContextTableCell,
+    next: NextTableCellRender,
+  ) {
+    const { ctx, $celScope, cellContext } = renderContext;
+    const value = next();
+    return (
+      <a
+        class={options.class}
+        href="#"
+        onClick={async e => {
+          e.preventDefault();
+          e.stopPropagation();
+          const $$details = $celScope.$$details;
+          if (!$$details) throw new Error('should provide $$details in cell scope');
+          const detailItem = cellContext.row.original as Record<string, any>;
+          const serverDetail = await ctx.bean._newBean(ServiceDetail, true, {
+            locale: this.scope.locale,
+            schema: $$details.schemaForm,
+            data: detailItem,
+            formScene: 'view',
+            schemaScene: 'form-view',
+            icon: options.dialogOptions?.icon,
+            title: options.dialogOptions?.title ?? this.scope.locale.EditDetail(),
+            dialogOptions: options.dialogOptions,
+          } satisfies IDialogFormOptions);
+          serverDetail.openDialogForm();
+        }}
+      >
+        {value}
+      </a>
+    );
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/bean/tableCell.lineNumber.tsx

@@ -0,0 +1,30 @@
+import type { IResourceTableCellOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextTableCell,
+  ITableCellRender,
+  NextTableCellRender,
+} from 'zova-module-a-table';
+
+import { BeanBase } from 'zova';
+import { TableCell } from 'zova-module-a-table';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceTableCellRecord {
+    'basic-details:lineNumber'?: ITableCellOptionsLineNumber;
+  }
+}
+
+export interface ITableCellOptionsLineNumber extends IResourceTableCellOptionsBase {}
+
+@TableCell<ITableCellOptionsLineNumber>()
+export class TableCellLineNumber extends BeanBase implements ITableCellRender {
+  render(
+    _options: ITableCellOptionsLineNumber,
+    renderContext: IJsxRenderContextTableCell,
+    _next: NextTableCellRender,
+  ) {
+    const { cellContext } = renderContext;
+    const row = cellContext?.row;
+    return row.index + 1;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-details/src/component/actionCreate/controller.tsx

@@ -3,9 +3,15 @@ import type {
   IJsxRenderContextDetails,
   IResourceDetailsActionBulkOptionsBase,
 } from 'zova-module-a-openapi';
+import type { AppModalItem, IModalDialogOptions } from 'zova-module-basic-app';
 
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
+import { TypeFormOnSubmitData } from 'zova-module-a-form';
+import { IIconRecord } from 'zova-module-a-icon';
+
+import { ServiceDetail } from '../../service/detail.jsx';
+import { IDialogFormOptions } from '../../types/dialogForm.js';
 
 declare module 'zova-module-a-openapi' {
   export interface IResourceDetailsActionBulkRecord {
@@ -13,7 +19,9 @@ declare module 'zova-module-a-openapi' {
   }
 }
 
-export interface ControllerActionCreateProps extends IResourceDetailsActionBulkOptionsBase {}
+export interface ControllerActionCreateProps extends IResourceDetailsActionBulkOptionsBase {
+  dialogOptions?: IModalDialogOptions & { icon?: keyof IIconRecord; title?: string };
+}
 
 @Controller()
 export class ControllerActionCreate extends BeanControllerBase {
@@ -23,16 +31,32 @@ export class ControllerActionCreate extends BeanControllerBase {
   @Use({ injectionScope: 'host' })
   $$renderContext: IJsxRenderContextDetails;
 
-  protected async __init__() {}
-
   protected render() {
     return (
       <button
         class={this.$props.class}
         type="button"
         onClick={async () => {
-          console.log('create');
-          // await this.$performCommand('basic-commands:create', this.$props, this.$$renderContext);
+          const { $$details } = this.$$renderContext;
+          const serverDetail = await this.bean._newBean(ServiceDetail, true, {
+            locale: this.scope.locale,
+            schema: $$details.schemaForm,
+            data: {},
+            formScene: 'create',
+            schemaScene: 'form-create',
+            icon: this.$props.dialogOptions?.icon,
+            title: this.$props.dialogOptions?.title ?? this.scope.locale.AddDetail(),
+            dialogOptions: this.$props.dialogOptions,
+            onSubmitData: (
+              data: TypeFormOnSubmitData<Record<string, any>>,
+              dialog: AppModalItem,
+            ) => {
+              const detailItem = data.value;
+              $$details.data = [...$$details.data, detailItem];
+              dialog.close();
+            },
+          } satisfies IDialogFormOptions);
+          serverDetail.openDialogForm();
         }}
       >
         {this.scope.locale.AddDetail()}