update tag and add link Tag/script

src/app/add-script/add-script.component.html

@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <div class="w-full mt-2 sm:mt-0 sm:w-1/3 h-full rounded-lg overflow-hidden shadow-lg bg-white p-4 ">
+    <div class="w-full mt-2 sm:mt-0 sm:w-1/3 h-full rounded-lg shadow-lg bg-white p-4 ">
       <div class="text-xl font-bold pb-2 text-center">Informations du Script :</div>
       <div class="font-bold text-lg">Nom du Script :</div>
       <input type="text" class="block w-full my-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="nameOfFile" placeholder="Tapez ici...">
@@ -53,8 +53,19 @@
         <option [ngValue]="undefined" disabled>Sélectionner l'extension</option>
         <option *ngFor="let ext of listOfExtension" value="{{ ext }}">{{ ext }}</option>
       </select>
-
-      <button (click)="addScriptToCentral()" type="button" class="text-gray-900 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 rounded-lg px-4 py-2 text-center mr-2 mb-2">Ajouter le Script</button>
+      <div class="font-bold text-lg">Tags associés :</div>
+        <ng-multiselect-dropdown class="overflow-y-auto"
+  [placeholder]="'Selectionner les Tags'"
+  [settings]="dropdownSettings"
+  [data]="dropdownTagList"
+  [(ngModel)]="selectedTagList"
+  (onSelect)="onItemSelect($event)"
+  (onSelectAll)="onSelectAll($event)"
+  (onDeSelect)="onItemDeselect($event)"
+  (onDeSelectAll)="onDeselectAll($event)"
+>
+</ng-multiselect-dropdown>
+      <button (click)="addScriptToCentral()" type="button" class="text-gray-900 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 rounded-lg px-4 py-2 text-center mr-2 mb-2 mt-4">Ajouter le Script</button>
 
 
     </div>

src/app/add-script/add-script.component.ts

@@ -6,6 +6,8 @@ import { Observable, Subject } from 'rxjs';
 import { Script } from '../model/script';
 import { Router, RouterModule } from '@angular/router';
 import { ScriptService } from '../service/script.service';
