From b11994e95d73cf95a52c6345f9be3ca4dea8c628 Mon Sep 17 00:00:00 2001 From: Anthony Date: Wed, 19 Jan 2022 17:51:48 +0100 Subject: [PATCH] Records ok --- src/app/app-routing.module.ts | 5 +- .../channel-details.component.ts | 22 +++---- .../channel-list/channel-list.component.html | 18 +---- .../channel-list/channel-list.component.ts | 17 +---- src/app/channel.service.ts | 10 +-- .../record-details.component.html | 12 +--- .../record-details.component.ts | 65 +++++++++++++++---- .../record-list/record-list.component.html | 18 +---- src/app/record-list/record-list.component.ts | 5 +- src/app/record.service.ts | 43 ++++++++---- 10 files changed, 111 insertions(+), 104 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 4e06df6..08d191d 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -7,12 +7,13 @@ import { RecordDetailsComponent } from './record-details/record-details.componen const routes: Routes = [ //Route par défaut - { path: '', redirectTo: '/channels', pathMatch: 'full' }, + { path: '', redirectTo: '/', pathMatch: 'full' }, { path: 'channels', component: ChannelListComponent }, - { path: 'records', component: RecordListComponent }, { path: 'channel/:id', component: ChannelDetailsComponent }, { path: 'channel/new', component: ChannelDetailsComponent }, + { path: 'records', component: RecordListComponent }, { path: 'record/:id', component: RecordDetailsComponent }, + { path: 'record/:new', component: RecordDetailsComponent }, ]; @NgModule({ diff --git a/src/app/channel-details/channel-details.component.ts b/src/app/channel-details/channel-details.component.ts index e4f7878..4130adf 100644 --- a/src/app/channel-details/channel-details.component.ts +++ b/src/app/channel-details/channel-details.component.ts @@ -13,7 +13,6 @@ import { ChannelService } from '../channel.service'; export class ChannelDetailsComponent implements OnInit { @Input() channel?: Channel; - // channel: Channel | undefined; submitted: boolean = false; // contexte : new ou update @@ -29,28 +28,25 @@ export class ChannelDetailsComponent implements OnInit { // D'abord on récupère l'id de la chaine depuis la route courante const routeParams = this.route.snapshot.paramMap; const channelIdFromRoute = routeParams.get('id'); - - console.log(`Le channelIdFromRoute vaut : ${channelIdFromRoute}`) // Puis on cherche la chaine correspondant à cet id if (channelIdFromRoute == "new") { - console.log(`On est dans une création de channel`) + // On est dans le contexte de création d'une chaîne this.context_mode = "new"; //test pour générer nouvel ID let localChannels: Channel[]; let localNb; - console.log('On entre dans le calcul du genid'); - this.channelService.getChannels().then(autreresultat=> { - localChannels = autreresultat; - console.log(`localChannels[0].name vaut : ${localChannels[0].name}`); - console.log(`localChannels.lenght vaut : ${localChannels.length}`); + //console.log('On entre dans le calcul du genid pour new channel'); + this.channelService.getChannels().then(resultat=> { + localChannels = resultat; localNb = this.channelService.genChannelId(localChannels); - console.log(`L'id récupéré vaut : ${localNb}`) - + //console.log(`L'id récupéré vaut : ${localNb}`) this.channel = {id: localNb, name: "", url: ""}; - })} + }) + } else { + // On est dans le contexte d'affichage / modification d'une chaîne existante this.channelService.getChannels().then(resultat=> { this.context_mode = "update"; @@ -68,9 +64,11 @@ export class ChannelDetailsComponent implements OnInit { this.submitted = true; if (this.channel) { if (this.context_mode == "update") { + // On est dans le contexte d'affichage / modification d'une chaîne existante this.channelService.updateChannel(this.channel).subscribe(() => this.goBack()); } else if (this.context_mode == "new") { + // On est dans le contexte de création d'une chaîne this.channelService.createChannel(this.channel).subscribe(() => this.goBack()); } } diff --git a/src/app/channel-list/channel-list.component.html b/src/app/channel-list/channel-list.component.html index 2e0cd79..dfc59b7 100644 --- a/src/app/channel-list/channel-list.component.html +++ b/src/app/channel-list/channel-list.component.html @@ -17,20 +17,4 @@

