ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/table/design/table-setting/table-setting.html

@@ -0,0 +1,417 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    主键字段
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <input nz-input formControlName="keyField" placeholder="数据的主键字段" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    扩展行
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showExpand">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired nzTooltipTitle="用户可以自定义列的显示、顺序和列宽(不支持动态宽度的列)">
+                    表头设置
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showTableTitleSet">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzTooltipTitle="设置后才会缓存用户的表头设置">
+                    设置缓存Key
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="tableSetCacheKey">
+                        <input nz-input placeholder="为空时不缓存" ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    表格数据
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="data" #dataFunField>
+                        <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true" ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="外观设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    表格大小
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="size">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}" nzSize="small">
+                            <label nz-radio-button nzValue="small">小</label>
+                            <label nz-radio-button nzValue="middle">中</label>
+                            <label nz-radio-button nzValue="default">大</label>
+                        </nz-radio-group>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    显示序号
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showOrder">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired nzTooltipTitle="开启后表格底部不会超出视窗底部">
+                    高度扩展
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="heightExpanded">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    显示数据条数
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showDataSize">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    显示边框
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="bordered">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    显示外边框
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="outerBordered">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzTooltipTitle="不设置时，自动计算滚动宽度，自动计算不合理时手动设置">
+                    表格滚动宽度
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="width">
+                        <nz-input-number ngModel [ngModelOptions]="{standalone:true}" style="width: 100%;" [nzMin]="0">
+                            <span nzInputAddonAfter>px</span>
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzTooltipTitle="不设置时，自动计算宽度，自动计算不合理时手动设置">
+                    操作列宽度
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="actionsFieldWidth">
+                        <nz-input-number ngModel [ngModelOptions]="{standalone:true}" style="width: 100%;" [nzMin]="0">
+                            <span nzInputAddonAfter>px</span>
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="选择器设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    行选择器
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showCheckbox">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().showCheckbox?.funMode || formValue()?.showCheckbox?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    单选
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="singleCheck">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if ((formValue().showExpand?.funMode || formValue()?.showExpand?.originValue )&&
+            (formValue().singleCheck?.funMode || !formValue()?.singleCheck?.originValue)) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired nzTooltipTitle="联动勾选扩展行中的表格或者可编辑表格">
+                    联动勾选
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <nz-switch formControlName="checkboxLinkageForExpand"></nz-switch>
+                    (未实现)
+                </nz-form-control>
+            </nz-form-item>
+            }
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    选择器禁用脚本
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="disableCheckboxFn" [onlyFun]="true" [noListen]="true"
+                        [scopes]="rowScopes()">
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="数据统计(未实现)">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    启用总计
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showTotal">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().showTotal?.funMode || formValue()?.showTotal?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    总计标题
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="totalTitle">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @if (!fg.value.useBackEndPaging) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    启用小计
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showSubTotal">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().showSubTotal?.funMode || formValue()?.showSubTotal?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    小计标题
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="subTotalTitle">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    小计分组级别
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="subTotalGroupLevel">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}" [nzMin]="1">
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            }
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="分页设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否分页
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <nz-switch formControlName="showPagination"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            @if (!formValue()?.showPagination) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired nzTooltipTitle="不分页时，用于加载大量的数据">
+                    虚拟滚动
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <nz-switch formControlName="virtualScroll"></nz-switch>
+                    (未实现)
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.virtualScroll) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired nzTooltipTitle="每一行的高度">
+                    计算行高
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <nz-input-number formControlName="virtualItemSize"></nz-input-number>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            }@else {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    默认行数
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="pageSize">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}" [nzMin]="1">
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    行数修改器
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="showSizeChanger">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().showSizeChanger?.funMode || formValue()?.showSizeChanger?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired nzTooltipTitle="用逗号分隔，例:10,20,50,100">
+                    页数可选值
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <input nz-input formControlName="pageSizeOptions" placeholder="例:10,20,50,100" />
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @if (formValue().showCheckbox?.funMode || formValue()?.showCheckbox?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    是否后端分页
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <nz-switch formControlName="useBackEndPaging"></nz-switch>
+                    (未实现)
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.useBackEndPaging) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    分页参数数据源名称
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <input nz-input formControlName="pageParamsDataSourceName" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    导出参数数据源名称
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <input nz-input formControlName="exportParamsDataSourceName" />
+                </nz-form-control>
+            </nz-form-item>
+            }
+            }
+            }
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="导入导出(未实现)">
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    导出文件名
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="exportFileName">
+                        <nz-input-group [nzSuffix]="'.'+formValue().exportBookType?.originValue">
+                            <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                        </nz-input-group>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    文件类型
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field [noListen]="true" formControlName="exportBookType">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="xlsx" nzLabel="xlsx"></nz-option>
+                            <nz-option nzValue="xls" nzLabel="xls"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    分批导入限制
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="importLimitLength">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}"
+                            nzPlaceHolder="默认不限"></nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    导入起始行
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="importStartLine">
+                        <nz-input-number style="width: 100%;" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    导入模版文件名
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="importTemplateFileName">
+                        <nz-input-group nzSuffix=".xlsx">
+                            <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                        </nz-input-group>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    示例数据
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="importExampleData">
+                        <ng-container ngModel [ngModelOptions]="{standalone:true}"
+                            [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+        <axis-input-trigger formControlName="triggeEvents" [eventDesc]="eventDesc()"></axis-input-trigger>
+    </nz-collapse>
+</form>

package/axis-components/table/design/table-setting/table-setting.ts

@@ -0,0 +1,173 @@
+import { ChangeDetectionStrategy, Component, computed, ViewChild } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { InputTrigger, FunFieldValueBase, FunField, BaseDesignSetting, baseFbConfig, baseFunField, FunFieldOptions, FormValidators, DynamicDirective, ScopeInfo, EventDesc } from 'ngx-axis-appforge/core';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+
+@Component({
+  selector: 'axis-design-table-setting',
+  imports: [NzFormModule, FormsModule, ReactiveFormsModule, FunField, NzGridModule, NzCollapseModule, BaseDesignSetting, InputTrigger, NzInputNumberModule, NzInputModule, NzSwitchModule, NzSelectModule, DynamicDirective, NzRadioModule],
+  templateUrl: './table-setting.html',
+  styleUrl: './table-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    keyField: [],
+    showExpand: [undefined, FormValidators.requiredFun],
+    showTableTitleSet: [undefined, FormValidators.requiredFun],
+    tableSetCacheKey: [],
+    data: [],
+    size: [undefined, FormValidators.requiredFun],
+    showOrder: [undefined, FormValidators.requiredFun],
+    heightExpanded: [undefined, FormValidators.requiredFun],
+    showDataSize: [undefined, FormValidators.requiredFun],
+    bordered: [undefined, FormValidators.requiredFun],
+    outerBordered: [undefined, FormValidators.requiredFun],
+    width: [],
+    actionsFieldWidth: [],
+    showCheckbox: [undefined, FormValidators.requiredFun],
+    singleCheck: [undefined, FormValidators.requiredFun],
+    checkboxLinkageForExpand: [false, FormValidators.required],
+    disableCheckboxFn: [],
+    selectedRowsDataSourceName: [],
+    showTotal: [undefined, FormValidators.requiredFun],
+    totalTitle: [],
+    showSubTotal: [undefined, FormValidators.requiredFun],
+    subTotalTitle: [],
+    subTotalGroupLevel: [undefined, FormValidators.requiredFun],
+    showPagination: [true, FormValidators.required],
+    virtualScroll: [false, FormValidators.required],
+    virtualItemSize: [32, FormValidators.required],
+    pageSize: [undefined, FormValidators.requiredFun],
+    showSizeChanger: [undefined, FormValidators.requiredFun],
+    pageSizeOptions: ["10,20,50,100", [FormValidators.required, FormValidators.pattern(/^\d+(?:,\d+)*$/)]],
+    useBackEndPaging: [false, FormValidators.required],
+    pageParamsDataSourceName: ["pageParams"],
+    exportParamsDataSourceName: ["exportParams"],
+    exportFileName: [],
+    exportBookType: [undefined, FormValidators.requiredFun],
+    importLimitLength: [],
+    importStartLine: [undefined, FormValidators.requiredFun],
+    importTemplateFileName: [],
+    importExampleData: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    showExpand: {
+      defaultValue: false
+    },
+    showTableTitleSet: {
+      defaultValue: false
+    },
+    tableSetCacheKey: {
+      defaultValue: undefined
+    },
+    data: {
+      defaultValue: undefined,
+    },
+    size: {
+      defaultValue: "middle"
+    },
+    showOrder: {
+      defaultValue: true
+    },
+    heightExpanded: {
+      defaultValue: false
+    },
+    showDataSize: {
+      defaultValue: true
+    },
+    bordered: {
+      defaultValue: false
+    },
+    outerBordered: {
+      defaultValue: false
+    },
+    width: {
+      defaultValue: null
+    },
+    actionsFieldWidth: {
+      defaultValue: null
+    },
+    showCheckbox: {
+      defaultValue: false
+    },
+    singleCheck: {
+      defaultValue: false
+    },
+    showTotal: {
+      defaultValue: false
+    },
+    totalTitle: {
+      defaultValue: "合计"
+    },
+    showSubTotal: {
+      defaultValue: false
+    },
+    subTotalTitle: {
+      defaultValue: undefined
+    },
+    subTotalGroupLevel: {
+      defaultValue: 1
+    },
+    pageSize: {
+      defaultValue: 10
+    },
+    showSizeChanger: {
+      defaultValue: true
+    },
+    exportFileName: {
+      defaultValue: "数据导出"
+    },
+    exportBookType: {
+      defaultValue: "xlsx"
+    },
+    importLimitLength: {
+      defaultValue: null
+    },
+    importStartLine: {
+      defaultValue: 2
+    },
+    importTemplateFileName: {
+      defaultValue: "数据导入模版"
+    },
+    importExampleData: {
+      defaultValue: []
+    },
+  };
+
+  @ViewChild("dataFunField", { static: true })
+  dataFunField!: FunField;
+
+  rowScopes = computed<ScopeInfo[]>(() => [{
+    scopeId: this.formValue()?.id + '.row',
+    scopeName: "表格行",
+    ds: {
+      row: this.dataFunField.computeResult()?.[0] ?? {}
+    }
+  }]);
+
+  eventDesc = computed(() => {
+    const res: EventDesc[] = [];
+    if (this.formValue()?.showCheckbox?.originValue) {
+      res.push({
+        name: 'onSelectedChange',
+        title: '行选择改变',
+        ds: {
+          selectedRows: "示例数据"
+        }
+      });
+    }
+    return res;
+  });
+}

package/axis-components/table/expand.ts

@@ -0,0 +1,12 @@
+export class Expand {
+
+    readonly expandedSet = new Set();
+
+    onExpandChange(key: any, checked: boolean): void {
+        if (checked) {
+            this.expandedSet.add(key);
+        } else {
+            this.expandedSet.delete(key);
+        }
+    }
+}

package/axis-components/table/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "table.ts"
+    }
+}

