Compare commits
No commits in common. 'dev' and 'main' have entirely different histories.
@ -1,16 +0,0 @@ |
|||||||
# 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 |
|
@ -1,42 +0,0 @@ |
|||||||
# 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 |
|
@ -1,4 +0,0 @@ |
|||||||
{ |
|
||||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 |
|
||||||
"recommendations": ["angular.ng-template"] |
|
||||||
} |
|
@ -1,20 +0,0 @@ |
|||||||
{ |
|
||||||
// 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" |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
@ -1,42 +0,0 @@ |
|||||||
{ |
|
||||||
// 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" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
@ -1,27 +0,0 @@ |
|||||||
# 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. |
|
@ -1,139 +0,0 @@ |
|||||||
{ |
|
||||||
"$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": [] |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
File diff suppressed because it is too large
Load Diff
@ -1,44 +0,0 @@ |
|||||||
{ |
|
||||||
"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" |
|
||||||
} |
|
||||||
} |
|
@ -1,62 +0,0 @@ |
|||||||
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); |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
@ -1,25 +0,0 @@ |
|||||||
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 {} |
|
@ -1,6 +0,0 @@ |
|||||||
<div> |
|
||||||
<app-navbar></app-navbar> |
|
||||||
<div class="mt-4 px-12"> |
|
||||||
<router-outlet></router-outlet> |
|
||||||
</div> |
|
||||||
</div> |
|
@ -1,10 +0,0 @@ |
|||||||
import { Component } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-root', |
|
||||||
templateUrl: './app.component.html', |
|
||||||
styleUrls: ['./app.component.scss'] |
|
||||||
}) |
|
||||||
export class AppComponent { |
|
||||||
|
|
||||||
} |
|
@ -1,57 +0,0 @@ |
|||||||
|
|
||||||
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 { } |
|
@ -1,20 +0,0 @@ |
|||||||
<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> |
|
@ -1,38 +0,0 @@ |
|||||||
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); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,86 +0,0 @@ |
|||||||
|
|
||||||
<!--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> |
|
||||||
|
|
@ -1,412 +0,0 @@ |
|||||||
|
|
||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
@ -1,136 +0,0 @@ |
|||||||
<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> |
|
@ -1,148 +0,0 @@ |
|||||||
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); |
|
||||||
} |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,57 +0,0 @@ |
|||||||
<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> |
|
@ -1,25 +0,0 @@ |
|||||||
// 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 */ |
|
||||||
} |
|
@ -1,198 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,6 +0,0 @@ |
|||||||
<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> |
|
@ -1,11 +0,0 @@ |
|||||||
.landing-block { |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
} |
|
||||||
|
|
||||||
.landing-links { |
|
||||||
width: 100%; |
|
||||||
text-align: center; |
|
||||||
} |
|
@ -1,10 +0,0 @@ |
|||||||
import { Component } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-landing-page', |
|
||||||
templateUrl: './landing-page.component.html', |
|
||||||
styleUrls: ['./landing-page.component.scss'] |
|
||||||
}) |
|
||||||
export class LandingPageComponent { |
|
||||||
|
|
||||||
} |
|
@ -1,5 +0,0 @@ |
|||||||
export interface Alias { |
|
||||||
nameSchema: String, |
|
||||||
nameTable: String, |
|
||||||
nameAlias: String, |
|
||||||
} |
|
@ -1,5 +0,0 @@ |
|||||||
export interface ColumnData { |
|
||||||
operator: String; |
|
||||||
aliasColumn: String; |
|
||||||
specColumn: String; |
|
||||||
} |
|
@ -1,7 +0,0 @@ |
|||||||
export interface Condition { |
|
||||||
operator: String; |
|
||||||
alias: String; |
|
||||||
column: String; |
|
||||||
condition: String; |
|
||||||
value: String; |
|
||||||
} |
|
@ -1,7 +0,0 @@ |
|||||||
export interface Employee { |
|
||||||
id: number; |
|
||||||
firstName: string; |
|
||||||
lastName: string; |
|
||||||
mail: string; |
|
||||||
password: string; |
|
||||||
} |
|
@ -1,7 +0,0 @@ |
|||||||
export interface InfoColumn { |
|
||||||
id: number; |
|
||||||
nameColumn: string; |
|
||||||
dataType: string; |
|
||||||
lengthColumn: number; |
|
||||||
columnText: string; |
|
||||||
} |
|
@ -1,6 +0,0 @@ |
|||||||
export interface InfoTable { |
|
||||||
id: number; |
|
||||||
nameTable: string; |
|
||||||
nameSchema: string; |
|
||||||
tableText: string; |
|
||||||
} |
|
@ -1,9 +0,0 @@ |
|||||||
import { ColumnData } from './column-data'; |
|
||||||
export interface Join { |
|
||||||
joinSpec: String; |
|
||||||
specificSchema: String; |
|
||||||
specificTable: String; |
|
||||||
baseAlias: String; |
|
||||||
columns: ColumnData[]; |
|
||||||
aliasSpecificTable: String; |
|
||||||
} |
|
@ -1,63 +0,0 @@ |
|||||||
|
|
||||||
<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> |
|
||||||
|
|
@ -1,38 +0,0 @@ |
|||||||
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) |
|
||||||
} |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,96 +0,0 @@ |
|||||||
<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> |
|
@ -1,163 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,48 +0,0 @@ |
|||||||
<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> |
|
@ -1,35 +0,0 @@ |
|||||||
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"; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,34 +0,0 @@ |
|||||||
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}`); |
|
||||||
} |
|
||||||
} |
|
@ -1,38 +0,0 @@ |
|||||||
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}); |
|
||||||
} |
|
||||||
} |
|
@ -1,35 +0,0 @@ |
|||||||
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}`); |
|
||||||
} |
|
||||||
} |
|
@ -1,18 +0,0 @@ |
|||||||
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); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -1,42 +0,0 @@ |
|||||||
<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> |
|
@ -1,54 +0,0 @@ |
|||||||
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]); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
Before Width: | Height: | Size: 9.7 KiB |
Before Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 39 KiB |
@ -1,4 +0,0 @@ |
|||||||
export const environment = { |
|
||||||
production: false, |
|
||||||
apiBaseUrl: 'http://localhost:9001' |
|
||||||
}; |
|
@ -1,5 +0,0 @@ |
|||||||
export const environment = { |
|
||||||
production: false, |
|
||||||
apiBaseUrl: 'http://localhost:8080' |
|
||||||
|
|
||||||
}; |
|
Before Width: | Height: | Size: 948 B |
@ -1,16 +0,0 @@ |
|||||||
<!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> |
|
@ -1,7 +0,0 @@ |
|||||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; |
|
||||||
|
|
||||||
import { AppModule } from './app/app.module'; |
|
||||||
|
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule) |
|
||||||
.catch(err => console.error(err)); |
|
@ -1,11 +0,0 @@ |
|||||||
/* 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; } |
|
@ -1,17 +0,0 @@ |
|||||||
/** @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')], |
|
||||||
}; |
|
@ -1,14 +0,0 @@ |
|||||||
/* 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" |
|
||||||
] |
|
||||||
} |
|
@ -1,33 +0,0 @@ |
|||||||
/* 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 |
|
||||||
} |
|
||||||
} |
|
@ -1,14 +0,0 @@ |
|||||||
/* 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" |
|
||||||
] |
|
||||||
} |
|
Loading…
Reference in new issue