@mediusinc/mng-commons 0.0.1-rc.3 → 0.2.1-rc

package/src/lib/services/commons.service.ts

@@ -0,0 +1,407 @@
+import {Inject, Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, NavigationEnd, Router} from '@angular/router';
+import {Title} from '@angular/platform-browser';
+
+import {FilterMatchMode, MenuItem, PrimeNGConfig} from 'primeng/api';
+import {TranslateService} from '@ngx-translate/core';
+import {BehaviorSubject, Observable, ReplaySubject, Subject, Subscription} from 'rxjs';
+import {filter, map} from 'rxjs/operators';
+
+import {MngConfigurationService} from './configuration.service';
+import {MngModuleConfig} from '../config/models';
+import {MngBreadcrumbMenuItem, MngRouterData, IUser} from '../models';
+import {MNG_BROWSER_STORAGE_IT, MNG_MODULE_CONFIG_IT} from './tokens';
+
+@Injectable()
+export class MngCommonsService {
+
+    // menu
+    private _menuMode: 'static'|'sidebar'|'slim'|'overlay' = 'sidebar';
+    private _menuModeSubject: Subject<'static'|'sidebar'|'slim'|'overlay'> = new BehaviorSubject(this._menuMode);
+    private _menuItems: MenuItem[] = [];
+    private _menuPinEnabled: boolean = false;
+    private _menuActiveKeySubject = new Subject<string>();
+    private _menuResetSubject = new Subject();
+
+    // breadcrumbs
+    private readonly breadcrumbHomeSubject = new BehaviorSubject<MenuItem|null>({
+        icon: 'pi pi-home',
+        routerLink: '/'
+    });
+    private readonly breadcrumbsSubject = new BehaviorSubject<MenuItem[]>([]);
+    private breadcrumbsTranslateSubscription?: Subscription;
+    private breadcrumbHomeTranslateSubscription?: Subscription;
+
+    // visual
+    private _colorScheme: 'light'|'dark' = 'light';
+
+    // user
+    private _user?: IUser;
+    private userSubject: Subject<IUser> = new ReplaySubject(1);
+
+    constructor(
+        private router: Router,
+        private primengConfig: PrimeNGConfig,
+        private translate: TranslateService,
+        private titleService: Title,
+        private configurationService: MngConfigurationService,
+        @Inject(MNG_MODULE_CONFIG_IT) private moduleConfig: MngModuleConfig,
+        @Inject(MNG_BROWSER_STORAGE_IT) private localStorage: Storage
+    ) { }
+
+    // APP section
+
+    public get appName() {
+        return this.moduleConfig?.app?.name ?? 'app.name';
+    }
+
+    public get appOwner() {
+        return this.moduleConfig?.app?.owner ?? 'app.owner';
+    }
+
+    public get appLogoLight() {
+        return this.moduleConfig?.app?.logoPathLight
+            ? this.moduleConfig.app.logoPathLight
+            : (this.moduleConfig?.app?.logoPath ?? 'assets/layout/images/logo.png');
+    }
+
+    public get appLogoDark() {
+        return this.moduleConfig?.app?.logoPathDark
+            ? this.moduleConfig.app.logoPathDark
+            : (this.moduleConfig?.app?.logoPath ?? 'assets/layout/images/logo.png');
+    }
+
+    public get appLogoNameLight() {
+        return this.moduleConfig?.app?.logoNamePathLight
+            ? this.moduleConfig.app.logoNamePathLight
+            : (this.moduleConfig?.app?.logoNamePath ?? 'assets/layout/images/logo-appname.png');
+    }
+
+    public get appLogoNameDark() {
+        return this.moduleConfig?.app?.logoNamePathDark
+            ? this.moduleConfig.app.logoNamePathDark
+            : (this.moduleConfig?.app?.logoNamePath ?? 'assets/layout/images/logo-appname.png');
+    }
+
+    public get appLanguages() {
+        return this.moduleConfig?.app?.languages ?? ['en'];
+    }
+
+    public get appLanguage(): string {
+        const lang = this.localStorage.getItem('lang');
+        if (lang) {
+            return lang;
+        }
+        const browserLang = this.translate.getBrowserLang();
+        if (browserLang && this.appLanguages.some(l => l === browserLang)) {
+            this.appLanguage = browserLang;
+            return browserLang;
+        }
+        this.appLanguage = 'en';
+        return 'en';
+    }
+
+    public set appLanguage(language: string) {
+        if (this.appLanguages.some(l => l === language)) {
+            this.localStorage.setItem('lang', language);
+            this.translate.use(language);
+        }
+    }
+
+    // MENU section
+
+    public get menuModeIsStatic() {
+        return this._menuMode === 'static';
+    }
+    public get menuModeIsStatic$(): Observable<boolean> {
+        return this._menuModeSubject.pipe(map(e => e === 'static'));
+    }
+
+    public get menuModeIsOverlay() {
+        return this._menuMode === 'overlay';
+    }
+    public get menuModeIsOverlay$(): Observable<boolean> {
+        return this._menuModeSubject.pipe(map(e => e === 'overlay'));
+    }
+
+    public get menuModeIsSlim() {
+        return this._menuMode === 'slim';
+    }
+    public get menuModeIsSlim$(): Observable<boolean> {
+        return this._menuModeSubject.pipe(map(e => e === 'slim'));
+    }
+
+    public get menuModeIsSidebar() {
+        return this._menuMode === 'sidebar';
+    }
+    public get menuModeIsSidebar$(): Observable<boolean> {
+        return this._menuModeSubject.pipe(map(e => e === 'sidebar'));
+    }
+
+    public get menuActiveKey$(): Observable<string> {
+        return this._menuActiveKeySubject.asObservable();
+    }
+
+    public get menuReset$(): Observable<any> {
+        return this._menuResetSubject.asObservable();
+    }
+
+    public get menuItems() {
+        return this._menuItems;
+    }
+
+    public set menuItems(menuItems: MenuItem[]) {
+        this._menuItems = menuItems;
+    }
+
+    public get menuPinEnabled() {
+        return this._menuPinEnabled;
+    }
+
+    // BREADCRUMB section
+    public get breadcrumbHome$() {
+        return this.breadcrumbHomeSubject.asObservable();
+    }
+
+    public get breadcrumbs$() {
+        return this.breadcrumbsSubject.asObservable();
+    }
+
+    // VISUAL section
+
+    public get colorSchemeIsLight() {
+        return this._colorScheme === 'light';
+    }
+
+    public get colorSchemeIsDark() {
+        return this._colorScheme === 'dark';
+    }
+
+    // USER section
+
+    public get user() {
+        // @ts-ignore
+        return this._user;
+    }
+
+    public get user$() {
+        return this.userSubject.asObservable();
+    }
+
+    public set user(user: IUser) {
+        this._user = user;
+        this.userSubject.next(user);
+    }
+
+    public initialize() {
+        console.log('Initializing app');
+
+        // menu
+        this._menuMode = this.moduleConfig?.menu?.mode ?? 'sidebar';
+        this._menuModeSubject.next(this._menuMode);
+        this._menuItems = this.moduleConfig?.menu?.menuItems ?? [];
+        this._menuPinEnabled = this.moduleConfig?.menu?.pinEnabled ?? false;
+
+        // visual
+        this._colorScheme = this.moduleConfig?.app?.colorScheme ?? 'light';
+
+        // ripple
+        this.primengConfig.ripple = true;
+        this.primengConfig.filterMatchModeOptions = {
+            text: [
+                FilterMatchMode.CONTAINS,
+                FilterMatchMode.EQUALS,
+                FilterMatchMode.NOT_EQUALS,
+                FilterMatchMode.STARTS_WITH,
+                FilterMatchMode.ENDS_WITH
+            ],
+            numeric: [
+                FilterMatchMode.EQUALS,
+                FilterMatchMode.NOT_EQUALS,
+                FilterMatchMode.LESS_THAN_OR_EQUAL_TO,
+                FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
+            ],
+            date: [
+                FilterMatchMode.DATE_IS,
+                FilterMatchMode.DATE_IS_NOT,
+                FilterMatchMode.DATE_BEFORE,
+                FilterMatchMode.DATE_AFTER
+            ]
+        }
+
+        // translate
+        this.translate.langs = this.appLanguages;
+        this.translate.use(this.appLanguage);
+        this.translate.get('mngPrime').subscribe(value => this.primengConfig.setTranslation(value));
+
+        this.router.events.pipe(
+            // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
+            filter((event) => event instanceof NavigationEnd)
+        )
+            .subscribe((event) => {
+                this.updateBreadcrumbs();
+                this.setPageTitle();
+            });
+        this.translate.onLangChange.subscribe(event => {
+            this.updateBreadcrumbs();
+            this.setPageTitle();
+        });
+    }
+
+    // MENU actions
+
+    menuChangeActiveKey(key: string) {
+        this._menuActiveKeySubject.next(key);
+    }
+
+    menuReset() {
+        this._menuResetSubject.next(null);
+    }
+
+    // BREADCRUMB actions
+
+    private updateBreadcrumbs() {
+        if (this.breadcrumbsTranslateSubscription) {
+            this.breadcrumbsTranslateSubscription.unsubscribe();
+            this.breadcrumbsTranslateSubscription = undefined;
+        }
+        if (this.breadcrumbHomeTranslateSubscription) {
+            this.breadcrumbHomeTranslateSubscription.unsubscribe();
+            this.breadcrumbHomeTranslateSubscription = undefined;
+        }
+
+        const rootRoute = this.router.routerState.snapshot.root;
+
+        const homeBreadcrumb = this.generateHomeBreadcrumb(rootRoute);
+        if (homeBreadcrumb) {
+            if (homeBreadcrumb.label) {
+                this.breadcrumbHomeTranslateSubscription = this.translate.get(homeBreadcrumb.label).subscribe(i18n => {
+                    homeBreadcrumb.label = i18n;
+                    this.breadcrumbHomeSubject.next(homeBreadcrumb);
+                });
+            } else {
+                this.breadcrumbHomeSubject.next(homeBreadcrumb);
+            }
+        }
+
+        const breadcrumbs: MenuItem[] = [];
+        this.generateBreadcrumbs(rootRoute, [], breadcrumbs);
+
+        // @ts-ignore
+        const i18nKeys: Array<string> = breadcrumbs.filter(b => typeof b.label === 'string').map(b => b.label);
+        if (i18nKeys.length > 0) {
+            this.breadcrumbsTranslateSubscription = this.translate.get(i18nKeys)
+                .subscribe(i18n => {
+                    // Construct the breadcrumb hierarchy
+                    breadcrumbs.forEach(b => {
+                        if (b.label && i18n[b.label]) {
+                            b.label = i18n[b.label];
+                        }
+                    });
+
+                    // Emit the new breadcrumbs
+                    this.breadcrumbsSubject.next(breadcrumbs);
+                });
+        } else {
+            this.breadcrumbsSubject.next(breadcrumbs);
+        }
+    }
+
+    private generateHomeBreadcrumb(route: ActivatedRouteSnapshot|null): MenuItem|null {
+        if (!route) {
+            return null;
+        }
+
+        const routeData = route.data as MngRouterData;
+        const breadcrumbRouteData = routeData?.breadcrumb;
+        if (breadcrumbRouteData && typeof breadcrumbRouteData === 'object' && 'isHome' in breadcrumbRouteData) {
+            if (breadcrumbRouteData.isHome === false) {
+                return null;
+            }
+            const breadcrumb = this.createBreadcrumb('/', breadcrumbRouteData, true);
+            if (breadcrumb) {
+                if (typeof breadcrumb.icon === 'undefined') {
+                    breadcrumb.icon = 'pi pi-home';
+                }
+                return breadcrumb;
+            }
+        } else {
+            return this.generateHomeBreadcrumb(route.firstChild)
+        }
+        return null;
+    }
+
+    private generateBreadcrumbs(route: ActivatedRouteSnapshot | null, parentUrlSegments: string[], breadcrumbs: MenuItem[]) {
+        if (!route) {
+            return;
+        }
+
+        const routeData = route.data as MngRouterData;
+        const routeUrlSegments = parentUrlSegments.concat(route.url.map(url => url.path));
+        const routeUrl = `/${routeUrlSegments.join('/')}`;
+        if (routeData?.breadcrumb) {
+            const breadcrumbRouteData = routeData.breadcrumb;
+
+            if (Array.isArray(breadcrumbRouteData)) {
+                for (const breadcrumbRouteDataItem of breadcrumbRouteData) {
+                    const breadcrumb = this.createBreadcrumb(routeUrl, breadcrumbRouteDataItem);
+                    if (breadcrumb) {
+                        breadcrumbs.push(breadcrumb);
+                    }
+                }
+            } else if (typeof breadcrumbRouteData === 'function') {
+                breadcrumbs.push(...breadcrumbRouteData(routeUrl, route));
+            } else {
+                const breadcrumb = this.createBreadcrumb(routeUrl, breadcrumbRouteData);
+                if (breadcrumb) {
+                    breadcrumbs.push(breadcrumb);
+                }
+            }
+        }
+        this.generateBreadcrumbs(route.firstChild, routeUrlSegments, breadcrumbs);
+    }
+
+    private createBreadcrumb(routeUrl: string, routeBreadcrumb: string|MngBreadcrumbMenuItem, includeHome: boolean = false): MenuItem|null {
+        if (typeof routeBreadcrumb === 'string') {
+            return {
+                label: routeBreadcrumb,
+                routerLink: routeUrl
+            };
+        } else {
+            if (!includeHome && typeof routeBreadcrumb.isHome !== 'undefined') {
+                // home should not be included
+                return null;
+            }
+            if (typeof routeBreadcrumb.routerLink === 'undefined') {
+                routeBreadcrumb.routerLink = routeUrl;
+            }
+            return routeBreadcrumb;
+        }
+    }
+
+    // TITLE section
+
+    public setPageTitle(title?: string) {
+        let currentRoute = this.router.routerState.snapshot.root;
+        while (currentRoute.firstChild) {
+            currentRoute = currentRoute.firstChild;
+        }
+
+        const routeData = currentRoute.data as MngRouterData;
+        const pageTitle = title ?? routeData.pageTitle;
+
+        this.titleService.setTitle(this.formatPageTitle(pageTitle));
+    }
+
+    private formatPageTitle(titlePrefix?: string) {
+        const titlePieces = [];
+
+        if (titlePrefix) {
+            titlePieces.push(this.translate.instant(titlePrefix));
+        }
+
+        titlePieces.push(this.translate.instant('app.name'));
+
+        return titlePieces.join(' - ');
+    }
+}

