@acorex/platform 19.1.2 → 19.1.4

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

@@ -0,0 +1,124 @@
+import { AXPFiltersProviderService } from '@acorex/platform/common';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, Injectable } from '@angular/core';
+import { isEqual, cloneDeep } from 'lodash-es';
+
+class AXPFiltersViewModel {
+    constructor() {
+        this.filterProviderService = inject(AXPFiltersProviderService);
+        this.context = signal({}, { equal: isEqual });
+        this.availableFilters = signal([]);
+        this.activeFilters = signal([]);
+        this.newFilters = signal([]);
+        this.activeFiltersCount = computed(() => this.activeFilters().length);
+        this.#effect = effect(() => {
+            console.log(this.context());
+            this.filters.update((prev) => ({ ...prev, filters: this.convertContextToQueries(this.context()) }));
+        });
+        this.#effect1 = effect(() => {
+            this.initializeContext();
+            console.log(this.filters().filters);
+            this.activeFilters.update((prev) => {
+                return this.convertFiltersToDefinition(this.filters().filters || []);
+            });
+        });
+    }
+    onChoosingFiltersChange(e) {
+        if (e.isUserInteraction) {
+            this.newFilters.set(e.component.selectedItems);
+        }
+    }
+    onChoosingFiltersConfirm() {
+        this.filters.update((prev) => ({
+            ...prev,
+            filters: [
+                ...(prev.filters || []),
+                ...this.newFilters().filter((newFilter) => !prev.filters?.some((existing) => existing.field === newFilter.field)),
+            ],
+        }));
+    }
+    convertFiltersToDefinition(filters) {
+        const availableFiltersMap = new Map(this.availableFilters().map((af) => [af.field, af]));
+        return filters
+            .map((df) => {
+            const af = availableFiltersMap.get(df.field);
+            if (!af)
+                return null;
+            return {
+                field: df.field,
+                operator: df.operator,
+                filters: df.filters,
+                logic: df.logic,
+                value: df.value,
+                title: af.title,
+                widget: af.widget,
+                isParametric: af.isParametric,
+            };
+        })
+            .filter((filter) => filter !== null);
+    }
+    setAvailableFilters(availableFilters) {
+        this.availableFilters.set(availableFilters);
+    }
+    setFiltersModel(filters) {
+        this.filters = filters;
+    }
+    drop(event) {
+        const cloned = cloneDeep(this.activeFilters());
+        moveItemInArray(cloned, event.previousIndex, event.currentIndex);
+        this.activeFilters.set(cloned);
+    }
+    convertContextToQueries(context) {
+        const contextKeys = Object.keys(context);
+        return contextKeys.map((c) => ({
+            field: c,
+            value: context[c].value,
+            operator: {
+                type: context[c].operation,
+            },
+        }));
+    }
+    resetFilterFields() {
+        this.newFilters.set(this.activeFilters());
+    }
+    removeCondition(selectedFilter) {
+        this.activeFilters.update((prev) => prev.filter((filter) => filter.field !== selectedFilter.field));
+        this.context.update((prev) => {
+            const newContext = { ...prev };
+            delete newContext[selectedFilter.field];
+            return newContext;
+        });
+    }
+    #effect;
+    #effect1;
+    initializeContext() {
+        const context = {};
+        if (this.filters()?.filters?.length) {
+            this.filters().filters?.forEach((f) => {
+                context[f.field] = {
+                    value: f.value,
+                    operation: f.operator.type,
+                };
+            });
+        }
+        this.context.set(context);
+    }
+    initializeFilters() {
+        this.initializeContext();
+        this.activeFilters.update((prev) => this.convertFiltersToDefinition(this.filters().filters || []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFiltersViewModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFiltersViewModel, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPFiltersViewModel, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXPFiltersViewModel };
+//# sourceMappingURL=acorex-platform-layout-filters.mjs.map

package/fesm2022/acorex-platform-layout-filters.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-layout-filters.mjs","sources":["../../../../libs/platform/layout/filters/src/lib/filters.viewmodel.ts","../../../../libs/platform/layout/filters/src/acorex-platform-layout-filters.ts"],"sourcesContent":["import { AXValueChangedEvent } from '@acorex/components/common';\nimport { AXPFilterDefinition, AXPFilterQuery, AXPFiltersProviderService } from '@acorex/platform/common';\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { computed, effect, inject, Injectable, ModelSignal, signal, WritableSignal } from '@angular/core';\nimport { cloneDeep, isEqual } from 'lodash-es';\n\n@Injectable({ providedIn: 'root' })\nexport class AXPFiltersViewModel {\n  private readonly filterProviderService = inject(AXPFiltersProviderService);\n\n  context: WritableSignal<{ [key: string]: any }> = signal({}, { equal: isEqual });\n\n  readonly availableFilters: WritableSignal<AXPFilterDefinition[]> = signal([]);\n  readonly activeFilters: WritableSignal<AXPFilterDefinition[]> = signal([]);\n  readonly newFilters: WritableSignal<AXPFilterDefinition[]> = signal([]);\n\n  protected filters!: ModelSignal<AXPFilterQuery>;\n\n  readonly activeFiltersCount = computed(() => this.activeFilters().length);\n\n  onChoosingFiltersChange(e: AXValueChangedEvent<any>) {\n    if (e.isUserInteraction) {\n      this.newFilters.set(e.component.selectedItems);\n    }\n  }\n\n  onChoosingFiltersConfirm() {\n    this.filters.update((prev) => ({\n      ...prev,\n      filters: [\n        ...(prev.filters || []),\n        ...this.newFilters().filter(\n          (newFilter) => !prev.filters?.some((existing) => existing.field === newFilter.field)\n        ),\n      ],\n    }));\n  }\n\n  convertFiltersToDefinition(filters: AXPFilterQuery[]): AXPFilterDefinition[] {\n    const availableFiltersMap = new Map(this.availableFilters().map((af) => [af.field, af]));\n    return filters\n      .map((df) => {\n        const af = availableFiltersMap.get(df.field);\n        if (!af) return null;\n        return {\n          field: df.field,\n          operator: df.operator,\n          filters: df.filters,\n          logic: df.logic,\n          value: df.value,\n          title: af.title,\n          widget: af.widget,\n          isParametric: af.isParametric,\n        };\n      })\n      .filter((filter) => filter !== null) as AXPFilterDefinition[];\n  }\n\n  setAvailableFilters(availableFilters: AXPFilterDefinition[]) {\n    this.availableFilters.set(availableFilters);\n  }\n\n  setFiltersModel(filters: ModelSignal<AXPFilterQuery>) {\n    this.filters = filters;\n  }\n\n  drop(event: CdkDragDrop<unknown[]>) {\n    const cloned = cloneDeep(this.activeFilters());\n    moveItemInArray(cloned, event.previousIndex, event.currentIndex);\n    this.activeFilters.set(cloned);\n  }\n\n  convertContextToQueries(context: any): AXPFilterQuery[] {\n    const contextKeys = Object.keys(context);\n    return contextKeys.map((c) => ({\n      field: c,\n      value: context[c].value,\n      operator: {\n        type: context[c].operation,\n      },\n    }));\n  }\n\n  resetFilterFields() {\n    this.newFilters.set(this.activeFilters());\n  }\n\n  removeCondition(selectedFilter: AXPFilterDefinition) {\n    this.activeFilters.update((prev) => prev.filter((filter) => filter.field !== selectedFilter.field));\n    this.context.update((prev) => {\n      const newContext = { ...prev };\n      delete newContext[selectedFilter.field];\n      return newContext;\n    });\n  }\n\n  #effect = effect(() => {\n    console.log(this.context());\n    this.filters.update((prev) => ({ ...prev, filters: this.convertContextToQueries(this.context()) }));\n  });\n\n  #effect1 = effect(() => {\n    this.initializeContext();\n    console.log(this.filters().filters);\n    this.activeFilters.update((prev) => {\n      return this.convertFiltersToDefinition(this.filters().filters || []);\n    });\n  });\n\n  private initializeContext() {\n    const context: any = {};\n\n    if (this.filters()?.filters?.length) {\n      this.filters().filters?.forEach((f) => {\n        context[f.field] = {\n          value: f.value,\n          operation: f.operator.type,\n        };\n      });\n    }\n    this.context.set(context);\n  }\n\n  initializeFilters(): void {\n    this.initializeContext();\n    this.activeFilters.update((prev) => this.convertFiltersToDefinition(this.filters().filters || []));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,72 +1,15 @@
 import { AXToastService } from '@acorex/components/toast';
-import { AXPlatform } from '@acorex/core/platform';
-import { AXPSettingDefinitionProviderService, AXPSettingValueProviderService } from '@acorex/platform/common';
+import { AXPSettingScope, AXPSettingDefinitionProviderService, AXPSettingValueProviderService } from '@acorex/platform/common';
 import { AXHighlightService } from '@acorex/platform/core';
 import * as i0 from '@angular/core';
 import { inject, signal, computed, effect, Injectable } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { filter, take } from 'rxjs';
-import { isEmpty, isEqual } from 'lodash-es';
+import { isNil, isEmpty, get, isEqual } from 'lodash-es';
+import { AXPPageStatus } from '@acorex/platform/layout/builder';
+import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
+import { AXDialogService } from '@acorex/components/dialog';
 
-/**
- * Converts a list of AXPSettingDefinitionGroup into a tree structure of AXTreeViewSchema.
- * This function processes groups and their nested sub-groups, recursively creating a tree.
- *
- * @param groups - Array of top-level setting groups to be converted into tree view schema.
- * @param parentId - The parent ID for nested groups, passed down recursively. (Optional, default is undefined)
- *
- * @returns An array of AXTreeViewSchema representing the hierarchical structure of groups.
- */
-function convertToTreeViewSchema(groups, parentId) {
-    // Helper function to traverse and convert a single group (and its sub-groups)
-    const traverseGroups = (group, parent) => {
-        const currentId = group.name;
-        // Schema for the current group
-        const schema = {
-            id: currentId, // Unique identifier for the group (using group name)
-            parentId: parent, // Parent group ID, passed down recursively
-            text: group.title, // Display title of the group
-            //tooltip: group.description, // Optional description as tooltip
-            hasChild: group.groups.length > 0, // Whether the group has child groups
-            isExpanded: false, // Default state for expansion (optional)
-            icon: group.icon,
-            childrens: group.groups.length > 0 ? [] : undefined, // Child groups array (undefined if no children)
-        };
-        // Recursively process nested groups (sub-groups inside the current group)
-        group.groups.forEach((subGroup) => {
-            const childSchema = traverseGroups(subGroup, currentId); // Create schema for sub-group
-            schema.childrens?.push(childSchema); // Add the child schema to the parent group's children
-        });
-        return schema; // Return the group schema with its children (if any)
-    };
-    // Initialize an array to hold the top-level groups' schemas
-    const treeViewSchemas = [];
-    // Process each top-level group and convert it into tree view schema
-    groups.forEach((group) => {
-        treeViewSchemas.push(traverseGroups(group, parentId)); // Add the schema for each group
-    });
-    // Return the resulting hierarchical structure
-    return treeViewSchemas;
-}
-/**
- * Recursively searches for a specific `id` in a tree structure and updates its `active` property to `true`.
- * Additionally, ensures all other nodes have their `active` property set to `false`.
- *
- * @param tree - The tree structure to search, represented as an array of AXTreeViewSchema nodes.
- * @param targetId - The `id` of the node to activate.
- * @returns The updated tree structure with the target node activated and others deactivated.
- */
-function setActiveByValueField(tree, targetId) {
-    return tree.map((node) => {
-        // Set active property for the target node
-        node.active = node.id === targetId;
-        // Recursively process children if they exist
-        if (node.childrens && node.childrens.length > 0) {
-            node.childrens = setActiveByValueField(node.childrens, targetId);
-        }
-        return node;
-    });
-}
 function searchSettings(groups, search) {
     const sectionMatchResult = [];
     const settingMatchResult = [];
@@ -114,6 +57,18 @@ function searchSettings(groups, search) {
 }
 
 class AXPSettingsViewModel {
+    resolveScopeKey(name) {
+        const scopeMap = {
+            environment: AXPSettingScope.Environment,
+            global: AXPSettingScope.Global,
+            tenant: AXPSettingScope.Tenant,
+            user: AXPSettingScope.User,
+        };
+        return scopeMap[name.toLowerCase()] ?? AXPSettingScope.User;
+    }
+    resolveScope() {
+        return this.resolveScopeKey(this.scopeName());
+    }
     #effect2;
     /**
      * @ignore
@@ -122,106 +77,210 @@ class AXPSettingsViewModel {
         this.router = inject(Router);
         this.settingDefinitionService = inject(AXPSettingDefinitionProviderService);
         this.settingValueService = inject(AXPSettingValueProviderService);
-        this.platform = inject(AXPlatform);
         this.toastService = inject(AXToastService);
+        this.dialogService = inject(AXDialogService);
         this.highlightService = inject(AXHighlightService);
-        this.isMobile = signal(this.platform.is('MD'));
-        this.fullRoute = this.router.url.split('/settings')[0] + '/settings/';
-        this.search = signal('');
-        this.searchResult = signal(undefined);
-        this.activatedGroup = signal(undefined);
+        this.layout = inject(AXPLayoutThemeService);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.searchExpression = signal('');
+        this.isValidQuery = (expression) => !isNil(expression) && !isEmpty(expression);
+        this.isSearching = computed(() => this.isValidQuery(this.searchExpression()));
+        this.searchResult = signal([]);
+        this.isSaving = signal(false);
+        this.isBusy = signal(false);
+        this.activateGroup = signal(undefined);
+        this.activeScope = signal('U');
         this.loadedItems = signal(null);
-        this.formattedData = signal([]);
+        this.scopeName = () => {
+            return this.activatedRoute?.snapshot?.paramMap?.get('scope')?.trim().toLowerCase() ?? 'user';
+        };
+        this.title = computed(() => {
+            // fake change detect simulate
+            this.activeScope();
+            //
+            return `settings.${this.scopeName()}.title`;
+        });
         this.groups = computed(() => {
-            if (this.activatedGroup()) {
-                return this.settingDefinitionService.findGroup(this.activatedGroup());
+            if (this.activateGroup()) {
+                return this.settingDefinitionService.findGroup(this.activeScope(), this.activateGroup());
             }
             else {
                 return null;
             }
             ;
         });
+        this.hasGroup = computed(() => this.activateGroup() != null);
+        this.showSide = computed(() => this.layout.isLarge() && this.hasGroup());
         this.#effect2 = effect(() => {
-            if (this.search()) {
-                this.searchResult.set(searchSettings(this.loadedItems(), this.search()));
+            if (this.searchExpression()) {
+                this.searchResult.set(searchSettings(this.loadedItems(), this.searchExpression()));
             }
-            setTimeout(() => {
-                this.highlightService.highlight('#ax-settings', this.search());
-            });
         });
         this.context = signal({});
         this.previousContext = signal({});
-        this.isSaving = signal(false);
-        this.canCancel = computed(() => isEmpty(this.context()));
-        this.canSave = computed(() => !this.isSaving() &&
-            !isEmpty(this.context()) &&
-            !isEqual(this.context(), this.previousContext()));
-        this.settingValueService.onChanged.subscribe(async () => {
-            const currentContext = await this.settingValueService.all();
-            this.context.update((ctx) => ({ ...ctx, ...currentContext }));
+        this.settingValueService.onChanged.pipe(filter(c => c.scope == this.resolveScope())).subscribe((e) => {
+            e.keys.forEach(k => {
+                const currentValue = e.values[k];
+                const contextValue = get(this.context(), k);
+                const previousValue = get(this.previousContext(), k);
+                // Update only if there are actual changes
+                if (!isEqual(previousValue, currentValue) || !isEqual(currentValue, contextValue)) {
+                    this.previousContext.update(prev => ({
+                        ...prev,
+                        [k]: currentValue, // Use backend-provided value
+                    }));
+                    this.context.update(ctx => ({
+                        ...ctx,
+                        [k]: currentValue,
+                    }));
+                }
+            });
         });
-    }
-    async initializeService(activatedRoute) {
-        // Initial setup
-        await this.load();
-        this.activatedRoute = activatedRoute;
+        this.load();
         //
-        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-            this.updateGroupParam();
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(async () => {
+            await this.updateGroupParam();
         });
-        //
-        this.updateGroupParam();
     }
-    // Fetch settings data
     async load() {
-        const items = await this.settingDefinitionService.items();
+        //
+        this.activeScope.set(this.resolveScope());
+        //
+        const items = await this.settingDefinitionService.getListAsync(this.activeScope());
         this.loadedItems.set(items);
-        const formattedData = convertToTreeViewSchema(this.loadedItems());
-        this.formattedData.set(formattedData);
-        const currentContext = await this.settingValueService.all();
-        const defaults = this.settingDefinitionService.defaultValues();
+        const currentContext = await this.settingValueService.scope(this.resolveScope()).all();
+        const defaults = await this.settingValueService.scope(this.resolveScope()).defaultValues();
         this.context.set({ ...defaults, ...currentContext });
         this.previousContext.set(this.context());
+        //
+        await this.updateGroupParam();
+        if (!this.activateGroup() && this.layout.isLarge() && !this.isSearching()) {
+            await this.redirectToFirstGroup();
+        }
     }
-    // Update group param logic
-    updateGroupParam() {
-        // If no child routes exist, set groupParam to null
+    async updateGroupParam() {
+        const query = this.activatedRoute.snapshot.queryParams["q"];
+        const scope = this.resolveScope();
+        const group = this.activatedRoute.snapshot.paramMap.get("group");
+        if ((this.activeScope() && this.activeScope() != scope) || (this.activateGroup() != group)) {
+            this.activateGroup.set(undefined);
+            await this.load();
+            return;
+        }
+        if (this.isValidQuery(query)) {
+            this.searchExpression.set(query);
+        }
+        if (this.isSearching()) {
+            setTimeout(() => {
+                this.highlightService.highlight('#ax-settings', this.searchExpression());
+            }, 100);
+        }
+        else {
+            this.highlightService.clear();
+        }
+        // If no child routes exist, set activateGroup to undefined
         if (this.activatedRoute.children.length === 0) {
-            this.activatedGroup.set(undefined);
+            this.activateGroup.set(undefined);
             return;
         }
         // Traverse child routes to check for the group parameter
-        this.activatedRoute.children.forEach((childRoute) => {
-            childRoute.paramMap.pipe(take(1)).subscribe(async (params) => {
-                const group = params.get('group');
-                this.activatedGroup.update(() => group || undefined);
-                if (group) {
-                    this.formattedData.set(setActiveByValueField(this.formattedData(), group));
-                }
-            });
-        });
+        for (const childRoute of this.activatedRoute.children) {
+            const params = await childRoute.paramMap.pipe(take(1)).toPromise();
+            const group = params?.get('group');
+            if (group) {
+                this.activateGroup.set(group);
+            }
+        }
+    }
+    async redirectToFirstGroup() {
+        const firstGroup = this.determineFirstGroup();
+        if (firstGroup) {
+            const app = this.activatedRoute.snapshot.params['app'];
+            const scope = this.activatedRoute.snapshot.params['scope'];
+            await this.router.navigate([app, 'settings', scope, firstGroup], { replaceUrl: true });
+        }
+    }
+    async navigateUpLevel() {
+        const func = async () => {
+            const app = this.activatedRoute.snapshot.params['app'];
+            const scope = this.activatedRoute.snapshot.params['scope'];
+            await this.router.navigate([app, 'settings', scope]);
+        };
+        if (this.isDirty()) {
+            const dialogResult = await this.dialogService.confirm('Unsaved Changes', 'You have unsaved changes. Are you sure you want to go back without saving?', 'warning');
+            if (dialogResult.result) {
+                await func();
+            }
+        }
+        else {
+            await func();
+        }
+    }
+    determineFirstGroup() {
+        const groups = this.loadedItems();
+        return groups && groups.length > 0 ? groups[0].name : null;
     }
     handleSelectGroup(item) {
-        const value = item.data?.['id'];
-        this.router.navigate([`${value}`], { relativeTo: this.activatedRoute });
-        this.search.set('');
+        this.router.navigate([`${item.name}`], { relativeTo: this.activatedRoute });
+        this.searchExpression.set('');
     }
-    handleContextChanged(e) {
-        if (e.init) {
+    async handleContextChanged(e) {
+        if (e.state == 'initiated') {
             this.previousContext.set(e.data);
         }
         else {
             this.context.set(e.data);
         }
     }
+    isDirty(section) {
+        if (section) {
+            // Check for changes in the specific section
+            return section.settings.some(c => !isEqual(get(this.context(), c.name), get(this.previousContext(), c.name)));
+        }
+        else {
+            // Check for changes globally based on loadedItems keys
+            return this.loadedItems()?.some(group => group.sections.some(sec => sec.settings.some(setting => {
+                const currentValue = get(this.context(), setting.name);
+                const previousValue = get(this.previousContext(), setting.name);
+                return !isEqual(currentValue, previousValue);
+            }))) || false;
+        }
+    }
     // Save settings logic
-    async apply() {
+    async apply(section) {
         try {
-            // Update the previous context and set the saving state
-            this.previousContext.set(this.context());
             this.isSaving.set(true);
-            // Save the settings
-            await this.settingValueService.set(this.context());
+            this.builder.setStatus(AXPPageStatus.Submitting);
+            const formResult = await this.form.validate();
+            if (!formResult.result) {
+                this.toastService.show({
+                    color: 'danger',
+                    title: 'Review Needed',
+                    content: 'Invalid configuration detected. Please review your inputs.',
+                    location: 'bottom-center',
+                    closeButton: true,
+                    timeOut: 3000,
+                    timeOutProgress: true,
+                });
+                this.isSaving.set(false);
+                this.builder.setStatus(AXPPageStatus.Error);
+                return;
+            }
+            if (section) {
+                // Apply changes for the specific section
+                const changes = {};
+                section.settings.forEach(c => {
+                    changes[c.name] = get(this.context(), c.name);
+                });
+                if (!isEmpty(changes)) {
+                    await this.settingValueService.scope(this.resolveScope()).set(changes);
+                }
+            }
+            else {
+                // Save the settings
+                await this.settingValueService.scope(this.resolveScope()).set(this.context());
+            }
+            this.builder.setStatus(AXPPageStatus.Submitted);
             // Show success notification
             this.toastService.show({
                 color: 'success',
@@ -235,6 +294,7 @@ class AXPSettingsViewModel {
         }
         catch (error) {
             // Handle and show errors
+            this.builder.setStatus(AXPPageStatus.Error);
             console.error('Error saving settings:', error);
             this.toastService.show({
                 color: 'danger',
@@ -247,25 +307,52 @@ class AXPSettingsViewModel {
             });
         }
         finally {
-            // Reset the saving state
             this.isSaving.set(false);
         }
     }
-    // Cancel settings logic
-    reset() {
-        this.context.set(this.previousContext());
+    // discard settings logic
+    async discard(section) {
+        this.form.resetErrors();
+        if (section) {
+            // Discard changes for the specific section
+            section.settings.forEach(c => {
+                const previousValue = get(this.previousContext(), c.name);
+                this.context.update(ctx => ({
+                    ...ctx,
+                    [c.name]: previousValue
+                }));
+            });
+        }
+        else {
+            // Discard changes for all sections
+            this.context.set(this.previousContext());
+        }
     }
     // Cancel settings logic
-    resetToDefault() {
-        const defaults = this.settingDefinitionService.defaultValues();
+    async resetToDefault() {
+        const defaults = await this.settingValueService.scope(this.resolveScope()).defaultValues();
+        // Update the context  with the defaults
         this.context.set(defaults);
+        //
+        await this.apply();
+    }
+    async search(expression) {
+        this.searchExpression.set(expression);
+        const app = this.activatedRoute.snapshot.params['app'];
+        const scope = this.activatedRoute.snapshot.params['scope'];
+        //
+        if (this.isValidQuery(expression)) {
+            await this.router.navigate([app, 'settings', scope, this.activateGroup() ?? ''], { queryParams: { q: expression } });
+        }
+        else {
+            await this.router.navigate([app, 'settings', scope, this.activateGroup() ?? '']);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSettingsViewModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSettingsViewModel, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSettingsViewModel }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSettingsViewModel, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+            type: Injectable
         }], ctorParameters: () => [] });
 
 /**