add loader + dialog box + maj port

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

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.

angular.json

@@ -0,0 +1,139 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angularTest": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-test",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "angularTest:build:production"
+            },
+            "development": {
+              "browserTarget": "angularTest:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 9002
+          }
+
+
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angularTest:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "angular-test",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^15.1.0",
+    "@angular/cdk": "^15.1.4",
+    "@angular/common": "^15.1.0",
+    "@angular/compiler": "^15.1.0",
+    "@angular/core": "^15.1.0",
+    "@angular/forms": "^15.1.0",
+    "@angular/material": "^15.1.4",
+    "@angular/platform-browser": "^15.1.0",
+    "@angular/platform-browser-dynamic": "^15.1.0",
+    "@angular/router": "^15.1.0",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "ng2-search-filter": "^0.5.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.12.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.1.4",
+    "@angular/cli": "~15.1.4",
+    "@angular/compiler-cli": "^15.1.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "tailwindcss": "^3.2.4",
+    "typescript": "~4.9.4"
+  }
+}

src/Custom_Ng2SearchPipe.ts

@@ -0,0 +1,62 @@
+import { Pipe, PipeTransform, Injectable } from "@angular/core";
+
+@Pipe({
+  name: "filter",
+  pure: false
+})
+@Injectable()
+export class Custom_Ng2SearchPipe implements PipeTransform {
+
+  transform(items: any, term: string, excludes: any = []): any {
+    if (!term || !items) return items;
+    return Custom_Ng2SearchPipe.filter(items, term, excludes);
+  }
+
+  static filter(
+    items: Array<{ [key: string]: any }>,
+    term: string,
+    excludes: any
+  ): Array<{ [key: string]: any }> {
+    const toCompare = term.toLowerCase();
+
+    function checkInside(item: any, term: string) {
+      if (
+        typeof item === "string" &&
+        item
+          .toString()
+          .toLowerCase()
+          .includes(toCompare)
+      ) {
+        return true;
+      }
+
+      for (let property in item) {
+        if (
+          item[property] === null ||
+          item[property] == undefined ||
+          excludes.includes(property)
+        ) {
+          continue;
+        }
+
+        if (typeof item[property] === "object") {
+          if (checkInside(item[property], term)) {
+            return true;
+          }
+        } else if (
+          item[property]
+            .toString()
+            .toLowerCase()
+            .includes(toCompare)
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    return items.filter(function (item) {
+      return checkInside(item, term);
+    });
+  }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SchemasTabComponent } from './schemas-tab/schemas-tab.component';
+import { LandingPageComponent } from './landing-page/landing-page.component';
+import { RequestPageComponent } from './request-page/request-page.component';
+import { JoinsPageComponent } from './joins-page/joins-page.component';
+import { CreateJoinsPageComponent } from './create-joins-page/create-joins-page.component';
+
+const routes: Routes = [
+  { path: 'schematab', component: SchemasTabComponent },
+  { path: '', component: LandingPageComponent },
+  { path: 'request', component: RequestPageComponent },
+  { path: 'joins', component: JoinsPageComponent },
+  { path: 'createjoins', component: CreateJoinsPageComponent }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -0,0 +1,6 @@
+<div>
+  <app-navbar></app-navbar>
+  <div class="mt-4 px-12">
+    <router-outlet></router-outlet>
+  </div>
+</div>

src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+
+}

src/app/app.module.ts

@@ -0,0 +1,57 @@
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { SchemasTabComponent } from './schemas-tab/schemas-tab.component';
+import { AppRoutingModule } from './app-routing.module';
+import { LandingPageComponent } from './landing-page/landing-page.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { RequestPageComponent } from './request-page/request-page.component';
+import { HttpClientModule } from '@angular/common/http';
+import { EmployeeService } from './service/employee.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {MatDialogModule} from '@angular/material/dialog';
+import { MatIconModule } from "@angular/material/icon";
+import { Custom_Ng2SearchPipe } from './../Custom_Ng2SearchPipe';
+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';
+import { ColumnsCardComponent } from './columns-card/columns-card.component';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SchemasTabComponent,
+    LandingPageComponent,
+    NavbarComponent,
+    RequestPageComponent,
+    Custom_Ng2SearchPipe,
+    JoinsPageComponent,
+    CreateJoinsPageComponent,
+    JoinsTableComponent,
+    WhereCardComponent,
+    ColumnsCardComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    MatStepperModule,
+    MatToolbarModule,
+    MatIconModule,
+    FormsModule,
+    MatDialogModule,
+    MatProgressSpinnerModule
+
+  ],
+  providers: [EmployeeService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

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

@@ -0,0 +1,20 @@
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4 rounded-lg overflow-hidden shadow-lg bg-slate-300 border-solid border-orange-400 border-2 p-2">
+
+  <div>
+    <label class="text-black text-left">Colonnes(Base) : </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)]="filterBaseColumn" placeholder="Rechercher...">
+
+    <select [(ngModel)]="baseColumnData" (change)="sendColumnsData()" 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 }} ({{col.columnText}})</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)]="filterSpecificColumn" placeholder="Rechercher...">
+
+    <select [(ngModel)]="specificColumnData" (change)="sendColumnsData()" 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 }} ({{col.columnText}})</option>
+    </select>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { InfoColumn } from '../model/info-column';
+import { ColumnData } from '../model/column-data';
+
+@Component({
+  selector: 'app-columns-card',
+  templateUrl: './columns-card.component.html',
+  styleUrls: ['./columns-card.component.scss']
+})
+export class ColumnsCardComponent {
+  @Input() baseColumns: InfoColumn[] | undefined
+  @Input() specificColumns: InfoColumn[] | undefined
+  @Input() childIndex: number | undefined;
+  @Output() selectedColumn = new EventEmitter<ColumnData>();
+  specificColumnData: any;
+  baseColumnData: any;
+  filterBaseColumn: any;
+  filterSpecificColumn: any;
+
+  constructor(){}
+
+  public sendColumnsData(){
+    if(this.baseColumnData && this.specificColumnData){
+      let tempsOpe = "AND";
+      if(this.childIndex === 0){
+        tempsOpe = "ON";
+      }
+      const tempColumnData: ColumnData = {
+        operator: tempsOpe,
+        aliasColumn: this.baseColumnData.nameColumn,
+        specColumn: this.specificColumnData.nameColumn,
+      }
+      console.log(tempColumnData)
+      this.selectedColumn.emit(tempColumnData);
+    }
+  }
+
+}

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