package/src/lib/services/configuration.service.ts

@@ -0,0 +1,98 @@
+import {HttpClient} from '@angular/common/http';
+
+import {catchError, first, map} from 'rxjs/operators';
+import {Observable} from 'rxjs';
+
+export class MngConfigurationService {
+
+    private static _instance: MngConfigurationService|null = null;
+    public static init(httpClient: HttpClient): MngConfigurationService {
+        if (!this._instance) {
+            MngConfigurationService._instance = new MngConfigurationService(httpClient);
+        }
+        return MngConfigurationService.get();
+    }
+    public static get(): MngConfigurationService {
+        if (!MngConfigurationService._instance) {
+            throw new Error('Configuration service instance not set. Call init first.');
+        }
+        return MngConfigurationService._instance;
+    }
+
+    private projectEnvironment?: any;
+    private jsonEnvironments: Array<any> = [];
+
+    private configuration = {...this.projectEnvironment};
+
+    private constructor(private http: HttpClient) {
+    }
+
+    /**
+     * Add project environment source.
+     * @param environemnt Environment.
+     */
+    public addEnvironmentSource(environment: any): void {
+        this.projectEnvironment = environment;
+        this.mergeConfigs();
+    }
+
+    /**
+     * Adds new config source from JSON file.
+     * @param url Url to JSON file.
+     */
+    public addJsonSource(url: string = this.projectEnvironment.configurationJsonSource): Observable<boolean> {
+
+        if (!url) {
+            console.warn('No path to configuration file specified. Setting default.');
+            url = 'assets/config/env{{environment}}.json';
+        }
+
+        const envName = this.projectEnvironment.name || (this.projectEnvironment.production ? 'prod' : 'dev');
+        url = url.replace('{{environment}}', '.' + envName);
+
+        return this.http.get<any>(url)
+            .pipe(
+                catchError((err => {
+                    console.warn('Error loading configuration file:' + err.message + '. Falling back to env.json');
+
+                    const pathSegments = url.split('/');
+                    pathSegments[pathSegments.length - 1] = 'env.json';
+                    return this.http.get<any>(pathSegments.join('/'));
+                })),
+                first(),
+                map(res => {
+                    this.jsonEnvironments.push(res);
+                    this.mergeConfigs();
+                    return true;
+                })
+            );
+    }
+
+    /**
+     * Get configuration.
+     */
+    public getConfig() {
+        return this.configuration;
+    }
+
+    /**
+     * Get configuration value for key.
+     * @param key Configuration key.
+     */
+    public getConfigValue(key: string) {
+        return this.configuration[key] ? this.configuration[key] : null;
+    }
+
+    /**
+     * Merges configuration from multiple sources with
+     */
+    private mergeConfigs() {
+        let config = {...this.projectEnvironment};
+        if (this.jsonEnvironments.length) {
+            for (const je of this.jsonEnvironments) {
+                config = {...config, ...je};
+            }
+        }
+        this.configuration = config;
+    }
+}

