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

package/src/lib/components/layout/services/main-layout.component.service.ts

@@ -0,0 +1,231 @@
+import {Injectable} from '@angular/core';
+
+import {MngCommonsService} from '../../../services';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Injectable()
+export class MngMainLayoutComponentService {
+
+    private _overlayMenuActive: boolean = false;
+    private _overlayMenuActiveSubject: Subject<boolean> = new BehaviorSubject(this._overlayMenuActive);
+    private _staticMenuDesktopInactive = false;
+    private _staticMenuDesktopInactiveSubject: Subject<boolean> = new BehaviorSubject(this._staticMenuDesktopInactive);
+    private _staticMenuMobileActive: boolean = false;
+    private _staticMenuMobileActiveSubject: Subject<boolean> = new BehaviorSubject(this._staticMenuMobileActive);
+
+    private _sidebarActive = true;
+    private _sidebarActiveSubject: Subject<boolean> = new BehaviorSubject(this._sidebarActive);
+    private _sidebarStatic = true;
+    private _sidebarStaticSubject: Subject<boolean> = new BehaviorSubject(this._sidebarStatic);
+
+    private _menuClick: boolean = false;
+    private _menuHoverActive = false;
+    private _topbarItemClick: boolean = false;
+
+    private _activeTopbarItem: any = null;
+    private _activeTopbarItemSubject: Subject<any> = new BehaviorSubject(this._activeTopbarItem);
+
+    private _pinActive: boolean = true;
+    private _pinActiveSubject: Subject<boolean> = new BehaviorSubject(this._pinActive);
+
+    private _innerWidth: number = 1920;
+    private _innerWidthSubject: Subject<number> = new BehaviorSubject(this._innerWidth);
+
+    constructor(private mngCommons: MngCommonsService) { }
+
+    get overlayMenuActive$(): Observable<boolean> {
+        return this._overlayMenuActiveSubject.asObservable();
+    }
+
+    set overlayMenuActive(value: boolean) {
+        this._overlayMenuActive = value;
+        this._overlayMenuActiveSubject.next(value);
+    }
+
+    get staticMenuDesktopInactive$(): Observable<boolean> {
+        return this._staticMenuDesktopInactiveSubject.asObservable();
+    }
+
+    set staticMenuDesktopInactive(value: boolean) {
+        this._staticMenuDesktopInactive = value;
+        this._staticMenuDesktopInactiveSubject.next(value);
+    }
+
+    get staticMenuMobileActive$(): Observable<boolean> {
+        return this._staticMenuMobileActiveSubject.asObservable();
+    }
+
+    set staticMenuMobileActive(value: boolean) {
+        this._staticMenuMobileActive = value;
+        this._staticMenuMobileActiveSubject.next(value);
+    }
+
+    get sidebarActive$(): Observable<boolean> {
+        return this._sidebarActiveSubject.asObservable();
+    }
+
+    set sidebarActive(value: boolean) {
+        this._sidebarActive = value;
+        this._sidebarActiveSubject.next(value);
+    }
+
+    get sidebarStatic$(): Observable<boolean> {
+        return this._sidebarStaticSubject.asObservable();
+    }
+
+    set sidebarStatic(value: boolean) {
+        this._sidebarStatic = value;
+        this._sidebarStaticSubject.next(value);
+    }
+
+    set menuHoverActive(value: boolean) {
+        this._menuHoverActive = value;
+    }
+
+    set topbarItemClick(value: boolean) {
+        this._topbarItemClick = value;
+    }
+
+    get activeTopbarItem$(): Observable<any> {
+        return this._activeTopbarItemSubject.asObservable();
+    }
+
+    set activeTopbarItem(value: any) {
+        this._activeTopbarItem = value;
+        this._activeTopbarItemSubject.next(value);
+    }
+
+    get pinActive$(): Observable<boolean> {
+        return this._pinActiveSubject.asObservable();
+    }
+
+    set pinActive(value: boolean) {
+        this._pinActive = value;
+        this._pinActiveSubject.next(value);
+    }
+
+    get isDesktop$() {
+        return this._innerWidthSubject.asObservable().pipe(map(e => this.isWidthDesktop(e)));
+    }
+
+    get isMobile$() {
+        return this._innerWidthSubject.asObservable().pipe(map(e => this.isWidthMobile(e))) ;
+    }
+
+    set innerWidth(value: number) {
+        this._innerWidth = value;
+        this._innerWidthSubject.next(value);
+    }
+
+    onLayoutClick() {
+        if (!this._topbarItemClick) {
+            this.activeTopbarItem = null;
+        }
+
+        if (!this._menuClick) {
+            if (this.mngCommons.menuModeIsSlim && !this.isMobile()) {
+                this.mngCommons.menuReset();
+                this.menuHoverActive = false;
+            }
+
+            if (this._overlayMenuActive || this._staticMenuMobileActive) {
+                this.overlayMenuActive = false;
+                this.staticMenuMobileActive = false;
+            }
+        }
+
+        this._menuClick = false;
+        this.topbarItemClick = false;
+    }
+
+    onSidebarClick(event: any) {
+        this._menuClick = true;
+    }
+
+    onToggleMenu(event: any) {
+        this._menuClick = true;
+
+        if (this._overlayMenuActive) {
+            this.overlayMenuActive = false;
+        }
+
+        if (this._sidebarActive) {
+            this.sidebarStatic = !this._sidebarStatic;
+        }
+
+        event.preventDefault();
+    }
+
+    onSidebarMouseOver(event: any) {
+        if (this.mngCommons.menuModeIsSidebar && !this._sidebarStatic) {
+            this.sidebarActive = this.isDesktop();
+            setTimeout(() => {
+                this.pinActive = this.isDesktop();
+            }, 200);
+        }
+    }
+
+    onSidebarMouseLeave(event: any) {
+        if (this.mngCommons.menuModeIsSidebar && !this._sidebarStatic) {
+            setTimeout(() => {
+                this.sidebarActive = false;
+                this.pinActive = false;
+            }, 250);
+        }
+    }
+
+    onMenuButtonClick(event: any) {
+        this._menuClick = true;
+
+        if (this.mngCommons.menuModeIsOverlay) {
+            this.overlayMenuActive = !this._overlayMenuActive;
+        }
+
+        if (this.isDesktop()) {
+            this.staticMenuDesktopInactive = !this._staticMenuDesktopInactive;
+        } else {
+            this.staticMenuMobileActive = !this._staticMenuMobileActive;
+        }
+
+        event.preventDefault();
+    }
+
+    onTopbarItemClick(event: any, item: any) {
+        this._topbarItemClick = true;
+
+        if (this._activeTopbarItem === item) {
+            this.activeTopbarItem = null;
+        } else {
+            this.activeTopbarItem = item;
+        }
+
+        event.preventDefault();
+    }
+
+    onTopbarSubItemClick(event: any) {
+        event.preventDefault();
+    }
+
+    /**
+     * Checks if is desktop width, DO NOT use within HTML templates or within functions called by HTML templates
+     */
+    public isDesktop() {
+        return this.isWidthDesktop(this._innerWidth);
+    }
+
+    /**
+     * Checks if is mobile width, DO NOT use within HTML templates or within functions called by HTML templates
+     */
+    public isMobile() {
+        return this.isWidthMobile(this._innerWidth);
+    }
+
+    private isWidthDesktop(width: number) {
+        return width > 991;
+    }
+
+    private isWidthMobile(width: number) {
+        return width <= 991;
+    }
+}

