upgrade

NarikMe · Nov 23, 2020 · 6d2703b · 6d2703b
1 parent 2b3bd90
commit 6d2703b
Show file tree

Hide file tree

Showing 17 changed files with 9,585 additions and 118 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/angular.json b/angular.json
@@ -25,6 +25,9 @@
                 "plugins": "prepend"
               }
             },
+            "sourceMap": {
+              "vendor": true
+            },
             "outputPath": "dist/narik-material-demo",
             "index": "src/index.html",
             "main": "src/main.ts",

diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^10.0.1",
+    "@angular-builders/custom-webpack": "11.0.0-beta.1",
     "@angular-devkit/build-angular": "~0.1100.2",
     "@angular/cli": "~11.0.2",
     "@angular/compiler-cli": "~11.0.1",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -9,13 +9,13 @@ import {
   ConfigService,
   MODULE_DATA_KEY,
   MODULE_UI_KEY,
-  ModuleInfo
+  ModuleInfo,
 } from "@narik/infrastructure";
 import {
   NarikCoreModule,
   NarikTranslateLoader,
   MEMORY_STORAGE_VALIDITY_LEN,
-  NarikModule
+  NarikModule,
 } from "@narik/core";
 import { NarikUiCoreModule } from "@narik/ui-core";
 import { NarikAppCoreModule } from "@narik/app-core";
@@ -30,7 +30,6 @@ import { Observable } from "rxjs/internal/Observable";
 import { DemoCommandProcessor } from "./services/command-processor.service";
 import { NbEvaIconsModule } from "@nebular/eva-icons";
 
-
 const moduleKey = "NarikDemo";
 
 @NgModule({
@@ -43,14 +42,14 @@ const moduleKey = "NarikDemo";
       loader: {
         provide: TranslateLoader,
         useFactory: HttpLoaderFactory,
-        deps: [HttpClient, ConfigService]
-      }
+        deps: [HttpClient, ConfigService],
+      },
     }),
     NarikCoreModule.forRoot({
       configFilePath: "assets/app-config.json",
       defaultLang: "en",
       useDefaultLang: true,
-      commandProcessor: DemoCommandProcessor
+      commandProcessor: DemoCommandProcessor,
     }),
     NarikUiCoreModule,
     NarikAppCoreModule.forRoot({}),
@@ -59,7 +58,7 @@ const moduleKey = "NarikDemo";
       logoutEndPoint: "/api/account/Logout",
       refreshEndPoint: "/api/account/Authenticate",
       tokenStorage: "localStorage",
-      loginPageUrl: "/"
+      loginPageUrl: "/",
     }),
     NbEvaIconsModule,
     NbIconModule,
@@ -71,27 +70,27 @@ const moduleKey = "NarikDemo";
     ),
     BrowserAnimationsModule,
     MainModule,
