floxx2112
2 years ago
parent
1eb347b5f8
commit
fbee9b6857
@ -0,0 +1,5 @@ |
|||||||
|
export interface Tag { |
||||||
|
tagId: number; |
||||||
|
nameTag: string; |
||||||
|
descriptionTag: string; |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { environment } from '../../environments/environment.development'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { Observable } from 'rxjs'; |
||||||
|
import { Tag } from '../model/tag'; |
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class TagsService { |
||||||
|
private apiServerUrl = environment.apiBaseUrl; |
||||||
|
|
||||||
|
constructor(private http: HttpClient) { } |
||||||
|
|
||||||
|
public addTag(tag: Tag){ |
||||||
|
return this.http.post<void>(`${this.apiServerUrl}/api/tag/add`, tag); |
||||||
|
} |
||||||
|
|
||||||
|
public updateTag(prevName: string, tag: Tag){ |
||||||
|
return this.http.put<void>(`${this.apiServerUrl}/api/tag/update/${prevName}`, tag); |
||||||
|
} |
||||||
|
|
||||||
|
public getTag(tagId: Number): Observable<Tag>{ |
||||||
|
return this.http.get<Tag>(`${this.apiServerUrl}/api/tag/${tagId}`); |
||||||
|
} |
||||||
|
|
||||||
|
public getAllTags(): Observable<Tag[]>{ |
||||||
|
return this.http.get<Tag[]>(`${this.apiServerUrl}/api/tags/all`); |
||||||
|
} |
||||||
|
|
||||||
|
public deleteTag(tagName: String){ |
||||||
|
return this.http.delete<void>(`${this.apiServerUrl}/api/tag/delete/${tagName}`); |
||||||
|
} |
||||||
|
|
||||||
|
public deleteAllTags(){ |
||||||
|
return this.http.delete<void>(`${this.apiServerUrl}/api/tags/deleteAll`); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
<div class="my-4"> |
||||||
|
<div class="text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 "> |
||||||
|
<div class="text-2xl font-bold">Gestion des Tags</div> |
||||||
|
<div class="grid grid-cols-3 gap-4 mt-2"> |
||||||
|
<button class="text-black bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 font-semibold py-2 px-2 rounded shadow mx-2" (click)="addPress = !addPress">Ajouter un Tag</button> |
||||||
|
<input [(ngModel)]="filterTag" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Rechercher..."> |
||||||
|
<button class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-semibold py-2 px- rounded shadow mx-2" (click)="deleteAllTags()" disabled>Supprimer tous les Tags</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="addPress"> |
||||||
|
<div class="bg-orange-400 w-full h-2 overflow-hidden my-4 rounded-lg"></div> |
||||||
|
<div class="grid grid-cols-2 gap-4"> |
||||||
|
<div> |
||||||
|
<div class="text-lg font-semibold">Nom du Tag : </div> |
||||||
|
<input [(ngModel)]="nameOfTag" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Taper le nom ici..."> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="text-lg font-semibold">Description du Tag : </div> |
||||||
|
<input [(ngModel)]="descOfTag" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Taper la description ici..."> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-semibold py-2 px-2 rounded shadow mx-2 mt-4" (click)="addTag()">Valider</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="bg-orange-400 w-full h-2 overflow-hidden my-4 rounded-lg"></div> |
||||||
|
|
||||||
|
<div *ngIf="modifyPress"> |
||||||
|
<div class="grid grid-cols-2 gap-4"> |
||||||
|
<div> |
||||||
|
<div class="text-lg font-semibold">Nom du Tag : </div> |
||||||
|
<div>{{ previousName }}</div> |
||||||
|
<div class="text-lg font-semibold">Nouveau nom : </div> |
||||||
|
<input [(ngModel)]="modifyName" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Taper le nom ici..."> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="text-lg font-semibold">Description du Tag : </div> |
||||||
|
<div>{{ previousDesc }}</div> |
||||||
|
<div class="text-lg font-semibold">Nouvelle description : </div> |
||||||
|
<input [(ngModel)]="modifyDesc" type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Taper la description ici..."> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-semibold py-2 px-2 rounded shadow mx-2 my-4" (click)="modifyTag()">Valider</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="grid grid-cols-4 gap-4"> |
||||||
|
<div *ngFor="let tag of allTags | filter: filterTag" class="rounded-2xl overflow-hidden shadow-lg bg-slate-800 p-2"> |
||||||
|
<div class="text-white font-bold">Nom du Tag : {{ tag.nameTag }}</div> |
||||||
|
<div class="text-white">{{ tag.descriptionTag }}</div> |
||||||
|
<div class="flex justify-between my-2"> |
||||||
|
<button class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold py-2 px-2 rounded shadow mx-2" (click)="pressModifyBtn(tag.tagId, tag.nameTag, tag.descriptionTag)">Modifier</button> |
||||||
|
<button class="text-black bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 font-semibold py-2 px-2 rounded shadow mx-2" (click)="deleleTag(tag)">Supprimer</button> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,119 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { TagsService } from '../service/tags.service'; |
||||||
|
import { HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import { Tag } from '../model/tag'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-tags-management', |
||||||
|
templateUrl: './tags-management.component.html', |
||||||
|
styleUrls: ['./tags-management.component.scss'] |
||||||
|
}) |
||||||
|
export class TagsManagementComponent implements OnInit{ |
||||||
|
allTags: Tag[]= []; |
||||||
|
filterTag: any; |
||||||
|
nameOfTag: string | undefined; |
||||||
|
descOfTag: string | undefined; |
||||||
|
addPress: boolean = false; |
||||||
|
modifyPress: boolean = false; |
||||||
|
previousId: number | undefined |
||||||
|
previousName: String | undefined; |
||||||
|
previousDesc: String | undefined; |
||||||
|
modifyName: string | undefined; |
||||||
|
modifyDesc: string | undefined; |
||||||
|
|
||||||
|
constructor(private tagService: TagsService){} |
||||||
|
|
||||||
|
ngOnInit(): void{ |
||||||
|
this.retrieveTags(); |
||||||
|
} |
||||||
|
|
||||||
|
public retrieveTags(){ |
||||||
|
this.tagService.getAllTags().subscribe( |
||||||
|
(response: Tag[]) => { |
||||||
|
console.log(response) |
||||||
|
this.allTags = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
public addTag(){ |
||||||
|
if(this.nameOfTag && this.descOfTag){ |
||||||
|
|
||||||
|
let tag: Tag = { |
||||||
|
tagId: this.allTags[this.allTags.length - 1].tagId + 1, |
||||||
|
nameTag: this.nameOfTag, |
||||||
|
descriptionTag: this.descOfTag |
||||||
|
} |
||||||
|
this.tagService.addTag(tag).subscribe( |
||||||
|
() => { |
||||||
|
this.addPress = false; |
||||||
|
this.nameOfTag =undefined; |
||||||
|
this.descOfTag = undefined; |
||||||
|
this.retrieveTags(); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public modifyTag(){ |
||||||
|
console.log(this.previousId, this.previousName, this.previousDesc, this.modifyName, this.modifyDesc) |
||||||
|
if(this.previousName && this.previousDesc && this.previousId && this.modifyName && this.modifyDesc){ |
||||||
|
let modifyTag: Tag = { |
||||||
|
tagId: this.previousId, |
||||||
|
nameTag: this.modifyName.toString(), |
||||||
|
descriptionTag: this.modifyDesc.toString() |
||||||
|
} |
||||||
|
console.log(this.previousName, modifyTag) |
||||||
|
this.tagService.updateTag(this.previousName.toString(), modifyTag).subscribe( |
||||||
|
() => { |
||||||
|
this.modifyPress = false; |
||||||
|
this.previousId = undefined; |
||||||
|
this.previousName = undefined; |
||||||
|
this.previousDesc = undefined; |
||||||
|
this.modifyName = undefined; |
||||||
|
this.modifyDesc = undefined; |
||||||
|
this.retrieveTags(); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public deleleTag(tag: Tag){ |
||||||
|
this.tagService.deleteTag(tag.nameTag).subscribe( |
||||||
|
() => { |
||||||
|
this.retrieveTags(); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
public deleteAllTags(){ |
||||||
|
if(window.confirm('Êtes-vous sûr de vouloir supprimer tous les tags ?')){ |
||||||
|
this.tagService.deleteAllTags().subscribe( |
||||||
|
() => { |
||||||
|
console.log("c supp") |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public pressModifyBtn(id: number, name: string, desc: string){ |
||||||
|
this.previousId = id; |
||||||
|
this.previousName = name; |
||||||
|
this.previousDesc = desc; |
||||||
|
this.modifyName = name; |
||||||
|
this.modifyDesc = desc; |
||||||
|
this.modifyPress = !this.modifyPress; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue