@acorex/platform 20.2.4-next.0 → 20.2.4-next.1

package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-ezrf2oBR.mjs → acorex-platform-themes-default-entity-master-list-view.component-DXGLsVis.mjs}

@@ -13,6 +13,7 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXDialogModule } from '@acorex/components/dialog';
+import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXFormModule } from '@acorex/components/form';
 import { AXLoadingModule } from '@acorex/components/loading';
@@ -40,12 +41,14 @@ import * as i3 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i2$1 from '@acorex/components/tree-view';
 import { AXTreeViewModule } from '@acorex/components/tree-view';
+import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXPEntityResolver, AXPEntityListViewColumnViewModel } from '@acorex/platform/layout/entity';
 
 class AXPEntityCategoryComponent {
     constructor() {
         this.entityResolver = inject(AXPEntityResolver);
         this.translate = inject(AXTranslationService);
+        this.workflow = inject(AXPWorkflowService);
         this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : []));
         this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
         this.searchValue = input('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
@@ -115,35 +118,7 @@ class AXPEntityCategoryComponent {
         this.isLoading.set(false);
     }
     async handleCollapseChanged(e) {
-        this.tree()?.setNodeLoading(e.data.id, true);
-        const event = {
-            ...this.basicQueryEvent,
-            filter: {
-                field: this.categoryEntityDef?.parentKey,
-                value: e.data.id,
-                operator: {
-                    type: 'equal',
-                },
-            },
-        };
-        const children = await this.categoryEntityQueryFunc(event);
-        // Recursive function to update children at any depth
-        const updateChildrenAtPath = (items, targetId) => {
-            return items.map((item) => {
-                if (item.id === targetId) {
-                    return { ...item, children: children.items };
-                }
-                if (item.children?.length) {
-                    return { ...item, children: updateChildrenAtPath(item.children, targetId) };
-                }
-                return item;
-            });
-        };
-        this.treeItems.update((prev) => prev.map((i) => ({
-            ...i,
-            children: updateChildrenAtPath(prev[0].children, e.data.id),
-        })));
-        this.tree()?.setNodeLoading(e.data.id, false);
+        await this.loadChildrenAtNode(e.data.id);
     }
     async getCategoryEntityDef() {
         const [module, entity] = this.vm().entityDef.category?.entity?.split('.') || [];
@@ -152,7 +127,6 @@ class AXPEntityCategoryComponent {
     handleNodeClick(event) {
         const filters = this.vm()
             .entityDef.category?.applyConditions?.map((f) => {
-            console.log({ f });
             return event.data[f.value] !== 'all'
                 ? {
                     field: f.name,
@@ -174,8 +148,98 @@ class AXPEntityCategoryComponent {
         });
         this.vm().dataSource.refresh();
     }
+    //#region ----   Utility Methods   ----
+    /** Loads children for a given node id and updates the tree in place. */
+    async loadChildrenAtNode(targetId) {
+        this.tree()?.setNodeLoading(targetId, true);
+        const event = {
+            ...this.basicQueryEvent,
+            filter: {
+                field: this.categoryEntityDef?.parentKey,
+                value: targetId,
+                operator: { type: 'equal' },
+            },
+        };
+        const children = await this.categoryEntityQueryFunc(event);
+        const updateChildrenAtPath = (items, id) => {
+            return items.map((item) => {
+                if (item.id === id) {
+                    return { ...item, children: children.items };
+                }
+                if (item.children?.length) {
+                    return { ...item, children: updateChildrenAtPath(item.children, id) };
+                }
+                return item;
+            });
+        };
+        this.treeItems.update((prev) => prev.map((i) => ({ ...i, children: updateChildrenAtPath(prev[0].children, targetId) })));
+        this.tree()?.setNodeLoading(targetId, false);
+    }
+    /** Returns the module.entity key for the configured category entity. */
+    getCategoryEntityKey() {
+        return this.vm().entityDef.category?.entity;
+    }
+    /** Refresh tree after CRUD operations. */
+    async refreshAfterChange(parentId) {
+        if (parentId) {
+            await this.loadChildrenAtNode(parentId);
+        }
+        else {
+            await this.getCategories();
+        }
+    }
+    //#endregion
+    //#region ----   UI Handlers   ----
+    /** Create a new root category node. */
+    async handleCreateRootClick(e) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopPropagation();
+        await this.workflow.execute('create-entity', {
+            entity: this.getCategoryEntityKey(),
+            options: { process: { redirect: false } },
+        });
+        await this.refreshAfterChange();
+    }
+    /** Create a new child under the given node. */
+    async handleCreateChildClick(node, e) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopPropagation();
+        const parentKey = this.categoryEntityDef?.parentKey;
+        const data = {};
+        if (parentKey) {
+            data[parentKey] = node.id;
+        }
+        await this.workflow.execute('create-entity', {
+            entity: this.getCategoryEntityKey(),
+            data,
+            options: { process: { redirect: false, canCreateNewOne: true } },
+        });
+        await this.refreshAfterChange(node.id);
+    }
+    /** Update the given node. */
+    async handleEditNodeClick(node, e) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopPropagation();
+        await this.workflow.execute('quick-modify-entity', {
+            entity: this.getCategoryEntityKey(),
+            data: node,
+            options: { layout: { size: 'md' } },
+        });
+        await this.refreshAfterChange(node[this.categoryEntityDef?.parentKey]);
+    }
+    /** Delete the given node. */
+    async handleDeleteNodeClick(node, e) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopPropagation();
+        await this.workflow.execute('delete-entity', {
+            entity: this.getCategoryEntityKey(),
+            data: node,
+            options: { process: { showResult: true } },
+        });
+        await this.refreshAfterChange(node[this.categoryEntityDef?.parentKey]);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if(isLoading()){\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  }@else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\"\n      [itemTemplate]=\"itemTemplate\"\n      #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n      [expandedField]=\"'expand'\"\n      [items]=\"treeItems()\"\n      #tree\n    >\n    </ax-tree-view>\n  </div>\n  }@else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n    {{ item.title }}\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$1.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box (onValueChanged)=\"handleCategorySearchChange($event)\" [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\">\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  } @else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view (onNodeClick)=\"handleNodeClick($event)\" (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\" [itemTemplate]=\"itemTemplate\" #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\" [expandedField]=\"'expand'\" [items]=\"treeItems()\" #tree>\n    </ax-tree-view>\n  </div>\n  } @else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title }}</span>\n      </div>\n      @if (item.id && item.id !== 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n          <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item (onClick)=\"handleCreateChildClick(item, $event)\" look=\"blank\" color=\"default\"\n                text=\"Add New Child\">\n                <ax-icon class=\"fas fa-plus\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleEditNodeClick(item, $event)\" look=\"blank\" text=\"Edit\">\n                <ax-icon class=\"fas fa-pen\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleDeleteNodeClick(item, $event)\" color=\"danger\" look=\"blank\" text=\"Delete\">\n                <ax-icon class=\"fas fa-trash\"></ax-icon>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n      } @else if (item.id === 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$1.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
             type: Component,
@@ -189,13 +253,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         AXPThemeLayoutHeaderComponent,
                         AXPThemeLayoutToolbarComponent,
                         AXTranslationModule,
-                    ], template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if(isLoading()){\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  }@else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\"\n      [itemTemplate]=\"itemTemplate\"\n      #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n      [expandedField]=\"'expand'\"\n      [items]=\"treeItems()\"\n      #tree\n    >\n    </ax-tree-view>\n  </div>\n  }@else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n    {{ item.title }}\n  </ng-template>\n</axp-layout-content>\n" }]
+                        AXButtonModule,
+                        AXDropdownModule
+                    ], template: "<axp-layout-header>\n  <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box (onValueChanged)=\"handleCategorySearchChange($event)\" [delayTime]=\"300\"\n      [placeholder]=\"'search.placeholder' | translate | async\">\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  } @else if (treeItems()[0].children.length) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view (onNodeClick)=\"handleNodeClick($event)\" (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n      [showCheckbox]=\"false\" [itemTemplate]=\"itemTemplate\" #treeRef\n      [textField]=\"vm().entityDef.category?.textField || 'title'\"\n      [valueField]=\"vm().entityDef.category?.valueField || 'id'\" [expandedField]=\"'expand'\" [items]=\"treeItems()\" #tree>\n    </ax-tree-view>\n  </div>\n  } @else {\n  <div class=\"ax-flex ax-items-center ax-justify-center\">\n    <span class=\"ax-text-center\"> No Record Found! </span>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n        <span class=\"ax-truncate\">{{ item.title }}</span>\n      </div>\n      @if (item.id && item.id !== 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n          <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item (onClick)=\"handleCreateChildClick(item, $event)\" look=\"blank\" color=\"default\"\n                text=\"Add New Child\">\n                <ax-icon class=\"fas fa-plus\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleEditNodeClick(item, $event)\" look=\"blank\" text=\"Edit\">\n                <ax-icon class=\"fas fa-pen\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleDeleteNodeClick(item, $event)\" color=\"danger\" look=\"blank\" text=\"Delete\">\n                <ax-icon class=\"fas fa-trash\"></ax-icon>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n      } @else if (item.id === 'all') {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"] }]
         }] });
 
 class AXPEntityMasterToolbarViewComponent {
     constructor() {
         this.layoutService = inject(AXPLayoutThemeService);
         this.parent = inject(AXPEntityMasterListViewComponent);
+        this.isInitializing = false;
+        this.pendingInitialFilters = true;
+        this.pendingInitialSorts = true;
         this.initialFilters = signal([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : []));
         this.filtersDefinitions = signal([], ...(ngDevMode ? [{ debugName: "filtersDefinitions" }] : []));
         this.viewQueries = computed(() => this.vm.views().map((v) => ({
@@ -222,41 +291,90 @@ class AXPEntityMasterToolbarViewComponent {
             })),
             sorts: this.vm.view().sorts,
         }), ...(ngDevMode ? [{ debugName: "selectedViewQuery" }] : []));
+        // Debounced apply to coalesce multiple UI changes (filters/sorts/columns)
+        this.applyTimer = null;
         this.#effect = effect(() => {
-            this.initialFilters.set(this.vm.view().conditions.map((c) => ({
-                field: c.name,
-                operator: c.operator,
-                value: c.value,
-            })));
+            // Keep definitions up to date; initial filters are set explicitly from settings or view
+            this.filtersDefinitions.set(this.vm.filtersDef);
         }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