Liste des Chaînes

- - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/channel-list/channel-list.component.ts b/src/app/channel-list/channel-list.component.ts index 83630cf..3a9deaf 100644 --- a/src/app/channel-list/channel-list.component.ts +++ b/src/app/channel-list/channel-list.component.ts @@ -9,34 +9,19 @@ import { ChannelService } from '../channel.service'; }) export class ChannelListComponent implements OnInit { - //channel: Channel; channels = this.channelService.getChannels(); - channelstemp: Channel[]; - channelstempApi: Channel[]; constructor(private channelService: ChannelService) { } - ngOnInit(): void { - + ngOnInit(): void { } delete(channel: Channel) { - //console.log(`Appel de la fonction delete sur la chaîne dont l'id est : ${channel.id}`); if (channel) { this.channelService.deleteChannel(channel.id).subscribe() } } - newchannel () { - console.log('Appel de new channel dans channel list'); - this.channelService.getChannels().then(resultat=> { - this.channelstemp = resultat - }) - let nb = this.channelService.genChannelId(this.channelstemp) - console.log(`antho en direct dit : ${nb}`) - window.alert(`antho en direct dit : ${nb}`) - }; - test_anthoApi () { console.log('On entre dans test_anthoapi'); }; diff --git a/src/app/channel.service.ts b/src/app/channel.service.ts index 9435345..84c0731 100644 --- a/src/app/channel.service.ts +++ b/src/app/channel.service.ts @@ -39,11 +39,11 @@ export class ChannelService { return this.http.delete(`${this.channelUrl}/delete/${idChannel}`, this.httpOptions) } - // genId method to ensure that a channel always has an id. - // If the channel array is empty, - // the method below returns the initial number (1). - // if the channel array is not empty, the method below returns the highest - // channel id + 1. + // méthode genId pour générer un id unique et incrémental lors de la création d'une chaîne + // Si le tableau est vide, + // la méthode génère (1). + // Si le tableau n'est pas vide, la méthode génère l'idmax trouvé + 1 + genChannelId(channels: Channel[]): number { return channels.length > 0 ? Math.max(...channels.map(channel => channel.id)) + 1 : 1; } diff --git a/src/app/record-details/record-details.component.html b/src/app/record-details/record-details.component.html index ca4cccc..bd83f59 100644 --- a/src/app/record-details/record-details.component.html +++ b/src/app/record-details/record-details.component.html @@ -3,16 +3,8 @@

Détails de l'enregistrement {{ record.name }}

-
- - -
> - L'id est obligatoire -
+
+
diff --git a/src/app/record-details/record-details.component.ts b/src/app/record-details/record-details.component.ts index ca2f153..ed2c551 100644 --- a/src/app/record-details/record-details.component.ts +++ b/src/app/record-details/record-details.component.ts @@ -15,13 +15,13 @@ import { ChannelService } from '../channel.service'; }) export class RecordDetailsComponent implements OnInit { - record: Record ; - channel: Channel ; + @Input() record?: Record ; channels: Array ; - - submitted = false; + submitted: boolean = false; targetChannelid: number; + // contexte : new ou update + context_mode: string = ""; constructor( private route: ActivatedRoute, @@ -35,29 +35,68 @@ export class RecordDetailsComponent implements OnInit { const routeParams = this.route.snapshot.paramMap; const recordIdFromRoute = routeParams.get('id'); - // Puis on cherche la chaine correspondant à cet id - this.recordService.getRecords().then(resultat=> + // On charge les chaînes pour alimenter la combo des chaines + this.channelService.getChannels().then(resultat=> { - this.record = resultat.find(record => record.id === Number(recordIdFromRoute)) - this.targetChannelid = this.record.idch + this.channels = resultat }) - - this.channelService.getChannels().then(resultat=> + + // Puis on cherche la chaine correspondant à cet id + if (recordIdFromRoute == "new") { + // On est dans le contexte de création d'un enregistrement + this.context_mode = "new"; + //test pour générer nouvel ID + let localRecords: Record[]; + let localNb; + //console.log('On entre dans le calcul du genid pour new record'); + this.recordService.getRecords().then(resultat => { + localRecords = resultat; + localNb = this.recordService.genRecordId(localRecords); + //console.log(`L'id récupéré vaut : ${localNb}`); + this.record = {id: localNb, name: "", idch: null, namech: "", urlch: "", recbegin: "", recend: "", done: false, archived: false}; + }) + } + else + { + // On est dans le contexte d'affichage / modification d'un enregistrement existant + this.recordService.getRecords().then(resultat=> { - this.channels = resultat + this.context_mode = "update"; + this.record = resultat.find(record => record.id === Number(recordIdFromRoute)) + this.targetChannelid = this.record.idch + this.onChangeChannel(); }) - + } } goBack(): void { this.location.back(); } - onSubmit() { this.submitted = true; } + //Todo : corriger le goback apres update + onSubmit() { + this.submitted = true; + if (this.record) { + if (this.context_mode == "update") { + // On est dans le contexte d'affichage / modification d'un enregistrement existant + console.log(`mode update enreg`); + this.recordService.updateRecord(this.record).subscribe(() => this.goBack()); + } + else if (this.context_mode == "new") { + // On est dans le contexte de création d'un enregistrement + console.log(`mode new enreg`); + this.recordService.createRecord(this.record).subscribe(() => this.goBack); + } + else { + console.log(`mode autre enreg`); + } + } + } onChangeChannel() { const chosenChannel = this.channels.find((element: Channel)=>{return element.id==this.targetChannelid}); this.record.idch = chosenChannel.id + this.record.namech = chosenChannel.name this.record.urlch = chosenChannel.url } } diff --git a/src/app/record-list/record-list.component.html b/src/app/record-list/record-list.component.html index 74b83ba..72f8061 100644 --- a/src/app/record-list/record-list.component.html +++ b/src/app/record-list/record-list.component.html @@ -10,18 +10,6 @@

Liste des Enregistrements

- + \ No newline at end of file diff --git a/src/app/record-list/record-list.component.ts b/src/app/record-list/record-list.component.ts index 34b0d06..dd59944 100644 --- a/src/app/record-list/record-list.component.ts +++ b/src/app/record-list/record-list.component.ts @@ -17,7 +17,8 @@ export class RecordListComponent implements OnInit { } delete(record: Record) { - window.alert(`Appeler la fonction delete sur l'enregistrement dont l'id est : ${record.id}`); + if (record) { + this.recordService.deleteRecord(record.id).subscribe() + } } - } diff --git a/src/app/record.service.ts b/src/app/record.service.ts index 0213286..86d2e05 100644 --- a/src/app/record.service.ts +++ b/src/app/record.service.ts @@ -1,30 +1,49 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable, of } from 'rxjs'; import { Record } from './record'; -//import { writeFileSync, readFileSync } from 'fs'; -//import fs from 'fs'; @Injectable({ providedIn: 'root' }) export class RecordService { + private recordUrl = 'https://recordantho.mysites.fr:3443/record'; // URL to web api + constructor(private http: HttpClient) { } + httpOptions = { + headers: new HttpHeaders({ 'Content-Type': 'application/json' }) + }; + // Récupération de la liste des enregistrements getRecords():Promise > { return new Promise((resolve, reject)=> { - this.http.get>('/assets/records.json').subscribe(resultat=>{ resolve(resultat) }); + this.http.get>(`${this.recordUrl}/list`).subscribe(resultat=>{ resolve(resultat) }); }); } - updateJson(record: Record) { - this.getRecords().then(allRecords=>{ - allRecords[allRecords.findIndex(element=>{ - return element.id == record.id - })] = record - }) - //fs.writeFile('/assets/records.json', allRecords) - + // Création d'un enregistrement + createRecord(record: Record): Observable { + return this.http.post(`${this.recordUrl}/addrecord`, record, this.httpOptions) + } + + // Update d'un enregistrement + updateRecord(record: Record): Observable { + return this.http.put(`${this.recordUrl}/update`, record, this.httpOptions) + } + + // Suppression d'une chaîne + deleteRecord(idRecord: Number): Observable { + return this.http.delete(`${this.recordUrl}/delete/${idRecord}`, this.httpOptions) + } + + // 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). + // Si le tableau n'est pas vide, la méthode génère l'idmax trouvé + 1 + + genRecordId(records: Record[]): number { + return records.length > 0 ? Math.max(...records.map(record => record.id)) + 1 : 1; } }