From 5d2a682744da64f56cd8af9f4de58bd360da15e3 Mon Sep 17 00:00:00 2001
From: floxx2112 <florian1.hibert@orange.fr>
Date: Thu, 8 Jun 2023 14:35:37 +0200
Subject: [PATCH] little adjustement and opti

---
 src/app/add-script/add-script.component.html  |  4 +-
 src/app/app.module.ts                         |  5 +-
 .../create-joins-page.component.html          | 20 +++++---
 .../create-joins-page.component.ts            | 46 +++++++++++++++++--
 src/app/joins-page/joins-page.component.html  | 11 ++++-
 src/app/joins-page/joins-page.component.ts    | 23 ++--------
 .../landing-page/landing-page.component.html  | 19 ++++++--
 src/app/navbar/navbar.component.html          |  8 ++--
 src/app/navbar/navbar.component.scss          |  4 ++
 src/app/navbar/navbar.component.ts            |  2 +-
 .../request-page/request-page.component.html  |  4 +-
 .../request-page/request-page.component.ts    |  1 +
 .../script-management.component.html          | 19 ++++++++
 .../script-management.component.ts            |  5 +-
 src/assets/svg/copy.svg                       |  1 +
 15 files changed, 126 insertions(+), 46 deletions(-)
 create mode 100644 src/assets/svg/copy.svg

diff --git a/src/app/add-script/add-script.component.html b/src/app/add-script/add-script.component.html
index c11564b..42aef71 100644
--- a/src/app/add-script/add-script.component.html
+++ b/src/app/add-script/add-script.component.html
@@ -4,13 +4,13 @@
     <div class="w-full sm:w-2/3 h-full text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 ">
       <div class="flex">
         <button (click)="isNewFile()" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 font-semibold py-2 px-4 rounded shadow m-2" >Nouveau</button>
-        <button (click)="isExistingFile()" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 font-semibold py-2 px-4 rounded shadow m-2" >Fichier Éxistant</button>
+        <button (click)="isExistingFile()" class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 font-semibold py-2 px-4 rounded shadow m-2" >Fichier Existant</button>
       </div>
       <div class="rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2">
         <div class="p-4">
 
           <div *ngIf="newFile">
-            <div class="font-bold text-xl text-left mb-2">Vueillez rentrer le contenu du Script : </div>
+            <div class="font-bold text-xl text-left mb-2">Veuillez rentrer le contenu du Script : </div>
             <textarea [(ngModel)]="newFileData" rows="20" class="block p-2.5 w-full text-sm rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-orange-400 focus:border-orange-400">
 </textarea>
           </div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7306175..8815cab 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,6 +31,8 @@ import { EditScriptComponent } from './edit-script/edit-script.component';
 import { TagsManagementComponent } from './tags-management/tags-management.component';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