package/{lib/services/index.d.ts → src/lib/services/index.ts}

@@ -1,6 +1,4 @@
-export * from './action.service';
-export * from './breadcrumb.service';
-export * from './configuration.service';
-export * from './menu.service';
-export * from './navigation.service';
-export * from './settings.service';
+export * from './action.service';
+export * from './configuration.service';
+export * from './commons.service';
+export * from './navigation.service';

package/src/lib/services/navigation.service.ts

@@ -0,0 +1,42 @@
+import {Injectable} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {Location} from '@angular/common';
+
+@Injectable()
+export class MngNavigationService {
+
+    private history: Array<string> = [];
+
+    constructor(private router: Router, private location: Location) {
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this.history.push(event.urlAfterRedirects);
+            }
+        });
+    }
+
+    public getCurrentLocation(): string|null {
+        if (this.history.length > 0) {
+            return this.history[this.history.length - 1];
+        } else {
+            return null;
+        }
+    }
+
+    public getPreviousLocation(): string|null {
+        if (this.history.length > 1) {
+            return this.history[this.history.length - 2];
+        } else {
+            return null;
+        }
+    }
+
+    public back(): void {
+        this.history.pop();
+        if (this.history.length > 0) {
+            this.location.back();
+        } else {
+            this.router.navigateByUrl('/')
+        }
+    }
+}

