setup basic appModule services

angular.json

@@ -59,7 +59,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "material-dashboard-angular:build"
+            "browserTarget": "material-dashboard-angular:build",
+            "proxyConfig": "proxy.config.json"
           },
           "configurations": {
             "production": {

proxy.config.json

@@ -0,0 +1,14 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  },
+  "/login": {
+    "target": "http://localhost:3000",
+    "secure": false
+  },
+  "/logout": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}

src/app/AppModulesTypes.ts

@@ -0,0 +1,11 @@
+
+
+interface AvailableAppModule {
+  name: string;
+  customers: string[];
+}
+
+
+export {
+  AvailableAppModule
+}

src/app/app-modules.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AppModulesService } from './app-modules.service';
+
+describe('AppModulesService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AppModulesService = TestBed.get(AppModulesService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/app-modules.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+
+import { AvailableAppModule } from './AppModulesTypes';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppModulesService {
+
+  constructor(private http: HttpClient) { }
+
+  public getAvailableAppModules() {
+    // returns all app modules and indicates the customers for which the user can use the modules
+    return this.http.get<AvailableAppModule[]>('/api/v1/modules').pipe(catchError(this.handleError));
+  }
+
+  private handleError(error: HttpErrorResponse) {
+    if (error.error instanceof ErrorEvent) {
+      // client or network error
+      console.error('An error occurred:', error.error.message);
+    } else {
+      // backend returned an error
+      console.error(
+        `Backend returned code ${error.status}, ` +
+        `body was: ${error.error}`
+      );
+    }
+    return throwError(
+      `An eror occurred`
+    );
+  }
+}

src/app/app.module.ts

@@ -1,15 +1,22 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
-
 import { AppRoutingModule } from './app.routing';
 import { ComponentsModule } from './components/components.module';
 
 import { AppComponent } from './app.component';
 
+// Services
+import { AppModulesService } from './app-modules.service';
+import { LinkifyService } from './linkify.service';
+
+// Pipes
+import { LinkifyPipe } from './linkify.pipe';
+
+// Template Components
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { UserProfileComponent } from './user-profile/user-profile.component';
 import { TableListComponent } from './table-list/table-list.component';
@@ -27,7 +34,7 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
   imports: [
     BrowserAnimationsModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     ComponentsModule,
     RouterModule,
     AppRoutingModule,
@@ -38,9 +45,12 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
   declarations: [
     AppComponent,
     AdminLayoutComponent,
-
+    LinkifyPipe
+  ],
+  providers: [
+    AppModulesService,
+    LinkifyService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/sidebar/sidebar.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
+import { AppModulesService } from '../../app-modules.service';
+
+import { AvailableAppModule } from '../../AppModulesTypes';
+import { LinkifyService } from '../../linkify.service';
+
 declare const $: any;
 declare interface RouteInfo {
     path: string;
@@ -26,10 +31,26 @@ export const ROUTES: RouteInfo[] = [
 export class SidebarComponent implements OnInit {
   menuItems: any[];
 
-  constructor() { }
+  constructor(
+    private appModulesService: AppModulesService,
+    private linkify: LinkifyService,
+  ) { }
 
   ngOnInit() {
     this.menuItems = ROUTES.filter(menuItem => menuItem);
+    let self = this;
+    this.appModulesService.getAvailableAppModules().subscribe((availableModules: AvailableAppModule[]) => {
+      self.menuItems = availableModules.map((appModule: AvailableAppModule) => {
+        return {
+          path: this.linkify.transform(appModule.name),
+          title: appModule.name,
+          icon: "dashboard",
+          class: "",
+          label: ""
+        };
+      });
+      // self.appModules = availableModules;
+    });
   }
   isMobileMenu() {
       if ($(window).width() > 991) {

src/app/dashboard/dashboard.component.ts

@@ -66,85 +66,85 @@ export class DashboardComponent implements OnInit {
       seq2 = 0;
   };
   ngOnInit() {
-      /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */
+     //  /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */
-
+     //
-      const dataDailySalesChart: any = {
+     //  const dataDailySalesChart: any = {
-          labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+     //      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
-          series: [
+     //      series: [
-              [12, 17, 7, 17, 23, 18, 38]
+     //          [12, 17, 7, 17, 23, 18, 38]
-          ]
+     //      ]
-      };
+     //  };
-
+     //
-     const optionsDailySalesChart: any = {
+     // const optionsDailySalesChart: any = {
-          lineSmooth: Chartist.Interpolation.cardinal({
+     //      lineSmooth: Chartist.Interpolation.cardinal({
-              tension: 0
+     //          tension: 0
-          }),
+     //      }),
-          low: 0,
+     //      low: 0,
-          high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+     //      high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
-          chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
+     //      chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
-      }
+     //  }
-
+     //
-      var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
+     //  var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
-
+     //
-      this.startAnimationForLineChart(dailySalesChart);
+     //  this.startAnimationForLineChart(dailySalesChart);
-
+     //
-
+     //
-      /* ----------==========     Completed Tasks Chart initialization    ==========---------- */
+     //  /* ----------==========     Completed Tasks Chart initialization    ==========---------- */
-
+     //
-      const dataCompletedTasksChart: any = {
+     //  const dataCompletedTasksChart: any = {
-          labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
+     //      labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
-          series: [
+     //      series: [
-              [230, 750, 450, 300, 280, 240, 200, 190]
+     //          [230, 750, 450, 300, 280, 240, 200, 190]
-          ]
+     //      ]
-      };
+     //  };
-
+     //
-     const optionsCompletedTasksChart: any = {
+     // const optionsCompletedTasksChart: any = {
-          lineSmooth: Chartist.Interpolation.cardinal({
+     //      lineSmooth: Chartist.Interpolation.cardinal({
-              tension: 0
+     //          tension: 0
-          }),
+     //      }),
-          low: 0,
+     //      low: 0,
-          high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+     //      high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
-          chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
+     //      chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
-      }
+     //  }
-
+     //
-      var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
+     //  var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
-
+     //
-      // start animation for the Completed Tasks Chart - Line Chart
+     //  // start animation for the Completed Tasks Chart - Line Chart
-      this.startAnimationForLineChart(completedTasksChart);
+     //  this.startAnimationForLineChart(completedTasksChart);
-
+     //
-
+     //
-
+     //
-      /* ----------==========     Emails Subscription Chart initialization    ==========---------- */
+     //  /* ----------==========     Emails Subscription Chart initialization    ==========---------- */
-
+     //
-      var datawebsiteViewsChart = {
+     //  var datawebsiteViewsChart = {
-        labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+     //    labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
-        series: [
+     //    series: [
-          [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
+     //      [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
-
+     //
-        ]
+     //    ]
-      };
+     //  };
-      var optionswebsiteViewsChart = {
+     //  var optionswebsiteViewsChart = {
-          axisX: {
+     //      axisX: {
-              showGrid: false
+     //          showGrid: false
-          },
+     //      },
-          low: 0,
+     //      low: 0,
-          high: 1000,
+     //      high: 1000,
-          chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
+     //      chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
-      };
+     //  };
-      var responsiveOptions: any[] = [
+     //  var responsiveOptions: any[] = [
-        ['screen and (max-width: 640px)', {
+     //    ['screen and (max-width: 640px)', {
-          seriesBarDistance: 5,
+     //      seriesBarDistance: 5,
-          axisX: {
+     //      axisX: {
-            labelInterpolationFnc: function (value) {
+     //        labelInterpolationFnc: function (value) {
-              return value[0];
+     //          return value[0];
-            }
+     //        }
-          }
+     //      }
-        }]
+     //    }]
-      ];
+     //  ];
-      var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
+     //  var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
-
+     //
-      //start animation for the Emails Subscription Chart
+     //  //start animation for the Emails Subscription Chart
-      this.startAnimationForBarChart(websiteViewsChart);
+     //  this.startAnimationForBarChart(websiteViewsChart);
   }
 
 }

src/app/linkify.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { LinkifyPipe } from './linkify.pipe';
+
+describe('LinkifyPipe', () => {
+  it('create an instance', () => {
+    const pipe = new LinkifyPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/linkify.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'linkify'
+})
+export class LinkifyPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    return value.toLowerCase().split(' ').join('-');
+  }
+
+}

src/app/linkify.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { LinkifyService } from './linkify.service';
+
+describe('LinkifyService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [LinkifyService]
+    });
+  });
+
+  it('should be created', inject([LinkifyService], (service: LinkifyService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/linkify.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LinkifyService {
+
+  constructor() { }
+
+  transform(value: any, args?: any): any {
+    return value.toLowerCase().split(' ').join('-');
+  }
+}