Merge pull request #527 from iyilm4z/ng-adminlte-migration

Angular UI migration to AdminLTE 3

Author: ismcagdas

angular/angular.json

@@ -31,25 +31,14 @@
               }
             ],
             "styles": [
-              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/assets/fonts/roboto/roboto.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/simple-line-icons/css/simple-line-icons.css",
-              "node_modules/font-awesome/css/font-awesome.css",
               "node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css",
               "node_modules/toastr/build/toastr.css",
-              "node_modules/node-waves/dist/waves.css",
-              "src/bsb-theme/css/materialize.css",
-              "src/bsb-theme/css/style.css",
-              "src/bsb-theme/css/themes/all-themes.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "node_modules/admin-lte-css-only/css/adminlte.min.css",
               "src/shared/core.less"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/jquery-migrate/dist/jquery-migrate.min.js",
-              "node_modules/js-cookie/src/js.cookie.js",
-              "node_modules/bootstrap/dist/js/bootstrap.js",
-              "node_modules/lodash/lodash.min.js",
               "node_modules/moment/min/moment.min.js",
               "node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
               "node_modules/toastr/toastr.js",
@@ -58,28 +47,13 @@
               "node_modules/spin.js/spin.min.js",
               "node_modules/spin.js/jquery.spin.js",
               "node_modules/push.js/bin/push.min.js",
-              "node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
-              "node_modules/node-waves/dist/waves.min.js",
-              "node_modules/jquery-countto/jquery.countTo.js",
-              "node_modules/raphael/raphael.min.js",
-              "node_modules/morris.js/morris.min.js",
-              "node_modules/chart.js/dist/Chart.bundle.min.js",
-              "node_modules/flot/jquery.flot.js",
-              "node_modules/flot/jquery.flot.resize.js",
-              "node_modules/flot/jquery.flot.pie.js",
-              "node_modules/flot/jquery.flot.categories.js",
-              "node_modules/flot/jquery.flot.time.js",
-              "node_modules/jquery-sparkline/jquery.sparkline.min.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js",
-              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js",
-              "src/bsb-theme/js/admin.js",
-              "src/bsb-theme/js/demo.js",
-              "src/bsb-theme/js/jquery.validate.js"
+              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js"
             ]
           },
           "configurations": {
@@ -136,12 +110,29 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              {
+                "glob": "abp.signalr.js",
+                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
+                "output": "/assets/abp"
+              },
+              {
+                "glob": "abp.signalr-client.js",
+                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
+                "output": "/assets/abp"
+              }
+            ],
+            "styles": [
+              "node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css",
+              "node_modules/toastr/build/toastr.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "node_modules/admin-lte-css-only/css/adminlte.min.css",
+              "src/shared/core.less"
+            ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/jquery-migrate/dist/jquery-migrate.min.js",
-              "node_modules/js-cookie/src/js.cookie.js",
-              "node_modules/bootstrap/dist/js/bootstrap.js",
-              "node_modules/lodash/lodash.min.js",
               "node_modules/moment/min/moment.min.js",
               "node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
               "node_modules/toastr/toastr.js",
@@ -150,55 +141,13 @@
               "node_modules/spin.js/spin.min.js",
               "node_modules/spin.js/jquery.spin.js",
               "node_modules/push.js/bin/push.min.js",
-              "node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
-              "node_modules/node-waves/dist/waves.min.js",
-              "node_modules/jquery-countto/jquery.countTo.js",
-              "node_modules/raphael/raphael.min.js",
-              "node_modules/morris.js/morris.min.js",
-              "node_modules/chart.js/dist/Chart.bundle.min.js",
-              "node_modules/flot/jquery.flot.js",
-              "node_modules/flot/jquery.flot.resize.js",
-              "node_modules/flot/jquery.flot.pie.js",
-              "node_modules/flot/jquery.flot.categories.js",
-              "node_modules/flot/jquery.flot.time.js",
-              "node_modules/jquery-sparkline/jquery.sparkline.min.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js",
               "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js",
-              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js",
-              "src/bsb-theme/js/admin.js",
-              "src/bsb-theme/js/demo.js",
-              "src/bsb-theme/js/jquery.validate.js"
-            ],
-            "styles": [
-              "src/assets/fonts/roboto/roboto.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/simple-line-icons/css/simple-line-icons.css",
-              "node_modules/font-awesome/css/font-awesome.css",
-              "node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css",
-              "node_modules/toastr/build/toastr.css",
-              "node_modules/node-waves/dist/waves.css",
-              "src/bsb-theme/css/materialize.css",
-              "src/bsb-theme/css/style.css",
-              "src/bsb-theme/css/themes/all-themes.css",
-              "src/shared/core.less"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico",
-              {
-                "glob": "abp.signalr.js",
-                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
-                "output": "/assets/abp"
-              },
-              {
-                "glob": "abp.signalr-client.js",
-                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
-                "output": "/assets/abp"
-              }
+              "node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js"
             ]
           }
         },

