Joins functionnalities complete v1

README.md

@@ -0,0 +1,27 @@
+# AngularTest
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { FormsModule } from '@angular/forms';
 import { JoinsPageComponent } from './joins-page/joins-page.component';
 import { CreateJoinsPageComponent } from './create-joins-page/create-joins-page.component';
 import { JoinsTableComponent } from './joins-table/joins-table.component';
+import { WhereCardComponent } from './where-card/where-card.component';
 
 @NgModule({
   declarations: [
@@ -30,7 +31,8 @@ import { JoinsTableComponent } from './joins-table/joins-table.component';
     Custom_Ng2SearchPipe,
     JoinsPageComponent,
     CreateJoinsPageComponent,
-    JoinsTableComponent
+    JoinsTableComponent,
+    WhereCardComponent
   ],
   imports: [
     BrowserModule,

src/app/create-joins-page/create-joins-page.component.html

@@ -7,8 +7,8 @@
         <div class="rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2">
           <div class="p-4">
             <div class="font-bold text-xl text-left">Selectionner un Schéma et une Table (Base) :</div>
-            <div class="flex space-x-4">
-              <div class="w-1/2 mt-2">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div class="mt-2">
                 <label class="text-black text-left">Schémas : </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)]="filterBaseSchema" placeholder="Rechercher...">
 
@@ -17,7 +17,7 @@
                 </select>
               </div>
 
-              <div *ngIf="tablesByBaseSchema" class="w-1/2 mt-2">
+              <div *ngIf="tablesByBaseSchema" class="mt-2">
                 <label class="text-black text-left">Tables : </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...">
 
@@ -39,11 +39,27 @@
           <div *ngFor="let hop of requestInfoJoin; index as i" >
             <app-joins-table [allAlias]="aliasData" [passJoinData]="allData[i]" (data)="retrieveData($event, i)" id="{{hop}}"></app-joins-table>
             <div class="flex inline-flex space-x-4">
-              <button (click)="addTable(i)" type="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-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Jointure</button>
+              <button (click)="addTable()" type="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-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Jointure</button>
+
               <button *ngIf="!oneJoinRemaining" (click)="removeTable(i)" type="button" class="text-gray-900 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-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Supprimer cette jointure</button>
+
+              <button (click)="addCondition()" type="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-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Condition</button>
+              </div>
+          </div>
+        </div>
+
+        <div *ngIf="whereCardList.length != 0">
+          <div *ngFor="let whereCards of whereCardList; index as i" >
+            <app-where-card [allAlias]="aliasData" [childIndex]="i" id="{{whereCards}}" (conditionData)="getConditionData($event, i)"></app-where-card>
+            <div class="flex inline-flex space-x-4">
+              <button (click)="addCondition()" type="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-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Condition</button>
+
+              <button (click)="removeWhereCard(i)" type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Supprimer cette Condition</button>
             </div>
           </div>
         </div>
+
+
       </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 ">
@@ -52,6 +68,7 @@
 
           <div>SELECT * FROM {{baseSchema}}.{{baseTableName}} AS {{baseTableNameLowerCase}}</div>
           <div *ngFor="let join of allData">{{join.joinSpec}} {{join.specificSchema}}.{{join.specificTable}} AS {{join.aliasSpecificTable}} ON {{join.baseAlias}}.{{join.baseColumn}}={{join.aliasSpecificTable}}.{{join.specificColumn}}</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

@@ -1,3 +1,4 @@
+
 import { HttpErrorResponse } from '@angular/common/http';
 import { AfterViewInit, Component, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { InfoTable } from '../model/info-table';
@@ -6,6 +7,8 @@ import { InfoTableService } from '../service/info-table.service';
 import { JoinsTableComponent } from '../joins-table/joins-table.component';
 import { Join } from '../model/join';
 import { Alias } from '../model/alias';
+import { WhereCardComponent } from '../where-card/where-card.component';
+import { Condition } from '../model/condition';
 
 @Component({
   selector: 'app-create-joins-page',
@@ -13,14 +16,16 @@ import { Alias } from '../model/alias';
   styleUrls: ['./create-joins-page.component.scss']
 })
 export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
-  @ViewChildren(JoinsTableComponent)
-  joinsTableComponent!: QueryList<JoinsTableComponent>;
+  @ViewChildren(JoinsTableComponent)joinsTableComponent!: QueryList<JoinsTableComponent>;
+  @ViewChildren(WhereCardComponent)whereCardComponent!: QueryList<WhereCardComponent>;
+
   public allSchema: String[] | undefined;
   filterBaseSchema: any;
   filterBaseTables: any;
   public tablesByBaseSchema: InfoTable[] | undefined;
   baseTableData: any;
   requestInfoJoin: Array<JoinsTableComponent> = [];
+  whereCardList: Array<WhereCardComponent> = [];
   baseTableName: String = "";
   baseTableNameLowerCase: String = "";
   oneJoinRemaining : boolean = true;
@@ -32,9 +37,10 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
   passSchema: String = "";
   passTable: String = "";
   baseAlias: Alias | undefined;
+  memoAlias: Alias | undefined;
+  conditionData: Condition[] = []
 
   constructor(
-
     private infoColumnService: InfoColumnService,
     private infoTableService: InfoTableService
     ){}
@@ -71,37 +77,78 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
     }
 
     public getNameBaseTable(){
+      let previousBaseAlias;
       if(this.baseSchema){
         this.baseTableName = this.baseTableData.nameTable;
         this.baseTableNameLowerCase = this.baseTableName?.toLowerCase();
-
         this.baseAlias = {
           nameSchema: this.baseSchema,
           nameTable: this.baseTableName,
           nameAlias: this.baseTableNameLowerCase,
         }
-
+        if(this.aliasData.length != 0){
+          previousBaseAlias = this.aliasData[0].nameAlias;
+          for(let iz = this.allData.length; iz >= 0; iz--){
+            if( this.allData[iz] && this.allData[iz].baseAlias == previousBaseAlias){
+              this.allData.splice(iz, 1);
+              this.requestInfoJoin.splice(iz, 1);
+              this.aliasData.splice(iz, 1);
+            }
+          }
+          if(this.requestInfoJoin.length === 0 ){
+            this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService));
+          }
+        }
         this.aliasData.shift();
         this.aliasData.unshift(this.baseAlias);
       }