-    NarikClientStorageModule.forRoot()
+    NarikClientStorageModule.forRoot(),
   ],
   providers: [
     {
       provide: MODULE_DATA_KEY,
-      useValue: moduleKey
+      useValue: moduleKey,
     },
     {
       provide: MODULE_UI_KEY,
-      useValue: moduleKey
+      useValue: moduleKey,
     },
     {
       provide: MEMORY_STORAGE_VALIDITY_LEN,
-      useValue: 1
+      useValue: 1,
     },
     {
       provide: FORM_ITEM_DEFAULT_CLASS,
-      useValue: "item-full-width"
-    }
+      useValue: "item-full-width",
+    },
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule extends NarikModule {
   constructor(injector: Injector) {

diff --git a/src/app/layouts/edit-layout.html b/src/app/layouts/edit-layout.html
@@ -4,7 +4,7 @@
   >
   </narik-mat-toolbar>
   <mat-card>
-    <form #form="ngForm" novalidate name="frmEdit">
+    <form *ngIf="form" [formGroup]="form" novalidate #formElement>
       <div narik-section="formContent"></div>
     </form>
   </mat-card>

diff --git a/src/app/modules/admin/admin.module.ts b/src/app/modules/admin/admin.module.ts
@@ -1,61 +1,61 @@
-import { WidgetViewComponent } from "./widgets/widget-view/widget-view.component";
-import { COMPONENTS, ENTRY_COMPONENTS } from "./index";
-import { NgModule, Injector } from "@angular/core";
-import { Routes, RouterModule } from "@angular/router";
-import { AdminMainComponent } from "./main/admin-main.component";
-import { AdminMainViewComponent } from "./main-view/admin-main-view.component";
+import { WidgetViewComponent } from './widgets/widget-view/widget-view.component';
+import { COMPONENTS, ENTRY_COMPONENTS } from './index';
+import { NgModule, Injector } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AdminMainComponent } from './main/admin-main.component';
+import { AdminMainViewComponent } from './main-view/admin-main-view.component';
 import {
   FormViewRoute,
   NarikAppCoreModule,
   ModuleLoadCompletelyGuard,
-} from "@narik/app-core";
-import { CommonModule } from "@angular/common";
-import { ShareModule } from "../share/share.module";
-import { NarikUiMaterialModule } from "@narik/ui-material";
-import { FormsModule } from "@angular/forms";
-import { NarikNgxAdmin } from "../narik-ngx-admin/narik-ngx-admin.module";
+} from '@narik/app-core';
+import { CommonModule } from '@angular/common';
+import { ShareModule } from '../share/share.module';
+import { NarikUiMaterialModule } from '@narik/ui-material';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NarikNgxAdmin } from '../narik-ngx-admin/narik-ngx-admin.module';
 import {
   MODULE_UI_KEY,
   MODULE_DATA_KEY,
   ModuleInfo,
   AuthenticationService,
   DialogService,
   EntityTypeService,
-} from "@narik/infrastructure";
-import { NarikModule } from "@narik/core";
-import { Observable } from "rxjs/internal/Observable";
-import { NbMenuService } from "@nebular/theme";
-import { filter } from "rxjs/internal/operators/filter";
-import { map } from "rxjs/internal/operators/map";
-import { ChangePassComponent } from "../main/change-password/change-password.component";
-import { DynamicFormService } from "@narik/ui-core";
-import { MccColorPickerModule } from "material-community-components/color-picker";
-import { NarikCommonModule } from "@narik/common";
-import { MatIconModule } from "@angular/material/icon";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { ColorPickerComponent } from "./color-picker/color-picker.component";
-import { MatCardModule } from "@angular/material/card";
-import { ClassValidation } from "./class-validation-sample/class-validation-sample";
+} from '@narik/infrastructure';
+import { NarikModule } from '@narik/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { NbMenuService } from '@nebular/theme';
+import { filter } from 'rxjs/internal/operators/filter';
+import { map } from 'rxjs/internal/operators/map';
+import { ChangePassComponent } from '../main/change-password/change-password.component';
+import { DynamicFormService } from '@narik/ui-core';
+import { MccColorPickerModule } from 'material-community-components/color-picker';
+import { NarikCommonModule } from '@narik/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ColorPickerComponent } from './color-picker/color-picker.component';
+import { MatCardModule } from '@angular/material/card';
+import { ClassValidation } from './class-validation-sample/class-validation-sample';
 
