@acorex/platform 18.2.2 → 18.2.4

package/fesm2022/acorex-platform-layout-entity.mjs

@@ -1,20 +1,21 @@
+import * as i2$1 from '@acorex/components/common';
+import { AXDataSource, AXCommonModule } from '@acorex/components/common';
 import { AXFormatService } from '@acorex/core/format';
-import { cloneDeep, set, merge, isNil, get, sortBy } from 'lodash-es';
+import { resolveActionLook, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPSettingsService, AXPWorkflowNavigateAction } from '@acorex/platform/common';
+import * as i1$3 from '@acorex/platform/workflow';
+import { AXPWorkflowService, createWorkFlowEvent, AXPWorkflowAction, ofType, AXPWorkflowModule } from '@acorex/platform/workflow';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, computed, signal, Injector, effect, HostBinding, ChangeDetectionStrategy, Component, DestroyRef, ViewChild, NgModule } from '@angular/core';
-import * as i1$3 from '@acorex/platform/workflow';
-import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowService, ofType, AXPWorkflowModule } from '@acorex/platform/workflow';
+import { cloneDeep, set, merge, isNil, get, sortBy } from 'lodash-es';
+import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
-import { resolveActionLook, AXPLayoutService, AXPEntityCommandScope, getEntityInfo, AXPWorkflowNavigateAction } from '@acorex/platform/common';
+import { Subject, takeUntil } from 'rxjs';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import * as i8 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
-import * as i2$1 from '@acorex/components/common';
-import { AXDataSource, AXCommonModule } from '@acorex/components/common';
-import { Subject, takeUntil } from 'rxjs';
 import * as i7 from '@acorex/platform/layout/builder';
 import { AXPWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPColumnWidgetComponent, AXPWidgetsCatalog, AXP_WIDGETS_EDITOR_GROUP, AXPWidgetRegistryService } from '@acorex/platform/layout/builder';
 import { RouterModule, ROUTES } from '@angular/router';
@@ -74,6 +75,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+class AXPEntityCommandTriggerViewModel {
+    constructor(entity, action) {
+        this.name = action.command;
+        const resolvedLook = resolveActionLook(action);
+        this.priority = action.priority;
+        this.title = action.title;
+        this.separated = action.separated ?? false;
+        this.color = action.color ?? resolvedLook.color;
+        this.icon = action.icon ?? resolvedLook.icon;
+        this.scope = action.scope;
+    }
+}
+class AXPEntityListViewColumnViewModel {
+    constructor(property, column) {
+        this.property = property;
+        this.column = column;
+        this.name = this.property.name;
+        this.title = this.column.title ?? this.property.title;
+        this.visible = this.column?.options?.visible ?? true;
+        this.dir = this.column.sort?.dir;
+        this.sortEnabled = this.property.options?.sort?.enabled;
+        this.node = computed(() => {
+            const widget = this.property.schema.interface;
+            return {
+                path: this.column.options?.dataPath ?? this.name,
+                type: widget.type,
+                options: { ...widget?.options, ...this.column?.options },
+            };
+        });
+    }
+}
+
+class AXPEntityDetailListViewModel {
+    constructor(injector, detailEntityConfig, parent) {
+        this.injector = injector;
+        this.detailEntityConfig = detailEntityConfig;
+        this.parent = parent;
+        this.detailEntity = signal(null);
+        this.formatService = this.injector.get(AXFormatService);
+        this.workflow = this.injector.get(AXPWorkflowService);
+        this.filterOperatorMiddleware = this.injector.get(AXPFilterOperatorMiddlewareService);
+        this.dataSource = new AXDataSource({
+            byKey: (key) => {
+                const func = this.detailEntity()?.queries.byKey.execute;
+                return func();
+            },
+            load: (e) => {
+                const func = this.detailEntity()?.queries.list?.execute;
+                return func(e);
+            },
+            pageSize: 5,
+            key: 'id',
+        });
+        this.selectedItems = signal([]);
+        this.hasSelectedItems = computed(() => {
+            return this.selectedItems().length > 0;
+        });
+        //****************** Title ******************//
+        this.title = computed(() => {
+            return (this.detailEntityConfig.title ??
+                this.detailEntity()?.interfaces?.detail?.list?.title ??
+                this.detailEntity()?.formats.plural);
+        });
+        //****************** Inline filter ******************//
+        this.inlineFiltersPlaceholders = computed(() => {
+            //return this.entityDef.properties.filter(p => p.options?.filter?.inline?.enabled).map(c => c.title);
+            return [];
+        });
+        this.hasInlineFilters = computed(() => {
+            return this.inlineFiltersPlaceholders().length > 0;
+        });
+        //****************** Actions ******************//
+        this.allActions = computed(() => {
+            const list = this.detailEntity()?.interfaces?.master?.list?.actions ?? [];
+            return list.map((tr) => new AXPEntityCommandTriggerViewModel(this.detailEntity(), tr)) ?? [];
+        });
+        this.primaryActions = computed(() => {
+            return this.allActions().filter((a) => a.priority == 'primary' &&
+                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
+                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
+        });
+        this.secondaryActions = computed(() => {
+            return this.allActions().filter((a) => a.priority == 'secondary' &&
+                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
+                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
+        });
+        this.primaryRowActions = computed(() => this.allActions().filter((a) => a.scope == AXPEntityCommandScope.Individual && a.priority === 'primary'));
+        this.secondaryRowActions = computed(() => this.allActions().filter((a) => a.scope == AXPEntityCommandScope.Individual && a.priority === 'secondary'));
+        //****************** Filter ******************//
+        this.inlineFilters = {
+            field: null,
+            logic: 'or',
+            operator: null,
+            filters: [],
+        };
+        //****************** Columns ******************//
+        this.columns = computed(() => {
+            if (this.detailEntity()) {
+                const detailColumns = this.detailEntityConfig.columns ?? [];
+                const columns = this.detailEntity()?.columns?.map((c) => c.name) ?? [];
+                const props = this.detailEntity()?.properties.filter((p) => p.schema.hidden != true && (detailColumns?.length == 0 || detailColumns?.includes(p.name))) ?? [];
+                const displayColumns = props.filter((p) => columns.some((c) => c == p.name));
+                return displayColumns.map((p) => {
+                    return new AXPEntityListViewColumnViewModel(p, this.detailEntity()?.columns?.find((c) => c.name == p.name));
+                });
+            }
+            return [];
+        });
+        this.initialize();
+    }
+    async initialize() {
+        const entityResolver = this.injector.get(AXPEntityResolver);
+        const [moduleName, entityName] = this.detailEntityConfig.entity.split('.');
+        const entity = await entityResolver.get(moduleName, entityName);
+        if (!entity) {
+            throw Error(`Invalid enitity name: ${this.detailEntityConfig.entity}`);
+        }
+        this.detailEntity.set(entity);
+        this.applyFilterAndSort();
+    }
+    clearSelection() {
+        this.selectedItems.set([]);
+    }
+    applyInlineFilter(value) {
+        // const props = this.entityDef.properties.filter(c => c.options?.filter?.inline?.enabled);
+        // this.inlineFilters.filters = [];
+        // if (value) {
+        //     props.forEach(p => {
+        //         this.inlineFilters.filters?.push({
+        //             field: p.name,
+        //             operator: {
+        //                 type: 'contains'
+        //             },
+        //             value
+        //         })
+        //     })
+        // }
+        this.applyFilterAndSort();
+    }
+    applyFilterAndSort() {
+        this.dataSource.clearFilter();
+        //
+        //this.dataSource.sort(...this.detailEntity.().map(s => ({ dir: s.dir, field: s.name } as AXDataSourceSortOption)));
+        //
+        const parentFilters = this.detailEntityConfig.conditions?.map((c) => {
+            return {
+                field: c.name,
+                operator: c.operator,
+                value: this.parent.data?.id,
+            };
+        }) ?? [];
+        const parentFilterWrapper = {
+            field: null,
+            logic: 'and',
+            operator: null,
+            filters: parentFilters,
+        };
+        //
+        const inline = this.inlineFilters.filters?.length ?? 0;
+        const parent = parentFilterWrapper.filters?.length ?? 0;
+        //
+        debugger;
+        if (inline) {
+            this.dataSource.filter(this.filterOperatorMiddleware.transformFilter(this.inlineFilters));
+        }
+        else if (!inline && parent) {
+            this.dataSource.filter(this.filterOperatorMiddleware.transformFilter(parentFilterWrapper));
+        }
+        else if (inline && parent) {
+            this.dataSource.filter(this.filterOperatorMiddleware.transformFilter({
+                field: null,
+                logic: 'and',
+                operator: null,
+                filters: [this.inlineFilters, parentFilterWrapper],
+            }));
+        }
+        //
+        this.dataSource.refresh();
+    }
+    //******************  Commands ******************//
+    async executeCommand(commandName, data = null) {
+        const action = this.allActions().find((c) => c.name == commandName &&
+            ((this.selectedItems().length
+                ? c.scope == AXPEntityCommandScope.Selected
+                : c.scope == AXPEntityCommandScope.Individual) ||
+                c.scope == AXPEntityCommandScope.TypeLevel));
+        if (action?.scope == AXPEntityCommandScope.TypeLevel) {
+            if (data == null) {
+                data = {};
+            }
+            let relatedColumn = null;
+            this.detailEntityConfig.conditions?.forEach((condition) => {
+                if (condition.value == 'id') {
+                    relatedColumn = condition.name;
+                }
+            });
+            if (relatedColumn != null) {
+                data[relatedColumn] = this.parent.data['id'];
+            }
+        }
+        await this.workflow.execute(commandName, {
+            entity: getEntityInfo(this.detailEntity()).source,
+            data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data,
+        });
+    }
+}
+
 class AXPEntityDefinitionRegistryService {
     constructor() {
         // Stores AXPEntityConfig objects, keyed by a combination of module and entity name.
@@ -140,37 +348,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }] });
 
