@mediusinc/mng-commons 0.2.0 → 0.2.1-rc

package/src/lib/descriptors/tableview.descriptor.ts

@@ -0,0 +1,180 @@
+import {AbstractControl} from '@angular/forms';
+
+import {
+    ModelDescriptor,
+    AFieldDescriptor,
+    EditorDescriptor,
+    FieldInputDescriptor,
+    FieldLookupDescriptor,
+    FieldLookupEnumDescriptor,
+    FieldManyEditorDescriptor,
+    FieldManyToManyEditorDescriptor,
+    ColumnDescriptor,
+    TableDescriptor
+} from './';
+import {ClassType, EnumMemberType} from '../types';
+
+export class TableviewDescriptor<T> {
+
+    private readonly _model: ModelDescriptor<T>;
+    private _table: TableDescriptor<T>;
+    private _viewEditor: EditorDescriptor<T>;
+    private _addEditor: EditorDescriptor<T>;
+    private _editEditor: EditorDescriptor<T>;
+    private _tableTitle: string;
+
+    constructor(modelType: ClassType<T>, idProperty?: string, titleProperty?: string) {
+        this._model = new ModelDescriptor<T>(modelType, idProperty, titleProperty);
+        this._table = new TableDescriptor<T>(modelType, idProperty, titleProperty);
+        this._viewEditor = new EditorDescriptor<T>(modelType, idProperty, titleProperty);
+        this._viewEditor.withDisabled();
+        this._addEditor = new EditorDescriptor<T>(modelType, idProperty, titleProperty);
+        this._editEditor = new EditorDescriptor<T>(modelType, idProperty, titleProperty);
+        this._tableTitle = `${this._model.typeName}.name`;
+    }
+
+    public get model() {
+        return this._model;
+    }
+
+    public get table() {
+        return this._table;
+    }
+
+    public get viewEditor() {
+        return this._viewEditor;
+    }
+
+    public get addEditor() {
+        return this._addEditor;
+    }
+
+    public get editEditor() {
+        return this._editEditor;
+    }
+
+    public get tableTitle() {
+        return this._tableTitle;
+    }
+
+    public withTableDescriptor(descriptor: TableDescriptor<T>): this {
+        this._table = descriptor;
+        return this;
+    }
+
+    public withViewDescriptor(descriptor: EditorDescriptor<T>): this {
+        this._viewEditor = descriptor;
+        return this;
+    }
+
+    public withAddDescriptor(descriptor: EditorDescriptor<T>): this {
+        this._addEditor = descriptor;
+        return this;
+    }
+
+    public withEditDescriptor(descriptor: EditorDescriptor<T>): this {
+        this._editEditor = descriptor;
+        return this;
+    }
+
+    public withTableTitle(title: string): this {
+        this._tableTitle = title;
+        return this;
+    }
+
+    public withValidator(name: string, expression: (control: AbstractControl) => boolean): this {
+        this._viewEditor.addValidator(name, expression);
+        this._addEditor.addValidator(name, expression);
+        this._editEditor.addValidator(name, expression);
+        return this;
+    }
+
+    public addColumnDescriptor<CT>(column: ColumnDescriptor<CT, T>): TableDescriptor<T> {
+        return this._table.addColumnDescriptor<CT>(column);
+    }
+
+    public addColumn(property: string): ColumnDescriptor<string, T> {
+        return this._table.addColumn(property);
+    }
+
+    public addColumnNumber(property: string, displayFormat?: string): ColumnDescriptor<number, T> {
+        return this._table.addColumnNumber(property, displayFormat);
+    }
+
+    public addColumnDate(property: string, displayFormat?: string): ColumnDescriptor<Date, T> {
+        return this._table.addColumnDate(property, displayFormat);
+    }
+
+    public addColumnBoolean(property: string): ColumnDescriptor<boolean, T> {
+        return this._table.addColumnBoolean(property);
+    }
+
+    public addColumnObject<CT>(property: string, modelType: ClassType<CT>, displayProperty: string): ColumnDescriptor<CT, T> {
+        return this._table.addColumnObject(property, modelType, displayProperty);
+    }
+
+    public createTabGroup(name: string, title?: string): this {
+        this._viewEditor.createTabGroup(name, title);
+        this._addEditor.createTabGroup(name, title);
+        this._editEditor.createTabGroup(name, title);
+        return this;
+    }
+
+    public createFieldGroup(name: string, title?: string): this {
+        this._viewEditor.createFieldGroup(name, title);
+        this._addEditor.createFieldGroup(name, title);
+        this._editEditor.createFieldGroup(name, title);
+        return this;
+    }
+
+    public addFieldDescriptor<FT>(field: AFieldDescriptor<FT, T>): this {
+        this._viewEditor.addFieldDescriptor(field);
+        this._addEditor.addFieldDescriptor(field);
+        this._editEditor.addFieldDescriptor(field);
+        return this;
+    }
+
+    public addField(property: string): FieldInputDescriptor<T> {
+        const field = this._viewEditor.addField(property);
+        this._addEditor.addFieldDescriptor(field);
+        this._editEditor.addFieldDescriptor(field);
+        return field;
+    }
+
+    public addFieldLookup<FT>(property: string, modelType: ClassType<FT>): FieldLookupDescriptor<FT, T> {
+        const field = this._viewEditor.addFieldLookup(property, modelType);
+        this._addEditor.addFieldDescriptor(field);
+        this._editEditor.addFieldDescriptor(field);
+        return field;
+    }
+
+    public addFieldLookupEnum(property: string, options: Array<EnumMemberType>): FieldLookupEnumDescriptor<T> {
+        const field = this._viewEditor.addFieldLookupEnum(property, options);
+        this._addEditor.addFieldDescriptor(field);
+        this._editEditor.addFieldDescriptor(field);
+        return field;
+    }
+
+    public addFieldManyEditor<FT>(property: string, type: ClassType<FT>, tableviewDescriptor: TableviewDescriptor<FT>): FieldManyEditorDescriptor<FT, T> {
+        const field = this._viewEditor.addFieldManyEditor(property, type, tableviewDescriptor);
+        this._addEditor.addFieldDescriptor(field);
+        this._editEditor.addFieldDescriptor(field);
+        return field;
+    }
+
+    public addFieldManyToManyEditor<FT>(property: string, type: ClassType<FT>, mainTableDescriptor: TableDescriptor<FT>, lookupTableDescriptor: TableDescriptor<FT>): FieldManyToManyEditorDescriptor<FT, T> {
+        const field = this._viewEditor.addFieldManyToManyEditor(property, type, mainTableDescriptor, lookupTableDescriptor);
+        this._addEditor.addFieldDescriptor(field);
+        this._editEditor.addFieldDescriptor(field);
+        return field;
+    }
+
+    public copy(): TableviewDescriptor<T> {
+        const tableview = new TableviewDescriptor(this._model.type, this._model.idPropertyName, this._model.titlePropertyName);
+        tableview._table = this._table.copy();
+        tableview._viewEditor = this._viewEditor.copy();
+        tableview._addEditor = this._addEditor.copy();
+        tableview._editEditor = this._editEditor.copy();
+        return tableview;
+    }
+}