package/src/lib/components/layout/topbar.component.html

@@ -0,0 +1,38 @@
+<div class="layout-topbar">
+    <div class="layout-topbar-left">
+        <a href="#" class="topbar-menu-button" (click)="mainLayoutService.onMenuButtonClick($event)" *ngIf="(mngCommons.menuModeIsOverlay$ | async) || (mainLayoutService.isMobile$ | async)">
+            <i class="pi pi-bars"></i>
+        </a>
+
+        <ng-container [mngComponent]="breadcrumbComponent"></ng-container>
+    </div>
+
+    <ng-container [mngComponent]="menuComponent"></ng-container>
+
+    <div class="layout-topbar-right">
+        <ul class="layout-topbar-right-items">
+            <li #profile class="profile-item" [ngClass]="{ 'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile }">
+                <a href="#" (click)="mainLayoutService.onTopbarItemClick($event,profile)">
+                    <i class="pi pi-fw pi-user"></i>
+                </a>
+                <ul class="fadeInDown" *ngIf="user">
+                    <li role="menuitem">
+                        <a>
+                            {{ user?.displayName ?? user?.username }}
+                        </a>
+                    </li>
+                    <li role="menuitem" *ngIf="user?.logout || user?.logoutUrl">
+                        <a [href]="user?.logoutUrl" (click)="logout(user, $event)">
+                            <i class="pi pi-fw pi-sign-out"></i>
+                            <span>{{ 'mngTopbar.logout' | translate }}</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li *ngIf="languages.length > 1" class="profile-item" [ngClass]="{ 'active-topmenuitem': (mainLayoutService.activeTopbarItem$ | async) === profile }">
+                <i class="pi pi-fw pi-globe"></i>
+                <p-dropdown [ngModel]="selectedLanguage" [options]="languages" (onChange)="switchLanguage($event.value)"></p-dropdown>
+            </li>
+        </ul>
+    </div>
+</div>