-
     }
 
-    public addTable(i: number){
+    public addTable(){
       this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService));
       this.checkLength();
     }
 
+    public addCondition(){
+      this.whereCardList.push(new WhereCardComponent(this.infoColumnService, this.infoTableService));
+    }
+
+    public checkAndRemoveIfAliasWasUse(previousAlias: String){
+      for(let iz = this.allData.length; iz >= 0; iz--){
+        if( this.allData[iz] && this.allData[iz].baseAlias == previousAlias){
+          console.log(this.allData[iz])
+          this.allData.splice(iz, 1);
+          this.requestInfoJoin.splice(iz, 1);
+          this.aliasData.splice(iz, 1);
+        }
+      }
+      if(this.conditionData.length != 0){
+        for(let iy = this.conditionData.length; iy >= 0; iy--){
+          if( this.conditionData[iy] && this.conditionData[iy].alias == previousAlias){
+            this.conditionData.splice(iy, 1);
+            this.whereCardList.splice(iy, 1);
+          }
+        }
+      }
+    }
+
     public removeTable(i: number){
       this.requestInfoJoin.splice(i, 1);
-      this.checkLength();
       const deleteAlias = this.allData[i].aliasSpecificTable;
       let aliasSplitName = deleteAlias.slice(0, -1);
       this.allData.splice(i, 1);
+      this.aliasData.shift();
+
+      this.checkAndRemoveIfAliasWasUse(deleteAlias);
+
       let indexOfHighest = -1;
       let highestValue = 0;
       let tempAlias;
       let inInclude = false;
+
+      if(this.allData.length === 0){
+        this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService));
+      } else {
         this.allData.forEach((join, ind) => {
           const alias = join.aliasSpecificTable;
           if(alias.includes(aliasSplitName.toString())){
@@ -112,21 +159,22 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
               highestValue = numTempAlias;
             }
             inInclude = true;
-
           }
         })
-      if(inInclude){
+      }
+      if(inInclude && highestValue != 0){
         this.allData[indexOfHighest].aliasSpecificTable = deleteAlias || "";
-        this.aliasData.shift();
         this.aliasData.splice(i, 1);
         this.aliasData[indexOfHighest].nameAlias = deleteAlias;
       } else {
-        this.aliasData.shift();
         this.aliasData.splice(i, 1);
       }
       if(this.baseAlias){
         this.aliasData.unshift(this.baseAlias);
       }