package/src/lib/services/providers/commons-init.provider.ts

@@ -0,0 +1,5 @@
+import {MngCommonsService} from '../commons.service';
+
+export function mngCommonsInitializerProvider(mngCommons: MngCommonsService) {
+    return () => mngCommons.initialize();
+}

package/src/lib/services/providers/config-service.provider.ts

@@ -0,0 +1,22 @@
+import {HttpClient} from '@angular/common/http';
+import {MngModuleConfig} from '../../config/models';
+import {MngConfigurationService} from '../configuration.service';
+import {of} from 'rxjs';
+
+export const mngConfigurationServiceProvider = (httpClient: HttpClient, moduleConfig: MngModuleConfig): MngConfigurationService => {
+    const service = MngConfigurationService.init(httpClient);
+    if (moduleConfig?.configuration?.projectEnvironment) {
+        service.addEnvironmentSource(moduleConfig.configuration.projectEnvironment);
+    }
+    return service;
+}
+
+export function mngConfigJsonAppInitializerProvider(configService: MngConfigurationService, moduleConfig: MngModuleConfig) {
+    return () => {
+        if (moduleConfig?.configuration?.skipJsonSourceInit) {
+            return of(false);
+        } else {
+            return configService.addJsonSource(moduleConfig?.configuration?.jsonSource ?? undefined);
+        }
+    }
+}