package/src/lib/components/layout/topbar.component.ts

@@ -0,0 +1,62 @@
+import {ChangeDetectionStrategy, Component, OnInit, QueryList, Type, ViewChildren} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+
+import {MngMainLayoutComponentService} from './services';
+import {MngCommonsService} from '../../services';
+import {MngTemplateDirective} from '../../directives';
+import {MngRouterData, IUser} from '../../models';
+import {MngMenuComponent} from './menu.component';
+import {MngBreadcrumbComponent} from './breadcrumb.component';
+
+@Component({
+    selector: 'mng-topbar',
+    templateUrl: './topbar.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngTopbarComponent implements OnInit {
+
+    @ViewChildren(MngTemplateDirective) templates!: QueryList<MngTemplateDirective>;
+
+    public breadcrumbComponent: Type<any> = MngBreadcrumbComponent;
+    public menuComponent: Type<any> = MngMenuComponent;
+
+    public languages: Array<string> = ['en'];
+    public selectedLanguage: string = 'en';
+    public user?: IUser;
+
+    constructor(
+        private route: ActivatedRoute,
+        public mngCommons: MngCommonsService,
+        public mainLayoutService: MngMainLayoutComponentService
+    ) {}
+
+    ngOnInit(): void {
+        const routeData = this.route.snapshot.data as MngRouterData;
+        if (routeData?.breadcrumbComponent) {
+            this.breadcrumbComponent = routeData.breadcrumbComponent;
+        }
+        if (routeData?.menuComponent) {
+            this.menuComponent = routeData.menuComponent;
+        }
+
+        this.languages = this.mngCommons.appLanguages;
+        this.selectedLanguage = this.mngCommons.appLanguage;
+        this.mngCommons.user$.subscribe(u => {
+            this.user = u;
+        })
+    }
+
+    ngAfterViewInit(): void {
+        this.mainLayoutService.innerWidth = window.innerWidth;
+    }
+
+    public switchLanguage(language: string) {
+        this.mngCommons.appLanguage = language;
+    }
+
+    public logout(user: IUser, event: Event) {
+        if (typeof user.logout === 'function') {
+            user.logout();
+        }
+    }
+}

package/{lib/components/tableview/index.d.ts → src/lib/components/tableview/index.ts}

@@ -1,3 +1,5 @@
-export * from './tableview.component';
-export * from './route/tableview-route.abstract.component';
-export * from './table/table.component';
+export * from './tableview.component';
+export * from './route/tableview-route.abstract.component';
+export * from './table/table.component';
+export * from './table/column-filter/column-filter.component';
+export * from './table/column-value/column-value.component';

package/src/lib/components/tableview/models/index.ts

@@ -0,0 +1 @@
+export * from './table.event';

package/src/lib/components/tableview/models/table.event.ts

@@ -0,0 +1,22 @@
+import {LazyLoadEvent} from 'primeng/api';
+
+import {MediusQueryParam} from '../../../api/models';
+import {ColumnDescriptor} from '../../../descriptors';
+
+export class MngTableLoadEvent {
+    public queryParam?: MediusQueryParam;
+    public originalEvent?: LazyLoadEvent;
+}
+
+export class MngTableCellClickEvent<T> {
+    constructor(
+        public readonly column: ColumnDescriptor<any, T>,
+        public readonly rowItem: T,
+        public readonly rowIndex: number
+    ) {}
+}
+
+export class MngTableReloadEvent {
+    public resetParams: boolean = false;
+    public emitEvent: boolean = false;
+}

package/src/lib/components/tableview/route/tableview-route.abstract.component.ts

@@ -0,0 +1,31 @@
+import {Directive} from '@angular/core';
+
+import {TableviewDescriptor, ActionDeleteDescriptor, ActionDescriptor, ActionEditorAddDescriptor, ActionEditorEditDescriptor, ActionEditorDetailsDescriptor} from '../../../descriptors';
+import {ITableviewDataProvider} from '../../../data-providers';
+
+@Directive()
+export abstract class AMngTableviewRouteComponent<T, S> {
+
+    public descriptor: TableviewDescriptor<T>;
+    public dataProvider: ITableviewDataProvider<T, S>;
+    public actions: Array<ActionDescriptor<T>>;
+
+    protected constructor(
+    ) {
+        this.descriptor = this.createTableviewDescriptor();
+        this.dataProvider = this.createTableviewDataProvider();
+        this.actions = this.createActionDescriptors();
+    }
+
+    protected abstract createTableviewDescriptor(): TableviewDescriptor<T>;
+    protected abstract createTableviewDataProvider(): ITableviewDataProvider<T, S>;
+
+    protected createActionDescriptors(): Array<ActionDescriptor<T>> {
+        const actions: Array<ActionDescriptor<T>> = [];
+        actions.push(new ActionEditorDetailsDescriptor(this.descriptor.viewEditor));
+        actions.push(new ActionEditorAddDescriptor(this.descriptor.addEditor));
+        actions.push(new ActionEditorEditDescriptor(this.descriptor.editEditor));
+        actions.push(new ActionDeleteDescriptor(this.descriptor.model));
+        return actions;
+    }
+}

package/src/lib/components/tableview/services/index.ts

@@ -0,0 +1 @@
+export * from './tableview.component.service';

package/src/lib/components/tableview/services/tableview.component.service.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+
+import {MessageService} from 'primeng/api';
+
+import {ITableviewDataProvider} from '../../../data-providers';
+import {ActionDescriptor} from '../../../descriptors';
+
+@Injectable()
+export class TableviewComponentService<T, S> {
+
+    dataProvider?: ITableviewDataProvider<T, S>;
+    messageService?: MessageService;
+    actions: Array<ActionDescriptor<T>> = [];
+
+    constructor() {
+        console.log('TableviewComponentService init.');
+    }
+
+    reloadTable() {
+        // TODO: add callback functions to implement
+    }
+}

package/src/lib/components/tableview/table/column-filter/column-filter.component.html

@@ -0,0 +1,36 @@
+<p-columnFilter class="ml-auto"
+                [type]="primeType" matchMode="equals"
+                [field]="descriptor.property" [display]="primeDisplay"
+                [matchMode]="primeDefaultMatchMode"
+                [placeholder]="(descriptor.placeholder ?? 'mngTable.typeToFilter') | translate"
+                [showMatchModes]="primeType === 'text' || primeType === 'date' || primeType === 'numeric'"
+                [showOperator]="false" [showAddButton]="false" [hideOnClear]="true">
+    <ng-template *ngIf="lookupDescriptor" pTemplate="filter" let-value let-filterCallback="filterCallback">
+        <ng-container [ngSwitch]="lookupDescriptor.lookupType">
+            <mng-autocomplete *ngSwitchCase="lookupTypeAutocomplete"
+                              [ngModel]="value"
+                              [dataProvider]="lookupDescriptor.dataProvider"
+                              [dataKeyProperty]="lookupDescriptor.dataKeyProperty"
+                              [itemsLabelProperty]="lookupDescriptor.itemsLabelProperty"
+                              [multiselect]="lookupDescriptor.multiselect"
+                              [placeholder]="(descriptor.placeholder ?? 'mngTable.searchToFilter') | translate"
+                              [className]="lookupDescriptor.className"
+                              [dropdownClassName]="lookupDescriptor.dropdownClassName"
+                              (onChange)="autocompleteFilter($event, filterCallback)">
+            </mng-autocomplete>
+            <mng-dropdown *ngSwitchCase="lookupTypeDropdown"
+                          [ngModel]="value"
+                          [dataProvider]="lookupDescriptor.dataProvider"
+                          [dataKeyProperty]="lookupDescriptor.dataKeyProperty"
+                          [itemsLabelProperty]="lookupDescriptor.itemsLabelProperty"
+                          [itemsValueProperty]="lookupDescriptor.itemsValueProperty"
+                          [multiselect]="lookupDescriptor.multiselect"
+                          [placeholder]="(descriptor.placeholder ?? 'mngTable.selectToFilter') | translate"
+                          [className]="lookupDescriptor.className"
+                          [dropdownClassName]="lookupDescriptor.dropdownClassName"
+                          [showClear]="true"
+                          (onChange)="filterCallback($event)">
+            </mng-dropdown>
+        </ng-container>
+    </ng-template>
+</p-columnFilter>

package/src/lib/components/tableview/table/column-filter/column-filter.component.ts

@@ -0,0 +1,70 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {FilterMatchMode} from 'primeng/api';
+
+import {FilterDescriptor, FilterLookupDescriptor, TableDescriptor} from '../../../../descriptors';
+
+/**
+ * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
+ * and these must be propagated through to this component and beyond to primeNG.
+ */
+@Component({
+    selector: 'mng-table-column-filter',
+    templateUrl: './column-filter.component.html'
+})
+export class MngTableColumnFilterComponent<T> implements OnInit {
+
+    public readonly lookupTypeDropdown: FilterLookupDescriptor.LookupTypeEnum = FilterLookupDescriptor.LookupTypeEnum.Dropdown;
+    public readonly lookupTypeAutocomplete: FilterLookupDescriptor.LookupTypeEnum = FilterLookupDescriptor.LookupTypeEnum.Autocomplete;
+
+    @Input() descriptor!: FilterDescriptor<T>;
+    @Input() display!: TableDescriptor.FilterDisplayEnum;
+
+    public lookupDescriptor?: FilterLookupDescriptor<T>;
+
+    public primeField!: string;
+    public primeType: string = 'text';
+    public primeDefaultMatchMode: string = FilterMatchMode.EQUALS;
+    public primeDisplay: string = 'row';
+
+    ngOnInit() {
+        switch (this.descriptor.filterType) {
+            case FilterDescriptor.TypeEnum.Boolean:
+                this.primeType = 'boolean';
+                break;
+            case FilterDescriptor.TypeEnum.Number:
+                this.primeType = 'numeric';
+                break;
+            case FilterDescriptor.TypeEnum.Date:
+                this.primeType = 'date';
+                break;
+            case FilterDescriptor.TypeEnum.Lookup:
+                this.primeType = 'lookup';
+                this.lookupDescriptor = this.descriptor as FilterLookupDescriptor<T>;
+                this.primeField = `${this.descriptor.property}${this.lookupDescriptor.itemsValueProperty ? `.${this.lookupDescriptor.itemsValueProperty}` : ''}`;
+                break;
+            case FilterDescriptor.TypeEnum.String:
+                this.primeType = 'text';
+                this.primeDefaultMatchMode = FilterMatchMode.CONTAINS;
+                break;
+        }
+
+        switch (this.display) {
+            case TableDescriptor.FilterDisplayEnum.Menu:
+                this.primeDisplay = 'menu';
+                break;
+        }
+    }
+
+    autocompleteFilter(value: T, filterCallback: Function) {
+        if (value) {
+            let filterValue: any = value;
+            if (this.lookupDescriptor!.itemsValueProperty) {
+                filterValue = filterValue[this.lookupDescriptor!.itemsValueProperty];
+            }
+            filterCallback(filterValue);
+        } else {
+            filterCallback(value);
+        }
+    }
+}

package/src/lib/components/tableview/table/column-value/column-value.component.html

@@ -0,0 +1,14 @@
+<ng-container [ngSwitch]="descriptor.columnType">
+    <ng-container *ngSwitchCase="columnTypeString">
+        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}
+    </ng-container>
+    <ng-container *ngSwitchCase="columnTypeNumber">
+        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}
+    </ng-container>
+    <ng-container *ngSwitchCase="columnTypeDate">
+        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}
+    </ng-container>
+    <ng-container *ngSwitchCase="columnTypeBoolean">
+        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}
+    </ng-container>
+</ng-container>

package/src/lib/components/tableview/table/column-value/column-value.component.ts

@@ -0,0 +1,19 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+
+import {ColumnDescriptor} from '../../../../descriptors';
+
+@Component({
+    selector: 'mng-table-column-value',
+    templateUrl: './column-value.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngTableColumnValueComponent<T, TT> {
+
+    public readonly columnTypeString: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.String;
+    public readonly columnTypeNumber: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.Number;
+    public readonly columnTypeBoolean: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.Boolean;
+    public readonly columnTypeDate: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.Date;
+
+    @Input() descriptor!: ColumnDescriptor<T, TT>;
+    @Input() item!: any;
+}