package/axis-components/table/select.ts

@@ -0,0 +1,66 @@
+import { computed, Signal, signal } from "@angular/core";
+import { TableOptions } from "./table.options";
+import { fn, ScopeDirective } from 'ngx-axis-appforge/core';
+
+export class Select {
+
+    constructor(private options: TableOptions, private displayData: Signal<any[] | null>, private scope: ScopeDirective | null, private onSelectedChange: () => void) { }
+
+    readonly headerChecked = signal<"checked" | "indeterminate" | "none">("none");
+    setOfCheckedId = new Set();
+    setOfIndeterminateId = new Set();
+    setOfDisabledId = computed(() => this.buildDisabledId());
+
+    private buildDisabledId(): Set<any> {
+        if (this.options.disableCheckboxFn()) {
+            const args = this.scope?.snapshotAll() ?? {};
+            return new Set(this.displayData()?.filter(row => fn(this.options.disableCheckboxFn()!, Object.assign({}, args, { row }), true))
+                .map(row => row[this.options.keyField()]));
+        }
+        return new Set<any>();
+    }
+
+    onAllChecked(checked: boolean) {
+        this.displayData()?.filter(row => !this.setOfDisabledId().has(row[this.options.keyField()]))?.forEach(row => this.updateCheckedSet(row, checked));
+        this.refreshCheckedStatus();
+    }
+
+    toggleChecked(row: any) {
+        if (this.options.showCheckbox() && !this.setOfDisabledId().has(row[this.options.keyField()])) {
+            this.onItemChecked(row, !this.setOfCheckedId.has(row[this.options.keyField()]));
+        }
+    }
+
+    onItemChecked(row: any, checked: boolean): void {
+        this.updateCheckedSet(row, checked);
+        this.refreshCheckedStatus();
+    }
+
+    updateCheckedSet(row: any, checked: boolean): void {
+        const key = row[this.options.keyField()];
+        if (checked && !this.setOfCheckedId.has(key)) {
+            if (this.options.singleCheck()) {
+                this.setOfCheckedId.clear();
+            }
+            this.setOfCheckedId.add(key);
+        } else if (!checked && this.setOfCheckedId.has(key)) {
+            this.setOfCheckedId.delete(key);
+        }
+    }
+
+    refreshCheckedStatus(): void {
+        const listOfEnabledData = this.displayData()?.filter(row => !this.setOfDisabledId().has(row[this.options.keyField()])) ?? [];
+        const checked = listOfEnabledData.length > 0 && listOfEnabledData.every(row => this.setOfCheckedId.has(row[this.options.keyField()]) && !this.setOfIndeterminateId.has(row[this.options.keyField()]));
+        if (checked) {
+            this.headerChecked.set("checked");
+        } else {
+            const indeterminate = listOfEnabledData.some(row => this.setOfCheckedId.has(row[this.options.keyField()]) || this.setOfIndeterminateId.has(row[this.options.keyField()])) && !checked;
+            this.headerChecked.set(indeterminate ? "indeterminate" : "none");
+        }
+        this.onSelectedChange?.();
+    }
+
+    getSelectedData(): any[] | undefined {
+        return this.displayData()?.filter(row => this.setOfCheckedId.has(row[this.options.keyField()]));
+    }
+}