+      console.log(this.aliasData)
+      this.checkLength();
+      this.aliasData = [...this.aliasData]
     }
 
     public checkLength(){
@@ -137,6 +185,7 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
       }
     }
 
+
     public retrieveData(event: String[], index: number){
       const tempData: Join = {
         joinSpec: event[0],
@@ -147,52 +196,167 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
         specificColumn: event[5],
         aliasSpecificTable: event[6],
       }
+      if(this.allData.length != 0 && this.allData[index]){
+        const antAlias = this.allData[index].aliasSpecificTable;
+        console.log(antAlias)
+        if(this.allData[index].aliasSpecificTable.includes(event[6].toString())){
+
+        } else {
+          this.checkAndRemoveIfAliasWasUse(antAlias);
+        }
+      }
+
+      let switchData = "";
       let tempNum = "";
-      let aliasName = "";
       let first = 0;
+      let tem = 0;
       let tempAllData: Join[] = [];
+      let indexAliasData: Join[] = [];
+      let noIndexAliasData: Join[] = [];
+      let alias = "";
+      let inInclude = false;
+      let indexOfHighest = -1;
+      let highestValue= -1;
+      let tempAlias;
+      tempAllData = [...this.allData];
+
       if(this.allData.length === 0){
-        tempData.aliasSpecificTable = tempData.aliasSpecificTable + "0";
+        switchData = "emptyData";
       } else {
-        this.allData.forEach((join, i) => {
-          const alias = join.aliasSpecificTable;
+        if(this.allData[index]){
+          if(this.allData.length != 1){
+            tempAllData.splice(index, 1);
+          }
+          tempAllData.forEach((join, i) => {
+            alias = join.aliasSpecificTable.toString();
             if(alias.includes(tempData.aliasSpecificTable.toString())){
-            if (this.allData[index]){
-              tempNum = "0";
+              indexAliasData.push(tempAllData[i]);
+              switchData = "indexAlias";
               first = 1;
             } else {
-              tempAllData.push(this.allData[i]);
+              if(first === 0){
+                switchData = "indexNoAlias";
               }
-          } else if (this.allData[index]){
-            tempNum = "0";
-            first = 1;
-          } else {
-            tempNum = "0";
             }
           })
-        tempAllData.forEach((tempJoin) =>{
-          const tempAlias = tempJoin.aliasSpecificTable;
-          for(let lastNum = 0; lastNum < 10; lastNum++){
-            if(tempAlias == (tempData.aliasSpecificTable.toString())+lastNum.toString()){
-              aliasName = tempAlias.slice(0, -1);
-              const tem =  +lastNum + +1;
-              first = 2;
-              tempNum = tem.toString();
+        } else {
+          this.allData.forEach((join, i) => {
+            alias = join.aliasSpecificTable.toString();
+            if(alias.includes(tempData.aliasSpecificTable.toString())){
+              noIndexAliasData.push(tempAllData[i]);
+              switchData = "noIndexAlias";
+              first = 1
+            } else {
+              if(first === 0){
+                switchData = "noIndexNoAlias";
               }
             }
           })
         }
+      }
 
-      if(first === 0){
-        tempData.aliasSpecificTable = tempData.aliasSpecificTable + tempNum;
+      switch (switchData) {
+        case "emptyData":
+          console.log(switchData)
+          tempData.aliasSpecificTable = tempData.aliasSpecificTable + "0";
           this.allData.push(tempData);
-      } else if (first === 1){
+          break;
+
+        case "indexAlias":
+          console.log(switchData)
+          let memo = 0;
+          const rememberAlias = this.allData[index].aliasSpecificTable;
+          const aliasSplitName = rememberAlias.slice(0, -1);
+          if(this.allData[index].aliasSpecificTable == tempData.aliasSpecificTable+"0"){
+            tempNum = "0"
+            console.log("bien 0")
+          }
+          else {
+            console.log("pas 0")
+            indexAliasData.forEach((jo) => {
+              const indexAliasName = jo.aliasSpecificTable;
+              for(let num = 8; num > -1; num--){
+                if(indexAliasName == (tempData.aliasSpecificTable+num.toString())){
+                  tem = +num + +1;
+                  if(memo < tem){
+                    memo = tem;
+                    tempNum = memo.toString();
+                  }
+                }
+              }
+            })
+            this.allData.forEach((join, ind) => {
+              const aliasRem = join.aliasSpecificTable;
+              if(aliasRem.includes(aliasSplitName.toString())){
+                tempAlias = aliasRem.slice(-1);
+                let numTempAlias = +tempAlias;
+                if(numTempAlias > highestValue){
+                  indexOfHighest = ind;
+                  highestValue = numTempAlias;
+                }
+                inInclude = true;
+              }
+            })
+          }
+
+          if(inInclude && highestValue != 0){
+            console.log(indexOfHighest, highestValue, rememberAlias)
+            this.allData[indexOfHighest].aliasSpecificTable = rememberAlias || "";
+          }
           this.allData[index] = tempData;
           this.allData[index].aliasSpecificTable = tempData.aliasSpecificTable + tempNum;
-      } else if (first === 2){
-        tempData.aliasSpecificTable = aliasName + tempNum;
+          break;
+
+        case "indexNoAlias":
+          console.log(switchData)
+          const rememberIndexAlias = this.allData[index].aliasSpecificTable;
+          const indexAliasSplitName = rememberIndexAlias.slice(0, -1);
+          this.allData.forEach((join, ind) => {
+            const aliasRem = join.aliasSpecificTable;
+            if(aliasRem.includes(indexAliasSplitName.toString())){
+              tempAlias = aliasRem.slice(-1);
+              let numTempAlias = +tempAlias;
+              if(numTempAlias > highestValue){
+                indexOfHighest = ind;
+                highestValue = numTempAlias;
+              }
+              inInclude = true;
+            }
+          })
+          if(inInclude && highestValue != 0){
+            this.allData[indexOfHighest].aliasSpecificTable = rememberIndexAlias || "";
+          }
+          this.allData[index] = tempData;
+          this.allData[index].aliasSpecificTable = tempData.aliasSpecificTable + "0";
+          break;
+
+        case "noIndexAlias":
+          console.log(switchData)
+          let memRem = 0;
+          console.log(noIndexAliasData)
+          noIndexAliasData.forEach((jo) => {
+            const indexAliasName = jo.aliasSpecificTable;
+            for(let num = 8; num > -1; num--){
+              if(indexAliasName == (tempData.aliasSpecificTable+num.toString())){
+                tem = +num + +1;
+                if(memRem < tem){
+                  memRem = tem;
+                  tempNum = memRem.toString();
+                }
+              }
+            }
+          })
+          tempData.aliasSpecificTable = tempData.aliasSpecificTable + tempNum;
+          this.allData.push(tempData);
+          break;
+
+        case "noIndexNoAlias":
+          tempData.aliasSpecificTable = tempData.aliasSpecificTable + "0";
           this.allData.push(tempData);
+          break;
       }
+      this.allData = [...this.allData]
+      console.log(this.allData);
 
       if(this.baseAlias){
         this.aliasData.splice(0);
@@ -203,32 +367,34 @@ export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
             nameTable: all.specificTable,
             nameAlias: all.aliasSpecificTable
           }
-          console.log(ephAlias.nameAlias)
           this.aliasData.push(ephAlias);
-          console.log(this.aliasData)
         });
       }
-      console.log(this.allData);
+      this.aliasData = [...this.aliasData];
     }
 
+    public removeWhereCard(i: number){
+      this.whereCardList.splice(i, 1);
+      if(this.conditionData[i]){
+        this.conditionData.splice(i, 1);
+      }
+      if(this.conditionData[0]){
+        this.conditionData[0].operator = "WHERE";
+      }
+    }
 
-    // public getSelectedAlias(event: String){
-    //   this.selectedAlias = event;
-
-    //   if(this.baseTableNameLowerCase == this.selectedAlias){
-    //     if(this.baseSchema && this.baseTableName)
-    //     this.passSchema = this.baseSchema;
-    //     this.passTable = this.baseTableName;
-    //   } else {
-    //     this.allData.forEach((join, i) => {
-    //       const alias = join.aliasSpecificTable;
-    //       if(alias == this.selectedAlias){
-    //         this.passSchema = join.specificSchema;
-    //         this.passTable = join.specificTable;
-    //       }
-    //     })
-    //   }
-
-    // }
-
+    public getConditionData(event: String[], index: number){
+      const tempCondition: Condition = {
+        operator: event[0],
+        alias: event[1],
+        column: event[2],
+        condition: event[3],
+        value: event[4]
+      }
+      if(this.conditionData[index]){
+        this.conditionData[index] = tempCondition;
+      } else {
+        this.conditionData.push(tempCondition);
+      }
+    }
 }

src/app/joins-table/joins-table.component.html

@@ -1,4 +1,4 @@
-<div class="rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2 my-2">
+<div [ngClass]="{'normalCard' : goodAlias, 'alternativeCard' : !goodAlias}">
   <div class="p-4">
     <div class="font-bold text-xl text-left mb-2">Selectionner les informations de la jointure :</div>
     <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 gap-4">
@@ -42,7 +42,7 @@
         <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)]="filterBaseColumn" placeholder="Rechercher...">
 
         <select [(ngModel)]="baseColumnData" (change)="verifyAndSendData()" 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">
-        <option *ngFor="let col of baseColumns | filter : filterBaseColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }}</option>
+        <option *ngFor="let col of baseColumns | filter : filterBaseColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }} ({{col.columnText}})</option>
         </select>
       </div>
 
@@ -51,7 +51,7 @@
         <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)]="filterSpecificColumn" placeholder="Rechercher...">
 
         <select [(ngModel)]="specificColumnData" (change)="verifyAndSendData()" 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">
