From 4d0d5f17217622ebb0df11eea7761fbbb21e4a36 Mon Sep 17 00:00:00 2001 From: Mason Payne Date: Wed, 20 Mar 2019 00:38:46 -0600 Subject: [PATCH] setup basic appModule services --- angular.json | 3 +- proxy.config.json | 14 ++ src/app/AppModulesTypes.ts | 11 ++ src/app/app-modules.service.spec.ts | 12 ++ src/app/app-modules.service.ts | 35 ++++ src/app/app.module.ts | 20 ++- .../components/sidebar/sidebar.component.ts | 23 ++- src/app/dashboard/dashboard.component.ts | 158 +++++++++--------- src/app/linkify.pipe.spec.ts | 8 + src/app/linkify.pipe.ts | 12 ++ src/app/linkify.service.spec.ts | 15 ++ src/app/linkify.service.ts | 13 ++ 12 files changed, 238 insertions(+), 86 deletions(-) create mode 100644 proxy.config.json create mode 100644 src/app/AppModulesTypes.ts create mode 100644 src/app/app-modules.service.spec.ts create mode 100644 src/app/app-modules.service.ts create mode 100644 src/app/linkify.pipe.spec.ts create mode 100644 src/app/linkify.pipe.ts create mode 100644 src/app/linkify.service.spec.ts create mode 100644 src/app/linkify.service.ts diff --git a/angular.json b/angular.json index 2d16405..d9dda76 100644 --- a/angular.json +++ b/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": { diff --git a/proxy.config.json b/proxy.config.json new file mode 100644 index 0000000..76d73be --- /dev/null +++ b/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 + } +} diff --git a/src/app/AppModulesTypes.ts b/src/app/AppModulesTypes.ts new file mode 100644 index 0000000..dc4b5e1 --- /dev/null +++ b/src/app/AppModulesTypes.ts @@ -0,0 +1,11 @@ + + +interface AvailableAppModule { + name: string; + customers: string[]; +} + + +export { + AvailableAppModule +} diff --git a/src/app/app-modules.service.spec.ts b/src/app/app-modules.service.spec.ts new file mode 100644 index 0000000..1406a77 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/app-modules.service.ts b/src/app/app-modules.service.ts new file mode 100644 index 0000000..5a1de33 --- /dev/null +++ b/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('/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` + ); + } +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b4d4c4e..a75d20e 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts index 70eb5fc..339118a 100644 --- a/src/app/components/sidebar/sidebar.component.ts +++ b/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) { diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 36a0b02..1597408 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -66,85 +66,85 @@ export class DashboardComponent implements OnInit { seq2 = 0; }; ngOnInit() { - /* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */ - - const dataDailySalesChart: any = { - labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], - series: [ - [12, 17, 7, 17, 23, 18, 38] - ] - }; - - const optionsDailySalesChart: any = { - lineSmooth: Chartist.Interpolation.cardinal({ - tension: 0 - }), - low: 0, - 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}, - } - - var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart); - - this.startAnimationForLineChart(dailySalesChart); - - - /* ----------========== Completed Tasks Chart initialization ==========---------- */ - - const dataCompletedTasksChart: any = { - labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'], - series: [ - [230, 750, 450, 300, 280, 240, 200, 190] - ] - }; - - const optionsCompletedTasksChart: any = { - lineSmooth: Chartist.Interpolation.cardinal({ - tension: 0 - }), - low: 0, - 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} - } - - var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart); - - // start animation for the Completed Tasks Chart - Line Chart - this.startAnimationForLineChart(completedTasksChart); - - - - /* ----------========== Emails Subscription Chart initialization ==========---------- */ - - var datawebsiteViewsChart = { - labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], - series: [ - [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895] - - ] - }; - var optionswebsiteViewsChart = { - axisX: { - showGrid: false - }, - low: 0, - high: 1000, - chartPadding: { top: 0, right: 5, bottom: 0, left: 0} - }; - var responsiveOptions: any[] = [ - ['screen and (max-width: 640px)', { - seriesBarDistance: 5, - axisX: { - labelInterpolationFnc: function (value) { - return value[0]; - } - } - }] - ]; - var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions); - - //start animation for the Emails Subscription Chart - this.startAnimationForBarChart(websiteViewsChart); + // /* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */ + // + // const dataDailySalesChart: any = { + // labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], + // series: [ + // [12, 17, 7, 17, 23, 18, 38] + // ] + // }; + // + // const optionsDailySalesChart: any = { + // lineSmooth: Chartist.Interpolation.cardinal({ + // tension: 0 + // }), + // low: 0, + // 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}, + // } + // + // var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart); + // + // this.startAnimationForLineChart(dailySalesChart); + // + // + // /* ----------========== Completed Tasks Chart initialization ==========---------- */ + // + // const dataCompletedTasksChart: any = { + // labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'], + // series: [ + // [230, 750, 450, 300, 280, 240, 200, 190] + // ] + // }; + // + // const optionsCompletedTasksChart: any = { + // lineSmooth: Chartist.Interpolation.cardinal({ + // tension: 0 + // }), + // low: 0, + // 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} + // } + // + // var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart); + // + // // start animation for the Completed Tasks Chart - Line Chart + // this.startAnimationForLineChart(completedTasksChart); + // + // + // + // /* ----------========== Emails Subscription Chart initialization ==========---------- */ + // + // var datawebsiteViewsChart = { + // labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], + // series: [ + // [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895] + // + // ] + // }; + // var optionswebsiteViewsChart = { + // axisX: { + // showGrid: false + // }, + // low: 0, + // high: 1000, + // chartPadding: { top: 0, right: 5, bottom: 0, left: 0} + // }; + // var responsiveOptions: any[] = [ + // ['screen and (max-width: 640px)', { + // seriesBarDistance: 5, + // axisX: { + // labelInterpolationFnc: function (value) { + // return value[0]; + // } + // } + // }] + // ]; + // var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions); + // + // //start animation for the Emails Subscription Chart + // this.startAnimationForBarChart(websiteViewsChart); } } diff --git a/src/app/linkify.pipe.spec.ts b/src/app/linkify.pipe.spec.ts new file mode 100644 index 0000000..dc25682 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/linkify.pipe.ts b/src/app/linkify.pipe.ts new file mode 100644 index 0000000..d68be5f --- /dev/null +++ b/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('-'); + } + +} diff --git a/src/app/linkify.service.spec.ts b/src/app/linkify.service.spec.ts new file mode 100644 index 0000000..110e833 --- /dev/null +++ b/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(); + })); +}); diff --git a/src/app/linkify.service.ts b/src/app/linkify.service.ts new file mode 100644 index 0000000..7f6d0d3 --- /dev/null +++ b/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('-'); + } +}