@acorex/platform 19.2.20 → 19.3.0-next.0

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

@@ -1,15 +1,15 @@
-import { AXDialogService } from '@acorex/components/dialog';
-import { AXToastService } from '@acorex/components/toast';
 import * as i1 from '@acorex/platform/common';
-import { AXPSettingScope, AXPSettingDefinitionProviderService, AXPSettingService, AXP_SEARCH_PROVIDER, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
-import { AXHighlightService } from '@acorex/platform/core';
+import { AXPSettingDefinitionProviderService, AXPSettingService, AXP_SEARCH_PROVIDER, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import { AXPPageStatus } from '@acorex/platform/layout/builder';
 import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import * as i0 from '@angular/core';
-import { inject, signal, computed, effect, Injectable, NgModule } from '@angular/core';
-import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import { isNil, isEmpty, get, isEqual, sortBy } from 'lodash-es';
-import { filter, take } from 'rxjs';
+import { computed, inject, NgModule } from '@angular/core';
+import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
+import { get, isEqual, isNil, isEmpty, sortBy } from 'lodash-es';
+import { filter } from 'rxjs';
+import { AXToastService } from '@acorex/components/toast';
+import { AXTranslationService } from '@acorex/core/translation';
+import { resolvePlatformScopeName, AXPPlatformScope } from '@acorex/platform/core';
 import { AXPSessionService } from '@acorex/platform/auth';
 
 function searchSettings(groups, search) {
@@ -58,306 +58,239 @@ function searchSettings(groups, search) {
     return [...sectionMatchResult, ...settingMatchResult];
 }
 
-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
-     */
-    constructor() {
-        this.router = inject(Router);
-        this.settingDefinitionService = inject(AXPSettingDefinitionProviderService);
-        this.settingValueService = inject(AXPSettingService);
-        this.toastService = inject(AXToastService);
-        this.dialogService = inject(AXDialogService);
-        this.highlightService = inject(AXHighlightService);
-        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.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`;
+const AXPSettingsViewModel = signalStore(withState(() => ({
+    groups: [],
+    activateGroup: undefined,
+    scope: 'U',
+    //
+    searchExpression: null,
+    //
+    previousContext: {},
+    context: {},
+    //
+    status: AXPPageStatus.Processing,
+    form: null,
+})), withComputed((store, layout = inject(AXPLayoutThemeService)) => ({
+    searchResults: computed(() => searchSettings(store.groups(), store.searchExpression())),
+    hasActivateGroup: computed(() => store.activateGroup() != null),
+    showGroups: computed(() => store.activateGroup() != null && layout.isLarge()),
+    scopeTitle: computed(() => {
+        return `${resolvePlatformScopeName(store.scope())}.title`;
+    }),
+    scopeDescription: computed(() => {
+        return `${resolvePlatformScopeName(store.scope())}.description`;
+    }),
+    isSearching: computed(() => store.searchExpression() != null),
+    isBusy: computed(() => store.status() == AXPPageStatus.Processing),
+    isSaving: computed(() => store.status() == AXPPageStatus.Submitting),
+    isLoaded: computed(() => store.groups().length > 0),
+})), withMethods((store, settingDefinitionService = inject(AXPSettingDefinitionProviderService), settingValueService = inject(AXPSettingService), toastService = inject(AXToastService), translateService = inject(AXTranslationService)) => ({
+    registerForm(form) {
+        patchState(store, {
+            form: form,
         });
-        this.groups = computed(() => {
-            if (this.activateGroup()) {
-                return this.settingDefinitionService.findGroup(this.activeScope(), this.activateGroup());
-            }
-            else {
-                return null;
-            }
+    },
+    async load(scope) {
+        patchState(store, {
+            scope: scope,
+            status: AXPPageStatus.Processing,
         });
-        this.hasGroup = computed(() => this.activateGroup() != null);
-        this.showSide = computed(() => this.layout.isLarge() && this.hasGroup());
-        this.#effect2 = effect(() => {
-            if (this.searchExpression()) {
-                this.searchResult.set(searchSettings(this.loadedItems(), this.searchExpression()));
-            }
+        //
+        const groups = await settingDefinitionService.getListAsync(scope);
+        patchState(store, {
+            groups: groups,
         });
-        this.context = signal({});
-        this.previousContext = signal({});
-        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,
-                    }));
-                }
-            });
+        const currentContext = await settingValueService.scope(scope).all();
+        const defaults = await settingValueService.scope(scope).defaultValues();
+        patchState(store, {
+            context: { ...defaults, ...currentContext },
         });
-        this.load();
-        //
-        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(async (event) => {
-            await this.updateGroupParam();
+        patchState(store, {
+            previousContext: store.context(),
+            status: AXPPageStatus.Rendered,
         });
-    }
-    async load() {
-        //
-        this.activeScope.set(this.resolveScope());
-        //
-        const items = await this.settingDefinitionService.getListAsync(this.activeScope());
-        this.loadedItems.set(items);
-        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();
-        }
-    }
-    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.activateGroup.set(undefined);
-            return;
-        }
-        // Traverse child routes to check for the group parameter
-        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) {
-        this.router.navigate([`${item.name}`], { relativeTo: this.activatedRoute });
-        this.searchExpression.set('');
-    }
-    async handleContextChanged(e) {
-        if (e.state == 'initiated') {
-            this.previousContext.set(e.data);
+    },
+    async reload() {
+        await settingDefinitionService.reload();
+        const groups = await settingDefinitionService.getListAsync(store.scope());
+        const oldActivateGroupName = store.activateGroup()?.name;
+        patchState(store, {
+            groups: groups,
+            activateGroup: undefined,
+        });
+        if (oldActivateGroupName) {
+            this.setActivateGroupByName(oldActivateGroupName);
         }
-        else {
-            this.context.set(e.data);
+    },
+    updateContext(context) {
+        patchState(store, {
+            context: { ...store.context(), ...context },
+        });
+    },
+    updatePreviousContext(context) {
+        patchState(store, {
+            previousContext: { ...store.previousContext(), ...context },
+        });
+    },
+    setActivateGroup(group) {
+        patchState(store, {
+            activateGroup: group,
+        });
+    },
+    unloadActivateGroup() {
+        patchState(store, {
+            activateGroup: undefined,
+        });
+    },
+    setActivateGroupByName(name) {
+        const group = store.groups().find(g => g.name === name);
+        if (group) {
+            patchState(store, {
+                activateGroup: group,
+            });
         }
-        //this.apply();
-    }
-    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)));
+    },
+    //
+    async search(expression) {
+        debugger;
+        if (!isNil(expression) && !isEmpty(expression)) {
+            patchState(store, {
+                searchExpression: expression,
+            });
         }
         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);
+            patchState(store, {
+                searchExpression: null,
+            });
         }
-    }
-    // Save settings logic
-    async apply(section) {
+    },
+    clearSearch() {
+        patchState(store, {
+            searchExpression: null,
+        });
+    },
+    isDirty() {
+        return store.groups()?.some((group) => group.sections.some((sec) => sec.settings.some((setting) => {
+            const currentValue = get(store.context(), setting.name);
+            const previousValue = get(store.previousContext(), setting.name);
+            return !isEqual(currentValue, previousValue);
+        }))) || false;
+    },
+    async apply() {
+        const i18nScope = "settings";
         try {
-            this.isSaving.set(true);
-            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.',
+            if (await store.form() && this.isDirty()) {
+                const form = store.form();
+                form.resetErrors();
+                //
+                patchState(store, {
+                    status: AXPPageStatus.Submitting,
+                });
+                const formResult = await form.validate();
+                if (!formResult.result) {
+                    toastService.show({
+                        color: 'danger',
+                        title: await translateService.translateAsync('actions.apply.invalid.title', { scope: i18nScope }),
+                        content: await translateService.translateAsync('actions.apply.invalid.message', { scope: i18nScope }),
+                        location: 'bottom-center',
+                        closeButton: true,
+                        timeOut: 3000,
+                        timeOutProgress: true,
+                    });
+                    patchState(store, {
+                        status: AXPPageStatus.Error,
+                    });
+                    return false;
+                }
+                await settingValueService.scope(store.scope()).set(store.context());
+                // Show success notification
+                toastService.show({
+                    color: 'success',
+                    title: await translateService.translateAsync('actions.apply.success.title', { scope: i18nScope }),
+                    content: await translateService.translateAsync('actions.apply.success.message', { scope: i18nScope }),
                     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);
+                patchState(store, {
+                    status: AXPPageStatus.Submitted,
                 });
-                if (!isEmpty(changes)) {
-                    await this.settingValueService.scope(this.resolveScope()).set(changes);
-                }
-            }
-            else {
-                // Save the settings
-                await this.settingValueService.scope(this.resolveScope()).set(this.context());
+                return true;
             }
-            this.builder.setStatus(AXPPageStatus.Submitted);
-            // Show success notification
-            this.toastService.show({
-                color: 'success',
-                title: 'Settings Saved',
-                content: 'Your changes have been saved successfully.',
-                location: 'bottom-center',
-                closeButton: true,
-                timeOut: 3000,
-                timeOutProgress: true,
-            });
+            return false;
         }
         catch (error) {
-            // Handle and show errors
-            this.builder.setStatus(AXPPageStatus.Error);
-            console.error('Error saving settings:', error);
-            this.toastService.show({
+            toastService.show({
                 color: 'danger',
-                title: 'Save Failed',
-                content: error?.['message'] || 'An error occurred while saving your settings. Please try again.',
+                title: await translateService.translateAsync('actions.apply.error.title', { scope: i18nScope }),
+                content: await translateService.translateAsync('actions.apply.error.message', { scope: i18nScope }),
                 location: 'bottom-center',
                 closeButton: true,
-                timeOut: 5000,
+                timeOut: 3000,
                 timeOutProgress: true,
             });
-        }
-        finally {
-            this.isSaving.set(false);
-        }
-    }
-    // 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,
-                }));
+            patchState(store, {
+                status: AXPPageStatus.Error,
             });
+            return false;
         }
-        else {
-            // Discard changes for all sections
-            this.context.set(this.previousContext());
-        }
-    }
-    // Cancel settings logic
+    },
+    async discard() {
+        const form = store.form();
+        form.resetErrors();
+        //
+        patchState(store, {
+            status: AXPPageStatus.Rendered,
+        });
+        patchState(store, {
+            context: store.previousContext(),
+        });
+    },
     async resetToDefault() {
-        const defaults = await this.settingValueService.scope(this.resolveScope()).defaultValues();
         // Update the context  with the defaults
-        this.context.set(defaults);
+        const defaults = await settingValueService.scope(store.scope()).defaultValues();
+        patchState(store, {
+            context: 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'];
+        const result = await this.apply();
+        if (!result) {
+            this.discard();
+        }
+    },
+})), withHooks((store, settingValueService = inject(AXPSettingService), translationService = inject(AXTranslationService)) => ({
+    async onInit() {
         //
-        if (this.isValidQuery(expression)) {
-            await this.router.navigate([app, 'settings', scope, this.activateGroup() ?? ''], {
-                queryParams: { q: expression },
+        settingValueService.onChanged.pipe(filter((c) => c.scope == store.scope())).subscribe((e) => {
+            e.keys.forEach((k) => {
+                const currentValue = e.values[k];
+                const contextValue = get(store.context(), k);
+                const previousValue = get(store.previousContext(), k);
+                // Update only if there are actual changes
+                if (!isEqual(previousValue, currentValue) || !isEqual(currentValue, contextValue)) {
+                    patchState(store, {
+                        previousContext: {
+                            ...store.previousContext(),
+                            [k]: currentValue,
+                        }
+                    });
+                    patchState(store, {
+                        context: {
+                            ...store.context(),
+                            [k]: currentValue,
+                        }
+                    });
+                }
             });
-        }
-        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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPSettingsViewModel, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+        });
+        //
+        translationService.langChanges$.subscribe(async () => {
+            await store.reload();
+        });
+    },
+    onDestroy() { },
+})));
 
 class AXPSettingSearchProvider {
     constructor() {
@@ -365,9 +298,9 @@ class AXPSettingSearchProvider {
         this.sessionService = inject(AXPSessionService);
     }
     async search(text) {
-        const groupsSetting = this.settingService.getList(AXPSettingScope.User);
+        const groupsSetting = this.settingService.getList(AXPPlatformScope.User);
         if (groupsSetting.length == 0) {
-            groupsSetting.push(...(await this.settingService.getListAsync(AXPSettingScope.User)));
+            groupsSetting.push(...(await this.settingService.getListAsync(AXPPlatformScope.User)));
         }
         // Step 2: Flatten settings from groups
         const allSettings = [];