-        <option *ngFor="let col of specificColumns | filter : filterSpecificColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }}</option>
+        <option *ngFor="let col of specificColumns | filter : filterSpecificColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }} ({{col.columnText}})</option>
         </select>
       </div>
     </div>

src/app/joins-table/joins-table.component.scss

@@ -0,0 +1,25 @@
+// rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2 my-2
+
+.normalCard {
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  background-color: rgb(241 245 249);
+  border-style: solid;
+  border-color: rgb(251 146 60);
+  border-width: 2px;
+  margin-top: 0.5rem; /* 8px */
+  margin-bottom: 0.5rem; /* 8px */
+}
+
+.alternativeCard {
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  background-color: rgb(71 85 105);
+  border-style: solid;
+  border-color: rgb(251 146 60);
+  border-width: 2px;
+  margin-top: 0.5rem; /* 8px */
+  margin-bottom: 0.5rem; /* 8px */
+}

src/app/joins-table/joins-table.component.ts

@@ -39,10 +39,10 @@ export class JoinsTableComponent implements OnInit, OnChanges{
   myJoinData: Join | undefined;
   isGood: boolean = true;
   positionIndex: number =0;
-  tempAliasData: Alias[] = []
+  tempAliasData: Alias[] = [];
+  goodAlias = true;
 
   constructor(
-
     private infoColumnService: InfoColumnService,
     private infoTableService: InfoTableService
     ){}
@@ -50,39 +50,24 @@ export class JoinsTableComponent implements OnInit, OnChanges{
   ngOnInit(): void {
     this.getSchemas();
     this.getBaseColumns();
-    this.verifyAlias();
   }
 
   ngOnChanges(): void {
     this.getBaseColumns();
     this.verifyAlias();
-
   }
 
   public verifyAlias(){
-
-    // console.log(this.allAlias);
     this.tempAliasData = this.allAlias;
-    // if(this.passJoinData){
-    //   this.tempAliasData = [];
-
-    //   const myAlias = this.passJoinData.aliasSpecificTable;
-    //   console.log(myAlias)
-    //   this.allAlias.forEach((alias, i) =>{
-    //     if(alias.nameAlias == myAlias){
-    //       console.log(this.tempAliasData[i])
-
-    //       this.positionIndex = i;
-    //     } else {
-    //       this.tempAliasData.push(alias);
-
-    //     }
-
-    //   })
-
-    //   console.log(this.allAlias)
-    //   console.log(this.tempAliasData)
-    // }
+    if(this.passJoinData){
+      this.tempAliasData = [];
+      const myAlias = this.passJoinData.aliasSpecificTable;
+      this.allAlias.forEach((alias, i) =>{
+        if(alias.nameAlias !== myAlias){
+          this.tempAliasData.push(alias);
+        }
+      })
+    }
   }
 
   public getSchemas():void {
@@ -148,7 +133,6 @@ export class JoinsTableComponent implements OnInit, OnChanges{
         aliasSpecificTable: tempLower,
       }
        this.data.emit([this.joinData, this.specificSchema, this.specificTable, this.baseAlias.nameAlias, this.baseColumnData.nameColumn, this.specificColumnData.nameColumn, tempLower]);
-
       }
   }
 

src/app/model/condition.ts

@@ -0,0 +1,7 @@
+export interface Condition {
+  operator: String;
+  alias: String;
+  column: String;
+  condition: String;
+  value: String;
+}

src/app/where-card/where-card.component.html

@@ -0,0 +1,42 @@
+<div class="rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2 my-2">
+  <div class="p-4">
+    <div class="font-bold text-xl text-left mb-2">Selectionner les informations de la Condition :</div>
+    <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 gap-4">
+
+      <div *ngIf="childIndex != 0">
+        <label class="text-black text-left">Opérateurs : </label>
+        <select [(ngModel)]="operator" (change)="verifyAndSendConditionData()" size="4" class="my-2 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5">
+        <option *ngFor="let ope of operatorList" [ngValue]="ope">{{ ope }}</option>
+        </select>
+      </div>
+
+      <div>
+        <label class="text-black text-left">Alias : </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)]="filterAlias" placeholder="Rechercher...">
+
+        <select [(ngModel)]="baseAlias" (change)="getColumns()" 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">
+        <option *ngFor="let alias of allAlias | filter : filterAlias" [ngValue]="alias">{{ alias.nameAlias }}</option>
+        </select>
+      </div>
+
+      <div>
+        <label class="text-black text-left">Colonnes : </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)]="filterColumn" placeholder="Rechercher...">
+
+        <select [(ngModel)]="baseColumnData" (change)="verifyAndSendConditionData()" 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">
+        <option *ngFor="let col of baseColumns | filter : filterColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }} ({{col.columnText}})</option>
+        </select>
+      </div>
+
+      <div *ngIf="allAlias">
+        <label class="text-black text-left">Conditions : </label>
+        <input type="text" (change)="verifyAndSendConditionData()" 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)]="conditionOperator" placeholder="Condition...">
+      </div>
+
+      <div>
+        <label class="text-black text-left">Valeurs : </label>
+        <input type="text" (change)="verifyAndSendConditionData()" 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)]="conditionValue" placeholder="Valeur...">
+      </div>
+    </div>
+  </div>
+</div>