package/src/lib/directives/component.directive.ts

@@ -0,0 +1,18 @@
+import {ComponentRef, Directive, Input, OnInit, Type, ViewContainerRef} from '@angular/core';
+
+@Directive({
+    selector: '[mngComponent]',
+})
+export class MngComponentDirective<T> implements OnInit {
+
+    @Input('mngComponent') component!: Type<T>;
+
+    public componentRef!: ComponentRef<T>;
+
+    constructor(public viewContainerRef: ViewContainerRef) {}
+
+    ngOnInit() {
+        this.viewContainerRef.clear();
+        this.componentRef = this.viewContainerRef.createComponent<T>(this.component);
+    }
+}

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

@@ -1,2 +1,2 @@
-export * from './component.directive';
-export * from './template.directive';
+export * from './component.directive';
+export * from './template.directive';

package/src/lib/directives/template.directive.ts

@@ -0,0 +1,24 @@
+import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+
+@Directive({
+    selector: '[mngTemplate]',
+    host: {}
+})
+export class MngTemplateDirective {
+
+    @Input() type!: string;
+    @Input('mngTemplate') name!: string;
+
+    constructor(
+        public template: TemplateRef<any>,
+        private viewContainerRef: ViewContainerRef
+    ) {}
+
+    public getType(): string {
+        return this.name;
+    }
+
+    public getViewContainerRef(): ViewContainerRef {
+        return this.viewContainerRef;
+    }
+}