+import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
+
 
 
 @NgModule({
@@ -65,7 +67,8 @@ import { CdkAccordionModule } from '@angular/cdk/accordion';
     MatDialogModule,
     MatProgressSpinnerModule,
     NgMultiSelectDropDownModule,
-    CdkAccordionModule
+    CdkAccordionModule,
+    ClipboardModule
 
   ],
   providers: [EmployeeService],
diff --git a/src/app/create-joins-page/create-joins-page.component.html b/src/app/create-joins-page/create-joins-page.component.html
index 6f5a16a..7511cb6 100644
--- a/src/app/create-joins-page/create-joins-page.component.html
+++ b/src/app/create-joins-page/create-joins-page.component.html
@@ -18,7 +18,8 @@
               </div>
 
               <div *ngIf="tablesByBaseSchema" class="mt-2">
-                <label class="text-black text-left">Tables : </label>
+                <label *ngIf="!isChecked" class="text-black text-left">Tables : </label>
+                <label *ngIf="isChecked" class="text-black text-left">Tables et Vues : </label>
                 <input 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" [(ngModel)]="filterBaseTables" placeholder="Rechercher...">
 
                 <select [(ngModel)]="baseTableData" (change)="getNameBaseTable()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5">
@@ -65,17 +66,24 @@
       </div>
 
       <div class="sticky top-20 w-full mt-2 sm:mt-0 sm:w-1/3 h-full text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 ">
-        <div class="text-xl font-bold pb-2">Résultat de la requête :</div>
-        <div class="rounded-lg overflow-hidden shadow-lg bg-slate-900 text-white text-left pl-2">
+        <div class="flex justify-between mb-2">
+          <div class="text-xl font-bold">Résultat de la requête :</div>
+          <mat-icon [cdkCopyToClipboard]="newRequestData" class="text-green-400 ml-2 hover:cursor-pointer" svgIcon="copy"></mat-icon>
+        </div>
+
+        <!-- <textarea [(ngModel)]="newRequestData" rows="20" class="block p-2.5 w-full text-sm rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-orange-400 focus:border-orange-400">
+
+        </textarea> -->
 
-          <div>SELECT * FROM {{baseSchema}}.{{baseTableName}} AS {{baseTableNameLowerCase}}</div>
+        <div class="rounded-lg overflow-hidden shadow-lg bg-slate-900 text-white text-left pl-2">{{newRequestData}}
+
+          <!-- <div>SELECT * FROM {{baseSchema}}.{{baseTableName}} AS {{baseTableNameLowerCase}}</div>
           <div *ngFor="let join of allData, index as i">{{join.joinSpec}} {{join.specificSchema}}.{{join.specificTable}} AS {{join.aliasSpecificTable}}
             <div *ngFor="let allCol of allData[i].columns, index as in">
               {{allCol.operator}} {{join.baseAlias}}.{{allCol.aliasColumn}}={{join.aliasSpecificTable}}.{{allCol.specColumn}}
             </div>
-
           </div>
-          <div *ngFor="let cond of conditionData">{{ cond.operator }} {{ cond.alias }}.{{ cond.column }} {{ cond.condition }} {{ cond.value }}</div>
+          <div *ngFor="let cond of conditionData">{{ cond.operator }} {{ cond.alias }}.{{ cond.column }} {{ cond.condition }} {{ cond.value }}</div> -->
 
         </div>
       </div>
diff --git a/src/app/create-joins-page/create-joins-page.component.ts b/src/app/create-joins-page/create-joins-page.component.ts
index 6cdb605..6958bd0 100644
--- a/src/app/create-joins-page/create-joins-page.component.ts
+++ b/src/app/create-joins-page/create-joins-page.component.ts
@@ -10,6 +10,9 @@ import { Alias } from '../model/alias';
 import { WhereCardComponent } from '../where-card/where-card.component';
 import { Condition } from '../model/condition';
 import { ColumnData } from '../model/column-data';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-create-joins-page',
@@ -42,12 +45,19 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
   passTable: String = "";
   baseAlias: Alias | undefined;
   memoAlias: Alias | undefined;
-  conditionData: Condition[] = []
+  conditionData: Condition[] = [];
+  newRequestData: string = "SELECT * FROM";
 
   constructor(
     private infoColumnService: InfoColumnService,
-    private infoTableService: InfoTableService
-    ){}
+    private infoTableService: InfoTableService,
+    private clipboard: ClipboardModule,
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer
+    ){
+      this.matIconRegistry.addSvgIcon('copy', this.domSanitizer.bypassSecurityTrustResourceUrl('../../assets/svg/copy.svg'))
+
+    }
 
     ngAfterViewInit(): void {
     }
@@ -57,6 +67,29 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
       this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService));
     }
 
+    public refreshRequestData(){
+      this.newRequestData = "SELECT * FROM";
+      this.newRequestData += ` ${this.baseSchema}.${this.baseTableName} AS ${this.baseTableNameLowerCase}`;
+
+      for (let i = 0; i < this.allData.length; i++) {
+        const join: Join = this.allData[i];
+        this.newRequestData += `
+          ${join.joinSpec} ${join.specificSchema}.${join.specificTable} AS ${join.aliasSpecificTable}`;
+
+        for (let j = 0; j < join.columns.length; j++) {
+          const allCol = join.columns[j];
+          this.newRequestData += `
+          ${allCol.operator} ${join.baseAlias}.${allCol.aliasColumn}=${join.aliasSpecificTable}.${allCol.specColumn}`;
+        }
+      }
+
+      for (let i = 0; i < this.conditionData.length; i++) {
+        const cond: Condition = this.conditionData[i];
+        this.newRequestData += `
+        ${cond.operator} ${cond.alias}.${cond.column} ${cond.condition} ${cond.value}`;
+      }
+    }
+
     public getSchemas():void {
       this.infoTableService.getSchemas().subscribe(
         (response : String[]) => {
@@ -74,6 +107,7 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
         (response : InfoTable[]) => {
           this.tablesByBaseSchemaAll = response;
           this.divideTablesAndViews();
+          this.refreshRequestData();
         },
         (error: HttpErrorResponse) => {
           alert(error.message)
@@ -125,6 +159,7 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
         this.aliasData.shift();
         this.aliasData.unshift(this.baseAlias);
       }
+      this.refreshRequestData();
     }
 
     public addTable(){
@@ -196,6 +231,7 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
       }
       this.checkLength();
       this.aliasData = [...this.aliasData]
+      this.refreshRequestData();
     }
 
     public checkLength(){
@@ -374,7 +410,7 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
         });
       }
       this.aliasData = [...this.aliasData];