angular/package.json

@@ -1,67 +1,42 @@
 {
   "name": "AbpProjectName",
   "version": "4.7.1",
+  "private": true,
   "license": "MIT",
-  "angular-cli": {},
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve --host 0.0.0.0 --port 4200",
-    "hmr": "ng serve --host 0.0.0.0 --port 4200 --hmr",
-    "test": "ng test",
     "pree2e": "webdriver-manager update --standalone false --gecko false",
     "e2e": "protractor",
-    "lint": "tslint --force --project src/tsconfig.json src/**/*.ts -t verbose"
+    "hmr": "ng serve --host 0.0.0.0 --port 4200 --hmr",
+    "lint": "tslint --force --project src/tsconfig.json src/**/*.ts -t verbose",
+    "ng": "ng",
+    "start": "ng serve --host 0.0.0.0 --port 4200",
+    "test": "ng test"
   },
-  "private": true,
   "dependencies": {
     "@angular/animations": "^8.2.4",
-    "@angular/cdk": "^8.1.4",
     "@angular/common": "^8.2.4",
     "@angular/compiler": "^8.2.4",
     "@angular/core": "^8.2.4",
     "@angular/forms": "^8.2.4",
-    "@angular/material": "^8.1.4",
     "@angular/platform-browser": "^8.2.4",
     "@angular/platform-browser-dynamic": "^8.2.4",
     "@angular/router": "^8.2.4",
     "@aspnet/signalr": "^1.1.4",
-    "@types/bootstrap": "^3.3.33",
-    "@types/jquery": "^3.3.31",
-    "@types/jquery.blockui": "0.0.28",
-    "@types/jquery.validation": "^1.16.3",
-    "@types/lodash": "^4.14.62",
-    "@types/moment": "^2.13.0",
-    "@types/moment-timezone": "^0.5.12",
-    "@types/toastr": "^2.1.33",
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "abp-ng2-module": "^5.1.1",
     "abp-web-resources": "^5.1.1",
-    "animate.css": "^3.5.2",
+    "admin-lte-css-only": "^3.0.4",
     "block-ui": "^2.70.1",
-    "bootstrap": "^3.3.7",
-    "bootstrap-select": "^1.12.2",
-    "chart.js": "^2.6.0",
     "core-js": "^3.2.1",
     "famfamfam-flags": "^1.0.0",
-    "flot": "^0.8.0-alpha",
-    "font-awesome": "^4.7.0",
-    "hammerjs": "^2.0.8",
-    "jquery": "^3.1.1",
-    "jquery-countto": "^1.2.0",
-    "jquery-migrate": "^3.0.0",
-    "jquery-slimscroll": "^1.3.8",
-    "jquery-sparkline": "^2.4.0",
-    "js-cookie": "^2.1.4",
+    "jquery": "^3.4.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "moment-timezone": "^0.5.13",
-    "morris.js": "^0.5.0",
-    "ngx-bootstrap": "^5.1.1",
+    "ngx-bootstrap": "^5.6.1",
     "ngx-pagination": "^4.1.0",
-    "node-waves": "^0.7.5",
     "push.js": "1.0.9",
-    "raphael": "^2.2.7",
     "rxjs": "^6.4.0",
-    "simple-line-icons": "^2.4.1",
     "spin.js": "^2.3.2",
     "sweetalert": "^2.0.8",
     "toastr": "^2.1.2",
@@ -75,6 +50,10 @@
     "@angular/compiler-cli": "^8.2.4",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "^3.4.0",
+    "@types/jquery": "^3.3.34",
+    "@types/jquery.blockui": "0.0.28",
+    "@types/lodash": "^4.14.62",
+    "@types/moment-timezone": "^0.5.12",
     "@types/node": "^12.7.3",
     "codelyzer": "^5.0.1",
     "jasmine-core": "^3.3.0",
@@ -91,5 +70,6 @@
     "tslint": "^5.19.0",
     "typescript": "3.4.5",
     "webpack-bundle-analyzer": "^3.0.3"
-  }
+  },
+  "angular-cli": {}
 }