@@ -0,0 +1,86 @@
+
+  <!--Card-->
+  <div  class="my-4">
+
+    <div class="flex sm:flex-nowrap flex-wrap sm:space-x-4">
+      <div class="w-full sm:w-2/3 h-full text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 ">
+        <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="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...">
+
+                <select (change)="useTablesWithBaseSchema($event)" 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 schema of allSchema | filter : filterBaseSchema" value="{{ schema }}">{{ schema }}</option>
+                </select>
+              </div>
+
+              <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...">
+
+                <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">
+                <option *ngFor="let table of tablesByBaseSchema | filter : filterBaseTables" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+                </select>
+              </div>
+
+            </div>
+
+            <div *ngIf="tablesByBaseSchema">
+              <input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'true':'false')" class="w-4 h-4 text-orange-400 bg-slate-400 border-slate-200 rounded focus:ring-orange-400 focus:ring-2"/>
+              <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Afficher aussi les Vues</label>
+            </div>
+
+
+          </div>
+
+
+
+        </div>
+        <div *ngIf="baseTableName">
+          <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()" 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 ">
+        <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>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>
+      </div>
+    </div>
+
+
+  </div>
+

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

@@ -0,0 +1,412 @@
+
+import { HttpErrorResponse } from '@angular/common/http';
+import { AfterViewInit, Component, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { InfoTable } from '../model/info-table';
+import { InfoColumnService } from '../service/info-column.service';
+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';
+import { ColumnData } from '../model/column-data';
+
+@Component({
+  selector: 'app-create-joins-page',
+  templateUrl: './create-joins-page.component.html',
+  styleUrls: ['./create-joins-page.component.scss']
+})
+export class CreateJoinsPageComponent implements OnInit, AfterViewInit{
+  @ViewChildren(JoinsTableComponent)joinsTableComponent!: QueryList<JoinsTableComponent>;
+  @ViewChildren(WhereCardComponent)whereCardComponent!: QueryList<WhereCardComponent>;
+
+  public allSchema: String[] | undefined;
+  filterBaseSchema: any;
+  filterBaseTables: any;
+  tablesByBaseSchema: InfoTable[] | undefined;
+  tablesByBaseSchemaAll: InfoTable[] | undefined;
+  tablesByBaseSchemaNoViews: InfoTable[] | undefined;
+  baseTableData: any;
+  isChecked: boolean = false;
+  requestInfoJoin: Array<JoinsTableComponent> = [];
+  whereCardList: Array<WhereCardComponent> = [];
+  baseTableName: String = "";
+  baseTableNameLowerCase: String = "";
+  oneJoinRemaining : boolean = true;
+  baseSchema: String | undefined;
+  displayJoins: boolean = false;
+  allData: Join[] = [];
+  aliasData: Alias[] = [];
+  selectedAlias: String = "";
+  passSchema: String = "";
+  passTable: String = "";
+  baseAlias: Alias | undefined;
+  memoAlias: Alias | undefined;
+  conditionData: Condition[] = []
+
+  constructor(
+    private infoColumnService: InfoColumnService,
+    private infoTableService: InfoTableService
+    ){}
+
+    ngAfterViewInit(): void {
+    }
+
+    ngOnInit(): void {
+      this.getSchemas();
+      this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService));
+    }
+
+    public getSchemas():void {
+      this.infoTableService.getSchemas().subscribe(
+        (response : String[]) => {
+          this.allSchema = response;
+        },
+        (error: HttpErrorResponse) => {
+          alert(error.message)
+        }
+      );
+    }
+
+    public useTablesWithBaseSchema (event: any){
+      this.baseSchema = event.target.value;
+      this.infoTableService.getTablesBySchema(event.target.value).subscribe(
+        (response : InfoTable[]) => {
+          this.tablesByBaseSchemaAll = response;
+          this.divideTablesAndViews();
+        },
+        (error: HttpErrorResponse) => {
+          alert(error.message)
+        }
+      );
+
+    }
+
+    public divideTablesAndViews(){
+
+      if(this.tablesByBaseSchemaAll){
+        this.tablesByBaseSchemaNoViews = [];
+        this.tablesByBaseSchemaAll.forEach((el, i) => {
+          if(el.nameTable.length < 5){
+            this.tablesByBaseSchemaNoViews?.push(el);
+          }
+        });
+      }
+      if(this.isChecked){
+        this.tablesByBaseSchema = this.tablesByBaseSchemaAll;
+      } else {
+        this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews;
+      }
+    }
+
+    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(){
+      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){
+          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);
+      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())){
+            tempAlias = alias.slice(-1);
+            let numTempAlias = +tempAlias;
+            if(numTempAlias > highestValue){
+              indexOfHighest = ind;
+              highestValue = numTempAlias;
+            }
+            inInclude = true;
+          }
+        })
+      }
+      if(inInclude && highestValue != 0){
+        this.allData[indexOfHighest].aliasSpecificTable = deleteAlias || "";
+        this.aliasData.splice(i, 1);
+        this.aliasData[indexOfHighest].nameAlias = deleteAlias;
+      } else {
+        this.aliasData.splice(i, 1);
+      }
+      if(this.baseAlias){
+        this.aliasData.unshift(this.baseAlias);
+      }
+      this.checkLength();
+      this.aliasData = [...this.aliasData]
+    }
+
+    public checkLength(){
+      if(this.requestInfoJoin.length > 1){
+        this.oneJoinRemaining = false;
+      } else {
+        this.oneJoinRemaining = true;
+      }
+    }
+
+
+    public retrieveData(event: Join, index: number){
+      const tempData = event;
+      if(this.allData.length != 0 && this.allData[index]){
+        const antAlias = this.allData[index].aliasSpecificTable;
+        if(this.allData[index].aliasSpecificTable.includes(tempData.aliasSpecificTable.toString())){
+
+        } else {
+          this.checkAndRemoveIfAliasWasUse(antAlias);
+        }
+      }
+
+      let switchData = "";
+      let tempNum = "";
+      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){
+        switchData = "emptyData";
+      } else {
+        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())){
+              indexAliasData.push(tempAllData[i]);
+              switchData = "indexAlias";
+              first = 1;
+            } else {
+              if(first === 0){
+                switchData = "indexNoAlias";
+              }
+            }
+          })
+        } 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";
+              }
+            }
+          })
+        }
+      }
+
+      switch (switchData) {
+        case "emptyData":
+          tempData.aliasSpecificTable = tempData.aliasSpecificTable + "0";
+          this.allData.push(tempData);
+          break;
+
+        case "indexAlias":
+          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"
+          }
+          else {
+            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){
+            this.allData[indexOfHighest].aliasSpecificTable = rememberAlias || "";
+          }
+          this.allData[index] = tempData;
+          this.allData[index].aliasSpecificTable = tempData.aliasSpecificTable + tempNum;
+          break;
+
+        case "indexNoAlias":
+          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":
+          let memRem = 0;
+          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]
+
+      if(this.baseAlias){
+        this.aliasData.splice(0);
+        this.aliasData.push(this.baseAlias)
+        this.allData.forEach((all) => {
+          const ephAlias: Alias = {
+            nameSchema: all.specificSchema,
+            nameTable: all.specificTable,
+            nameAlias: all.aliasSpecificTable
+          }
+          this.aliasData.push(ephAlias);
+        });
+      }
+      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 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);
+      }
+    }
+
+    public checkValue(event: any){
+      if(this.isChecked){
+        this.tablesByBaseSchema = this.tablesByBaseSchemaAll;
+      } else {
+        this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews;
+      }
+    }
+}

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

