@mediusinc/mng-commons 0.2.0 → 0.2.1-rc

package/src/lib/config/formly.config.ts

@@ -0,0 +1,154 @@
+import {TranslateService} from '@ngx-translate/core';
+import {FormlyFieldConfig} from '@ngx-formly/core';
+import {Observable} from 'rxjs';
+
+import {MngFormlyFieldWrapperComponent, MngFormlyTableWrapperComponent} from '../components/form/formly/wrappers';
+import {
+    MngFormlyFieldAutocompleteComponent,
+    MngFormlyFieldDropdownComponent,
+    MngFormlyFieldFieldsetComponent,
+    MngFormlyFieldInputComponent,
+    MngFormlyFieldTableDialogFormComponent,
+    MngFormlyFieldTableDialogMultiselectComponent,
+    MngFormlyFieldTabsComponent
+} from '../components/form/formly/fields';
+
+export const formlyWrappersConfig = [
+    { name: 'field', component: MngFormlyFieldWrapperComponent },
+    { name: 'field-table', component: MngFormlyTableWrapperComponent }
+];
+
+export const formlyTypesConfig: any[] = [
+    {
+        name: 'input',
+        component: MngFormlyFieldInputComponent,
+        wrappers: ['field'],
+    },
+    { name: 'string', extends: 'input' },
+    {
+        name: 'number',
+        extends: 'input',
+        defaultOptions: {
+            templateOptions: {
+                type: 'number',
+            },
+        },
+    },
+    {
+        name: 'integer',
+        extends: 'input',
+        defaultOptions: {
+            templateOptions: {
+                type: 'number',
+            },
+        },
+    },
+    {
+        name: 'textarea',
+        extends: 'input',
+        defaultOptions: {
+            templateOptions: {
+                type: 'textarea',
+            },
+        },
+    },
+    {
+        name: 'switch',
+        component: MngFormlyFieldInputComponent,
+        defaultOptions: {
+            templateOptions: {
+                type: 'switch',
+            },
+        },
+    },
+    {
+        name: 'radio',
+        extends: 'input',
+        defaultOptions: {
+            templateOptions: {
+                type: 'radio',
+            },
+        },
+    },
+    {
+        name: 'datepicker',
+        extends: 'input',
+        defaultOptions: {
+            templateOptions: {
+                type: 'datepicker',
+            },
+        },
+    },
+    {
+        name: 'dropdown',
+        component: MngFormlyFieldDropdownComponent,
+        wrappers: ['field'],
+    },
+    { name: 'enum', extends: 'dropdown' },
+    {
+        name: 'autocomplete',
+        component: MngFormlyFieldAutocompleteComponent,
+        wrappers: ['field']
+    },
+    {
+        name: 'table-dialog-multiselect',
+        component: MngFormlyFieldTableDialogMultiselectComponent,
+        wrappers: ['field-table']
+    },
+    {
+        name: 'table-dialog-form',
+        component: MngFormlyFieldTableDialogFormComponent,
+        wrappers: ['field-table']
+    },
+    {
+        name: 'tabs',
+        component: MngFormlyFieldTabsComponent,
+        wrappers: []
+    },
+    {
+        name: 'fieldset',
+        component: MngFormlyFieldFieldsetComponent,
+        wrappers: []
+    }
+];
+
+export function getRequiredValidationMessage(translate: TranslateService): (error: any, field: FormlyFieldConfig) => Observable<string> {
+    return (error: any, field: FormlyFieldConfig) => {
+        const fieldLabel = field.templateOptions?.label || 'field';
+        const fieldName = translate.instant(fieldLabel);
+        return translate.instant('mngEditor.validation.required', {field: fieldName});
+    }
+}
+
+export function getMinLengthValidationMessage(translate: TranslateService): (error: any, field: FormlyFieldConfig) => Observable<string> | undefined {
+    return (error: any, field: FormlyFieldConfig) => {
+        const fieldLabel = field.templateOptions?.label || 'field';
+        const fieldName = translate.instant(fieldLabel);
+        return translate.instant('mngEditor.validation.minLength', {field: fieldName, min: field.templateOptions?.min});
+    };
+}
+
+export function getMaxLengthValidationMessage(translate: TranslateService): (error: any, field: FormlyFieldConfig) => Observable<string> | undefined {
+    return (error: any, field: FormlyFieldConfig) => {
+        const fieldLabel = field.templateOptions?.label || 'field';
+        const fieldName = translate.instant(fieldLabel);
+        return translate.instant('mngEditor.validation.maxLength', {field: fieldName, max: field.templateOptions?.max});
+    };
+}
+
+export function getTextPatternValidationMessage(translate: TranslateService): (error: any, field: FormlyFieldConfig) => Observable<string> | undefined {
+    return (error: any, field: FormlyFieldConfig) => {
+        const fieldLabel = field.templateOptions?.label || 'field';
+        const fieldName = translate.instant(fieldLabel);
+        return translate.instant('mngEditor.validation.pattern', {field: fieldName, pattern: field.templateOptions?.pattern});
+    };
+}
+
+export const getFormlyValidationMessages = (translate: TranslateService): any[] => {
+    return [
+        { name: 'required', message: getRequiredValidationMessage(translate)},
+        { name: 'minlength', message: getMinLengthValidationMessage(translate)},
+        { name: 'maxlength', message: getMaxLengthValidationMessage(translate)},
+        { name: 'pattern', message: getTextPatternValidationMessage(translate)},
+    ];
+}

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