package/src/lib/mng-commons.module.ts

@@ -0,0 +1,240 @@
+import {APP_INITIALIZER, ModuleWithProviders, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ReactiveFormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+
+import {FORMLY_CONFIG, FormlyModule} from '@ngx-formly/core';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+
+// primeng modules
+import {ConfirmationService, MessageService} from 'primeng/api';
+import {AutoCompleteModule} from 'primeng/autocomplete';
+import {BreadcrumbModule} from 'primeng/breadcrumb';
+import {ButtonModule} from 'primeng/button';
+import {CardModule} from 'primeng/card';
+import {CheckboxModule} from 'primeng/checkbox';
+import {ChipModule} from 'primeng/chip';
+import {ConfirmDialogModule} from 'primeng/confirmdialog';
+import {ConfirmPopupModule} from 'primeng/confirmpopup';
+import {DialogModule} from 'primeng/dialog';
+import {DialogService, DynamicDialogModule} from 'primeng/dynamicdialog';
+import {DropdownModule} from 'primeng/dropdown';
+import {InputNumberModule} from 'primeng/inputnumber';
+import {InputMaskModule} from 'primeng/inputmask';
+import {InputSwitchModule} from 'primeng/inputswitch';
+import {InputTextModule} from 'primeng/inputtext';
+import {InputTextareaModule} from 'primeng/inputtextarea';
+import {PaginatorModule} from 'primeng/paginator';
+import {RadioButtonModule} from 'primeng/radiobutton';
+import {RippleModule} from 'primeng/ripple';
+import {SelectButtonModule} from 'primeng/selectbutton';
+import {TableModule} from 'primeng/table';
+import {TagModule} from 'primeng/tag';
+import {ToastModule} from 'primeng/toast';
+import {ToggleButtonModule} from 'primeng/togglebutton';
+import {ToolbarModule} from 'primeng/toolbar';
+import {TooltipModule} from 'primeng/tooltip';
+import {MessagesModule} from 'primeng/messages';
+import {ProgressSpinnerModule} from 'primeng/progressspinner';
+import {TabViewModule} from 'primeng/tabview';
+import {FieldsetModule} from 'primeng/fieldset';
+import {CalendarModule} from 'primeng/calendar';
+import {MultiSelectModule} from 'primeng/multiselect';
+import {SkeletonModule} from 'primeng/skeleton';
+
+// directives
+import {MngComponentDirective, MngTemplateDirective} from './directives';
+
+// pipes
+import {MngPropertyPathPipe, MngBooleanPipe} from './pipes';
+
+// components
+// editor components
+import {MngFormEditorComponent, MngAutocompleteComponent, MngDropdownComponent} from './components/form';
+
+// layout components
+import {MngBreadcrumbComponent, MngFooterComponent, MngMainLayoutComponent, MngMenuComponent, MngMenuItemComponent, MngTopbarComponent} from './components/layout';
+
+// formly components
+import {MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent} from './components/form/formly/wrappers';
+import {MngFormlyFieldAutocompleteComponent, MngFormlyFieldDropdownComponent, MngFormlyFieldFieldsetComponent, MngFormlyFieldInputComponent, MngFormlyFieldTableDialogFormComponent, MngFormlyFieldTableDialogMultiselectComponent, MngFormlyFieldTabsComponent} from './components/form/formly/fields';
+
+// table components
+import {MngTableComponent, MngTableviewComponent, MngTableColumnFilterComponent, MngTableColumnValueComponent} from './components/tableview';
+import {MngActionComponent, MngActionDialogComponent, MngActionRouteComponent} from './components/action';
+
+// services
+import {ObjectSerializer} from './api/utils';
+import {MngActionService, MngCommonsService, MngConfigurationService, MngNavigationService} from './services';
+import {mngConfigJsonAppInitializerProvider, mngConfigurationServiceProvider, mngFormlyConfigProvider} from './services/providers';
+
+// component services
+import {TableviewComponentService} from './components/tableview/services';
+import {MngMainLayoutComponentService} from './components/layout/services';
+
+// module config
+import {MngModuleConfig} from './config/models';
+import {mngCommonsInitializerProvider} from './services/providers';
+import {MNG_MODULE_CONFIG_IT} from './services/tokens';
+
+// primeng modules
+export const primeNgModules = [
+    AutoCompleteModule,
+    BreadcrumbModule,
+    ButtonModule,
+    CalendarModule,
+    CardModule,
+    CheckboxModule,
+    ChipModule,
+    ConfirmDialogModule,
+    ConfirmPopupModule,
+    DialogModule,
+    DynamicDialogModule,
+    DropdownModule,
+    InputNumberModule,
+    InputMaskModule,
+    InputSwitchModule,
+    InputTextModule,
+    InputTextareaModule,
+    PaginatorModule,
+    RadioButtonModule,
+    RippleModule,
+    SelectButtonModule,
+    TableModule,
+    TagModule,
+    ToastModule,
+    ToggleButtonModule,
+    ToolbarModule,
+    TooltipModule,
+    MessagesModule,
+    ProgressSpinnerModule,
+    TabViewModule,
+    FieldsetModule,
+    MultiSelectModule,
+    SkeletonModule
+];
+
+const declarations = [
+    // directives
+    MngComponentDirective,
+    MngTemplateDirective,
+
+    // pipes
+    MngPropertyPathPipe,
+    MngBooleanPipe,
+
+    // layout components
+    MngBreadcrumbComponent,
+    MngFooterComponent,
+    MngMainLayoutComponent,
+    MngMenuComponent,
+    MngMenuItemComponent,
+    MngTopbarComponent,
+
+    // mng fields
+    MngAutocompleteComponent,
+    MngDropdownComponent,
+
+    // formly wrappers
+    MngFormlyFieldWrapperComponent,
+    MngFormlyTableWrapperComponent,
+
+    // formly fields
+    MngFormlyFieldInputComponent,
+    MngFormlyFieldDropdownComponent,
+    MngFormlyFieldAutocompleteComponent,
+    MngFormlyFieldTableDialogMultiselectComponent,
+    MngFormlyFieldTableDialogFormComponent,
+    MngFormlyFieldTabsComponent,
+    MngFormlyFieldFieldsetComponent,
+
+    // table components
+    MngTableComponent,
+    MngTableviewComponent,
+    MngTableColumnValueComponent,
+    MngTableColumnFilterComponent,
+
+    // editor components
+    MngFormEditorComponent,
+    MngActionComponent,
+    MngActionDialogComponent,
+    MngActionRouteComponent
+];
+
+@NgModule({
+    imports: [
+        // angular modules
+        CommonModule,
+        RouterModule,
+        HttpClientModule,
+        ReactiveFormsModule,
+
+        // other modules
+        TranslateModule.forChild({
+            extend: true
+        }),
+        FormlyModule.forChild(),
+        ...primeNgModules
+    ],
+    declarations: [
+        ...declarations
+    ],
+    exports: [
+        ...primeNgModules,
+        ...declarations
+    ]
+})
+export class MngCommonsModule {
+    static forRoot(config: MngModuleConfig): ModuleWithProviders<MngCommonsModule> {
+        return {
+            ngModule: MngCommonsModule,
+            providers: [
+                // primeng services
+                DialogService,
+                MessageService,
+                ConfirmationService,
+
+                MngActionService,
+                MngNavigationService,
+                MngCommonsService,
+
+                // component service
+                MngMainLayoutComponentService,
+                TableviewComponentService,
+
+                {
+                    provide: MNG_MODULE_CONFIG_IT,
+                    useValue: config
+                },
+                {
+                    provide: ObjectSerializer,
+                    useFactory: () => ObjectSerializer.get()
+                },
+                {
+                    provide: MngConfigurationService,
+                    useFactory: mngConfigurationServiceProvider,
+                    deps: [HttpClient, MNG_MODULE_CONFIG_IT]
+                },
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: mngConfigJsonAppInitializerProvider,
+                    deps: [MngConfigurationService, MNG_MODULE_CONFIG_IT],
+                    multi: true
+                },
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: mngCommonsInitializerProvider,
+                    deps: [MngCommonsService],
+                    multi: true
+                },
+                {
+                    provide: FORMLY_CONFIG,
+                    multi: true,
+                    useFactory: mngFormlyConfigProvider,
+                    deps: [TranslateService, MNG_MODULE_CONFIG_IT]
+                }
+            ]
+        };
+    }
+}

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