@@ -0,0 +1,136 @@
+<div class="my-4 grid sm:grid-cols-1 md:grid-cols-2 gap-5">
+  <!--Card-->
+    <div class="rounded-lg overflow-hidden shadow-lg bg-white">
+      <div  class="px-6 py-4">
+        <div class="font-bold text-xl text-center">Selectionner un Schéma et une Table :</div>
+
+          <div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div>
+
+          <label class="text-black">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)]="filterFirstSchema" placeholder="Rechercher...">
+
+          <select (change)="useTablesWithFirstSchema($event)" size="5" 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 schema of allSchema | filter : filterFirstSchema" value="{{ schema }}">{{ schema }}</option>
+          </select>
+
+          <div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div>
+
+          <div *ngIf="tablesByFirstSchema">
+          <label class="text-black">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)]="filterFirstTable" placeholder="Rechercher...">
+
+          <select [(ngModel)]="firstTableData" (change)="getColumnsForJoinTwo()" size="5" 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 table of tablesByFirstSchema | filter : filterFirstTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+          </select>
+          </div>
+    </div>
+  </div>
+
+
+
+
+
+  <div class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <div  class="px-6 py-4 ">
+      <div class="font-bold text-xl text-center">Selectionner un Schéma et une Table :</div>
+
+        <div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div>
+
+        <label class="text-black">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)]="filterSecondSchema" placeholder="Rechercher...">
+
+        <select (change)="useTablesWithSecondSchema($event)" size="5" 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 schema of allSchema | filter : filterSecondSchema" value="{{ schema }}">{{ schema }}</option>
+        </select>
+
+        <div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div>
+
+        <div *ngIf="tablesBySecondSchema">
+          <label class="text-black">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)]="filterSecondTable" placeholder="Rechercher...">
+
+          <select [(ngModel)]="secondTableData" (change)="getColumnsForJoinTwo()"  size="5" 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 table of tablesBySecondSchema | filter : filterSecondTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+          </select>
+        </div>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="columnIsFull" 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 ">
+      <label class="text-black mb-4">Colonne(s) en commun : </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 (change)="displayColumnsInformations($event)" 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 column of infoColumn | filter: filterColumn" id="{{ column.id }}" value="{{ column.id }}">{{ column.nameColumn }}</option>
+      </select>
+    </div>
+
+
+   <!--Card-->
+    <div *ngIf="displayColumns" class="rounded-lg overflow-hidden shadow-lg bg-white">
+      <div class="bg-orange-400 w-full h-2 overflow-hidden my-2"></div>
+
+      <div class="px-6 pb-4 grid justify-items-center">
+        <div class="font-bold text-xl mb-2">Colonne : {{ displayColumns.nameColumn }}</div>
+        <p class="text-lg">Data Type : {{ displayColumns.dataType }}</p>
+        <p class="text-lg">Taille : {{ displayColumns.lengthColumn }}</p>
+        <p class="text-lg">Description : {{ displayColumns.columnText }}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+<div *ngIf="displayColumns" class="my-4 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
+  <!--Card-->
+  <div  class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <div class="font-bold text-xl text-center pt-2">INNER JOIN</div>
+    <div class="px-2 py-2">
+      <textarea rows="4" 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-blue-500 focus:border-blue-500">
+SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.*
+FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }}
+INNER JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }}
+ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea>
+    </div>
+  </div>
+
+  <div  class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <div class="font-bold text-xl text-center pt-2">FULL JOIN</div>
+    <div class="px-2 py-2">
+<textarea rows="4" 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-blue-500 focus:border-blue-500">
+SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.*
+FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }}
+FULL JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }}
+ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea>
+    </div>
+  </div>
+
+  <div  class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <div class="font-bold text-xl text-center pt-2">LEFT JOIN</div>
+    <div class="px-2 py-2">
+<textarea rows="4" 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-blue-500 focus:border-blue-500">
+SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.*
+FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }}
+LEFT JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }}
+ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea>
+    </div>
+  </div>
+
+  <div  class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <div class="font-bold text-xl text-center pt-2">RIGHT JOIN</div>
+    <div class="px-2 py-2">
+<textarea rows="4" 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-blue-500 focus:border-blue-500">
+SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.*
+FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }}
+RIGHT JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }}
+ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea>
+    </div>
+  </div>
+
+</div>

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