src/app/where-card/where-card.component.ts

@@ -0,0 +1,54 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Alias } from '../model/alias';
+import { InfoColumn } from '../model/info-column';
+import { InfoColumnService } from '../service/info-column.service';
+import { InfoTableService } from '../service/info-table.service';
+
+@Component({
+  selector: 'app-where-card',
+  templateUrl: './where-card.component.html',
+  styleUrls: ['./where-card.component.scss']
+})
+export class WhereCardComponent {
+  @Input() allAlias: Alias[] = [];
+  @Input() childIndex: number | undefined;
+  @Output() conditionData = new EventEmitter<String[]>();
+
+  operator: any
+  operatorList: String[] = ["AND", "OR"];
+  conditionValue: any;
+  conditionOperator: any;
+  filterAlias: any;
+  filterColumn: any;
+  baseAlias: Alias | undefined;
+  baseColumns: InfoColumn[] | undefined;
+  baseColumnData: any;
+
+  constructor(
+    private infoColumnService: InfoColumnService,
+    private infoTableService: InfoTableService
+    ){}
+
+    public getColumns():void {
+      if(this.baseAlias){
+        this.infoColumnService.getSelectedColumns(this.baseAlias.nameSchema, this.baseAlias.nameTable).subscribe(
+          (response : InfoColumn[]) => {
+            this.baseColumns = response;
+          },
+          (error: HttpErrorResponse) => {
+            alert(error.message)
+          }
+        );
+      }
+    }
+
+    public verifyAndSendConditionData(){
+      if(this.childIndex === 0){
+        this.operator = "WHERE";
+      }
+      if(this.operator && this.baseAlias && this.baseColumnData && this.baseColumnData && this.conditionOperator && this.conditionValue){
+        this.conditionData.emit([this.operator, this.baseAlias.nameAlias, this.baseColumnData.nameColumn, this.conditionOperator, this.conditionValue]);
+      }
+    }
+}