@@ -1,2 +1,2 @@
-export * from './router.model';
-export * from './user.model';
+export * from './router.model';
+export * from './user.model';

package/src/lib/models/router.model.ts

@@ -0,0 +1,16 @@
+import {ActivatedRouteSnapshot, Data} from '@angular/router';
+import {MenuItem} from 'primeng/api';
+import {Type} from '@angular/core';
+
+export interface MngBreadcrumbMenuItem extends MenuItem {
+    isHome?: boolean;
+}
+
+export interface MngRouterData extends Data {
+    breadcrumb?: string|string[]|MngBreadcrumbMenuItem|MngBreadcrumbMenuItem[]|((routeUrl: string, route: ActivatedRouteSnapshot) => MngBreadcrumbMenuItem[]);
+    pageTitle?: string;
+    topbarComponent?: Type<any>;
+    breadcrumbComponent?: Type<any>;
+    menuComponent?: Type<any>;
+    footerComponent?: Type<any>;
+}

package/{lib/models/user.model.d.ts → src/lib/models/user.model.ts}

@@ -1,8 +1,9 @@
-import { IdType } from '../types';
-export interface IUser {
-    id: IdType;
-    username: string;
-    displayName?: string;
-    logout?: () => void;
-    logoutUrl?: string;
-}
+import {IdType} from '../types';
+
+export interface IUser {
+    id: IdType;
+    username: string;
+    displayName?: string;
+    logout?:() => void;
+    logoutUrl?: string;
+}