-class AXPEntityCommandTriggerViewModel {
-    constructor(entity, action) {
-        this.name = action.command;
-        const resolvedLook = resolveActionLook(action);
-        this.priority = action.priority;
-        this.title = action.title;
-        this.separated = action.separated ?? false;
-        this.color = action.color ?? resolvedLook.color;
-        this.icon = action.icon ?? resolvedLook.icon;
-        this.scope = action.scope;
+class AXPEntityCreateViewSectionViewModel {
+    constructor(entity, section) {
+        this.entity = entity;
+        this.section = section;
+        this.group = this.entity.groups?.find(c => c.id == this.section.id);
+        this.name = signal(this.group.id);
+        this.title = computed(() => {
+            return this.group.title ?? this.group.id;
+        });
+        this.description = computed(() => {
+            return this.group.description;
+            ;
+        });
+        this.layout = computed(() => {
+            const source = cloneDeep(this.section.layout ?? {});
+            set(source, "positions.default.colSpan", 12);
+            return source;
+        });
+        this.elements = computed(() => {
+            const { interfaces, properties } = this.entity;
+            const createProps = interfaces?.master?.create?.properties ?? [];
+            const createPropNames = new Set(createProps.map(({ name }) => name));
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id &&
+                !schema.hidden &&
+                createPropNames.has(name));
+            return filteredProperties.map(property => {
+                const createProp = createProps.find(({ name }) => name === property.name);
+                return new AXPEntityCreateViewElementViewModel(this.entity, this, property, createProp);
+            });
+        });
     }
 }
-class AXPEntityListViewColumnViewModel {
-    constructor(property, column) {
-        this.property = property;
-        this.column = column;
-        this.name = this.property.name;
-        this.title = this.column.title ?? this.property.title;
-        this.visible = this.column?.options?.visible ?? true;
-        this.dir = this.column.sort?.dir;
-        this.sortEnabled = this.property.options?.sort?.enabled;
+class AXPEntityCreateViewElementViewModel {
+    constructor(entity, section, property, createProp) {
+        this.entity = entity;
+        this.section = section;
+        this.property = property;
+        this.createProp = createProp;
+        this.name = signal(this.property.name);
+        this.title = signal(this.property.title);
+        this.description = signal(this.property.description);
+        this.editable = computed(() => {
+            return !(this.property.schema.readonly ?? false);
+        });
+        this.isRequired = computed(() => {
+            return this.property.validations?.some(c => c.rule == 'required') || false;
+        });
+        this.layout = computed(() => {
+            const source = cloneDeep(this.createProp.layout ?? {});
+            set(source, "positions.default.colSpan", 12);
+            return source;
+        });
         this.node = computed(() => {
-            const widget = this.property.schema.interface;
+            const schema = this.property.schema;
+            const widget = schema.interface;
             return {
-                path: this.column.options?.dataPath ?? this.name,
                 type: widget.type,
-                options: { ...widget?.options, ...this.column?.options },
+                mode: this.editable() ? 'edit' : 'view',
+                path: this.name(),
+                children: widget.children,
+                formula: widget.formula,
+                triggers: widget.triggers,
+                options: merge(schema.interface?.options, 
+                //this.property.options?.create?.widget,
+                { validationRules: this.property.validations })
             };
         });
     }
 }
+class AXPEntityMasterCreateViewModel {
+    constructor(injector, config, initialData = {}) {
+        this.injector = injector;
+        this.config = config;
+        this.initialData = initialData;
+        this.entityDef = cloneDeep(this.config);
+        this.workflow = this.injector.get(AXPWorkflowService);
+        this.context = signal(this.initialData ?? {});
+        this.isInProgress = signal(false);
+        this.sections = computed(() => {
+            const { interfaces, properties } = this.entityDef;
+            const createProps = interfaces?.master?.create?.properties?.map(({ name }) => name) ?? [];
+            const visibleProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && createProps.includes(name));
+            const sections = interfaces?.master?.create?.sections?.filter(({ id }) => visibleProperties.some(({ groupId }) => groupId === id)) ?? [];
+            return sections.map(section => new AXPEntityCreateViewSectionViewModel(this.entityDef, section));
+        });
+        if (!initialData)
+            initialData = {};
+        this.config.properties
+            .filter(c => c.schema.defaultValue != null)
+            .forEach(p => {
+            if (typeof p.schema.defaultValue === 'function') {
+                const func = p.schema.defaultValue;
+                set(initialData, p.name, func(initialData));
+            }
+            else {
+                set(initialData, p.name, p.schema.defaultValue);
+            }
+        });
+        this.context.set(initialData);
+    }
+    async save() {
+        try {
+            this.isInProgress.set(true);
+            const exec = this.entityDef.commands?.create?.execute;
+            return await exec((this.context()));
+        }
+        finally {
+            this.isInProgress.set(false);
+        }
+    }
+    async createNewOne() {
+        await this.workflow.execute('create-entity', {
+            entity: getEntityInfo(this.entityDef).source
+        });
+    }
+}
+class AXPEntityCreateViewModelFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityDefinitionRegistryService);
+        this.layout = inject(AXPLayoutThemeService);
+        this.injector = inject(Injector);
+    }
+    async create(moduleName, entityName, initialData = null) {
+        this.layout.setNavigationLoading(true);
+        const config = await this.entityService.resolve(moduleName, entityName);
+        this.layout.setNavigationLoading(false);
+        return new AXPEntityMasterCreateViewModel(this.injector, config, initialData);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateViewModelFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateViewModelFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 const AXPEntityDeletedEvent = createWorkFlowEvent('[Entity] Deleted');
 class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
@@ -295,206 +607,44 @@ const AXPDeleteEntityWorkflow = {
     },
 };
 