@@ -1 +1 @@
-export * from './formly.config';
+export * from './formly.config';

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

@@ -1 +1 @@
-export * from './mng-config.model';
+export * from './mng-config.model';

package/{lib/config/models/mng-config.model.d.ts → src/lib/config/models/mng-config.model.ts}

@@ -1,34 +1,35 @@
-import { TranslateService } from '@ngx-translate/core';
-import { MenuItem } from 'primeng/api';
-export interface MngModuleConfig {
-    app?: {
-        name?: string;
-        owner?: string;
-        logoPath?: string;
-        logoPathLight?: string;
-        logoPathDark?: string;
-        logoNamePath?: string;
-        logoNamePathLight?: string;
-        logoNamePathDark?: string;
-        languages?: string[];
-        colorScheme?: 'light' | 'dark';
-    };
-    menu?: {
-        mode?: 'static' | 'sidebar' | 'slim' | 'overlay';
-        menuItems?: MenuItem[];
-        pinEnabled?: boolean;
-    };
-    configuration?: {
-        projectEnvironment?: any;
-        jsonSource?: string;
-        skipJsonSourceInit?: boolean;
-    };
-    formly?: {
-        skip?: boolean;
-        merge?: boolean;
-        types?: any[];
-        wrappers?: any[];
-        validators?: any[];
-        getValidationMessages?: (translate: TranslateService) => any[];
-    };
-}
+import {TranslateService} from '@ngx-translate/core';
+import {MenuItem} from 'primeng/api';
+
+export interface MngModuleConfig {
+    app?: {
+        name?: string;
+        owner?: string;
+        logoPath?: string;
+        logoPathLight?: string;
+        logoPathDark?: string;
+        logoNamePath?: string;
+        logoNamePathLight?: string;
+        logoNamePathDark?: string;
+        languages?: string[];
+        colorScheme?: 'light'|'dark';
+    },
+    menu?: {
+        mode?: 'static'|'sidebar'|'slim'|'overlay';
+        menuItems?: MenuItem[];
+        pinEnabled?: boolean;
+    },
+    configuration?: {
+        projectEnvironment?: any;
+        jsonSource?: string;
+        skipJsonSourceInit?: boolean;
+    },
+    formly?: {
+        skip?: boolean;
+        merge?: boolean;
+        types?: any[];
+        wrappers?: any[];
+        validators?: any[];
+        getValidationMessages?: (translate: TranslateService) => any[];
+    }
+}

package/src/lib/data-providers/base.data-provider.ts

@@ -0,0 +1,42 @@
+import {Type} from '@angular/core';
+
+import {ClassType} from '../types';
+
+export interface IDataProvider<T, S> {
+    modelType: ClassType<T>|null;
+    serviceType?: Type<S>;
+}
+
+export class DataProvider<T, S> {
+
+    protected _modelType: ClassType<T>|null;
+    protected _serviceType?: Type<S>;
+    protected _enumName?: string;
+
+    constructor(modelType: ClassType<T>|null, serviceType?: Type<S>) {
+        this._modelType = modelType;
+        this._serviceType = serviceType;
+    }
+
+    public get serviceType() {
+        return this._serviceType;
+    }
+
+    public get modelType() {
+        return this._modelType;
+    }
+
+    public get enumName() {
+        return this._enumName;
+    }
+
+    public withServiceType(type: Type<S>): this {
+        this._serviceType = type;
+        return this;
+    }
+
+    public withEnumName(enumName: string): this {
+        this._enumName = enumName;
+        return this;
+    }
+}

package/src/lib/data-providers/editor.data-provider.ts

