clase 05

Author: sergiohidalgocaceres

ambulance/package-lock.json

@@ -24,6 +24,8 @@
     "@angular/platform-browser": "~11.0.5",
     "@angular/platform-browser-dynamic": "~11.0.5",
     "@angular/router": "~11.0.5",
+    "lodash": "^4.17.20",
+    "ngx-webcam": "^0.3.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
@@ -33,6 +35,7 @@
     "@angular/cli": "~11.0.5",
     "@angular/compiler-cli": "~11.0.5",
     "@types/jasmine": "~3.6.0",
+    "@types/lodash": "^4.14.168",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",

ambulance/package.json

@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PageLockScreenComponent } from './core/presentation/pages/page-lock-screen/page-lock-screen.component';
 import { PageLoginComponent } from './core/presentation/pages/page-login/page-login.component';
 
 const routes: Routes = [
   {
     path: 'auth',
-    component: PageLoginComponent,
+    children: [
+      { path: '', component: PageLoginComponent },
+      { path: 'lock', component: PageLockScreenComponent },
+    ],
   },
   {
     path: 'dashboard',

ambulance/src/app/app-routing.module.ts

@@ -1,13 +1,13 @@
 <mat-sidenav-container>
-  <mat-sidenav opened="true" mode="side">
+  <mat-sidenav opened="true" mode="side" *ngIf="!config.layout.menu.hidden">
     <div class="logo" fxLayout fxLayoutGap="20px" fxLayoutAlign="start center">
       <mat-icon svgIcon="logo"></mat-icon>
       <h3>Sistema de historias</h3>
     </div>
     <amb-menu></amb-menu>
   </mat-sidenav>
   <mat-sidenav-content>
-    <amb-header></amb-header>
+    <amb-header *ngIf="!config.layout.header.hidden"></amb-header>
     <router-outlet></router-outlet>
   </mat-sidenav-content>
 </mat-sidenav-container>

ambulance/src/app/app.component.html

@@ -1,10 +1,19 @@
 import { Component } from '@angular/core';
+import { ConfigService } from './config/config.service';
 
 @Component({
   selector: 'amb-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'ambulance';
+  config: any;
+
+  constructor(private readonly configService: ConfigService) {}
+
+  ngOnInit() {
+    this.configService.config.subscribe((config: any) => {
+      this.config = config;
+    });
+  }
 }

ambulance/src/app/app.component.ts

@@ -10,6 +10,11 @@ import { CoreModule } from './core/core.module';
 import { IconService } from './shared/services/icon.service';
 import { HttpClientModule } from '@angular/common/http';
 import { SharedModule } from './shared/shared.module';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import { Paginator } from './shared/classes/paginator';
+import { ConfigModule } from './config/config.module';
+import { AMB_Config } from './config/info';
+
 @NgModule({
   declarations: [AppComponent, LoginComponent, ItemComponent],
   imports: [
@@ -19,8 +24,9 @@ import { SharedModule } from './shared/shared.module';
     HttpClientModule,
     SharedModule,
     CoreModule,
+    ConfigModule.forRoot(AMB_Config),
   ],
-  providers: [],
+  providers: [{ provide: MatPaginatorIntl, useClass: Paginator }],
   bootstrap: [AppComponent],
 })
 export class AppModule {

ambulance/src/app/app.module.ts

@@ -0,0 +1,13 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { Config } from './layer.interface';
+import { AMB_CONFIG } from './token';
+
+@NgModule()
+export class ConfigModule {
+  static forRoot(config: Config): ModuleWithProviders<ConfigModule> {
+    return {
+      ngModule: ConfigModule,
+      providers: [{ provide: AMB_CONFIG, useValue: config }],
+    };
+  }
+}

ambulance/src/app/config/config.module.ts

@@ -0,0 +1,27 @@
+import { Inject, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Config } from './layer.interface';
+import { AMB_CONFIG } from './token';
+import * as _ from 'lodash';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfigService {
+  private configSubject: BehaviorSubject<Config>;
+
+  constructor(@Inject(AMB_CONFIG) config: Config) {
+    this.configSubject = new BehaviorSubject<Config>(config);
+  }
+
+  set config(value: any) {
+    let config = this.configSubject.getValue();
+    config = _.merge({}, config, value);
+
+    this.configSubject.next(config);
+  }
+
+  get config(): any {
+    return this.configSubject.asObservable();
+  }
+}

ambulance/src/app/config/config.service.ts

@@ -0,0 +1,12 @@
+import { Config } from './layer.interface';
+
+export const AMB_Config: Config = {
+  layout: {
+    header: {
+      hidden: true,
+    },
+    menu: {
+      hidden: true,
+    },
+  },
+};

ambulance/src/app/config/info.ts

@@ -0,0 +1,10 @@
+export interface Config {
+  layout: {
+    header: {
+      hidden: boolean;
+    };
+    menu: {
+      hidden: boolean;
+    };
+  };
+}