-class AXPEntityMasterUpdateElementViewModel {
-    constructor(entity, property) {
+class AXPEntityMasterListViewQueryViewModel {
+    constructor(entity, section, view) {
         this.entity = entity;
-        this.property = property;
-        this.name = signal(this.property.name);
-        this.title = signal(this.property.title);
-        this.description = signal(this.property.description);
-        this.editable = computed(() => {
-            return !(this.property.schema.readonly ?? false);
-        });
-        this.isRequired = computed(() => {
-            return this.property.validations?.some(c => c.rule == 'required') || false;
-        });
-        this.layout = computed(() => {
-            const updateProp = this.entity.interfaces?.master?.update?.properties?.find(c => c.name == this.property.name);
-            const source = cloneDeep(updateProp?.layout ?? {});
-            set(source, "positions.default.colSpan", 12);
-            return source;
-        });
-        this.node = computed(() => {
-            const schema = this.property.schema;
-            const widget = schema.interface;
-            return {
-                type: widget.type,
-                mode: this.editable() ? 'edit' : 'view',
-                path: this.name(),
-                children: widget.children,
-                formula: widget.formula,
-                triggers: widget.triggers,
-                options: merge(schema.interface?.options, 
-                //this.property.options?.create?.widget,
-                { validationRules: this.property.validations })
-            };
-        });
+        this.section = section;
+        this.view = view;
+        this.name = this.view.name;
+        this.title = this.view.title;
+        this.sorts = this.view.sorts;
+        this.columns = this.view.columns;
+        this.conditions = this.view.conditions;
     }
 }
-class AXPEntityMasterUpdateViewModel {
-    constructor(injector, config, entityData, props) {
+class AXPEntityMasterListViewModel {
+    constructor(injector, config) {
         this.injector = injector;
         this.config = config;
-        this.entityData = entityData;
-        this.props = props;
         this.entityDef = cloneDeep(this.config);
+        this._viewDef = cloneDeep(this.entityDef.interfaces?.master?.list);
+        this.formatService = this.injector.get(AXFormatService);
+        this.session = this.injector.get(AXPSessionService);
         this.workflow = this.injector.get(AXPWorkflowService);
-        this.isInProgress = signal(false);
-        this.context = signal(cloneDeep(this.entityData));
-        this.elements = computed(() => {
-            const props = this.entityDef.properties.filter(c => this.props.includes(c.name) &&
-                c.schema.hidden != true);
-            return props.map(e => {
-                return new AXPEntityMasterUpdateElementViewModel(this.entityDef, e);
-            });
-        });
-    }
-    async save() {
-        this.isInProgress.set(true);
-        try {
-            const com = this.entityDef.commands?.update;
-            if (com) {
-                const exec = com.execute;
-                return await exec(this.context());
-            }
-        }
-        finally {
-            this.isInProgress.set(false);
-        }
-    }
-    reset() {
-        this.context.set(cloneDeep(this.entityData));
-    }
-}
-class AXPEntityMasterUpdateViewModelFactory {
-    constructor() {
-        this.entityService = inject(AXPEntityDefinitionRegistryService);
-        this.layout = inject(AXPLayoutService);
-        this.injector = inject(Injector);
-    }
-    async create(moduleName, entityName, id, props) {
-        const config = await this.entityService.resolve(moduleName, entityName);
-        this.layout.setNavigationLoading(true);
-        if (config.queries.byKey) {
-            const func = config.queries.byKey.execute;
-            const data = await func(id);
-            this.layout.setNavigationLoading(false);
-            return new AXPEntityMasterUpdateViewModel(this.injector, config, data, props);
-        }
-        this.layout.setNavigationLoading(false);
-        return Promise.reject('cannot fetch ');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-const AXPEntityModifyEvent = createWorkFlowEvent('[Entity] Modified');
-class AXPEntityModifySectionPopupAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.popupService = inject(AXPopupService);
-        this.platform = inject(AXPlatform);
-        this.translateService = inject(AXTranslationService);
-        this.entityRegistery = inject(AXPEntityDefinitionRegistryService);
-        this.config = inject(AXP_ENTITY_CONFIG_TOKEN);
-        this.factory = inject(AXPEntityMasterUpdateViewModelFactory);
-    }
-    async execute(context) {
-        const [moduleName, entityName] = context.getVariable('entity').split('.');
-        const { properties, id, title } = context.getVariable('data');
-        const entityRef = await this.entityRegistery.resolve(moduleName, entityName);
-        const vm = await this.factory.create(moduleName, entityName, id, properties);
-        const com = await this.config.viewers.master.modify();
-        const popup = await this.popupService.open(com, {
-            title: title ?? `${this.translateService.translateSync('entity.modify')} ${this.translateService.translateSync(entityRef.formats.individual)}`,
-            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
-            data: {
-                vm,
-                properties,
-                entity: entityRef,
+        this.settings = this.injector.get(AXPSettingsService);
+        this.filterOperatorMiddleware = this.injector.get(AXPFilterOperatorMiddlewareService);
+        this.settingListViewKey = '';
+        this.settingSelectedViewKey = '';
+        this.destroyed = new Subject();
+        this.events$ = new Subject();
+        this.dataSource = new AXDataSource({
+            byKey: (key) => {
+                const func = this.entityDef.queries.byKey.execute;
+                return func();
+            },
+            load: (e) => {
+                const func = this.entityDef.queries.list?.execute;
+                return func(e);
             },
-        });
-        context.setOutput('result', false);
-        if (popup.data?.result == true) {
-            context.setOutput('result', true);
-            context.setVariable('data', cloneDeep(popup.data.context));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifySectionPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifySectionPopupAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifySectionPopupAction, decorators: [{
-            type: Injectable
-        }] });
-class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
-    async execute(context) {
-        const updatedData = context.getVariable('data');
-        this.dispatch(AXPEntityModifyEvent({ entity: context.getVariable('entity'), values: updatedData }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyConfirmedAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyConfirmedAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyConfirmedAction, decorators: [{
-            type: Injectable
-        }] });
-const AXPModifyEntitySectionWorkflow = {
-    startStepId: 'modifyPopup',
-    steps: {
-        modifyPopup: {
-            id: 'modifyPopup',
-            action: 'AXPEntityModifySectionPopupAction',
-            nextSteps: [
-                {
-                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
-                    nextStepId: 'successToast',
-                },
-            ],
-        },
-        successToast: {
-            id: 'successToast',
-            action: 'AXPToastAction',
-            input: {
-                color: 'success',
-                title: 'workflow.entity-modified-title',
-                content: 'workflow.entity-modified-body',
-            },
-            nextSteps: [
-                {
-                    conditions: [],
-                    nextStepId: 'modifyConfirmed',
-                },
-            ],
-        },
-        modifyConfirmed: {
-            id: 'modifyConfirmed',
-            action: 'AXPEntityModifyConfirmedAction',
-        },
-    },
-};
-
-class AXPEntityDetailListViewModel {
-    constructor(injector, detailEntityConfig, parent) {
-        this.injector = injector;
-        this.detailEntityConfig = detailEntityConfig;
-        this.parent = parent;
-        this.detailEntity = signal(null);
-        this.formatService = this.injector.get(AXFormatService);
-        this.workflow = this.injector.get(AXPWorkflowService);
-        this.dataSource = new AXDataSource({
-            byKey: (key) => {
-                const func = this.detailEntity()?.queries.byKey.execute;
-                return func();
-            },
-            load: (e) => {
-                const func = this.detailEntity()?.queries.list?.execute;
-                return func(e);
-            },
-            pageSize: 5,
-            key: 'id',
+            pageSize: 10,
+            key: 'id',
         });
         this.selectedItems = signal([]);
         this.hasSelectedItems = computed(() => {
@@ -502,22 +652,44 @@ class AXPEntityDetailListViewModel {
         });
         //****************** Title ******************//
         this.title = computed(() => {
-            return (this.detailEntityConfig.title ??
-                this.detailEntity()?.interfaces?.detail?.list?.title ??
-                this.detailEntity()?.formats.plural);
+            return this._viewDef.title ?? this.entityDef.formats.plural;
+        });
+        //****************** Description ******************//
+        this.description = computed(() => {
+            return this._viewDef.description ?? null;
         });
         //****************** Inline filter ******************//
         this.inlineFiltersPlaceholders = computed(() => {
-            //return this.entityDef.properties.filter(p => p.options?.filter?.inline?.enabled).map(c => c.title);
-            return [];
+            return this.entityDef.properties.filter((p) => p.options?.filter?.inline?.enabled).map((c) => c.title ?? c.name);
         });
         this.hasInlineFilters = computed(() => {
             return this.inlineFiltersPlaceholders().length > 0;
         });
+        //****************** Beardcrumbs ******************//
+        this.beardcrumbs = computed(() => {
+            return [
+                {
+                    title: 'entity.home',
+                    icon: 'fa-solid fa-home ax-text-xs ax-me-2',
+                    url: [`/${this.session.application?.name}`],
+                },
+                {
+                    title: this.title(),
+                    url: [
+                        `/${this.session.application?.name}`,
+                        'm',
+                        `${this.entityDef.module}`,
+                        'e',
+                        `${this.entityDef.name}`,
+                        'list',
+                    ],
+                },
+            ];
+        });
         //****************** Actions ******************//
         this.allActions = computed(() => {
-            const list = this.detailEntity()?.interfaces?.master?.list?.actions ?? [];
-            return list.map((tr) => new AXPEntityCommandTriggerViewModel(this.detailEntity(), tr)) ?? [];
+            const list = this.entityDef.interfaces?.master?.list?.actions ?? [];
+            return list.map((tr) => new AXPEntityCommandTriggerViewModel(this.entityDef, tr)) ?? [];
         });
         this.primaryActions = computed(() => {
             return this.allActions().filter((a) => a.priority == 'primary' &&
@@ -538,167 +710,256 @@ class AXPEntityDetailListViewModel {
             operator: null,
             filters: [],
         };
+        this.advanceFilters = {
+            field: null,
+            logic: 'and',
+            operator: null,
+            filters: [],
+        };
         //****************** Columns ******************//
-        this.columns = computed(() => {
-            if (this.detailEntity()) {
-                const detailColumns = this.detailEntityConfig.columns ?? [];
-                const columns = this.detailEntity()?.columns?.map((c) => c.name) ?? [];
-                const props = this.detailEntity()?.properties.filter((p) => p.schema.hidden != true && (detailColumns?.length == 0 || detailColumns?.includes(p.name))) ?? [];
-                const displayColumns = props.filter((p) => columns.some((c) => c == p.name));
-                return displayColumns.map((p) => {
-                    return new AXPEntityListViewColumnViewModel(p, this.detailEntity()?.columns?.find((c) => c.name == p.name));
-                });
+        this.allAvailableColumns = () => {
+            const { columns = [], properties } = this.entityDef;
+            const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
+            const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
+            return columns
+                .filter(({ name }) => visiblePropNames.has(name))
+                .map((column) => {
+                const property = visibleProperties.find(({ name }) => name === column.name);
+                return new AXPEntityListViewColumnViewModel(property, column);
+            });
+        };
+        this.visibleColumnCount = () => {
+            return this.columns().filter((c) => c.visible == true).length;
+        };
+        this.columns = signal([]);
+        //****************** Sort ******************//
+        this.sortableFields = () => {
+            const props = this.entityDef.properties.filter((c) => c.options?.sort?.enabled);
+            return props.map((e) => {
+                return {
+                    name: e.name,
+                    title: e.title,
+                    dir: undefined,
+                };
+            });
+        };
+        this.sortableFieldsCount = () => {
+            return this.entityDef.properties.filter((c) => c.options?.sort?.enabled).length ?? 0;
+        };
+        this.canSort = () => {
+            return this.sortableFieldsCount() > 0;
+        };
+        this.canAddMoreSort = () => {
+            return this.sortedCount() < this.sortableFieldsCount();
+        };
+        this.sortedCount = () => {
+            return this.sortedFields().filter((i) => i.dir).length;
+        };
+        this.sortedFields = signal([]);
+        this.views = computed(() => {
+            const views = this.entityDef.interfaces?.master?.list?.views ?? [];
+            return views.map((v) => {
+                return new AXPEntityMasterListViewQueryViewModel(this.entityDef, this, v);
+            });
+        });
+        this.view = signal(this.views()[0]);
+        this.workflow.events$
+            .pipe(ofType(AXPEntityDeletedEvent))
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((event) => {
+            if (event.payload.entity == getEntityInfo(this.entityDef).source) {
+                this.selectedItems.set([]);
+                this.events$.next({ action: 'refresh' });
             }
-            return [];
         });
-        this.initialize();
+        this.sortedFields.set(this.sortableFields());
     }
-    async initialize() {
-        const entityResolver = this.injector.get(AXPEntityResolver);
-        const [moduleName, entityName] = this.detailEntityConfig.entity.split('.');
-        const entity = await entityResolver.get(moduleName, entityName);
-        if (!entity) {
-            throw Error(`Invalid enitity name: ${this.detailEntityConfig.entity}`);
+    async applySettings() {
+        this.settingListViewKey = `${this.config.module}:${this.config.name}:list-view:${this.view().name}`;
+        const listViewSetting = await this.settings.get(this.settingListViewKey);
+        if (listViewSetting) {
+            const columnVisibilityMap = new Map(listViewSetting.columns.map((col) => [col.name, col.visible]));
+            this.columns.update((prev) => prev
+                .map((c) => ({ ...c, visible: columnVisibilityMap.get(c.name) ?? c.visible })) // Update visibility
+                .sort((a, b) => listViewSetting.columns.findIndex((col) => col.name === a.name) -
+                listViewSetting.columns.findIndex((col) => col.name === b.name)));
         }
-        this.detailEntity.set(entity);
-        this.applyFilterAndSort();
     }
     clearSelection() {
         this.selectedItems.set([]);
     }
     applyInlineFilter(value) {
-        // const props = this.entityDef.properties.filter(c => c.options?.filter?.inline?.enabled);
-        // this.inlineFilters.filters = [];
-        // if (value) {
-        //     props.forEach(p => {
-        //         this.inlineFilters.filters?.push({
-        //             field: p.name,
-        //             operator: {
-        //                 type: 'contains'
-        //             },
-        //             value
-        //         })
-        //     })
-        // }
+        const props = this.entityDef.properties.filter((c) => c.options?.filter?.inline?.enabled);
+        this.inlineFilters.filters = [];
+        if (value) {
+            props.forEach((p) => {
+                this.inlineFilters.filters?.push({
+                    field: p.name,
+                    operator: {
+                        type: 'contains',
+                    },
+                    value,
+                });
+            });
+        }
         this.applyFilterAndSort();
     }
     applyFilterAndSort() {
         this.dataSource.clearFilter();
         //
-        //this.dataSource.sort(...this.detailEntity.().map(s => ({ dir: s.dir, field: s.name } as AXDataSourceSortOption)));
+        this.dataSource.sort(...this.sortedFields().map((s) => ({ dir: s.dir, field: s.name })));
         //
-        const parentFilters = this.detailEntityConfig.conditions?.map((c) => {
-            return {
-                field: c.name,
-                operator: c.operator,
-                value: this.parent.data?.id,
-            };
-        }) ?? [];
-        const parentFilterWrapper = {
-            field: null,
-            logic: 'and',
-            operator: null,
-            filters: parentFilters,
-        };
+        this.advanceFilters.filters = this.view().conditions.map((f) => ({
+            field: f.name,
+            operator: f.operator,
+            value: f.value,
+        }));
         //
         const inline = this.inlineFilters.filters?.length ?? 0;
-        const parent = parentFilterWrapper.filters?.length ?? 0;
-        //
-        if (inline) {
-            this.dataSource.filter(this.inlineFilters);
+        const advance = this.advanceFilters.filters?.length ?? 0;
+        if (inline && !advance) {
+            this.dataSource.filter(this.filterOperatorMiddleware.transformFilter(this.inlineFilters));
         }
-        else if (!inline && parent) {
-            this.dataSource.filter(parentFilterWrapper);
+        else if (!inline && advance) {
+            this.dataSource.filter(this.filterOperatorMiddleware.transformFilter(this.advanceFilters));
         }
-        else if (inline && parent) {
-            this.dataSource.filter({
+        else if (inline && advance) {
+            this.dataSource.filter(this.filterOperatorMiddleware.transformFilter({
                 field: null,
                 logic: 'and',
                 operator: null,
-                filters: [this.inlineFilters, parentFilterWrapper],
-            });
+                filters: [this.inlineFilters, this.advanceFilters],
+            }));
         }
         //
         this.dataSource.refresh();
     }
-    //******************  Commands ******************//
-    async executeCommand(commandName, data = null) {
-        const action = this.allActions().find((c) => c.name == commandName &&
-            ((this.selectedItems().length
-                ? c.scope == AXPEntityCommandScope.Selected
-                : c.scope == AXPEntityCommandScope.Individual) ||
-                c.scope == AXPEntityCommandScope.TypeLevel));
-        if (action?.scope == AXPEntityCommandScope.TypeLevel) {
-            if (data == null) {
-                data = {};
-            }
-            let relatedColumn = null;
-            this.detailEntityConfig.conditions?.forEach((condition) => {
-                if (condition.value == 'id') {
-                    relatedColumn = condition.name;
-                }
+    resetColumns() {
+        this.applyViewColumns();
+    }
+    async onColumnsChanged(columns) {
+        const listViewSetting = await this.settings.get(this.settingListViewKey);
+        console.log(this.settingListViewKey);
+        if (this.settingListViewKey) {
+            this.settings.set(this.settingListViewKey, {
+                ...listViewSetting,
+                columns: columns.map((c) => ({ name: c.name, visible: c.visible })),
             });
-            if (relatedColumn != null) {
-                data[relatedColumn] = this.parent.data['id'];
-            }
         }
+    }
+    applyViewColumns() {
+        const cols = this.view().columns;
+        const cloned = this.allAvailableColumns().map((c) => {
+            const column = this.entityDef.columns?.find((cc) => cc.name == c.name);
+            const prop = this.entityDef.properties.find((p) => p.name == c.name);
+            const col = new AXPEntityListViewColumnViewModel(prop, column);
+            col.visible = !cols.some((c) => c == col.name) && col.visible != false;
+            return col;
+        });
+        this.columns.set(cloned);
+    }
+    resetSorts() {
+        this.applyViewSorts();
+    }
+    applySorts() {
+        this.applyFilterAndSort();
+    }
+    addSort() {
+        const prop = this.sortableFields().find((c) => !this.sortedFields().some((s) => s.name == c.name));
+        if (prop) {
+            this.sortedFields.set([...this.sortedFields(), ...[prop]]);
+        }
+    }
+    removeSort(name) {
+        this.sortedFields.set(this.sortedFields().filter((c) => c.name != name));
+    }
+    applyViewSorts() {
+        const viewSorts = this.view().sorts;
+        this.sortedFields.update((prev) => {
+            const viewSortsMap = new Map(viewSorts.map((vs) => [vs.name, vs]));
+            return prev.map((sf) => {
+                const updatedSort = viewSortsMap.get(sf.name);
+                if (updatedSort) {
+                    return { ...updatedSort, title: sf.title };
+                }
+                return sf;
+            });
+        });
+    }
+    //****************** Views ******************//
+    async setView(viewName = null) {
+        this.settingSelectedViewKey = `${this.config.module}:${this.config.name}:selected-view`;
+        const savedViewName = await this.settings.get(this.settingSelectedViewKey);
+        // this.settings.set()
+        if (viewName != this.view().name) {
+            this.view.set(this.views().find((c) => c.name == (viewName || savedViewName)) ?? this.views()[0]);
+            this.settings.set(this.settingSelectedViewKey, this.view().name);
+            this.applyViewSorts();
+            this.applyViewColumns();
+            this.applyFilterAndSort();
+            this.applySettings();
+        }
+    }
+    //******************  Commands ******************//
+    async executeCommand(commandName, data = null) {
+        const action = this.allActions().find((c) => c.name == commandName &&
+            ((this.selectedItems().length
+                ? c.scope == AXPEntityCommandScope.Selected
+                : c.scope == AXPEntityCommandScope.Individual) ||
+                c.scope == AXPEntityCommandScope.TypeLevel));
         await this.workflow.execute(commandName, {
-            entity: getEntityInfo(this.detailEntity()).source,
+            entity: getEntityInfo(this.entityDef).source,
             data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data,
         });
     }
+    //
+    destroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
 }
-
-class AXPEntityMasterSingleViewGroupViewModel {
-    constructor(entity, section) {
-        this.entity = entity;
-        this.section = section;
-        this.group = this.entity.groups?.find(c => c.id == this.section.id);
-        this.name = signal(this.group.id);
-        this.isLoading = signal(false);
-        this.title = computed(() => {
-            return this.group.title ?? this.group.id;
-        });
-        this.description = computed(() => {
-            return this.group.description;
-        });
-        this.layout = computed(() => {
-            const source = cloneDeep(this.section.layout ?? {});
-            set(source, "positions.default.colSpan", 12);
-            return source;
-        });
-        this.props = computed(() => {
-            const { properties, interfaces } = this.entity;
-            const groupProperties = properties
-                .filter(({ groupId, schema }) => groupId === this.group.id && !schema.hidden)
-                .map(({ name }) => name);
-            const viewProperties = interfaces?.master?.single?.properties?.filter(({ name }) => groupProperties.includes(name)) ?? [];
-            return viewProperties.map(prop => new AXPEntityMasterSingleElementViewModel(this.entity, this, prop));
-        });
-        this.editableProps = computed(() => {
-            const { properties, interfaces } = this.entity;
-            const editablePropertyNames = interfaces?.master?.update?.properties?.map(({ name }) => name) ?? [];
-            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id && !schema.hidden && editablePropertyNames.includes(name));
-            return filteredProperties.map(prop => new AXPEntityMasterSingleElementViewModel(this.entity, this, prop));
-        });
-        this.editable = computed(() => {
-            return this.editableProps().length > 0;
-        });
+class AXPEntityListViewModelFactory {
+    constructor() {
+        this.entityService = inject(AXPEntityDefinitionRegistryService);
+        this.layout = inject(AXPLayoutThemeService);
+        this.injector = inject(Injector);
+    }
+    async create(moduleName, entityName) {
+        this.layout.setNavigationLoading(true);
+        const config = await this.entityService.resolve(moduleName, entityName);
+        this.layout.setNavigationLoading(false);
+        return new AXPEntityMasterListViewModel(this.injector, config);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewModelFactory, providedIn: 'root' }); }
 }
-class AXPEntityMasterSingleElementViewModel {
-    constructor(entity, section, propertyView) {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewModelFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+const AXPEntityListViewModelResolver = (route, state, service = inject(AXPEntityListViewModelFactory)) => {
+    const moduleName = route.parent?.paramMap.get('module');
+    const entityName = route.paramMap.get('entity');
+    //
+    return service.create(moduleName, entityName);
+};
+
+class AXPEntityMasterUpdateElementViewModel {
+    constructor(entity, property) {
         this.entity = entity;
-        this.section = section;
-        this.propertyView = propertyView;
-        this.property = this.entity.properties.find(c => c.name == this.propertyView.name);
+        this.property = property;
         this.name = signal(this.property.name);
         this.title = signal(this.property.title);
-        this.showLabel = signal(this.propertyView.layout?.label?.visible != false);
         this.description = signal(this.property.description);
+        this.editable = computed(() => {
+            return !(this.property.schema.readonly ?? false);
+        });
+        this.isRequired = computed(() => {
+            return this.property.validations?.some(c => c.rule == 'required') || false;
+        });
         this.layout = computed(() => {
-            const viewProp = this.entity.interfaces?.master?.single?.properties?.find(c => c.name == this.property.name);
-            const source = cloneDeep(viewProp?.layout ?? {});
+            const updateProp = this.entity.interfaces?.master?.update?.properties?.find(c => c.name == this.property.name);
+            const source = cloneDeep(updateProp?.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
@@ -707,209 +968,213 @@ class AXPEntityMasterSingleElementViewModel {
             const widget = schema.interface;
             return {
                 type: widget.type,
-                mode: 'view',
+                mode: this.editable() ? 'edit' : 'view',
                 path: this.name(),
                 children: widget.children,
                 formula: widget.formula,
-                options: merge(schema.interface?.options)
+                triggers: widget.triggers,
+                options: merge(schema.interface?.options, 
+                //this.property.options?.create?.widget,
+                { validationRules: this.property.validations })
             };
         });
     }
 }
-class AXPEntityMasterSingleViewModel {
-    constructor(injector, config, entityData) {
+class AXPEntityMasterUpdateViewModel {
+    constructor(injector, config, entityData, props) {
         this.injector = injector;
         this.config = config;
         this.entityData = entityData;
+        this.props = props;
         this.entityDef = cloneDeep(this.config);
-        this._viewDef = cloneDeep(this.entityDef.interfaces?.master?.single);
-        this.session = this.injector.get(AXPSessionService);
-        this.formatService = this.injector.get(AXFormatService);
         this.workflow = this.injector.get(AXPWorkflowService);
-        this.destroyed = new Subject();
-        this.translateService = this.injector.get(AXTranslationService);
+        this.isInProgress = signal(false);
         this.context = signal(cloneDeep(this.entityData));
-        this.actions = computed(() => {
-            return this.entityDef.interfaces?.master?.single?.actions?.map((tr) => new AXPEntityCommandTriggerViewModel(this.entityDef, tr)) ?? [];
-        });
-        this.primaryActions = computed(() => {
-            return this.actions().filter(c => c.priority == 'primary');
-        });
-        this.secondaryActions = computed(() => {
-            return this.actions().filter(c => c.priority == 'secondary');
-        });
-        this.sections = computed(() => {
-            const { interfaces, properties } = this.entityDef;
-            const viewProps = interfaces?.master?.single?.properties?.map(({ name }) => name) ?? [];
-            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && viewProps.includes(name));
-            const groups = interfaces?.master?.single?.sections?.filter(({ id }) => filteredProperties.some(({ groupId }) => groupId === id)) ?? [];
-            return groups.map(section => new AXPEntityMasterSingleViewGroupViewModel(this.entityDef, section));
-        });
-        //****************** Title ******************//
-        this.title = computed(() => {
-            const suggestedProps = this.entityDef.properties.find((c) => ['title', 'name', 'code'].includes(c.name));
-            let suggestedFormat = 'Item #{{id}}';
-            if (suggestedProps)
-                suggestedFormat = `{{${suggestedProps.name}}}`;
-            return this.formatService.format(this._viewDef.title ?? suggestedFormat, 'string', this.context());
-        });
-        //****************** Description ******************//
-        this.description = computed(() => {
-            return this._viewDef.description ? this.formatService.format(this._viewDef.description, 'string', this.context()) : null;
-        });
-        //****************** Beardcrumbs ******************//
-        this.beardcrumbs = computed(() => {
-            return [
-                {
-                    title: this.translateService.translateSync('entity.home'),
-                    icon: "fa-solid fa-home ax-text-xs ax-me-2",
-                    url: [`/${this.session.application?.name}`]
-                },
-                {
-                    title: this.entityDef.formats.plural ?? this.entityDef.formats.individual,
-                    url: [`/${this.session.application?.name}`, 'm', `${this.entityDef.module}`, 'e', `${this.entityDef.name}`, 'list']
-                },
-                {
-                    title: this.title(),
-                }
-            ];
-        });
-        this.relatedEntities = computed(() => {
-            return this.entityDef.relatedEntities?.map(re => new AXPEntityDetailListViewModel(this.injector, re, { entity: this.entityDef, data: this.entityData })) ?? [];
-        });
-        this.workflow.events$
-            .pipe(ofType(AXPEntityDeletedEvent))
-            .pipe(takeUntil(this.destroyed))
-            .subscribe((event) => {
-            if (event.payload.entity == getEntityInfo(this.entityDef).source &&
-                event.payload.ids.includes(this.context().id)) {
-                this.workflow.execute('show-list-view', {
-                    entity: getEntityInfo(this.entityDef).source
-                });
-            }
-        });
-        this.workflow.events$
-            .pipe(ofType(AXPEntityModifyEvent))
-            .pipe(takeUntil(this.destroyed))
-            .subscribe(async (event) => {
-            if (event.payload.entity == getEntityInfo(this.entityDef).source &&
-                event.payload.values.id === this.context().id) {
-                this.context.set(event.payload.values);
-            }
+        this.elements = computed(() => {
+            const props = this.entityDef.properties.filter(c => this.props.includes(c.name) &&
+                c.schema.hidden != true);
+            return props.map(e => {
+                return new AXPEntityMasterUpdateElementViewModel(this.entityDef, e);
+            });
         });
     }
-    async executeCommand(commandName, data = null) {
-        //TODO: syntact for workflow
-        switch (commandName) {
-            case 'modify-entity-section': {
-                this.workflow.execute('modify-entity-section', {
-                    entity: getEntityInfo(this.entityDef).source,
-                    data: {
-                        id: this.context().id,
-                        properties: data.editableProps().map(m => m.name()),
-                    },
-                });
-                break;
+    async save() {
+        this.isInProgress.set(true);
+        try {
+            const com = this.entityDef.commands?.update;
+            if (com) {
+                const exec = com.execute;
+                return await exec(this.context());
             }
-            default:
-                {
-                    const action = this.actions().find(c => c.name == commandName);
-                    this.workflow.execute(commandName, {
-                        entity: getEntityInfo(this.entityDef).source,
-                        data: action?.scope == AXPEntityCommandScope.Individual ? this.context() : null
-                    });
-                }
+        }
+        finally {
+            this.isInProgress.set(false);
         }
     }
-    //
-    //
-    destroy() {
-        this.destroyed.next();
-        this.destroyed.complete();
+    reset() {
+        this.context.set(cloneDeep(this.entityData));
     }
 }
-class AXPEntityDetailViewModelFactory {
+class AXPEntityMasterUpdateViewModelFactory {
     constructor() {
         this.entityService = inject(AXPEntityDefinitionRegistryService);
-        this.layout = inject(AXPLayoutService);
+        this.layout = inject(AXPLayoutThemeService);
         this.injector = inject(Injector);
     }
-    async create(moduleName, entityName, id) {
+    async create(moduleName, entityName, id, props) {
         const config = await this.entityService.resolve(moduleName, entityName);
         this.layout.setNavigationLoading(true);
         if (config.queries.byKey) {
             const func = config.queries.byKey.execute;
             const data = await func(id);
             this.layout.setNavigationLoading(false);
-            return new AXPEntityMasterSingleViewModel(this.injector, config, data);
+            return new AXPEntityMasterUpdateViewModel(this.injector, config, data, props);
         }
         this.layout.setNavigationLoading(false);
         return Promise.reject('cannot fetch ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewModelFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const AXPEntityModifyEvent = createWorkFlowEvent('[Entity] Modified');
+class AXPEntityModifySectionPopupAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.platform = inject(AXPlatform);
+        this.translateService = inject(AXTranslationService);
+        this.entityRegistery = inject(AXPEntityDefinitionRegistryService);
+        this.config = inject(AXP_ENTITY_CONFIG_TOKEN);
+        this.factory = inject(AXPEntityMasterUpdateViewModelFactory);
+    }
+    async execute(context) {
+        const [moduleName, entityName] = context.getVariable('entity').split('.');
+        const { properties, id, title } = context.getVariable('data');
+        const entityRef = await this.entityRegistery.resolve(moduleName, entityName);
+        const vm = await this.factory.create(moduleName, entityName, id, properties);
+        const com = await this.config.viewers.master.modify();
+        const popup = await this.popupService.open(com, {
+            title: title ?? `${this.translateService.translateSync('entity.modify')} ${this.translateService.translateSync(entityRef.formats.individual)}`,
+            size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
+            data: {
+                vm,
+                properties,
+                entity: entityRef,
+            },
+        });
+        context.setOutput('result', false);
+        if (popup.data?.result == true) {
+            context.setOutput('result', true);
+            context.setVariable('data', cloneDeep(popup.data.context));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifySectionPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifySectionPopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewModelFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifySectionPopupAction, decorators: [{
+            type: Injectable
         }] });
-const AXPEntityDetailViewModelResolver = (route, state, service = inject(AXPEntityDetailViewModelFactory)) => {
-    const moduleName = route.parent?.paramMap.get('module');
-    const entityName = route.paramMap.get('entity');
-    const id = route.paramMap.get('id');
-    //
-    return service.create(moduleName, entityName, id);
+class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
+    async execute(context) {
+        const updatedData = context.getVariable('data');
+        this.dispatch(AXPEntityModifyEvent({ entity: context.getVariable('entity'), values: updatedData }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyConfirmedAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyConfirmedAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModifyConfirmedAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPModifyEntitySectionWorkflow = {
+    startStepId: 'modifyPopup',
+    steps: {
+        modifyPopup: {
+            id: 'modifyPopup',
+            action: 'AXPEntityModifySectionPopupAction',
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
+                    nextStepId: 'successToast',
+                },
+            ],
+        },
+        successToast: {
+            id: 'successToast',
+            action: 'AXPToastAction',
+            input: {
+                color: 'success',
+                title: 'workflow.entity-modified-title',
+                content: 'workflow.entity-modified-body',
+            },
+            nextSteps: [
+                {
+                    conditions: [],
+                    nextStepId: 'modifyConfirmed',
+                },
+            ],
+        },
+        modifyConfirmed: {
+            id: 'modifyConfirmed',
+            action: 'AXPEntityModifyConfirmedAction',
+        },
+    },
 };
 
-class AXPEntityCreateViewSectionViewModel {
+class AXPEntityMasterSingleViewGroupViewModel {
     constructor(entity, section) {
         this.entity = entity;
         this.section = section;
         this.group = this.entity.groups?.find(c => c.id == this.section.id);
         this.name = signal(this.group.id);
+        this.isLoading = signal(false);
         this.title = computed(() => {
             return this.group.title ?? this.group.id;
         });
         this.description = computed(() => {
             return this.group.description;
-            ;
         });
         this.layout = computed(() => {
             const source = cloneDeep(this.section.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
-        this.elements = computed(() => {
-            const { interfaces, properties } = this.entity;
-            const createProps = interfaces?.master?.create?.properties ?? [];
-            const createPropNames = new Set(createProps.map(({ name }) => name));
-            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id &&
-                !schema.hidden &&
-                createPropNames.has(name));
-            return filteredProperties.map(property => {
-                const createProp = createProps.find(({ name }) => name === property.name);
-                return new AXPEntityCreateViewElementViewModel(this.entity, this, property, createProp);
-            });
+        this.props = computed(() => {
+            const { properties, interfaces } = this.entity;
+            const groupProperties = properties
+                .filter(({ groupId, schema }) => groupId === this.group.id && !schema.hidden)
+                .map(({ name }) => name);
+            const viewProperties = interfaces?.master?.single?.properties?.filter(({ name }) => groupProperties.includes(name)) ?? [];
+            return viewProperties.map(prop => new AXPEntityMasterSingleElementViewModel(this.entity, this, prop));
+        });
+        this.editableProps = computed(() => {
+            const { properties, interfaces } = this.entity;
+            const editablePropertyNames = interfaces?.master?.update?.properties?.map(({ name }) => name) ?? [];
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id && !schema.hidden && editablePropertyNames.includes(name));
+            return filteredProperties.map(prop => new AXPEntityMasterSingleElementViewModel(this.entity, this, prop));
+        });
+        this.editable = computed(() => {
+            return this.editableProps().length > 0;
         });
     }
 }
-class AXPEntityCreateViewElementViewModel {
-    constructor(entity, section, property, createProp) {
+class AXPEntityMasterSingleElementViewModel {
+    constructor(entity, section, propertyView) {
         this.entity = entity;
         this.section = section;
-        this.property = property;
-        this.createProp = createProp;
+        this.propertyView = propertyView;
+        this.property = this.entity.properties.find(c => c.name == this.propertyView.name);
         this.name = signal(this.property.name);
         this.title = signal(this.property.title);
+        this.showLabel = signal(this.propertyView.layout?.label?.visible != false);
         this.description = signal(this.property.description);
-        this.editable = computed(() => {
-            return !(this.property.schema.readonly ?? false);
-        });
-        this.isRequired = computed(() => {
-            return this.property.validations?.some(c => c.rule == 'required') || false;
-        });
         this.layout = computed(() => {
-            const source = cloneDeep(this.createProp.layout ?? {});
+            const viewProp = this.entity.interfaces?.master?.single?.properties?.find(c => c.name == this.property.name);
+            const source = cloneDeep(viewProp?.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
@@ -918,394 +1183,158 @@ class AXPEntityCreateViewElementViewModel {
             const widget = schema.interface;
             return {
                 type: widget.type,
-                mode: this.editable() ? 'edit' : 'view',
+                mode: 'view',
                 path: this.name(),
                 children: widget.children,
                 formula: widget.formula,
-                triggers: widget.triggers,
-                options: merge(schema.interface?.options, 
-                //this.property.options?.create?.widget,
-                { validationRules: this.property.validations })
+                options: merge(schema.interface?.options)
             };
         });
     }
 }
-class AXPEntityMasterCreateViewModel {
-    constructor(injector, config, initialData = {}) {
-        this.injector = injector;
-        this.config = config;
-        this.initialData = initialData;
-        this.entityDef = cloneDeep(this.config);
-        this.workflow = this.injector.get(AXPWorkflowService);
-        this.context = signal(this.initialData ?? {});
-        this.isInProgress = signal(false);
-        this.sections = computed(() => {
-            const { interfaces, properties } = this.entityDef;
-            const createProps = interfaces?.master?.create?.properties?.map(({ name }) => name) ?? [];
-            const visibleProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && createProps.includes(name));
-            const sections = interfaces?.master?.create?.sections?.filter(({ id }) => visibleProperties.some(({ groupId }) => groupId === id)) ?? [];
-            return sections.map(section => new AXPEntityCreateViewSectionViewModel(this.entityDef, section));
-        });
-        if (!initialData)
-            initialData = {};
-        this.config.properties
-            .filter(c => c.schema.defaultValue != null)
-            .forEach(p => {
-            if (typeof p.schema.defaultValue === 'function') {
-                const func = p.schema.defaultValue;
-                set(initialData, p.name, func(initialData));
-            }
-            else {
-                set(initialData, p.name, p.schema.defaultValue);
-            }
-        });
-        this.context.set(initialData);
-    }
-    async save() {
-        try {
-            this.isInProgress.set(true);
-            const exec = this.entityDef.commands?.create?.execute;
-            return await exec((this.context()));
-        }
-        finally {
-            this.isInProgress.set(false);
-        }
-    }
-    async createNewOne() {
-        await this.workflow.execute('create-entity', {
-            entity: getEntityInfo(this.entityDef).source
-        });
-    }
-}
-class AXPEntityCreateViewModelFactory {
-    constructor() {
-        this.entityService = inject(AXPEntityDefinitionRegistryService);
-        this.layout = inject(AXPLayoutService);
-        this.injector = inject(Injector);
-    }
-    async create(moduleName, entityName, initialData = null) {
-        this.layout.setNavigationLoading(true);
-        const config = await this.entityService.resolve(moduleName, entityName);
-        this.layout.setNavigationLoading(false);
-        return new AXPEntityMasterCreateViewModel(this.injector, config, initialData);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateViewModelFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityCreateViewModelFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class AXPEntityMasterListViewQueryViewModel {
-    constructor(entity, section, view) {
-        this.entity = entity;
-        this.section = section;
-        this.view = view;
-        this.name = this.view.name;
-        this.title = this.view.title;
-        this.sorts = this.view.sorts;
-        this.columns = this.view.columns;
-        this.conditions = this.view.conditions;
-    }
-}
-class AXPEntityMasterListViewModel {
-    constructor(injector, config) {
+class AXPEntityMasterSingleViewModel {
+    constructor(injector, config, entityData) {
         this.injector = injector;
         this.config = config;
+        this.entityData = entityData;
         this.entityDef = cloneDeep(this.config);
-        this._viewDef = cloneDeep(this.entityDef.interfaces?.master?.list);
-        this.formatService = this.injector.get(AXFormatService);
+        this._viewDef = cloneDeep(this.entityDef.interfaces?.master?.single);
         this.session = this.injector.get(AXPSessionService);
+        this.formatService = this.injector.get(AXFormatService);
         this.workflow = this.injector.get(AXPWorkflowService);
         this.destroyed = new Subject();
-        this.events$ = new Subject();
-        this.dataSource = new AXDataSource({
-            byKey: (key) => {
-                const func = this.entityDef.queries.byKey.execute;
-                return func();
-            },
-            load: (e) => {
-                const func = this.entityDef.queries.list?.execute;
-                return func(e);
-            },
-            pageSize: 10,
-            key: 'id',
+        this.translateService = this.injector.get(AXTranslationService);
+        this.context = signal(cloneDeep(this.entityData));
+        this.actions = computed(() => {
+            return this.entityDef.interfaces?.master?.single?.actions?.map((tr) => new AXPEntityCommandTriggerViewModel(this.entityDef, tr)) ?? [];
         });
-        this.selectedItems = signal([]);
-        this.hasSelectedItems = computed(() => {
-            return this.selectedItems().length > 0;
+        this.primaryActions = computed(() => {
+            return this.actions().filter(c => c.priority == 'primary');
+        });
+        this.secondaryActions = computed(() => {
+            return this.actions().filter(c => c.priority == 'secondary');
+        });
+        this.sections = computed(() => {
+            const { interfaces, properties } = this.entityDef;
+            const viewProps = interfaces?.master?.single?.properties?.map(({ name }) => name) ?? [];
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && viewProps.includes(name));
+            const groups = interfaces?.master?.single?.sections?.filter(({ id }) => filteredProperties.some(({ groupId }) => groupId === id)) ?? [];
+            return groups.map(section => new AXPEntityMasterSingleViewGroupViewModel(this.entityDef, section));
         });
         //****************** Title ******************//
         this.title = computed(() => {
-            return this._viewDef.title ?? this.entityDef.formats.plural;
+            const suggestedProps = this.entityDef.properties.find((c) => ['title', 'name', 'code'].includes(c.name));
+            let suggestedFormat = 'Item #{{id}}';
+            if (suggestedProps)
+                suggestedFormat = `{{${suggestedProps.name}}}`;
+            return this.formatService.format(this._viewDef.title ?? suggestedFormat, 'string', this.context());
         });
         //****************** Description ******************//
         this.description = computed(() => {
-            return this._viewDef.description ?? null;
-        });
-        //****************** Inline filter ******************//
-        this.inlineFiltersPlaceholders = computed(() => {
-            return this.entityDef.properties.filter((p) => p.options?.filter?.inline?.enabled).map((c) => c.title ?? c.name);
-        });
-        this.hasInlineFilters = computed(() => {
-            return this.inlineFiltersPlaceholders().length > 0;
+            return this._viewDef.description ? this.formatService.format(this._viewDef.description, 'string', this.context()) : null;
         });
         //****************** Beardcrumbs ******************//
         this.beardcrumbs = computed(() => {
             return [
                 {
-                    title: 'entity.home',
-                    icon: 'fa-solid fa-home ax-text-xs ax-me-2',
-                    url: [`/${this.session.application?.name}`],
+                    title: this.translateService.translateSync('entity.home'),
+                    icon: "fa-solid fa-home ax-text-xs ax-me-2",
+                    url: [`/${this.session.application?.name}`]
+                },
+                {
+                    title: this.entityDef.formats.plural ?? this.entityDef.formats.individual,
+                    url: [`/${this.session.application?.name}`, 'm', `${this.entityDef.module}`, 'e', `${this.entityDef.name}`, 'list']
                 },
                 {
                     title: this.title(),
-                    url: [
-                        `/${this.session.application?.name}`,
-                        'm',
-                        `${this.entityDef.module}`,
-                        'e',
-                        `${this.entityDef.name}`,
-                        'list',
-                    ],
-                },
+                }
             ];
         });
-        //****************** Actions ******************//
-        this.allActions = computed(() => {
-            const list = this.entityDef.interfaces?.master?.list?.actions ?? [];
-            return list.map((tr) => new AXPEntityCommandTriggerViewModel(this.entityDef, tr)) ?? [];
-        });
-        this.primaryActions = computed(() => {
-            return this.allActions().filter((a) => a.priority == 'primary' &&
-                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
-                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
-        });
-        this.secondaryActions = computed(() => {
-            return this.allActions().filter((a) => a.priority == 'secondary' &&
-                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
-                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
-        });
-        this.primaryRowActions = computed(() => this.allActions().filter((a) => a.scope == AXPEntityCommandScope.Individual && a.priority === 'primary'));
-        this.secondaryRowActions = computed(() => this.allActions().filter((a) => a.scope == AXPEntityCommandScope.Individual && a.priority === 'secondary'));
-        //****************** Filter ******************//
-        this.inlineFilters = {
-            field: null,
-            logic: 'or',
-            operator: null,
-            filters: [],
-        };
-        this.advanceFilters = {
-            field: null,
-            logic: 'and',
-            operator: null,
-            filters: [],
-        };
-        //****************** Columns ******************//
-        this.allAvailableColumns = () => {
-            const { columns = [], properties } = this.entityDef;
-            const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
-            const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
-            return columns
-                .filter(({ name }) => visiblePropNames.has(name))
-                .map((column) => {
-                const property = visibleProperties.find(({ name }) => name === column.name);
-                return new AXPEntityListViewColumnViewModel(property, column);
-            });
-        };
-        this.visibleColumnCount = () => {
-            return this.columns().filter((c) => c.visible == true).length;
-        };
-        this.columns = signal([]);
-        //****************** Sort ******************//
-        this.sortableFields = () => {
-            const props = this.entityDef.properties.filter((c) => c.options?.sort?.enabled);
-            return props.map((e) => {
-                return {
-                    name: e.name,
-                    title: e.title,
-                    dir: undefined,
-                };
-            });
-        };
-        this.sortableFieldsCount = () => {
-            return this.entityDef.properties.filter((c) => c.options?.sort?.enabled).length ?? 0;
-        };
-        this.canSort = () => {
-            return this.sortableFieldsCount() > 0;
-        };
-        this.canAddMoreSort = () => {
-            return this.sortedCount() < this.sortableFieldsCount();
-        };
-        this.sortedCount = () => {
-            return this.sortedFields().filter((i) => i.dir).length;
-        };
-        this.sortedFields = signal([]);
-        this.views = computed(() => {
-            const views = this.entityDef.interfaces?.master?.list?.views ?? [];
-            return views.map((v) => {
-                return new AXPEntityMasterListViewQueryViewModel(this.entityDef, this, v);
-            });
+        this.relatedEntities = computed(() => {
+            return this.entityDef.relatedEntities?.map(re => new AXPEntityDetailListViewModel(this.injector, re, { entity: this.entityDef, data: this.entityData })) ?? [];
         });
-        this.view = signal(this.views()[0]);
         this.workflow.events$
             .pipe(ofType(AXPEntityDeletedEvent))
             .pipe(takeUntil(this.destroyed))
             .subscribe((event) => {
-            if (event.payload.entity == getEntityInfo(this.entityDef).source) {
-                this.selectedItems.set([]);
-                this.events$.next({ action: 'refresh' });
+            if (event.payload.entity == getEntityInfo(this.entityDef).source &&
+                event.payload.ids.includes(this.context().id)) {
+                this.workflow.execute('show-list-view', {
+                    entity: getEntityInfo(this.entityDef).source
+                });
+            }
+        });
+        this.workflow.events$
+            .pipe(ofType(AXPEntityModifyEvent))
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(async (event) => {
+            if (event.payload.entity == getEntityInfo(this.entityDef).source &&
+                event.payload.values.id === this.context().id) {
+                this.context.set(event.payload.values);
             }
         });
-        console.log(this.sortableFields());
-        this.sortedFields.set(this.sortableFields());
-    }
-    clearSelection() {
-        this.selectedItems.set([]);
     }
-    applyInlineFilter(value) {
-        const props = this.entityDef.properties.filter((c) => c.options?.filter?.inline?.enabled);
-        this.inlineFilters.filters = [];
-        if (value) {
-            props.forEach((p) => {
-                this.inlineFilters.filters?.push({
-                    field: p.name,
-                    operator: {
-                        type: 'contains',
+    async executeCommand(commandName, data = null) {
+        //TODO: syntact for workflow
+        switch (commandName) {
+            case 'modify-entity-section': {
+                this.workflow.execute('modify-entity-section', {
+                    entity: getEntityInfo(this.entityDef).source,
+                    data: {
+                        id: this.context().id,
+                        properties: data.editableProps().map(m => m.name()),
                     },
-                    value,
                 });
-            });
-        }
-        this.applyFilterAndSort();
-    }
-    applyFilterAndSort() {
-        this.dataSource.clearFilter();
-        //
-        this.dataSource.sort(...this.sortedFields().map((s) => ({ dir: s.dir, field: s.name })));
-        //
-        this.advanceFilters.filters = this.view().conditions.map((f) => ({
-            field: f.name,
-            operator: f.operator,
-            value: f.value,
-        }));
-        //
-        const inline = this.inlineFilters.filters?.length ?? 0;
-        const advance = this.advanceFilters.filters?.length ?? 0;
-        if (inline && !advance) {
-            this.dataSource.filter(this.inlineFilters);
-        }
-        else if (!inline && advance) {
-            this.dataSource.filter(this.advanceFilters);
-        }
-        else if (inline && advance) {
-            this.dataSource.filter({
-                field: null,
-                logic: 'and',
-                operator: null,
-                filters: [this.inlineFilters, this.advanceFilters],
-            });
-        }
-        //
-        this.dataSource.refresh();
-    }
-    resetColumns() {
-        this.applyViewColumns();
-    }
-    applyColumns() {
-        //this.columns.set(this.clonedColumns())
-    }
-    applyViewColumns() {
-        const cols = this.view().columns;
-        const cloned = this.allAvailableColumns().map((c) => {
-            const column = this.entityDef.columns?.find((cc) => cc.name == c.name);
-            const prop = this.entityDef.properties.find((p) => p.name == c.name);
-            const col = new AXPEntityListViewColumnViewModel(prop, column);
-            col.visible = !cols.some((c) => c == col.name) && col.visible != false;
-            return col;
-        });
-        this.columns.set(cloned);
-    }
-    resetSorts() {
-        this.applyViewSorts();
-    }
-    applySorts() {
-        this.applyFilterAndSort();
-    }
-    addSort() {
-        const prop = this.sortableFields().find((c) => !this.sortedFields().some((s) => s.name == c.name));
-        if (prop) {
-            this.sortedFields.set([...this.sortedFields(), ...[prop]]);
-        }
-    }
-    removeSort(name) {
-        this.sortedFields.set(this.sortedFields().filter((c) => c.name != name));
-    }
-    applyViewSorts() {
-        const viewSorts = this.view().sorts;
-        this.sortedFields.update((prev) => {
-            const viewSortsMap = new Map(viewSorts.map((vs) => [vs.name, vs]));
-            return prev.map((sf) => {
-                const updatedSort = viewSortsMap.get(sf.name);
-                if (updatedSort) {
-                    return { ...updatedSort, title: sf.title };
+                break;
+            }
+            default:
+                {
+                    const action = this.actions().find(c => c.name == commandName);
+                    this.workflow.execute(commandName, {
+                        entity: getEntityInfo(this.entityDef).source,
+                        data: action?.scope == AXPEntityCommandScope.Individual ? this.context() : null
+                    });
                 }
-                return sf;
-            });
-        });
-    }
-    //****************** Views ******************//
-    setView(viewName = null) {
-        if (viewName != this.view().name) {
-            this.view.set(this.views().find((c) => c.name == viewName) ?? this.views()[0]);
-            this.applyViewSorts();
-            this.applyViewColumns();
-            this.applyFilterAndSort();
         }
     }
-    //******************  Commands ******************//
-    async executeCommand(commandName, data = null) {
-        const action = this.allActions().find((c) => c.name == commandName &&
-            ((this.selectedItems().length
-                ? c.scope == AXPEntityCommandScope.Selected
-                : c.scope == AXPEntityCommandScope.Individual) ||
-                c.scope == AXPEntityCommandScope.TypeLevel));
-        await this.workflow.execute(commandName, {
-            entity: getEntityInfo(this.entityDef).source,
-            data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data,
-        });
-    }
+    //
     //
     destroy() {
         this.destroyed.next();
         this.destroyed.complete();
     }
 }
-class AXPEntityListViewModelFactory {
+class AXPEntityDetailViewModelFactory {
     constructor() {
         this.entityService = inject(AXPEntityDefinitionRegistryService);
-        this.layout = inject(AXPLayoutService);
+        this.layout = inject(AXPLayoutThemeService);
         this.injector = inject(Injector);
     }
-    async create(moduleName, entityName) {
-        this.layout.setNavigationLoading(true);
+    async create(moduleName, entityName, id) {
         const config = await this.entityService.resolve(moduleName, entityName);
+        this.layout.setNavigationLoading(true);
+        if (config.queries.byKey) {
+            const func = config.queries.byKey.execute;
+            const data = await func(id);
+            this.layout.setNavigationLoading(false);
+            return new AXPEntityMasterSingleViewModel(this.injector, config, data);
+        }
         this.layout.setNavigationLoading(false);
-        return new AXPEntityMasterListViewModel(this.injector, config);
+        return Promise.reject('cannot fetch ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewModelFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewModelFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityListViewModelFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityDetailViewModelFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
-const AXPEntityListViewModelResolver = (route, state, service = inject(AXPEntityListViewModelFactory)) => {
+const AXPEntityDetailViewModelResolver = (route, state, service = inject(AXPEntityDetailViewModelFactory)) => {
     const moduleName = route.parent?.paramMap.get('module');
     const entityName = route.paramMap.get('entity');
+    const id = route.paramMap.get('id');
     //
-    return service.create(moduleName, entityName);
+    return service.create(moduleName, entityName, id);
 };
 
 class AXPLookupWidgetViewComponent extends AXPWidgetComponent {
@@ -2380,11 +2409,6 @@ function routesFacory() {
                 {
                     path: ':module',
                     children: [
-                        // {
-                        //   path: 'e/:entity/:id/view/:section',
-                        //   resolve: { loader: AXPEntityDetailViewLoaderResolver },
-                        //   component: AXPEntityDetailsViewComponent,
-                        // },
                         {
                             path: 'e/:entity/list',
                             loadComponent: () => {
@@ -2512,5 +2536,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDefinitionRegistryService, AXPEntityDetailListViewModel, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityModule, AXPEntityResolver, AXPEntityService, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER };
+export { AXPEntityCommandTriggerViewModel, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDefinitionRegistryService, AXPEntityDetailListViewModel, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityModule, AXPEntityResolver, AXPEntityService, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER };
 //# sourceMappingURL=acorex-platform-layout-entity.mjs.map