-
+      this.refreshRequestData();
     }
 
     public removeWhereCard(i: number){
@@ -385,6 +421,7 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
       if(this.conditionData[0]){
         this.conditionData[0].operator = "WHERE";
       }
+      this.refreshRequestData();
     }
 
     public getConditionData(event: String[], index: number){
@@ -400,6 +437,7 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
       } else {
         this.conditionData.push(tempCondition);
       }
+      this.refreshRequestData();
     }
 
     public checkValue(event: any){
diff --git a/src/app/joins-page/joins-page.component.html b/src/app/joins-page/joins-page.component.html
index 81ed982..a417d6b 100644
--- a/src/app/joins-page/joins-page.component.html
+++ b/src/app/joins-page/joins-page.component.html
@@ -57,7 +57,16 @@
   </div>
 </div>
 
-<div *ngIf="columnIsFull" class="my-4 grid grid-cols-1 sm:grid-cols-4 gap-5">
+<div *ngIf="!columnIsFull && infoColumn" class="my-4 grid grid-cols-1 sm:grid-cols-4 gap-5">
+  <!--Card-->
+    <div class="sm:col-start-2 sm:col-span-2 rounded-lg overflow-hidden shadow-lg bg-white">
+      <div  class="px-6 p-4 text-center">
+        <label class="text-red-600">ATTENTION : Il n'y a pas de colonnes en commun entre les deux tables sélectionnées.</label>
+      </div>
+    </div>
+</div>
+
+<div *ngIf="columnIsFull && infoColumn" class="my-4 grid grid-cols-1 sm:grid-cols-4 gap-5">
   <!--Card-->
     <div class="sm:col-start-2 sm:col-span-2 rounded-lg overflow-hidden shadow-lg bg-white">
       <div  class="px-6 pt-4 ">
diff --git a/src/app/joins-page/joins-page.component.ts b/src/app/joins-page/joins-page.component.ts
index 9e9b50d..53df43e 100644
--- a/src/app/joins-page/joins-page.component.ts
+++ b/src/app/joins-page/joins-page.component.ts
@@ -25,6 +25,7 @@ export class JoinsPageComponent implements OnInit{
   secondTableData: any;
   public infoColumn: InfoColumn[] | undefined;
   public columnIsFull: boolean = false;
+  public endRequestForColumns: boolean = false;
   public displayColumns: InfoColumn | undefined;
 
 
@@ -61,10 +62,10 @@ export class JoinsPageComponent implements OnInit{
     this.firstSchema = event.target.value;
     this.displayColumns = undefined;
     this.columnIsFull = false;
+    this.infoColumn = undefined;
     this.infoTableService.getTablesBySchema(event.target.value).subscribe(
       (response : InfoTable[]) => {
         this.tablesByFirstSchema = response;
-        console.log(response);
       },
       (error: HttpErrorResponse) => {
         alert(error.message)
@@ -76,6 +77,7 @@ export class JoinsPageComponent implements OnInit{
     this.columnIsFull = false;
     this.secondSchema = event.target.value;
     this.displayColumns = undefined;
+    this.infoColumn = undefined;
     this.infoTableService.getTablesBySchema(event.target.value).subscribe(
       (response : InfoTable[]) => {
         this.tablesBySecondSchema = response;
@@ -87,25 +89,6 @@ export class JoinsPageComponent implements OnInit{
     );
   }
 
-  public getColumnsForJoin (){
-    if(this.firstTableData && this.secondTableData && this.firstSchema && this.secondSchema){
-      this.infoColumnService.getColumnsForJoin(this.firstSchema, this.secondSchema, this.firstTableData.nameTable, this.secondTableData.nameTable).subscribe(
-        (response : InfoColumn[]) => {
-          this.infoColumn = response;
-          console.log(this.infoColumn);
-          if(this.infoColumn?.length === 0){
-            this.columnIsFull = false;
-          } else {
-            this.columnIsFull = true;
-          }
-        },
-        (error: HttpErrorResponse) => {
-          alert(error.message);
-        }
-      );
-    }
-  }
-
   public displayColumnsInformations (event: any){
     this.nameFirstTableLowerCase =  this.firstTableData.nameTable.toLowerCase();
     this.nameSecondTableLowerCase =  this.secondTableData.nameTable.toLowerCase();
diff --git a/src/app/landing-page/landing-page.component.html b/src/app/landing-page/landing-page.component.html
index 2f02440..1840dc9 100644
--- a/src/app/landing-page/landing-page.component.html
+++ b/src/app/landing-page/landing-page.component.html
@@ -1,6 +1,17 @@
-<div class="landing-block">
-  <img src="assets/images/logo-apsidetop-blanc.png" alt="Apside logo">
-  <div class="text-center text-lg text-white">
-    Produit créé par APSIDE TOP
+<div class="grid grid-cols-2 gap-4">
+  <div class="text-justify text-white">
+    <p>Cette application, AssistDB  a pour objectif de vous aider à rechercher des informations, créer des jointures et gérer un ensemble de scripts et de requêtes de manière centralisée entre tous les membres de l'équipe.</p>
+    <p class="mt-4">L'application est composée de plusieurs pages correspondant à des fonctionnalités bien disctintes :</p>
+    <p class="mt-2">-|- La page de Recherche : Permet de récupérer les informations d'une ou plusieurs colonnes spécifiques.</p>
+    <p class="mt-2">-|- La page de Jointures : Permet de générer automatiquement des jointures entre des tables possédant des colonnes identiques.</p>
+    <p class="mt-2">-|- La page de Création : Permet de créer des requêtes SQL complexes avec des jointures sur plusieurs colonnes ainsi que des conditions.</p>
+    <p class="mt-2">-|- La page de Gestionnaire : Permet de voir, ajouter, modifier et supprimer des scripts ou requêtes. Un système de Tags permet aussi une classification et une catégorisation complète. Les tags peuvent aussi être ajoutés, modifiés et supprimés. L'ensemble de cette page est actualisé et centralisé via GitHub pour l'ensemble des utilisateurs de l'application.
+    </p>
+
   </div>
+  <div class="my-auto">
+     <img src="assets/images/logo-apsidetop-blanc.png" alt="Apside logo">
+     <div class="text-center text-white">Produit créé par APSIDE TOP</div>
+  </div>
+
 </div>
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index c5b6913..cdadd74 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -18,13 +18,13 @@
         <div class="hidden sm:ml-6 sm:block" id="extend-menu">
           <div class="flex space-x-4">
 
-            <a routerLink="request" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Recherche</a>
+            <a routerLinkActive="active" routerLink="request" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium ">Recherche</a>
 
-            <a routerLink="joins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Jointures</a>
+            <a routerLinkActive="active" routerLink="joins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium ">Jointures</a>
 
-            <a routerLink="createjoins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Création</a>
+            <a routerLinkActive="active" routerLink="createjoins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium ">Création</a>
 
-            <a routerLink="scriptmanagement" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Gestionnaire</a>
+            <a routerLinkActive="active" routerLink="scriptmanagement" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Gestionnaire</a>
 
             <button (click)="applyResetDatabase()" class="text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse">MAJ BDD</button>
 
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index e69de29..8f01a1c 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -0,0 +1,4 @@
+.active {
+  background-color: rgb(59 130 246);
+  color: white;
+}
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index d8e6de8..db075d0 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -25,7 +25,7 @@ export class NavbarComponent {
       this.isLoading = true;
       this.resetDataService.resetDatabase().subscribe(
         () => {
-          //this.router.navigateByUrl('');
+          this.router.navigateByUrl('');
           this.isLoading = false;
         },
         (error: HttpErrorResponse) => {
diff --git a/src/app/request-page/request-page.component.html b/src/app/request-page/request-page.component.html
index 357a6f6..b584607 100644
--- a/src/app/request-page/request-page.component.html
+++ b/src/app/request-page/request-page.component.html
@@ -1,4 +1,4 @@
-<button class="flex bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow my-2 animate-bounce" (click)="refreshEverything()">Réinitialiser</button>
+<button class="flex bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow my-2" (click)="refreshEverything()">Réinitialiser</button>
 
 <div class="max-w-full rounded-2xl overflow-hidden shadow-lg bg-white">
   <mat-vertical-stepper class="text-white" [linear]="true">
@@ -60,7 +60,7 @@
 
 <div  class="my-4 grid grid-cols-1 sm:grid-cols-3 gap-5">
   <!--Card-->
-    <div *ngIf="currentTable" class="sm:col-start-2 rounded-lg overflow-hidden shadow-lg bg-white animate-pulse">
+    <div *ngIf="currentTable" class="sm:col-start-2 rounded-lg overflow-hidden shadow-lg bg-white">
       <div  class="px-6 py-4 grid justify-items-center">
         <div class="font-bold text-xl">Table : {{ currentTable.nameTable }}</div>
         <div class="font-bold text-xl">Schéma : {{ selectedSchema }}</div>
diff --git a/src/app/request-page/request-page.component.ts b/src/app/request-page/request-page.component.ts
index 20f9b9f..0452fdb 100644
--- a/src/app/request-page/request-page.component.ts
+++ b/src/app/request-page/request-page.component.ts
@@ -77,6 +77,7 @@ export class RequestPageComponent implements OnInit {
       this.infoColumnService.getSelectedColumns(nameSch, tempsTab.nameTable).subscribe(
         (response : InfoColumn[]) => {
           this.infoColumn = response;
+          console.log(this.infoColumn)
         },
         (error: HttpErrorResponse) => {
           alert(error.message)
diff --git a/src/app/script-management/script-management.component.html b/src/app/script-management/script-management.component.html
index b34e773..9e04331 100644
--- a/src/app/script-management/script-management.component.html
+++ b/src/app/script-management/script-management.component.html
@@ -90,6 +90,25 @@
                 </div>
               </div>
           </cdk-accordion-item>
+          <cdk-accordion-item>
+            <div class="rounded-lg bg-slate-300 p-2 mt-2">
+                <div (click)="tagsDisplay = !tagsDisplay" class="flex justify-between hover:cursor-pointer">
+                  <div class="text-xl font-bold pb-2">Tags associés :</div>
+                  <span class="example-accordion-item-description" class="font-semibold">
+                    Cliquer pour {{ tagsDisplay ? 'fermer' : 'ouvrir' }}
+                  </span>
+                </div>
+                <div
+                  role="region"
+                  [style.display]="tagsDisplay ? '' : 'none'">
+                  <div class="grid grid-cols-2 xl:grid-cols-4 text-center">
+                    <div *ngFor="let tagString of tagsListOfSpecScript" class="rounded-2xl overflow-hidden shadow-lg bg-green-300 p-4 m-2 font-bold">
+                      {{tagString}}
+                    </div>
+                  </div>
+                </div>
+              </div>
+          </cdk-accordion-item>
         </cdk-accordion>
     </div>
   </div>
diff --git a/src/app/script-management/script-management.component.ts b/src/app/script-management/script-management.component.ts
index e19753d..0726b72 100644
--- a/src/app/script-management/script-management.component.ts
+++ b/src/app/script-management/script-management.component.ts
@@ -19,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;
   descText: String | undefined;
+  tagsListOfSpecScript: String[] | undefined;
   allScripts: Script[] = [];
   memoryScripts: Script[] = [];
   allLinksScriptTag: LinkScriptTag[]= [];
@@ -27,6 +28,7 @@ export class ScriptManagementComponent implements OnInit {
   selectedTagList: Tag[] = [];
   dropdownSettings = {};
   descriptionDisplay: boolean = true;
+  tagsDisplay: boolean = true;
   contentDisplay: boolean = false;
 
   constructor(
@@ -62,6 +64,8 @@ export class ScriptManagementComponent implements OnInit {
       this.textTo = script.data;
       const tempDescScript = this.allLinksScriptTag.filter(link => link.scriptName === script.name);
       this.descText = tempDescScript[0].description;
+      this.tagsListOfSpecScript = tempDescScript[0].tags;
+      console.log(this.tagsListOfSpecScript);
     }
   }
 
@@ -114,7 +118,6 @@ export class ScriptManagementComponent implements OnInit {
 
       this.allScripts = this.memoryScripts.filter(item => item.name.toLowerCase().indexOf(this.filterScriptName) !== -1 && tempLinksScriptsWithTags.some(tm => tm.scriptName === item.name) || tempFindDesc.some(tmp => tmp.scriptName === item.name));
     }
-
   }
 
 
diff --git a/src/assets/svg/copy.svg b/src/assets/svg/copy.svg
new file mode 100644
index 0000000..bc123e3
--- /dev/null
+++ b/src/assets/svg/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M272 0H396.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H272c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128H192v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>
\ No newline at end of file