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