package/src/lib/services/providers/formly-config.provider.ts

@@ -0,0 +1,39 @@
+import {TranslateService} from '@ngx-translate/core';
+import {ConfigOption} from '@ngx-formly/core';
+
+import {formlyTypesConfig, formlyWrappersConfig, getFormlyValidationMessages} from '../../config';
+import {MngModuleConfig} from '../../config/models';
+
+export function mngFormlyConfigProvider(translate: TranslateService, moduleConfig: MngModuleConfig = {}): ConfigOption {
+    const merge = moduleConfig.formly?.merge ?? true;
+
+    let types = formlyTypesConfig;
+    if (moduleConfig.formly?.types) {
+        if (!merge) {
+            types = [];
+        }
+        types = [...types, ...moduleConfig.formly.types];
+    }
+
+    let wrappers = formlyWrappersConfig;
+    if (moduleConfig.formly?.wrappers) {
+        if (!merge) {
+            wrappers = [];
+        }
+        wrappers = [...wrappers, ...moduleConfig.formly.wrappers];
+    }
+
+    let validationMessages = getFormlyValidationMessages(translate);
+    if (typeof moduleConfig.formly?.getValidationMessages === 'function') {
+        if (!merge) {
+            validationMessages = [];
+        }
+        validationMessages = [...validationMessages, ...moduleConfig.formly.getValidationMessages(translate)];
+    }
+
+    return {
+        types: types,
+        wrappers: wrappers,
+        validationMessages: validationMessages
+    };
+}