-const moduleKey = "admin";
+const moduleKey = 'admin';
 const routes: Routes = [
   {
-    path: "",
+    path: '',
     component: AdminMainComponent,
     canActivate: [ModuleLoadCompletelyGuard],
     data: { moduleKey: moduleKey },
     children: [
       {
-        path: "",
+        path: '',
         children: [
           {
-            path: "",
+            path: '',
             component: AdminMainViewComponent,
-            data: { title: "dashboard" },
+            data: { title: 'dashboard' },
           },
           {
-            path: "widgets",
+            path: 'widgets',
             component: WidgetViewComponent,
           },
           ...FormViewRoute(moduleKey),
@@ -72,6 +72,7 @@ const routes: Routes = [
     ShareModule,
     NarikUiMaterialModule,
     NarikAppCoreModule,
+    ReactiveFormsModule,
     FormsModule,
     NarikNgxAdmin,
     NarikCommonModule,
@@ -80,8 +81,8 @@ const routes: Routes = [
     MatInputModule,
     MatCardModule,
     MccColorPickerModule.forRoot({
-      used_colors: ["#000000", "#123456", "#777666"],
-      empty_color: "transparent",
+      used_colors: ['#000000', '#123456', '#777666'],
+      empty_color: 'transparent',
     }),
   ],
   declarations: [COMPONENTS],
@@ -94,7 +95,7 @@ const routes: Routes = [
     },
     {
       provide: MODULE_DATA_KEY,
-      useValue: "NarikDemo",
+      useValue: 'NarikDemo',
     },
   ],
 })
@@ -109,18 +110,18 @@ export class AdminModule extends NarikModule {
   ) {
     super(injector);
 
-    dfs.addDynamicFormComponent("color", ColorPickerComponent);
-    ets.addTypeCreator("classValidation", () => new ClassValidation());
+    dfs.addDynamicFormComponent('color', ColorPickerComponent);
+    ets.addTypeCreator('classValidation', () => new ClassValidation());
     nbMenuService
       .onItemClick()
       .pipe(
-        filter(({ tag }) => tag === "user-context-menu"),
+        filter(({ tag }) => tag === 'user-context-menu'),
         map(({ item: { data } }) => data)
       )
       .subscribe((item) => {
-        if (item === "logout") {
+        if (item === 'logout') {
           authenticationService.logout();
-        } else if (item === "changePass") {
+        } else if (item === 'changePass') {
           dialogService.showDialog(
             ChangePassComponent,
             undefined,

diff --git a/src/app/modules/admin/class-validation-sample/class-validation-sample.ts b/src/app/modules/admin/class-validation-sample/class-validation-sample.ts
@@ -1,10 +1,10 @@
-import { Adapt } from "data-adapter";
-import { Contains, IsEmail } from "class-validator";
+import { Adapt } from 'data-adapter';
+import { Contains, IsEmail } from 'class-validator';
 
 export class ClassValidation {
   viewModelId: number;
 
-  @Adapt({ name: "email" })
+  @Adapt({ name: 'email' })
   _email: string;
 
   @IsEmail()
@@ -15,14 +15,18 @@ export class ClassValidation {
     return this._email;
   }
 
-  @Adapt({ name: "hello" })
+  @Adapt({ name: 'hello' })
   _hello: string;
 
-  @Contains("hello")
+  @Contains('hello')
   set hello(value: string) {
     this._hello = value;
   }
   get hello(): string {
     return this._hello;
   }
+
+  constructor() {
+    this.hello = 'Hello!';
+  }
 }
diff --git a/src/app/modules/admin/color-picker/color-picker.component.html b/src/app/modules/admin/color-picker/color-picker.component.html
@@ -1,18 +1,39 @@
-<mat-form-field [ngClass]="cssClass" [floatLabel]='floatLabel' [appearance]='appearance' [hintLabel]='hintLabel'>
-  <mat-label *ngIf="field.label">{{field.label | translate}}</mat-label>
-  <input [narikValidatorParams]="field.validatorParams"
-    [narikValidator]="field.validators" [name]="field.name" matInput mccColorPickerOrigin
-    #trigger="mccColorPickerOrigin" [required]="field.required" [(ngModel)]='model[field.model]'
-    placeholder="{{field.options.placeHolder | translate}}">
-  <mcc-color-picker matSuffix mccConnectedColorPicker [mccConnectedColorPickerOrigin]="trigger"
-    class="mat-form-field-suffix" [hideHexForms]="true" hideButtons>
-    <mcc-color-picker-collection [label]="'First Collection'" hideEmpty="true" [colors]="colors">
+<mat-form-field
+  [ngClass]="cssClass"
+  [floatLabel]="floatLabel"
+  [appearance]="appearance"
+  [hintLabel]="hintLabel"
+  [formGroup]="form"
+>
+  <mat-label *ngIf="field.label">{{ field.label | translate }}</mat-label>
+  <input
+    [name]="field.name"
+    matInput
+    mccColorPickerOrigin
+    #trigger="mccColorPickerOrigin"
+    [required]="field.required"
+    [formControlName]="field.model"
+    placeholder="{{ field.options.placeHolder | translate }}"
+  />
+  <mcc-color-picker
+    matSuffix
+    mccConnectedColorPicker
+    [mccConnectedColorPickerOrigin]="trigger"
+    class="mat-form-field-suffix"
+    [hideHexForms]="true"
+    hideButtons
+  >
+    <mcc-color-picker-collection
+      [label]="'First Collection'"
+      hideEmpty="true"
+      [colors]="colors"
+    >
     </mcc-color-picker-collection>
   </mcc-color-picker>
-  <mat-icon *ngIf='suffixIcon' matSuffix>{{suffixIcon}}</mat-icon>
-  <mat-icon *ngIf='prefixIcon' matPrefix>{{prefixIcon}}</mat-icon>
-  <mat-hint *ngIf='startHint'>{{startHint}}</mat-hint>
-  <mat-hint *ngIf='endHint' align="end">{{endHint}}</mat-hint>
-  <span *ngIf='prefixContent' matPrefix>{{prefixContent}}</span>
-  <span *ngIf='suffixContent' matSuffix>{{suffixContent}}</span>
+  <mat-icon *ngIf="suffixIcon" matSuffix>{{ suffixIcon }}</mat-icon>
+  <mat-icon *ngIf="prefixIcon" matPrefix>{{ prefixIcon }}</mat-icon>
+  <mat-hint *ngIf="startHint">{{ startHint }}</mat-hint>
+  <mat-hint *ngIf="endHint" align="end">{{ endHint }}</mat-hint>
+  <span *ngIf="prefixContent" matPrefix>{{ prefixContent }}</span>
+  <span *ngIf="suffixContent" matSuffix>{{ suffixContent }}</span>
 </mat-form-field>