angular/src/account/account.component.html

@@ -1,20 +1,15 @@
 <div class="login-box">
-    <div class="logo">
-        <a href="javascript:void(0);">AbpProjectName</a>
+  <account-header></account-header>
+  <div class="card">
+    <div *ngIf="showTenantChange()" class="card-header">
+      <tenant-change></tenant-change>
     </div>
-
-    <div *ngIf="showTenantChange()" class="tenant-change-box">
-        <tenant-change></tenant-change>
+    <div class="card-body login-card-body">
+      <router-outlet></router-outlet>
     </div>
-
-    <router-outlet></router-outlet>
-
-    <account-languages></account-languages>
-
-    <div class="row">
-        <div class="col-xs-12 text-center" style="color: #e9e9e9">
-            <small>&copy; {{currentYear}} AbpProjectName. <b>{{ "Version" | localize }} </b> {{versionText}}</small>
-        </div>
+    <div class="card-footer">
+      <account-languages></account-languages>
     </div>
-    
-</div>
+  </div>
+  <account-footer></account-footer>
+</div>

angular/src/account/account.component.less

@@ -1,36 +1,26 @@
-import { Component, ViewContainerRef, OnInit, ViewEncapsulation, Injector } from '@angular/core';
-import { LoginService } from './login/login.service';
+import {
+  Component,
+  OnInit,
+  ViewEncapsulation,
+  Injector,
+  Renderer2
+} from '@angular/core';
 import { AppComponentBase } from '@shared/app-component-base';
 
 @Component({
-    templateUrl: './account.component.html',
-    styleUrls: [
-        './account.component.less'
-    ],
-    encapsulation: ViewEncapsulation.None
+  templateUrl: './account.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class AccountComponent extends AppComponentBase implements OnInit {
+  constructor(injector: Injector, private renderer: Renderer2) {
+    super(injector);
+  }
 
-    versionText: string;
-    currentYear: number;
+  showTenantChange(): boolean {
+    return abp.multiTenancy.isEnabled;
+  }
 
-    private viewContainerRef: ViewContainerRef;
-
-    public constructor(
-        injector: Injector,
-        private _loginService: LoginService
-    ) {
-        super(injector);
-
-        this.currentYear = new Date().getFullYear();
-        this.versionText = this.appSession.application.version + ' [' + this.appSession.application.releaseDate.format('YYYYDDMM') + ']';
-    }
-
-    showTenantChange(): boolean {
-        return abp.multiTenancy.isEnabled;
-    }
-
-    ngOnInit(): void {
-        $('body').addClass('login-page');
-    }
+  ngOnInit(): void {
+    this.renderer.addClass(document.body, 'login-page');
+  }
 }

angular/src/account/account.component.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientJsonpModule } from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 
-import { ModalModule } from 'ngx-bootstrap';
+import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { AbpModule } from '@abp/abp.module';
 
@@ -18,6 +18,8 @@ import { AccountComponent } from './account.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { AccountLanguagesComponent } from './layout/account-languages.component';
+import { AccountHeaderComponent } from './layout/account-header.component';
+import { AccountFooterComponent } from './layout/account-footer.component';
 
 import { LoginService } from './login/login.service';
 
@@ -35,13 +37,15 @@ import { TenantChangeDialogComponent } from './tenant/tenant-change-dialog.compo
         SharedModule,
         ServiceProxyModule,
         AccountRoutingModule,
-        ModalModule.forRoot()
+        ModalModule.forChild()
     ],
     declarations: [
         AccountComponent,
         LoginComponent,
         RegisterComponent,
         AccountLanguagesComponent,
+        AccountHeaderComponent,
+        AccountFooterComponent,
         // tenant
         TenantChangeComponent,
         TenantChangeDialogComponent,

angular/src/account/account.module.ts

@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-md-12 text-center">
+    <small>
+      Copyright &copy; {{ currentYear }}
+      <b class="ml-2">{{ "Version" | localize }}</b>
+      {{ versionText }}
+    </small>
+  </div>
+</div>