@@ -0,0 +1,148 @@
+import { Component, OnInit } from '@angular/core';
+import { InfoColumnService } from '../service/info-column.service';
+import { InfoTableService } from '../service/info-table.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { InfoTable } from '../model/info-table';
+import { InfoColumn } from '../model/info-column';
+
+@Component({
+  selector: 'app-joins-page',
+  templateUrl: './joins-page.component.html',
+  styleUrls: ['./joins-page.component.scss']
+})
+export class JoinsPageComponent implements OnInit{
+  public allSchema: String[] | undefined;
+  filterFirstSchema: any;
+  filterSecondSchema: any;
+  filterFirstTable: any;
+  filterSecondTable: any;
+  filterColumn: any;
+  public firstSchema: string | undefined;
+  public secondSchema: string | undefined;
+  public tablesByFirstSchema: InfoTable[] | undefined;
+  public tablesBySecondSchema: InfoTable[] | undefined;
+  firstTableData: any;
+  secondTableData: any;
+  public infoColumn: InfoColumn[] | undefined;
+  public columnIsFull: boolean = false;
+  public displayColumns: InfoColumn | undefined;
+
+
+  public nameFirstTableLowerCase: String = "";
+  public nameSecondTableLowerCase: String = "";
+  public nameFirstTable: String = "";
+  public nameSecondTable: String = "";
+  public tables: string[] | undefined;
+  public schemas: string[] | undefined;
+
+  constructor(
+
+    private infoColumnService: InfoColumnService,
+    private infoTableService: InfoTableService
+    ){}
+
+  ngOnInit(): void {
+    this.getSchemas();
+  }
+
+  public getSchemas():void {
+    this.infoTableService.getSchemas().subscribe(
+      (response : String[]) => {
+        this.allSchema = response;
+        console.log(response);
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public useTablesWithFirstSchema (event: any){
+    this.firstSchema = event.target.value;
+    this.displayColumns = undefined;
+    this.columnIsFull = false;
+    this.infoTableService.getTablesBySchema(event.target.value).subscribe(
+      (response : InfoTable[]) => {
+        this.tablesByFirstSchema = response;
+        console.log(response);
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public useTablesWithSecondSchema (event: any){
+    this.columnIsFull = false;
+    this.secondSchema = event.target.value;
+    this.displayColumns = undefined;
+    this.infoTableService.getTablesBySchema(event.target.value).subscribe(
+      (response : InfoTable[]) => {
+        this.tablesBySecondSchema = response;
+        console.log(response);
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  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();
+    this.nameFirstTable = this.firstTableData.nameTable;
+    this.nameSecondTable = this.secondTableData.nameTable;
+    this.infoColumnService.getColumn(event.target.value).subscribe(
+      (response : InfoColumn) => {
+        this.displayColumns = response;
+        console.log(response);
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public getColumnsForJoinTwo (){
+    this.displayColumns = undefined;
+    if(this.firstTableData && this.secondTableData && this.firstSchema && this.secondSchema){
+      this.schemas = [this.firstSchema, this.secondSchema];
+      this.tables = [this.firstTableData.nameTable, this.secondTableData.nameTable];
+
+       this.infoColumnService.getColumnsForJoinTwo(this.tables, this.schemas).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);
+        }
+      );
+    }
+  }
+
+}

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

@@ -0,0 +1,57 @@
+<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-2 xl:grid-cols-4 gap-4">
+
+      <div>
+        <label class="text-black text-left">Jointures : </label>
+        <select [(ngModel)]="joinData" (change)="verifyAndSendData()" 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 join of alljoins" [ngValue]="join">{{ join }}</option>
+        </select>
+      </div>
+
+      <div>
+        <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...">
+
+        <select (change)="useTablesWithSpecificSchema($event)" 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 schema of allSchema | filter : filterBaseSchema" value="{{ schema }}">{{ schema }}</option>
+        </select>
+      </div>
+
+      <div>
+        <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...">
+
+        <select [(ngModel)]="specificTableData" (change)="getSpecificColumns()" 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 table of tablesByBaseSchema | filter : filterBaseTables" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+        </select>
+      </div>
+
+      <div *ngIf="allAlias">
+        <label class="text-black text-left">Alias(Base) : </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)="getBaseColumns()" 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 tempAliasData | filter : filterAlias" [ngValue]="alias">{{ alias.nameAlias }}</option>
+        </select>
+      </div>
+
+    </div>
+
+    <div *ngIf="tablesByBaseSchema" class="mb-2">
+      <input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'true':'false')" class="w-4 h-4 text-orange-400 bg-slate-400 border-slate-200 rounded focus:ring-orange-400 focus:ring-2"/>
+      <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Afficher aussi les Vues</label>
+    </div>
+
+    <div *ngFor="let cols of columnsInfo, index as ind">
+      <app-columns-card [baseColumns]="baseColumns" [specificColumns]="specificColumns" [childIndex]="ind" (selectedColumn)="retrieveColumnsData($event, ind)"></app-columns-card>
+
+      <div class="flex inline-flex space-x-4">
+        <button (click)="addSelectColumns()" type="button" class="text-white text-lg bg-gradient-to-br from-teal-400 to-green-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 my-2">+</button>
+
+        <button *ngIf="columnsInfo.length > 1" (click)="removeSelectColumns(ind)" type="button" class="text-gray-900 text-lg bg-gradient-to-br from-rose-600 to-red-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 font-medium rounded-full text-sm px-5 py-2.5 text-center my-2">-</button>
+      </div>
+    </div>
+  </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

@@ -0,0 +1,198 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, QueryList, ViewChildren } from '@angular/core';
+import { InfoColumn } from '../model/info-column';
+import { InfoTable } from '../model/info-table';
+import { InfoColumnService } from '../service/info-column.service';
+import { InfoTableService } from '../service/info-table.service';
+import { Alias } from '../model/alias';
+import { Join } from '../model/join';
+import { ColumnData } from '../model/column-data';
+import { ColumnsCardComponent } from '../columns-card/columns-card.component';
+
+@Component({
+  selector: 'app-joins-table',
+  templateUrl: './joins-table.component.html',
+  styleUrls: ['./joins-table.component.scss']
+})
+export class JoinsTableComponent implements OnInit, OnChanges{
+  @ViewChildren(ColumnsCardComponent)joinsColumnsComponent!: QueryList<ColumnsCardComponent>;
+  @Input() allAlias: Alias[] = [];
+  @Input() passJoinData: Join | undefined;
+  @Output() data = new EventEmitter<Join>();
+  @Output() selectedAlias = new EventEmitter<String>();
+  public allSchema: String[] | undefined;
+  filterBaseSchema: any;
+  filterBaseTables: any;
+  isChecked: boolean = false;
+  filterAlias: any;
+  specificTableData: any;
+  tablesByBaseSchema: InfoTable[] | undefined;
+  tablesByBaseSchemaAll: InfoTable[] | undefined;
+  tablesByBaseSchemaNoViews: InfoTable[] | undefined;
+  joinData: any;
+  alljoins: String[] = ['INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN'];
+  selectedSchema: String | undefined;
+  columnsForSpecificTable: InfoColumn[] | undefined;
+  baseColumns: InfoColumn[] | undefined;
+  specificColumns: InfoColumn[] | undefined;
+  specificSchema: String | undefined;
+  specificTable: String | undefined;
+  baseAlias: Alias | undefined;
+  myJoinData: Join | undefined;
+  isGood: boolean = true;
+  positionIndex: number = 0;
+  tempAliasData: Alias[] = [];
+  goodAlias = true;
+  columnsInfo: Array<ColumnsCardComponent> = [];
+  columnsData: ColumnData[] = [];
+
+  constructor(
+    private infoColumnService: InfoColumnService,
+    private infoTableService: InfoTableService
+    ){}
+
+  ngOnInit(): void {
+    this.getSchemas();
+    this.getBaseColumns();
+    this.columnsInfo.push(new ColumnsCardComponent());
+  }
+
+  ngOnChanges(): void {
+    this.getBaseColumns();
+    this.verifyAlias();
+  }
+
+  public verifyAlias(){
+    this.tempAliasData = this.allAlias;
+    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 {
+    this.infoTableService.getSchemas().subscribe(
+      (response : String[]) => {
+        this.allSchema = response;
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public useTablesWithSpecificSchema (event: any){
+    this.specificSchema = event.target.value;
+    this.infoTableService.getTablesBySchema(event.target.value).subscribe(
+      (response : InfoTable[]) => {
+        this.tablesByBaseSchemaAll = response;
+        this.divideTablesAndViews();
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public divideTablesAndViews(){
+    if(this.tablesByBaseSchemaAll){
+      this.tablesByBaseSchemaNoViews = [];
+      this.tablesByBaseSchemaAll.forEach((el, i) => {
+        if(el.nameTable.length < 5){
+          this.tablesByBaseSchemaNoViews?.push(el);
+        }
+      });
+    }
+    if(this.isChecked){
+      this.tablesByBaseSchema = this.tablesByBaseSchemaAll;
+    } else {
+      this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews;
+    }
+  }
+
+  public getBaseColumns():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 getSpecificColumns():void {
+    this.specificTable = this.specificTableData.nameTable;
+    if(this.specificSchema && this.specificTable){
+      this.infoColumnService.getSelectedColumns(this.specificSchema, this.specificTable).subscribe(
+        (response : InfoColumn[]) => {
+          this.specificColumns = response;
+        },
+        (error: HttpErrorResponse) => {
+          alert(error.message)
+        }
+      );
+    }
+  }
+
+  public verifyAndSendData(){
+    if(this.specificSchema && this.specificTable && this.joinData && this.baseAlias && this.columnsData){
+      const tempLower = this.specificTable.toLowerCase();
+      this.myJoinData = {
+        joinSpec: this.joinData,
+        specificSchema: this.specificSchema,
+        specificTable: this.specificTable,
+        baseAlias: this.baseAlias.nameAlias,
+        columns: this.columnsData,
+        aliasSpecificTable: tempLower,
+      }
+       this.data.emit(this.myJoinData);
+      }
+  }
+
+  public addSelectColumns(){
+    this.columnsInfo.push(new ColumnsCardComponent());
+
+  }
+
+  public removeSelectColumns(index: number){
+    this.columnsInfo.splice(index, 1)
+    if(this.columnsData[index]){
+      this.columnsData.splice(index, 1);
+    }
+    if(this.columnsData[0]){
+      this.columnsData[0].operator = "ON";
+    }
+    this.verifyAndSendData()
+  }
+
+  public retrieveColumnsData(data: ColumnData, index: number){
+    if(this.columnsData.length === 0){
+      this.columnsData.push(data);
+    }
+    if(this.columnsData[index]){
+      this.columnsData[index] = data;
+    } else {
+      this.columnsData.push(data);
+    }
+
+    this.verifyAndSendData();
+    console.log(this.columnsData);
+  }
+
+  public checkValue(event: any){
+    if(this.isChecked){
+      this.tablesByBaseSchema = this.tablesByBaseSchemaAll;
+    } else {
+      this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews;
+    }
+  }
+
+}

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

@@ -0,0 +1,6 @@
+<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>
+</div>

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

@@ -0,0 +1,11 @@
+.landing-block {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.landing-links {
+  width: 100%;
+  text-align: center;
+}

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-landing-page',
+  templateUrl: './landing-page.component.html',
+  styleUrls: ['./landing-page.component.scss']
+})
+export class LandingPageComponent {
+
+}

src/app/model/alias.ts

@@ -0,0 +1,5 @@
+export interface Alias {
+  nameSchema: String,
+  nameTable: String,
+  nameAlias: String,
+}

src/app/model/column-data.ts

@@ -0,0 +1,5 @@
+export interface ColumnData {
+  operator: String;
+  aliasColumn: String;
+  specColumn: String;
+}

src/app/model/condition.ts

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

src/app/model/employee.ts

@@ -0,0 +1,7 @@
+export interface Employee {
+  id: number;
+  firstName: string;
+  lastName: string;
+  mail: string;
+  password: string;
+}

src/app/model/info-column.ts

@@ -0,0 +1,7 @@
+export interface InfoColumn {
+  id: number;
+  nameColumn: string;
+  dataType: string;
+  lengthColumn: number;
+  columnText: string;
+}

src/app/model/info-table.ts

@@ -0,0 +1,6 @@
+export interface InfoTable {
+  id: number;
+  nameTable: string;
+  nameSchema: string;
+  tableText: string;
+}

src/app/model/join.ts

@@ -0,0 +1,9 @@
+import { ColumnData } from './column-data';
+export interface Join {
+  joinSpec: String;
+  specificSchema: String;
+  specificTable: String;
+  baseAlias: String;
+  columns: ColumnData[];
+  aliasSpecificTable: String;
+}

src/app/navbar/navbar.component.html

@@ -0,0 +1,63 @@
+
+<nav class="sticky top-0 left-0 right-0 z-50 bg-slate-900 hover:border-solid hover:border-b-2 hover:border-white border-b-2 border-slate-900 hover:ease-in-out duration-300">
+  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+    <div class="relative flex h-16 items-center justify-between">
+      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+        <!-- Mobile menu button-->
+        <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+          <svg (click)="openMobileMenu()" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+          </svg>
+        </button>
+      </div>
+      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+        <div class="flex flex-shrink-0 items-center">
+          <img routerLink="" class="block h-8 w-auto lg:hidden hover:cursor-pointer" src="../../assets/images/logo-apsidetop-blanc.png" alt="Your Company">
+          <img routerLink="" class="hidden h-8 w-auto lg:block hover:cursor-pointer" src="../../assets/images/logo-apsidetop-blanc.png" alt="Your Company">
+        </div>
+        <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 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>
+
+            <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>
+
+            <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner>
+          </div>
+        </div>
+      </div>
+      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+        <!-- Profile dropdown -->
+
+        <div class="relative ml-3">
+          <div>
+            <button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+              <img class="h-8 w-8 rounded-full border-solid border-2 border-white" src="../../assets/images/userpng.png" alt="">
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu, show/hide based on menu state. -->
+  <div *ngIf="mobileOpen" class="sm:hidden" id="mobile-menu">
+    <div class="space-y-1 px-2 pt-2 pb-3">
+      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+      <a routerLink="request" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Recherche</a>
+
+      <a routerLink="joins" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Jointures</a>
+
+      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
+
+      <button (click)="applyResetDatabase()" class="ml-2 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>
+
+      <mat-spinner *ngIf="isLoading" diameter="30" class="ml-2 mt-2"></mat-spinner>
+    </div>
+  </div>
+</nav>
+

src/app/navbar/navbar.component.ts

@@ -0,0 +1,38 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { ResetDataService } from '../service/reset_data.service';
+import { Router, RouterModule } from '@angular/router';
+import { AppRoutingModule } from '../app-routing.module';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent {
+  public mobileOpen: boolean = false;
+  public isLoading: boolean = false;
+
+  constructor(private resetDataService: ResetDataService, private router: Router){}
+
+  public openMobileMenu(){
+    this.mobileOpen = !this.mobileOpen;
+  }
+
+  public applyResetDatabase():void {
+    if(window.confirm('Êtes-vous sûr de vouloir recharger le BDD ? Cela peut prendre du temps !')){
+      this.isLoading = true;
+      this.resetDataService.resetDatabase().subscribe(
+        () => {
+          //this.router.navigateByUrl('');
+          this.isLoading = false;
+        },
+        (error: HttpErrorResponse) => {
+          alert(error.message)
+        }
+      );
+     }
+  }
+
+}

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

@@ -0,0 +1,96 @@
+<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>
+
+<div class="max-w-full rounded-2xl overflow-hidden shadow-lg bg-white">
+  <mat-vertical-stepper class="text-white" [linear]="true">
+    <mat-step label="Choisissez un Schéma">
+      <div class="my-2">
+
+        <label class="text-black">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)]="filterSchema" placeholder="Rechercher...">
+
+        <select [(ngModel)]="schemaName" (change)="useTablesWithSchemaName()" *ngIf="!schemasByTable" size="5" 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 schema of allSchema | filter : filterSchema" [ngValue]="schema">{{ schema }}</option>
+        </select>
+
+        <select [(ngModel)]="schemaData" (change)="useTablesWithSchemaName()" *ngIf="schemasByTable" size="5" 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 schema of schemasByTable | filter : filterSchema" [ngValue]="schema">{{ schema.nameSchema }}</option>
+        </select>
+
+        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" matStepperNext>Continuer</button>
+      </div>
+    </mat-step>
+
+    <mat-step label="Choisissez une Table">
+      <div class="my-2">
+
+        <label class="text-black">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)]="filterTable" placeholder="Rechercher...">
+
+        <select [(ngModel)]="tableData" (change)="useSchemaWithTableName()" *ngIf="!tablesBySchema" size="5" 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 table of infoTable | filter : filterTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+        </select>
+
+        <select [(ngModel)]="tableData" (change)="useSchemaWithTableName()" *ngIf="tablesBySchema" size="5" 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 table of tablesBySchema | filter : filterTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+        </select>
+
+        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-2 mb-2" matStepperPrevious>Retour</button>
+        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" matStepperNext>Continuer</button>
+      </div>
+    </mat-step>
+
+    <mat-step label="(Optionnel) Choisissez une colonne">
+      <div class="my-2">
+
+          <label class="text-black mb-4">Colonnes : </label>
+          <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)="resetColumnsInformations()">Reset</button>
+
+
+        <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 (change)="displayColumnsInformations($event)" size="5" 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 column of infoColumn | filter: filterColumn" id="{{ column.id }}" value="{{ column.id }}">{{ column.nameColumn }} ({{ column.columnText }})</option>
+        </select>
+
+        <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-2 mb-2" matStepperPrevious>Retour</button>
+       </div>
+    </mat-step>
+  </mat-vertical-stepper>
+</div>
+
+<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  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>
+        <div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div>
+        <p class="text-base">{{ currentTable.tableText }}</p>
+      </div>
+    </div>
+
+</div>
+
+<div *ngIf="!displayColumns" class="my-4 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
+  <!--Card-->
+    <div *ngFor="let column of infoColumn" class="rounded-lg overflow-hidden shadow-lg bg-white">
+      <div  class="px-6 py-4">
+        <div class="font-bold text-xl mb-2">Colonne : {{ column.nameColumn }}</div>
+        <p class="text-base">Data Type : {{ column.dataType }}</p>
+        <p class="text-base">Taille : {{ column.lengthColumn }}</p>
+        <p class="text-base">Description : {{ column.columnText }}</p>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="displayColumns" class="my-4 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
+  <!--Card-->
+  <div  class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <div class="px-6 py-4">
+      <div class="font-bold text-xl mb-2">Colonne : {{ displayColumns.nameColumn }}</div>
+      <p class="text-base">Data Type : {{ displayColumns.dataType }}</p>
+      <p class="text-base">Taille : {{ displayColumns.lengthColumn }}</p>
+      <p class="text-base">Description : {{ displayColumns.columnText }}</p>
+    </div>
+  </div>
+</div>

src/app/request-page/request-page.component.ts

@@ -0,0 +1,163 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import {FormBuilder, Validators} from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { Employee } from '../model/employee';
+import { EmployeeService } from '../service/employee.service';
+import { InfoTable } from '../model/info-table';
+import { InfoTableService } from '../service/info-table.service';
+import { InfoColumn } from '../model/info-column';
+import { InfoColumnService } from '../service/info-column.service';
+import { MatStepperModule } from '@angular/material/stepper';
+
+@Component({
+  selector: 'app-request-page',
+  templateUrl: './request-page.component.html',
+  styleUrls: ['./request-page.component.scss']
+})
+export class RequestPageComponent implements OnInit {
+
+  public allSchema: String[] | undefined;
+  public infoTable: InfoTable[] | undefined;
+  public infoColumn: InfoColumn[] | undefined;
+  public tablesBySchema: InfoTable[] | undefined;
+  public schemasByTable: InfoTable[] | undefined;
+  public displayColumns: InfoColumn | undefined;
+  public currentTable: InfoTable | undefined;
+  public selectedSchema: String | undefined;
+  filterSchema: any;
+  filterTable: any;
+  filterColumn: any;
+  tableData: any;
+  schemaData: any;
+  schemaName: any;;
+
+  firstFormGroup = this._formBuilder.group({
+    firstCtrl: ['', Validators.required],
+  });
+  secondFormGroup = this._formBuilder.group({
+    secondCtrl: ['', Validators.required],
+  });
+
+  constructor(
+    private _formBuilder: FormBuilder ,
+    private infoColumnService: InfoColumnService,
+    private infoTableService: InfoTableService
+    ){}
+
+
+  ngOnInit(): void {;
+      this.getSchemas();
+      this.getTables();
+  }
+
+  public getSchemas():void {
+    this.infoTableService.getSchemas().subscribe(
+      (response : String[]) => {
+        this.allSchema = response;
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public getTables():void {
+    this.infoTableService.getAllTables().subscribe(
+      (response : InfoTable[]) => {
+        this.infoTable = response;
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public divideColumns(nameSch: String, tempsTab: InfoTable):void {
+    console.log(nameSch, tempsTab.nameTable)
+      this.infoColumnService.getSelectedColumns(nameSch, tempsTab.nameTable).subscribe(
+        (response : InfoColumn[]) => {
+          this.infoColumn = response;
+        },
+        (error: HttpErrorResponse) => {
+          alert(error.message)
+        }
+      );
+      this.displayColumns = undefined;
+      this.infoTableService.getTable(tempsTab.id).subscribe(
+        (response : InfoTable) => {
+          this.currentTable = response;
+        },
+        (error: HttpErrorResponse) => {
+          alert(error.message)
+        }
+      );
+
+  }
+
+  public displayColumnsInformations (event: any){
+    this.infoColumnService.getColumn(event.target.value).subscribe(
+      (response : InfoColumn) => {
+        this.displayColumns = response;
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+  }
+
+  public useTablesWithSchemaName (){
+      if(this.schemaName){
+        this.selectedSchema = this.schemaName;
+      } else {
+        this.selectedSchema = this.schemaData.nameSchema;
+      }
+      // this.displayColumns = undefined;
+      // this.currentTable = undefined;
+      // this.infoColumn = undefined;
+
+      if(this.selectedSchema){
+        this.infoTableService.getTablesBySchema(this.selectedSchema).subscribe(
+          (response : InfoTable[]) => {
+            this.tablesBySchema = response;
+          },
+          (error: HttpErrorResponse) => {
+            alert(error.message)
+          }
+        );
+        if(this.tableData){
+          this.divideColumns(this.selectedSchema, this.tableData);
+        }
+      }
+  }
+
+  public useSchemaWithTableName (){
+    this.infoTableService.getSchemasByTable(this.tableData.nameTable).subscribe(
+      (response : InfoTable[]) => {
+        this.schemasByTable = response;
+        console.log(response);
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message)
+      }
+    );
+    if(this.selectedSchema){
+      this.divideColumns(this.selectedSchema, this.tableData);
+    }
+    this.schemaName = null;
+  }
+
+  public resetColumnsInformations(){
+    this.displayColumns = undefined;
+  }
+
+  public refreshEverything(){
+    this.tablesBySchema = undefined;
+    this.schemasByTable = undefined;
+    this.selectedSchema = undefined;
+    this.displayColumns = undefined;
+    this.infoColumn = undefined;
+    this.currentTable = undefined;
+    this.tableData = null;
+  }
+
+}

src/app/schemas-tab/schemas-tab.component.html

@@ -0,0 +1,48 @@
+<div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
+  <!--Card 1-->
+  <div class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <img class="w-full" src="/mountain.jpg" alt="Mountain">
+    <div class="px-6 py-4">
+      <div class="font-bold text-xl mb-2">Mountain</div>
+      <p class="text-gray-700 text-base">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
+      </p>
+    </div>
+    <div class="px-6 pt-4 pb-2">
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
+    </div>
+  </div>
+  <!--Card 2-->
+  <div class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <img class="w-full" src="/river.jpg" alt="River">
+    <div class="px-6 py-4">
+      <div class="font-bold text-xl mb-2">River</div>
+      <p class="text-gray-700 text-base">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
+      </p>
+    </div>
+    <div class="px-6 pt-4 pb-2">
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#summer</span>
+    </div>
+  </div>
+
+  <!--Card 3-->
+  <div class="rounded-lg overflow-hidden shadow-lg bg-white">
+    <img class="w-full" src="/forest.jpg" alt="Forest">
+    <div class="px-6 py-4">
+      <div class="font-bold text-xl mb-2">Forest</div>
+      <p class="text-gray-700 text-base">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
+      </p>
+    </div>
+    <div class="px-6 pt-4 pb-2">
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#fall</span>
+    </div>
+  </div>
+</div>

src/app/schemas-tab/schemas-tab.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-schemas-tab',
+  templateUrl: './schemas-tab.component.html',
+  styleUrls: ['./schemas-tab.component.scss']
+})
+export class SchemasTabComponent implements OnInit{
+  title!: string;
+  description!: string;
+  createdDate!: Date;
+  snaps!: number;
+  imageUrl!: string;
+  buttonText!: string
+
+  ngOnInit(){
+    this.title = 'FirstTest';
+    this.description = 'FirstDescription';
+    this.createdDate = new Date();
+    this.snaps = 10;
+    this.imageUrl = '/assets/images/apsidetop.png';
+    this.buttonText = 'Add Like';
+  }
+
+  onLike(){
+    if(this.buttonText === 'Add Like'){
+      this.snaps++;
+      this.buttonText = 'Unlike';
+    } else {
+      this.snaps--;
+      this.buttonText = "Add Like";
+    }
+  }
+
+}

src/app/service/employee.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { Employee } from '../model/employee';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EmployeeService {
+  private apiServerUrl = environment.apiBaseUrl;
+
+  constructor(private http: HttpClient) {}
+
+  public getAllEmployees(): Observable<Employee[]> {
+    return this.http.get<Employee[]>(`${this.apiServerUrl}/api/employees/all`);
+  }
+
+  public getEmployee(employeeId: number): Observable<Employee> {
+    return this.http.get<Employee>(`${this.apiServerUrl}/api/employee/${employeeId}`);
+  }
+
+  public addEmployee(employee: Employee): Observable<Employee> {
+    return this.http.post<Employee>(`${this.apiServerUrl}/api/employee/add`, employee);
+  }
+
+  public updateEmployee(employee: Employee, employeeId: number): Observable<Employee> {
+    return this.http.put<Employee>(`${this.apiServerUrl}/api/employee/update/${employeeId}`, employee);
+  }
+
+  public deleteEmployee(employeeId: number): Observable<void> {
+    return this.http.delete<void>(`${this.apiServerUrl}/api/employee/delete/${employeeId}`);
+  }
+}

src/app/service/info-column.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment.development';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { InfoColumn } from '../model/info-column';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InfoColumnService {
+
+
+
+  private apiServerUrl = environment.apiBaseUrl;
+
+  constructor(private http: HttpClient) { }
+
+  public getAllColumns(): Observable<InfoColumn[]>{
+    return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/all`);
+  }
+
+  public getColumn(columnId: Number): Observable<InfoColumn>{
+    return this.http.get<InfoColumn>(`${this.apiServerUrl}/api/column/${columnId}`);
+  }
+
+  public getSelectedColumns(schema: String, table: String): Observable<InfoColumn[]>{
+    return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/${schema}/${table}`);
+  }
+
+  public getColumnsForJoin(firstSchema: String, secondSchema: String, firstTable: String, secondTable: String): Observable<InfoColumn[]>{
+    return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/${firstSchema}/${secondSchema}/${firstTable}/${secondTable}`);
+  }
+
+  public getColumnsForJoinTwo(tables: string[], schemas: string[]): Observable<InfoColumn[]>{
+    const paramsGetJoins = new HttpParams().set('tables', tables.toString()).set('schemas', schemas.toString());
+    return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/joins`, {params: paramsGetJoins});
+  }
+}

src/app/service/info-table.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { InfoTable } from '../model/info-table';
+import { environment } from 'src/environments/environment';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InfoTableService {
+  private apiServerUrl = environment.apiBaseUrl;
+
+  constructor(private http: HttpClient) { }
+
+  public getAllTables(): Observable<InfoTable[]>{
+    return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/tables/all`);
+  }
+
+  public getTable(tableId: Number): Observable<InfoTable>{
+    return this.http.get<InfoTable>(`${this.apiServerUrl}/api/table/${tableId}`);
+  }
+
+  public getSchemas(): Observable<String[]>{
+    return this.http.get<String[]>(`${this.apiServerUrl}/api/schemas/all`);
+  }
+
+  public getTablesBySchema(nameSchema : String): Observable<InfoTable[]>{
+    return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/tables/${nameSchema}`);
+  }
+
+  public getSchemasByTable(nameTable : String): Observable<InfoTable[]>{
+    return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/schemas/${nameTable}`);
+  }
+}

src/app/service/reset_data.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment.development';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ResetDataService {
+  private apiServerUrl = environment.apiBaseUrl;
+
+  constructor(private http: HttpClient) { }
+
+  public resetDatabase(){
+    return this.http.post<void>(`${this.apiServerUrl}/api/reset`, null);
+  }
+
+}

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

src/environments/environment.development.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  apiBaseUrl: 'http://localhost:9001'
+};

src/environments/environment.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  production: false,
+  apiBaseUrl: 'http://localhost:8080'
+
+};

src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AngularTest</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="bg-slate-900">
+  <app-root ></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/styles.scss

@@ -0,0 +1,11 @@
+/* You can add global styles to this file, and also import other style files */
+/* More informations on https://tailwindcss.com/ */
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: '',
+  purge: {
+    content: [
+      './src/**/*.{html,ts}',
+    ]
+  },
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
+};

tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}