package/src/lib/pipes/boolean.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'boolean',
+    pure: true
+})
+export class MngBooleanPipe implements PipeTransform {
+
+    transform(value: any): any {
+
+        if (typeof value === 'boolean') {
+            return value ? 'general.yes' : 'general.no';
+        } else {
+            return value;
+        }
+    }
+}

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

@@ -1,2 +1,2 @@
-export * from './boolean.pipe';
-export * from './property-path.pipe';
+export * from './boolean.pipe';
+export * from './property-path.pipe';

package/src/lib/pipes/property-path.pipe.ts

@@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'propertyPath',
+    pure: true
+})
+export class MngPropertyPathPipe implements PipeTransform {
+
+    transform(value: any, path: string = ''): any {
+
+        if (path.indexOf('.') >= 0) {
+            const pathSplit = path.split('.');
+            let currValue = value;
+            for (const p of pathSplit) {
+                if (typeof currValue === 'undefined' || currValue === null) {
+                    return currValue;
+                }
+                else if (typeof currValue === 'object') {
+                    currValue = currValue[p];
+                } else {
+                    console.warn(`Path ${path} is not valid for object`, value);
+                    return currValue;
+                }
+            }
+            return currValue;
+        } else {
+            return typeof value === 'object' ? value[path] : value;
+        }
+    }
+}