records ok

package.json

@@ -19,7 +19,11 @@
     "@angular/platform-browser-dynamic": "~13.1.0",
     "@angular/router": "~13.1.0",
     "@types/shelljs": "^0.8.11",
+    "angular-bootstrap-datetimepicker": "^4.0.2",
+    "bootstrap": "^5.1.3",
     "fs": "0.0.1-security",
+    "moment": "^2.29.1",
+    "open-iconic": "^1.1.1",
     "rxjs": "~7.4.0",
     "shelljs": "^0.8.5",
     "tslib": "^2.3.0",

src/app/app.module.ts

@@ -12,7 +12,6 @@ import { RecordDetailsComponent } from './record-details/record-details.componen
 import { HttpClientModule } from '@angular/common/http';
 
 
-
 @NgModule({
   declarations: [
     AppComponent,

src/app/channel-details/channel-details.component.ts

@@ -57,6 +57,7 @@ export class ChannelDetailsComponent implements OnInit {
 
   goBack(): void {
     this.location.back();
+    this.channelService.reloadComponent();
   }
 
   //Todo : corriger le goback apres update

src/app/channel-list/channel-list.component.ts

@@ -11,19 +11,23 @@ export class ChannelListComponent implements OnInit {
 
   channels = this.channelService.getChannels();
 
-  constructor(private channelService: ChannelService) { }
+  constructor(
+    private channelService: ChannelService
+
+  ) { }
 
   ngOnInit(): void { 
   }
 
   delete(channel: Channel) {
     if (channel) {
-      this.channelService.deleteChannel(channel.id).subscribe()
+      this.channelService.deleteChannel(channel.id).subscribe(() => this.channelService.reloadComponent());
     }
   }
 
   test_anthoApi () {
     console.log('On entre dans test_anthoapi');
+    this.channelService.reloadComponent();
   };
 
 

src/app/channel.service.ts

@@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { catchError, map, tap } from 'rxjs/operators';
 import { Channel } from './channel';
+import { Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
@@ -11,7 +12,11 @@ export class ChannelService {
 
   private channelUrl = 'https://recordantho.mysites.fr:3443/channel';  // URL to web api
 
-  constructor(private http: HttpClient) { }
+  constructor(
+    private http: HttpClient,
+    private router: Router
+  ) { }
+
   httpOptions = {
     headers: new HttpHeaders({ 'Content-Type': 'application/json' })
   };
@@ -48,6 +53,14 @@ export class ChannelService {
     return channels.length > 0 ? Math.max(...channels.map(channel => channel.id)) + 1 : 1;
   }
 
+  reloadComponent(){
+    let currentUrl = this.router.url;
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.router.navigate([currentUrl]);
+    console.log(`router.url : ${this.router.url}`)
+ }
+
 
   /**
    * Handle Http operation that failed.

src/app/record-details/record-details.component.html

@@ -63,7 +63,7 @@ <h3>Détails de l'enregistrement {{ record.name }}</h3>
           La fin de l'enregistrement est obligatoire
       </div>
     </div>
-
+    
     <div class="form-group">
       <label for="done">Terminé ? </label>
       <input type="checkbox" class="form-control "id="done"
@@ -81,6 +81,8 @@ <h3>Détails de l'enregistrement {{ record.name }}</h3>
     <button type="button" class="btn btn-default" (click)="goBack()">Retour</button>
     <button type="submit" class="btn btn-success" [disabled]="!recordForm.form.valid">Enregistrer</button>
     <button type="button" class="btn btn-default" (click)="recordForm.reset()">Réinitialiser</button>
-  </form>
+
+    </form>
   </div>
-</div>
+</div>
+

src/app/record-details/record-details.component.ts

@@ -7,7 +7,6 @@ import { Location } from '@angular/common';
 import { RecordService } from '../record.service';
 import { ChannelService } from '../channel.service';
 
-
 @Component({
   selector: 'app-record-details',
   templateUrl: './record-details.component.html',

src/app/record-list/record-list.component.ts

@@ -18,7 +18,7 @@ export class RecordListComponent implements OnInit {
 
   delete(record: Record) {
     if (record) {
-      this.recordService.deleteRecord(record.id).subscribe()
+      this.recordService.deleteRecord(record.id).subscribe(() => this.recordService.reloadComponent());
     }  
   }
 }

src/app/record.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { Record } from './record';
+import { Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
@@ -10,7 +11,11 @@ export class RecordService {
 
   private recordUrl = 'https://recordantho.mysites.fr:3443/record';  // URL to web api
 
-  constructor(private http: HttpClient) { }
+  constructor(
+    private http: HttpClient,
+    private router: Router
+  ) { }
+
   httpOptions = {
     headers: new HttpHeaders({ 'Content-Type': 'application/json' })
   };
@@ -38,6 +43,14 @@ export class RecordService {
     return this.http.delete(`${this.recordUrl}/delete/${idRecord}`, this.httpOptions)
   }
 
+  reloadComponent(){
+    let currentUrl = this.router.url;
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.router.navigate([currentUrl]);
+    console.log(`router.url : ${this.router.url}`)
+ }
+
   // méthode genId pour générer un id unique et incrémental lors de la création d'un enregistrement
   // Si le tableau est vide,
   // la méthode génère (1).

src/styles.css

@@ -1,2 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');
+/* @import '~bootstrap/dist/css/bootstrap.min.css';
+@import '~open-iconic/font/css/open-iconic-bootstrap.css'; */