Merge pull request 'changement route pour dev local, ajout d'un Title dynamique, intégré dans le router + Div principale avec classe Container + BootStrap > version 5' (#8) from fix_title into develop

Reviewed-on: Clement.Ferrere/Collaborateur_Epa_Front#8

package-lock.json

@@ -1867,12 +1867,6 @@
         "@types/node": "*"
       }
     },
-    "@types/jasmine": {
-      "version": "3.6.11",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.6.11.tgz",
-      "integrity": "sha512-S6pvzQDvMZHrkBz2Mcn/8Du7cpr76PlRJBAoHnSDNbulULsH5dp0Gns+WRyNX5LHejz/ljxK4/vIHK/caHt6SQ==",
-      "dev": true
-    },
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -2685,9 +2679,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.6.1",
+      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og=="
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -6021,12 +6015,6 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
-    "jasmine-core": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.7.1.tgz",
-      "integrity": "sha512-DH3oYDS/AUvvr22+xUBW62m1Xoy7tUlY1tsxKEJvl5JeJ7q8zd1K5bUwiOxdH+erj6l2vAMM3hV25Xs9/WrmuQ==",
-      "dev": true
-    },
     "jest-worker": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
@@ -6303,21 +6291,6 @@
         "minimatch": "^3.0.4"
       }
     },
-    "karma-jasmine": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-4.0.1.tgz",
-      "integrity": "sha512-h8XDAhTiZjJKzfkoO1laMH+zfNlra+dEQHUAjpn5JV1zCPtOIVWGQjLBrqhnzQa/hrU2XrZwSyBa6XjEBzfXzw==",
-      "dev": true,
-      "requires": {
-        "jasmine-core": "^3.6.0"
-      }
-    },
-    "karma-jasmine-html-reporter": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
-      "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
-      "dev": true
-    },
     "karma-source-map-support": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",

package.json

@@ -20,7 +20,7 @@
     "@angular/platform-browser-dynamic": "~12.0.0",
     "@angular/router": "~12.0.0",
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.1.3",
     "jquery": "^3.6.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",

src/app/app-routing.module.ts

@@ -10,13 +10,13 @@ import {BusinessunitEditComponent} from "./components/businessunit/businessunit-
 
 const routes : Routes = [
   {path:'', redirectTo:'/home', pathMatch:'full'},
-  { path: 'home', component:HomeComponent },
+  { path: 'home', component:HomeComponent, data:{title:'Services Collaborateurs'}},
-  { path:'collaborateurs',component:CollaborateurComponent },
+  { path:'collaborateurs',component:CollaborateurComponent, data:{title:'Collaborateurs'} },
-  { path: 'collaborateurs/:id', component: CollaborateurEditComponent },
+  { path: 'collaborateurs/:id', component: CollaborateurEditComponent, data:{title:'Collaborateurs'} },
-  { path:'agences',component:AgenceComponent },
+  { path:'agences',component:AgenceComponent, data:{title:'Agences'} },
-  { path: 'agences/:id', component: AgenceEditComponent },
+  { path: 'agences/:id', component: AgenceEditComponent, data:{title:'Agences'} },
-  { path:'businessunits',component:BusinessunitComponent },
+  { path:'businessunits',component:BusinessunitComponent, data:{title:'BusinessUnits'} },
-  { path: 'businessunits/:id', component: BusinessunitEditComponent },
+  { path: 'businessunits/:id', component: BusinessunitEditComponent, data:{title:'BusinessUnits'} },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -34,12 +34,6 @@
     font-weight: 600;
   }
 
-  .content {
-    display: flex;
-    margin: 60px ;
-    flex-direction: column;
-  }
-
   .terminal pre {
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
     color: white;
@@ -78,7 +72,7 @@
   </nav>
 </div>
 
-<div class="content" role="main">
+<div class="container" role="main">
 
   <router-outlet></router-outlet>
 

src/app/app.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component,OnInit } from '@angular/core';
+import {Title} from "@angular/platform-browser";
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { filter} from 'rxjs/operators';
 
 
 @Component({
@@ -6,5 +9,32 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit  {
+
+  constructor(private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private titleService: Title) {
+
+  }
+
+  ngOnInit() {
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+    ).subscribe(() => {
+      const rt = this.getChild(this.activatedRoute);
+      rt.data.subscribe(data => {
+        console.log(data);
+        this.titleService.setTitle(data.title)});
+    });
+  }
+
+  getChild(activatedRoute: ActivatedRoute):ActivatedRoute {
+    if (activatedRoute.firstChild) {
+      return this.getChild(activatedRoute.firstChild);
+    } else {
+      return activatedRoute;
+    }
+
+  }
+
 }

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule,Title } from '@angular/platform-browser';
 import {HttpClientModule} from "@angular/common/http";
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -37,7 +37,7 @@ import { BusinessunitDetailComponent } from './components/businessunit/businessu
     FormsModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [Title],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>CollaborateurEpaFront</title>
+  <title>Services Collaborateurs</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

src/ressources/routes/routes.ts

@@ -1,3 +1,3 @@
-export const collaborateursUrl = 'https://localhost:5001/api/collaborateurs';
+export const collaborateursUrl = 'https://localhost:8081/api/collaborateurs';
-export const agencesUrl = 'https://localhost:5001/api/agences';
+export const agencesUrl = 'https://localhost:8081/api/agences';
-export const businessunitsUrl = 'https://localhost:5001/api/businessunits';
+export const businessunitsUrl = 'https://localhost:8081/api/businessunits';