-        this.sortQueries = computed(() => this.vm.view().sorts.map((s) => ({
-            name: s.name,
-            dir: s.dir,
-        })), ...(ngDevMode ? [{ debugName: "sortQueries" }] : []));
+        this.sortQueries = computed(() => this.vm
+            .sortedFields()
+            .filter((s) => !!s.dir)
+            .map((s) => ({ name: s.name, dir: s.dir })), ...(ngDevMode ? [{ debugName: "sortQueries" }] : []));
         this.sortDefinitions = computed(() => this.vm.sortableFields().map((s) => ({
             name: s.name,
             title: s.title,
             dir: s.dir,
         })), ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
     }
-    ngOnInit() {
+    async ngOnInit() {
+        // Prefer saved settings (view/columns/sorts/filters) if available, then apply
+        await this.vm.setView();
         this.filtersDefinitions.set(this.vm.filtersDef);
-    }
-    onViewChanged(view) {
-        this.vm.setView(view.name);
+        this.isInitializing = true;
+        // this.pendingInitialFilters = true;
+        // this.pendingInitialSorts = true;
+        this.setInitialFiltersFromSettingsOrView();
+        // Ensure initial load even when filters/sorts are absent
+        setTimeout(() => {
+            this.isInitializing = false;
+            this.scheduleApply();
+        }, 0);
+    }
+    scheduleApply() {
+        clearTimeout(this.applyTimer);
+        this.applyTimer = setTimeout(() => {
+            this.vm.applyFilterAndSort();
+        }, 50);
+    }
+    async onViewChanged(view) {
+        await this.vm.setView(view.name);
+        this.isInitializing = true;
+        this.pendingInitialFilters = true;
+        this.pendingInitialSorts = true;
+        this.setInitialFiltersFromSettingsOrView();
+        // Ensure initial load after view change
+        setTimeout(() => {
+            this.isInitializing = false;
+            this.scheduleApply();
+        }, 0);
     }
     #effect;
+    setInitialFiltersFromSettingsOrView() {
+        const saved = this.vm.filterQueries();
+        if (saved && saved.length) {
+            this.initialFilters.set(saved);
+            return;
+        }
+        this.initialFilters.set(this.vm.view().conditions.map((c) => ({
+            field: c.name,
+            operator: c.operator,
+            value: c.value,
+        })));
+    }
     onFiltersChanged(filters) {
+        if (this.isInitializing || this.pendingInitialFilters) {
+            this.pendingInitialFilters = false;
+            return;
+        }
         this.vm.filterQueries.set(filters);
-        this.vm.applyFilterAndSort();
+        // Persist filters per module/entity/view
+        this.vm.saveSettings('filters', filters);
+        this.scheduleApply();
     }
     onSortQueriesChange(e) {
+        if (this.isInitializing || this.pendingInitialSorts) {
+            this.pendingInitialSorts = false;
+            return;
+        }
         this.vm.sortedFields.set(e.map((s) => ({
             name: s.name,
             title: s.name,
             dir: s.dir,
         })));
-        this.vm.applyFilterAndSort();
+        // Persist sorts per module/entity/view
+        this.vm.saveSettings('sorts', e);
+        this.scheduleApply();
     }
     onColumnsChange(columns) {
         this.vm.columns.update(() => {
@@ -280,7 +398,10 @@ class AXPEntityMasterToolbarViewComponent {
                 return col;
             });
         });
-        this.vm.applyFilterAndSort();
+        // Persist column order/visibility
+        this.vm.onColumnsChanged(this.vm.columns());
+        // Use debounced apply to avoid triple refresh when combined with sorts/filters
+        // this.scheduleApply();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, ngImport: i0, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<axp-query-views\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  <axp-query-filters\n    [filtersDefinitions]=\"filtersDefinitions()\"\n    [initialFilters]=\"initialFilters()\"\n    (onFiltersChanged)=\"onFiltersChanged($event)\"\n  ></axp-query-filters>\n\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n      <i class=\"fa-light fa-table-columns\"></i>\n    </ax-button>\n    <ax-popover\n      [adaptivityEnabled]=\"true\"\n      [offsetY]=\"30\"\n      [target]=\"columnButton\"\n      [openOn]=\"'toggle'\"\n      [closeOn]=\"'clickOut'\"\n      #popover\n    >\n      <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n        <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n          {{ 'entity.columns' | translate | async }}\n        </ax-header>\n        <div class=\"ax-py-2 ax-px-4\">\n          <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n          <!-- <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns> -->\n        </div>\n      </div>\n    </ax-popover>\n    @if (vm.canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ 'entity.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <!-- <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting> -->\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortQueriesChange($event)\"\n              [initialSortQueries]=\"sortQueries()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (layoutService.isSmall()) {\n      <ax-button (onClick)=\"parent.toggleCategoryDrawer()\" [iconOnly]=\"true\" [color]=\"'default'\">\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryViewsComponent, selector: "axp-query-views", inputs: ["views", "selectedView"], outputs: ["viewsChange", "selectedViewChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -397,7 +518,10 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
     async handleRowDbClick(e) {
         const allItems = [...this.commandRowItems(), ...(await this.dropdownRowItems(e.data))];
         // const defaultAction = allItems.find((c) => (c as any).default) || allItems[0];
-        const defaultAction = allItems.find((c) => c.default);
+        const defaultAction = allItems.find((c) => {
+            const commandName = c.name.split('&')[0];
+            return c.default || commandName === 'open-entity';
+        });
         if (!defaultAction) {
             return;
         }
@@ -579,4 +703,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }], ctorParameters: () => [{ type: i1$1.AXPlatform }] });
 
 export { AXPEntityMasterListViewComponent };
-//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-ezrf2oBR.mjs.map
+//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-DXGLsVis.mjs.map