cabloy 5.1.64 → 5.1.66

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

@@ -1,8 +1,45 @@
 // 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/blockDetailsToolbarBulk/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';
 
 import 'zova';
@@ -22,7 +59,17 @@ declare module 'zova-module-basic-details' {
           get scope(): ScopeModuleBasicDetails;
         }
 
-        export interface ControllerBlockDetailsToolbarBulk {
+        export interface ControllerBlockForm {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface ControllerBlockTable {
+          /** @internal */
+          get scope(): ScopeModuleBasicDetails;
+        }
+
+        export interface ControllerBlockToolbarBulk {
           /** @internal */
           get scope(): ScopeModuleBasicDetails;
         }
@@ -36,14 +83,18 @@ declare module 'zova-module-basic-details' {
 /** controller: begin */
 import { ControllerActionCreate } from '../component/actionCreate/controller.jsx';
 import { ControllerBlockDetails } from '../component/blockDetails/controller.jsx';
-import { ControllerBlockDetailsToolbarBulk } from '../component/blockDetailsToolbarBulk/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';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
     'basic-details.controller.actionCreate': ControllerActionCreate;
 'basic-details.controller.blockDetails': ControllerBlockDetails;
-'basic-details.controller.blockDetailsToolbarBulk': ControllerBlockDetailsToolbarBulk;
+'basic-details.controller.blockForm': ControllerBlockForm;
+'basic-details.controller.blockTable': ControllerBlockTable;
+'basic-details.controller.blockToolbarBulk': ControllerBlockToolbarBulk;
 'basic-details.controller.formFieldDetails': ControllerFormFieldDetails;
   }
 }
@@ -54,14 +105,20 @@ 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/blockDetailsToolbarBulk.js';
-import { ZBlockDetailsToolbarBulk } from './component/blockDetailsToolbarBulk.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';
+import { ZBlockToolbarBulk } from './component/blockToolbarBulk.js';
 export * from './component/formFieldDetails.js';
 import { ZFormFieldDetails } from './component/formFieldDetails.js';
 export const components = {
   'actionCreate': ZActionCreate,
 'blockDetails': ZBlockDetails,
-'blockDetailsToolbarBulk': ZBlockDetailsToolbarBulk,
+'blockForm': ZBlockForm,
+'blockTable': ZBlockTable,
+'blockToolbarBulk': ZBlockToolbarBulk,
 'formFieldDetails': ZFormFieldDetails,
 };
 import 'zova';
@@ -69,17 +126,155 @@ declare module 'zova' {
 export interface IComponentRecord {
   'basic-details:actionCreate': ControllerActionCreate;
 'basic-details:blockDetails': ControllerBlockDetails;
-'basic-details:blockDetailsToolbarBulk': ControllerBlockDetailsToolbarBulk;
+'basic-details:blockForm': ControllerBlockForm;
+'basic-details:blockTable': ControllerBlockTable;
+'basic-details:blockToolbarBulk': ControllerBlockToolbarBulk;
 'basic-details:formFieldDetails': ControllerFormFieldDetails;
 }
 export interface IZovaComponentRecord {
   'basic-details:actionCreate': typeof ZActionCreate;
 'basic-details:blockDetails': typeof ZBlockDetails;
-'basic-details:blockDetailsToolbarBulk': typeof ZBlockDetailsToolbarBulk;
+'basic-details:blockForm': typeof ZBlockForm;
+'basic-details:blockTable': typeof ZBlockTable;
+'basic-details:blockToolbarBulk': typeof ZBlockToolbarBulk;
 'basic-details:formFieldDetails': typeof ZFormFieldDetails;
 }
 }
 /** 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: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;
+        }
+
+        export interface TableCellActionOperationsRow {
+          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.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

@@ -0,0 +1,72 @@
+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;
+  }
+}
+
+export interface ITableCellOptionsActionOperationsRow extends IResourceDetailsActionRowOptionsBase {
+  actions?: IResourceRenderDetailsActionRowOptionsAction[];
+}
+
+@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,
+  ) {
+    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,29 +19,47 @@ 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 {
-  static $propsDefault = {};
+  static $propsDefault = { class: 'btn btn-info join-item' };
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
 
   @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.Create()}
+        {this.scope.locale.AddDetail()}
       </button>
     );
   }