package/{lib/services/providers/index.d.ts → src/lib/services/providers/index.ts}

@@ -1,2 +1,3 @@
-export * from './config-service.provider';
-export * from './formly-config.provider';
+export * from './commons-init.provider';
+export * from './config-service.provider';
+export * from './formly-config.provider';

package/src/lib/services/tokens/browser-storage.token.ts

@@ -0,0 +1,9 @@
+import {InjectionToken} from '@angular/core';
+
+export const MNG_BROWSER_STORAGE_IT = new InjectionToken<Storage>(
+    'Browser storage',
+    {
+        providedIn: 'root',
+        factory: () => localStorage
+    }
+);

package/src/lib/services/tokens/index.ts

@@ -0,0 +1,2 @@
+export * from './browser-storage.token';
+export * from './module-config.token';

package/src/lib/services/tokens/module-config.token.ts

@@ -0,0 +1,5 @@
+import {InjectionToken} from '@angular/core';
+
+import {MngModuleConfig} from '../../config/models';
+
+export const MNG_MODULE_CONFIG_IT = new InjectionToken<MngModuleConfig>('MngModuleConfig');

package/{lib/models/types/index.d.ts → src/lib/types/index.ts}

@@ -1,2 +1,2 @@
-export * from './type.decorator';
-export * from './type.model';
+export * from './type.decorator';
+export * from './type.model';

package/src/lib/types/type.decorator.ts

@@ -0,0 +1,7 @@
+export const typeNameDecoratorPropertyName = 'typeName';
+
+export function TypeName(typeName: string): ClassDecorator {
+    return function(target: any) {
+        target[typeNameDecoratorPropertyName] = typeName;
+    }
+}

package/src/lib/types/type.model.ts

@@ -0,0 +1,12 @@
+export interface ClassType<T> extends Function {
+    new(...args: any[]): T;
+}
+
+export interface EnumType {
+    [key: number]: EnumMemberType;
+}
+export type EnumMemberType = string|number;
+
+export type IdType = number|string;
+export type PrimitiveType = string|boolean|number;
+export type PropertyType = PrimitiveType|Date|EnumType;