+import { Tag } from '../model/tag';
+import { TagsService } from '../service/tags.service';
 
 @Component({
   selector: 'app-add-script',
@@ -22,17 +24,55 @@ export class AddScriptComponent {
   files: File[] = [];
   contentOfFiles: string[] = [];
   scriptToSend: Script | undefined;
+  dropdownTagList: Tag[] = [];
+  selectedTagList: Tag[] = [];
+  dropdownSettings = {};
+  linkId: number | undefined;
 
   constructor(
     private scriptService: ScriptService,
+    private tagService: TagsService,
     private router: Router,
     private matIconRegistry: MatIconRegistry,
     private domSanitizer: DomSanitizer){
       this.matIconRegistry.addSvgIcon('upload', this.domSanitizer.bypassSecurityTrustResourceUrl('../../assets/svg/upload.svg')),
       this.matIconRegistry.addSvgIcon('trash', this.domSanitizer.bypassSecurityTrustResourceUrl('../../assets/svg/trash.svg'))
+
+      const navigation = this.router.getCurrentNavigation();
+      if(navigation){
+        const state = navigation.extras.state as {
+          nextId: number
+        };
+        this.linkId = state.nextId;
+      }
+
     }
 
 
+  ngOnInit(): void{
+    this.retrieveTags();
+
+    this.dropdownSettings = {
+      singleSelection: false,
+      idField: "tagId",
+      textField: "nameTag",
+      selectAllText: "Tout Sélectionner",
+      unSelectAllText: "Déselectionner tout",
+      itemsShowLimit: 3,
+      allowSearchFilter: true
+    };
+  }
+
+  public retrieveTags(){
+    this.tagService.getAllTags().subscribe(
+      (response: Tag[]) => {
+        this.dropdownTagList = response;
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      });
+  }
+
   public isNewFile (){
     this.newFile = true;
   }
@@ -55,7 +95,6 @@ export class AddScriptComponent {
     for(const item of event){
       this.files.push(item);
     }
-    console.log(this.files)
   }
 
   public displayText(index: number){
@@ -79,14 +118,7 @@ export class AddScriptComponent {
  }
 
   public renderFileContent( value: string[] ) : void {
-    console.log(value)
-		//this.existingFileData = value;
     this.newFileData = value[0];
-    console.log(this.existingFileData)
-
-	}
-  public seeCont(){
-    console.log(this.newFileData)
 	}
 
   public formatBytes(bytes: number) {
@@ -101,7 +133,13 @@ export class AddScriptComponent {
   }
 
   public addScriptToCentral(){
-    if(this.nameOfExtension && this.nameOfFile && (this.existingFileData || this.newFileData)){
+    if(this.nameOfExtension && this.nameOfFile && this.linkId && this.selectedTagList && (this.existingFileData || this.newFileData)){
+
+      let listOfTags: String[] = []
+      this.selectedTagList.forEach(tag => {
+        listOfTags.push(tag.nameTag);
+      });
+
       const fullName = this.nameOfFile + "." + this.nameOfExtension;
       let tempData: String = "";
       if(this.newFile && this.newFileData){
@@ -114,7 +152,7 @@ export class AddScriptComponent {
         name: fullName,
         data: tempData,
       }
-      this.scriptService.addOneScript(this.scriptToSend).subscribe(
+      this.scriptService.addOneScript(this.scriptToSend, listOfTags, this.linkId).subscribe(
         () => {
           this.router.navigateByUrl('scriptmanagement');
         },
@@ -124,4 +162,21 @@ export class AddScriptComponent {
     }
   }
 
+  onItemSelect(item: any) {
+
+  }
+
+  onSelectAll(items: any) {
+    this.selectedTagList = items;
+
+  }
+
+  onItemDeselect(item: any){
+
+  }
+
+  onDeselectAll(items: any){
+    this.selectedTagList = [];
+  }
+
 }

src/app/edit-script/edit-script.component.html

@@ -13,7 +13,7 @@
       </div>
     </div>
 
-    <div class="w-full mt-2 sm:mt-0 sm:w-1/3 h-full rounded-lg overflow-hidden shadow-lg bg-white p-4 ">
+    <div class="w-full mt-2 sm:mt-0 sm:w-1/3 h-full rounded-lg shadow-lg bg-white p-4 ">
       <div class="text-xl font-bold pb-2 text-center">Informations du Script :</div>
       <div class="font-bold text-lg">Nom du Script :</div>
       <input [(ngModel)]="newName" type="text" class="block w-full my-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" placeholder="Tapez ici...">
@@ -23,7 +23,19 @@
         <option *ngFor="let ext of listOfExtension" value="{{ ext }}">{{ ext }}</option>
 
       </select>
-      <button (click)="editScript()" type="button" class="text-gray-900 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 rounded-lg px-4 py-2 text-center mr-2 mb-2">Modifier le Script</button>
+      <div class="font-bold text-lg">Tags associés :</div>
+      <ng-multiselect-dropdown class="overflow-y-auto"
+[placeholder]="'Selectionner les Tags'"
+[settings]="dropdownSettings"
+[data]="dropdownTagList"
+[(ngModel)]="selectedTagList"
+(onSelect)="onItemSelect($event)"
+(onSelectAll)="onSelectAll($event)"
+(onDeSelect)="onItemDeselect($event)"
+(onDeSelectAll)="onDeselectAll($event)"
+>
+</ng-multiselect-dropdown>
+      <button (click)="editScript()" type="button" class="text-gray-900 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 rounded-lg px-4 py-2 text-center mr-2 mb-2 mt-4">Modifier le Script</button>
     </div>
   </div>
 </div>

src/app/edit-script/edit-script.component.ts

@@ -2,6 +2,8 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { ScriptService } from '../service/script.service';
+import { Tag } from '../model/tag';
+import { TagsService } from '../service/tags.service';
 
 @Component({
   selector: 'app-edit-script',
@@ -13,32 +15,67 @@ export class EditScriptComponent {
   newName: String | undefined;
   newExtension: String | undefined;
   newData: String | undefined;
+  editedId: number | undefined;
   listOfExtension : String[] = ["sql", "ps1", "txt", "bat"];
+  dropdownTagList: Tag[] = [];
+  selectedTagList: Tag[] = [];
+  dropdownSettings = {};
 
   constructor(private router: Router,
-    private scriptService: ScriptService,){
+    private scriptService: ScriptService,
+    private tagService: TagsService,){
     const navigation = this.router.getCurrentNavigation();
     if(navigation){
       const state = navigation.extras.state as {
         name: string,
         extension: string,
-        data: string
+        data: string,
+        linkId: number,
+        tags: Tag[]
       };
       const splitString = state.name.split(".");
       this.defaultName = state.name;
       this.newName = splitString[0];
       this.newExtension = state.extension;
       this.newData = state.data;
-      console.log(this.defaultName, this.newData)
+      this.editedId = state.linkId;
+      this.selectedTagList = state.tags;
     }
   }
 
+  ngOnInit(): void{
+    this.retrieveTags();
+
+    this.dropdownSettings = {
+      singleSelection: false,
+      idField: "tagId",
+      textField: "nameTag",
+      selectAllText: "Tout Sélectionner",
+      unSelectAllText: "Déselectionner tout",
+      itemsShowLimit: 3,
+      allowSearchFilter: true
+    };
+  }
+
+  public retrieveTags(){
+    this.tagService.getAllTags().subscribe(
+      (response: Tag[]) => {
+        this.dropdownTagList = response;
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      });
+  }
+
   public editScript(){
-    if(this.newExtension && this.newName && this.newData && this.defaultName){
+    if(this.newExtension && this.editedId && this.newName && this.newData && this.defaultName){
       const fullName = this.newName + "." + this.newExtension;
-      console.log(this.defaultName, fullName, this.newData)
+      let listOfTags: String[] = []
+      this.selectedTagList.forEach(tag => {
+        listOfTags.push(tag.nameTag);
+      });
 
-      this.scriptService.editScript(this.newData, this.defaultName, fullName).subscribe(
+      this.scriptService.editScript(this.newData, this.defaultName, fullName, listOfTags, this.editedId).subscribe(
         () => {
           this.router.navigateByUrl('scriptmanagement');
         },
@@ -48,5 +85,22 @@ export class EditScriptComponent {
     }
   }
 
+  onItemSelect(item: any) {
+
+  }
+
+  onSelectAll(items: any) {
+    this.selectedTagList = items;
+
+  }
+
+  onItemDeselect(item: any){
+
+  }
+
+  onDeselectAll(items: any){
+    this.selectedTagList = [];
+  }
+
 
 }

src/app/model/link-script-tag.ts

@@ -0,0 +1,5 @@
+export interface LinkScriptTag {
+  id: number;
+  scriptName: String;
+  tags: String[];
+}

src/app/script-management/script-management.component.html

@@ -1,14 +1,15 @@
 <div class="max-w-full rounded-2xl overflow-hidden shadow-lg bg-white">
   <div class="m-2 grid grid-cols-12 gap-4 justify-items-center">
     <div class="col-span-3 my-auto ">
-      <button class="flex 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-4 rounded shadow m-2" (click)="getAllScripts()">Rafraichir</button>
+      <button class="flex 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-4 rounded shadow m-2" (click)="getAllScriptsWithTags(); getAllScripts()">Rafraichir</button>
+
     </div>
     <div class="col-span-6 my-auto text-2xl font-bold">
       || Gestionnaire de Scripts ||
     </div>
     <div class="col-span-3 my-auto flex">
       <a routerLink="/tagsmanagement" class="flex 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 dark:focus:ring-red-400 font-semibold py-2 px-4 rounded shadow m-2" >Gérer les Tags</a>
-      <a routerLink="/addscript" class="flex 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 dark:focus:ring-red-400 font-semibold py-2 px-4 rounded shadow m-2" >Ajouter un Script</a>
+      <button (click)="addScript()" class="flex 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 dark:focus:ring-red-400 font-semibold py-2 px-4 rounded shadow m-2" >Ajouter un Script</button>
 
     </div>
   </div>

src/app/script-management/script-management.component.ts

@@ -7,6 +7,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { Router, NavigationExtras } from '@angular/router';
 import { TagsService } from '../service/tags.service';
 import { Tag } from '../model/tag';
+import { LinkScriptTag } from '../model/link-script-tag';
 
 
 @Component({
@@ -18,6 +19,7 @@ export class ScriptManagementComponent implements OnInit {
   listScript: String[] = ['INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN'];
   textTo: String | undefined;
   allScripts: Script[] = [];
+  allLinksScriptTag: LinkScriptTag[]= [];
   filterScriptName: any;
   dropdownTagList: Tag[] = [];
   selectedTagList: Tag[] = [];
@@ -36,7 +38,7 @@ export class ScriptManagementComponent implements OnInit {
   }
 
   ngOnInit(): void{
-
+    this.getAllScriptsWithTags();
     this.getAllScripts();
     this.retrieveTags();
 
@@ -86,16 +88,44 @@ export class ScriptManagementComponent implements OnInit {
 
 
   public editScript(script: Script){
+    let linkId;
+    let editedTagList: Tag[] = [];
+    this.allLinksScriptTag.forEach((linkTag, i) => {
+      if(linkTag.scriptName == script.name){
+        linkId = linkTag.id;
+        editedTagList =  this.dropdownTagList.filter(dp => linkTag.tags.some(lt => lt === dp.nameTag));
+        console.log(this.dropdownTagList)
+
+      }
+    });
+    console.log(editedTagList)
     const navigationExtras: NavigationExtras = {
       state: {
         name: script.name,
         extension: script.extension,
-        data: script.data
+        data: script.data,
+        linkId: linkId,
+        tags: editedTagList
       }
     };
     this.router.navigate(['editscript'], navigationExtras);
+  }
+
+  public addScript(){
+    let remId;
+    if(this.allLinksScriptTag.length > 0){
+      remId = this.allLinksScriptTag[this.allLinksScriptTag.length - 1].id + 1;
+    } else {
+      remId = 1;
+    }
+    const navigationExtras: NavigationExtras = {
+      state: {
+        nextId: remId
 
       }
+    };
+    this.router.navigate(['addscript'], navigationExtras);
+  }
 
   public getAllScripts(){
     this.scriptService.retreiveScripts().subscribe(
@@ -108,6 +138,18 @@ export class ScriptManagementComponent implements OnInit {
     );
   }
 
+  public getAllScriptsWithTags(){
+    this.scriptService.getAllScriptsWithTags().subscribe(
+      (response : LinkScriptTag[]) => {
+        this.allLinksScriptTag = response;
+        console.log(this.allLinksScriptTag)
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
   public deleteSpecifiedScript(name: String){
     if(window.confirm('Êtes-vous sûr de vouloir supprimer ce Script ?')){
       this.scriptService.deleteScript(name).subscribe(

src/app/service/script.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { environment } from '../../environments/environment.development';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, from } from 'rxjs';
 import { Script } from '../model/script';
+import { LinkScriptTag } from '../model/link-script-tag';
 
 @Injectable({
   providedIn: 'root'
@@ -16,17 +17,21 @@ export class ScriptService {
     return this.http.get<Script[]>(`${this.apiServerUrl}/api/scripts`);
   }
 
+  public getAllScriptsWithTags(): Observable<LinkScriptTag[]>{
+    return this.http.get<LinkScriptTag[]>(`${this.apiServerUrl}/api/scripts/link`);
+  }
+
   public deleteScript(name: String){
     return this.http.delete<void>(`${this.apiServerUrl}/api/script/delete/${name}`);
   }
 
-  public addOneScript(script: Script){
-    const paramsAddScript = new HttpParams().set('content', script.data.toString()).set('name', script.name.toString());
+  public addOneScript(script: Script, tagList: String[], id: number){
+    const paramsAddScript = new HttpParams().set('content', script.data.toString()).set('name', script.name.toString()).set('tagList', tagList.join(', ')).set('linkid', id);
     return this.http.get<void>(`${this.apiServerUrl}/api/script/add`, {params: paramsAddScript});
   }
 
-  public editScript(content: String, defaultName: String, newName: String){
-    const paramsAddScript = new HttpParams().set('content', content.toString()).set('defaultname', defaultName.toString()).set('newname', newName.toString());
+  public editScript(content: String, defaultName: String, newName: String, tagList: String[], id: number){
+    const paramsAddScript = new HttpParams().set('content', content.toString()).set('defaultname', defaultName.toString()).set('newname', newName.toString()).set('tagList', tagList.join(', ')).set('linkid', id);
     return this.http.get<void>(`${this.apiServerUrl}/api/script/edit`, {params: paramsAddScript});
   }
 }

src/app/tags-management/tags-management.component.ts

@@ -30,7 +30,6 @@ export class TagsManagementComponent implements OnInit{
   public retrieveTags(){
     this.tagService.getAllTags().subscribe(
       (response: Tag[]) => {
-        console.log(response)
         this.allTags = response;
       },
       (error: HttpErrorResponse) => {
@@ -60,14 +59,12 @@ export class TagsManagementComponent implements OnInit{
   }
 
   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;
@@ -98,7 +95,6 @@ export class TagsManagementComponent implements OnInit{
     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)