little adjustement and opti

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>

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],

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="flex justify-between mb-2">
-        <div class="rounded-lg overflow-hidden shadow-lg bg-slate-900 text-white text-left pl-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>

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){

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 ">

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();

src/app/landing-page/landing-page.component.html

@@ -1,6 +1,17 @@
-<div class="landing-block">
+<div class="grid grid-cols-2 gap-4">
-  <img src="assets/images/logo-apsidetop-blanc.png" alt="Apside logo">
+  <div class="text-justify text-white">
-  <div class="text-center text-lg 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>
-    Produit créé par APSIDE TOP
+    <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>

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>
 

src/app/navbar/navbar.component.scss

@@ -0,0 +1,4 @@
+.active {
+  background-color: rgb(59 130 246);
+  color: white;
+}

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) => {

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>

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)

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>

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));
     }
-
   }
 
 

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>