diff --git a/package-lock.json b/package-lock.json index 774f9ef..59b8765 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@angular/router": "^15.1.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", + "ng-multiselect-dropdown": "^0.3.9", "ng2-search-filter": "^0.5.1", "ngx-dropzone": "^3.1.0", "rxjs": "~7.8.0", @@ -8834,6 +8835,23 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ng-multiselect-dropdown": { + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/ng-multiselect-dropdown/-/ng-multiselect-dropdown-0.3.9.tgz", + "integrity": "sha512-y5fb8SVz8c59vEJGVe5XZ5ov6LZNoO8FqMxCBvpZKqw9tY1+f7UCDfILleOWPy8QMxO2Fpr8b+B+Az0zOS6b9g==", + "dependencies": { + "tslib": "^1.9.0" + }, + "peerDependencies": { + "@angular/common": ">=2.0.0", + "@angular/core": ">=2.0.0" + } + }, + "node_modules/ng-multiselect-dropdown/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/ng2-search-filter": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/ng2-search-filter/-/ng2-search-filter-0.5.1.tgz", diff --git a/package.json b/package.json index 2e062ef..d9d7bef 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@angular/router": "^15.1.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", + "ng-multiselect-dropdown": "^0.3.9", "ng2-search-filter": "^0.5.1", "ngx-dropzone": "^3.1.0", "rxjs": "~7.8.0", diff --git a/src/app/add-script/add-script.component.ts b/src/app/add-script/add-script.component.ts index e1e86a8..93b51e6 100644 --- a/src/app/add-script/add-script.component.ts +++ b/src/app/add-script/add-script.component.ts @@ -50,7 +50,7 @@ export class AddScriptComponent { public onFileDropped(event: any){ this.readFile(event[0]).subscribe((output) => { - this.newFileData = output; + this.existingFileData = output; }) for(const item of event){ this.files.push(item); @@ -60,7 +60,7 @@ export class AddScriptComponent { public displayText(index: number){ this.readFile(this.files[index]).subscribe((output) => { - this.newFileData = output; + this.existingFileData = output; }) } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 8d03d69..ef999ce 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,6 +8,7 @@ import { CreateJoinsPageComponent } from './create-joins-page/create-joins-page. import { ScriptManagementComponent } from './script-management/script-management.component'; import { AddScriptComponent } from './add-script/add-script.component'; import { EditScriptComponent } from './edit-script/edit-script.component'; +import { TagsManagementComponent } from './tags-management/tags-management.component'; const routes: Routes = [ { path: 'schematab', component: SchemasTabComponent }, @@ -18,6 +19,7 @@ const routes: Routes = [ { path: 'scriptmanagement', component: ScriptManagementComponent }, { path: 'addscript', component: AddScriptComponent}, { path: 'editscript', component: EditScriptComponent}, + { path: 'tagsmanagement', component: TagsManagementComponent}, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 76a3fcd..d183762 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -28,6 +28,9 @@ import { AddScriptComponent } from './add-script/add-script.component'; import { DndDirective } from './directives/dnd.directive' import { CustomFilterScript } from 'src/CustomFilterScript'; import { EditScriptComponent } from './edit-script/edit-script.component'; +import { TagsManagementComponent } from './tags-management/tags-management.component'; +import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; + @NgModule({ declarations: [ @@ -46,7 +49,8 @@ import { EditScriptComponent } from './edit-script/edit-script.component'; ScriptManagementComponent, AddScriptComponent, DndDirective, - EditScriptComponent + EditScriptComponent, + TagsManagementComponent, ], imports: [ BrowserModule, @@ -58,7 +62,8 @@ import { EditScriptComponent } from './edit-script/edit-script.component'; MatIconModule, FormsModule, MatDialogModule, - MatProgressSpinnerModule + MatProgressSpinnerModule, + NgMultiSelectDropDownModule ], providers: [EmployeeService], diff --git a/src/app/model/tag.ts b/src/app/model/tag.ts new file mode 100644 index 0000000..bee2926 --- /dev/null +++ b/src/app/model/tag.ts @@ -0,0 +1,5 @@ +export interface Tag { + tagId: number; + nameTag: string; + descriptionTag: string; +} diff --git a/src/app/script-management/script-management.component.html b/src/app/script-management/script-management.component.html index 7340e24..c8dd08a 100644 --- a/src/app/script-management/script-management.component.html +++ b/src/app/script-management/script-management.component.html @@ -1,12 +1,13 @@
-
-
+
+
|| Gestionnaire de Scripts ||
-
+
+ Gérer les Tags Ajouter un Script
@@ -17,7 +18,21 @@
- + + +
+
+ +
diff --git a/src/app/script-management/script-management.component.ts b/src/app/script-management/script-management.component.ts index 2e1c8c3..41574b1 100644 --- a/src/app/script-management/script-management.component.ts +++ b/src/app/script-management/script-management.component.ts @@ -5,6 +5,8 @@ import { Script } from '../model/script'; import { MatIconRegistry } from '@angular/material/icon'; import { DomSanitizer } from '@angular/platform-browser'; import { Router, NavigationExtras } from '@angular/router'; +import { TagsService } from '../service/tags.service'; +import { Tag } from '../model/tag'; @Component({ @@ -17,9 +19,13 @@ export class ScriptManagementComponent implements OnInit { textTo: String | undefined; allScripts: Script[] = []; filterScriptName: any; + dropdownTagList: Tag[] = []; + selectedTagList: Tag[] = []; + dropdownSettings = {}; constructor( private router: Router, + private tagService: TagsService, private scriptService: ScriptService, private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer @@ -30,7 +36,19 @@ export class ScriptManagementComponent implements OnInit { } ngOnInit(): void{ + this.getAllScripts(); + this.retrieveTags(); + + this.dropdownSettings = { + singleSelection: false, + idField: "tagId", + textField: "nameTag", + selectAllText: "Tout Sélectionner", + unSelectAllText: "Déselectionner tout", + itemsShowLimit: 3, + allowSearchFilter: true + }; } public displayText(text: String){ @@ -39,6 +57,34 @@ export class ScriptManagementComponent implements OnInit { } } + public retrieveTags(){ + this.tagService.getAllTags().subscribe( + (response: Tag[]) => { + this.dropdownTagList = response; + }, + (error: HttpErrorResponse) => { + alert(error.message) + }); + } + + onItemSelect(item: any) { + + } + + onSelectAll(items: any) { + this.selectedTagList = items; + + } + + onItemDeselect(item: any){ + + } + + onDeselectAll(items: any){ + this.selectedTagList = []; + } + + public editScript(script: Script){ const navigationExtras: NavigationExtras = { state: { diff --git a/src/app/service/tags.service.ts b/src/app/service/tags.service.ts new file mode 100644 index 0000000..f9555e4 --- /dev/null +++ b/src/app/service/tags.service.ts @@ -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(`${this.apiServerUrl}/api/tag/add`, tag); + } + + public updateTag(prevName: string, tag: Tag){ + return this.http.put(`${this.apiServerUrl}/api/tag/update/${prevName}`, tag); + } + + public getTag(tagId: Number): Observable{ + return this.http.get(`${this.apiServerUrl}/api/tag/${tagId}`); + } + + public getAllTags(): Observable{ + return this.http.get(`${this.apiServerUrl}/api/tags/all`); + } + + public deleteTag(tagName: String){ + return this.http.delete(`${this.apiServerUrl}/api/tag/delete/${tagName}`); + } + + public deleteAllTags(){ + return this.http.delete(`${this.apiServerUrl}/api/tags/deleteAll`); + } +} diff --git a/src/app/tags-management/tags-management.component.html b/src/app/tags-management/tags-management.component.html new file mode 100644 index 0000000..bb9552a --- /dev/null +++ b/src/app/tags-management/tags-management.component.html @@ -0,0 +1,61 @@ +
+
+
Gestion des Tags
+
+ + + +
+ +
+
+
+
+
Nom du Tag :
+ +
+
+
Description du Tag :
+ +
+
+ +
+ +
+ +
+
+
+
Nom du Tag :
+
{{ previousName }}
+
Nouveau nom :
+ +
+
+
Description du Tag :
+
{{ previousDesc }}
+
Nouvelle description :
+ +
+
+ +
+ +
+
+
Nom du Tag : {{ tag.nameTag }}
+
{{ tag.descriptionTag }}
+
+ + + +
+ + +
+
+
+
+ + diff --git a/src/app/tags-management/tags-management.component.scss b/src/app/tags-management/tags-management.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/tags-management/tags-management.component.ts b/src/app/tags-management/tags-management.component.ts new file mode 100644 index 0000000..6557126 --- /dev/null +++ b/src/app/tags-management/tags-management.component.ts @@ -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; + } + +}