@@ -0,0 +1,60 @@
+import {Type} from '@angular/core';
+
+import {Observable, throwError} from 'rxjs';
+
+import {ClassType, IdType} from '../types';
+import {DataProvider, IDataProvider} from './base.data-provider';
+
+export interface IEditorDataProvider<T, S> extends IDataProvider<T, S> {
+    fetch: (id: IdType, service?: S) => Observable<T>;
+    create?: (item?: T, service?: S) => Observable<T>;
+    update?: (id: IdType, item?: T, service?: S) => Observable<T>;
+    delete?: (id: IdType, item?: T, service?: S) => Observable<T>;
+}
+
+export class EditorDataProvider<T, S> extends DataProvider<T, S> implements IEditorDataProvider<T, S> {
+    protected _fetch: (id: IdType, service?: S) => Observable<T> = (id) => throwError(`No fetch function provided for id ${id}.`);
+    protected _create?: (item?: T, service?: S) => Observable<T>;
+    protected _update?: (id: IdType, item?: T, service?: S) => Observable<T>;
+    protected _delete?: (id: IdType, item?: T, service?: S) => Observable<T>;
+
+    constructor(modelType: ClassType<T>, serviceType?: Type<S>) {
+        super(modelType, serviceType);
+    }
+
+    public get fetch() {
+        return this._fetch;
+    }
+
+    public get create() {
+        return this._create;
+    }
+
+    public get update() {
+        return this._update;
+    }
+
+    public get delete() {
+        return this._delete;
+    }
+
+    public withFetch(fetch: (id: IdType, service?: S) => Observable<T>): this {
+        this._fetch = fetch;
+        return this;
+    }
+
+    public withCreate(create: (item?: T, service?: S) => Observable<T>): this {
+        this._create = create;
+        return this;
+    }
+
+    public withUpdate(update: (id: IdType, item?: T, service?: S) => Observable<T>): this {
+        this._update = update;
+        return this;
+    }
+
+    public withDelete(deleteFn: (id: IdType, item?: T, service?: S) => Observable<T>): this {
+        this._delete = deleteFn;
+        return this;
+    }
+}

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

@@ -1,5 +1,5 @@
-export * from './base.data-provider';
-export * from './editor.data-provider';
-export * from './lookup.data-provider';
-export * from './table.data-provider';
-export * from './tableview.data-provider';
+export * from './base.data-provider';
+export * from './editor.data-provider';
+export * from './lookup.data-provider';
+export * from './table.data-provider';
+export * from './tableview.data-provider';

package/src/lib/data-providers/lookup.data-provider.ts

@@ -0,0 +1,29 @@
+import {Type} from '@angular/core';
+
+import {Observable, of} from 'rxjs';
+
+import {MediusQueryParam} from '../api/models';
+import {ClassType} from '../types';
+import {DataProvider, IDataProvider} from './base.data-provider';
+
+export interface ILookupDataProvider<T, S> extends IDataProvider<T, S> {
+    lookup: (queryParam?: MediusQueryParam, service?: S, search?: string) => Observable<Array<T>>;
+}
+
+export class LookupDataProvider<T, S> extends DataProvider<T, S> implements ILookupDataProvider<T, S> {
+
+    protected _lookup: (queryParam?: MediusQueryParam, service?: S, search?: string) => Observable<Array<T>> = () => of([]);
+
+    constructor(modelType: ClassType<T>|null, serviceType?: Type<S>) {
+        super(modelType, serviceType);
+    }
+
+    public get lookup() {
+        return this._lookup;
+    }
+
+    public withLookup(lookup: (queryParam?: MediusQueryParam, service?: S, search?: string) => Observable<Array<T>>): this {
+        this._lookup = lookup;
+        return this;
+    }
+}

package/{lib/data-providers/table.data-provider.d.ts → src/lib/data-providers/table.data-provider.ts}

@@ -1,6 +1,8 @@
-import { Observable } from 'rxjs';
-import { MediusQueryParam, MediusQueryResult } from '../api/models';
-import { IDataProvider } from './base.data-provider';
-export interface ITableDataProvider<T, S> extends IDataProvider<T, S> {
-    getAll: (queryParam: MediusQueryParam, service?: S) => Observable<MediusQueryResult<T>>;
-}
+import {Observable} from 'rxjs';
+
+import {MediusQueryParam, MediusQueryResult} from '../api/models';
+import {IDataProvider} from './base.data-provider';
+
+export interface ITableDataProvider<T, S> extends IDataProvider<T, S> {
+    getAll: (queryParam: MediusQueryParam, service?: S) => Observable<MediusQueryResult<T>>;
+}

package/src/lib/data-providers/tableview.data-provider.ts

@@ -0,0 +1,29 @@
+import {Type} from '@angular/core';
+
+import {Observable, of} from 'rxjs';
+
+import {MediusQueryParam, MediusQueryResult} from '../api/models';
+import {ClassType} from '../types';
+import {EditorDataProvider, IEditorDataProvider} from './editor.data-provider';
+import {ITableDataProvider} from './table.data-provider';
+
+export interface ITableviewDataProvider<T, S> extends IEditorDataProvider<T, S> {
+    getAll: (queryParam: MediusQueryParam, service?: S) => Observable<MediusQueryResult<T>>;
+}
+
+export class TableviewDataProvider<T, S> extends EditorDataProvider<T, S> implements ITableviewDataProvider<T, S>, ITableDataProvider<T, S>, IEditorDataProvider<T, S> {
+    protected _getAll: (queryParam: MediusQueryParam, service?: S) => Observable<MediusQueryResult<T>> = (qp) => of(new MediusQueryResult<T>());
+
+    constructor(modelType: ClassType<T>, serviceType?: Type<S>) {
+        super(modelType, serviceType);
+    }
+
+    public get getAll() {
+        return this._getAll;
+    }
+
+    public withGetAll(getAll: (queryParam: MediusQueryParam, service?: S) => Observable<MediusQueryResult<T>>): this {
+        this._getAll = getAll;
+        return this;
+    }
+}