Compare commits
11 Commits
Author | SHA1 | Date |
---|---|---|
floxx2112 | 9571e2f4ff | 2 years ago |
fhibert | be40370cb2 | 2 years ago |
fhibert | d2939b5b57 | 2 years ago |
fhibert | 60f4b7cce6 | 2 years ago |
floxx2112 | 9952610b88 | 2 years ago |
floxx2112 | 2646b80461 | 2 years ago |
floxx2112 | b78d4dc5a4 | 2 years ago |
floxx2112 | 3a8c52ae76 | 2 years ago |
floxx2112 | b4ae128b86 | 2 years ago |
floxx2112 | 83ec591545 | 2 years ago |
floxx2112 | 489e3fa34c | 2 years ago |
@ -0,0 +1,16 @@ |
|||||||
|
# Editor configuration, see https://editorconfig.org |
||||||
|
root = true |
||||||
|
|
||||||
|
[*] |
||||||
|
charset = utf-8 |
||||||
|
indent_style = space |
||||||
|
indent_size = 2 |
||||||
|
insert_final_newline = true |
||||||
|
trim_trailing_whitespace = true |
||||||
|
|
||||||
|
[*.ts] |
||||||
|
quote_type = single |
||||||
|
|
||||||
|
[*.md] |
||||||
|
max_line_length = off |
||||||
|
trim_trailing_whitespace = false |
@ -0,0 +1,42 @@ |
|||||||
|
# See http://help.github.com/ignore-files/ for more about ignoring files. |
||||||
|
|
||||||
|
# Compiled output |
||||||
|
/dist |
||||||
|
/tmp |
||||||
|
/out-tsc |
||||||
|
/bazel-out |
||||||
|
|
||||||
|
# Node |
||||||
|
/node_modules |
||||||
|
npm-debug.log |
||||||
|
yarn-error.log |
||||||
|
|
||||||
|
# IDEs and editors |
||||||
|
.idea/ |
||||||
|
.project |
||||||
|
.classpath |
||||||
|
.c9/ |
||||||
|
*.launch |
||||||
|
.settings/ |
||||||
|
*.sublime-workspace |
||||||
|
|
||||||
|
# Visual Studio Code |
||||||
|
.vscode/* |
||||||
|
!.vscode/settings.json |
||||||
|
!.vscode/tasks.json |
||||||
|
!.vscode/launch.json |
||||||
|
!.vscode/extensions.json |
||||||
|
.history/* |
||||||
|
|
||||||
|
# Miscellaneous |
||||||
|
/.angular/cache |
||||||
|
.sass-cache/ |
||||||
|
/connect.lock |
||||||
|
/coverage |
||||||
|
/libpeerconnection.log |
||||||
|
testem.log |
||||||
|
/typings |
||||||
|
|
||||||
|
# System files |
||||||
|
.DS_Store |
||||||
|
Thumbs.db |
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 |
||||||
|
"recommendations": ["angular.ng-template"] |
||||||
|
} |
@ -0,0 +1,20 @@ |
|||||||
|
{ |
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 |
||||||
|
"version": "0.2.0", |
||||||
|
"configurations": [ |
||||||
|
{ |
||||||
|
"name": "ng serve", |
||||||
|
"type": "pwa-chrome", |
||||||
|
"request": "launch", |
||||||
|
"preLaunchTask": "npm: start", |
||||||
|
"url": "http://localhost:4200/" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"name": "ng test", |
||||||
|
"type": "chrome", |
||||||
|
"request": "launch", |
||||||
|
"preLaunchTask": "npm: test", |
||||||
|
"url": "http://localhost:9876/debug.html" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
@ -0,0 +1,42 @@ |
|||||||
|
{ |
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 |
||||||
|
"version": "2.0.0", |
||||||
|
"tasks": [ |
||||||
|
{ |
||||||
|
"type": "npm", |
||||||
|
"script": "start", |
||||||
|
"isBackground": true, |
||||||
|
"problemMatcher": { |
||||||
|
"owner": "typescript", |
||||||
|
"pattern": "$tsc", |
||||||
|
"background": { |
||||||
|
"activeOnStart": true, |
||||||
|
"beginsPattern": { |
||||||
|
"regexp": "(.*?)" |
||||||
|
}, |
||||||
|
"endsPattern": { |
||||||
|
"regexp": "bundle generation complete" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "npm", |
||||||
|
"script": "test", |
||||||
|
"isBackground": true, |
||||||
|
"problemMatcher": { |
||||||
|
"owner": "typescript", |
||||||
|
"pattern": "$tsc", |
||||||
|
"background": { |
||||||
|
"activeOnStart": true, |
||||||
|
"beginsPattern": { |
||||||
|
"regexp": "(.*?)" |
||||||
|
}, |
||||||
|
"endsPattern": { |
||||||
|
"regexp": "bundle generation complete" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
} |
@ -0,0 +1,27 @@ |
|||||||
|
# AngularTest |
||||||
|
|
||||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.4. |
||||||
|
|
||||||
|
## Development server |
||||||
|
|
||||||
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. |
||||||
|
|
||||||
|
## Code scaffolding |
||||||
|
|
||||||
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
||||||
|
|
||||||
|
## Build |
||||||
|
|
||||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. |
||||||
|
|
||||||
|
## Running unit tests |
||||||
|
|
||||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
||||||
|
|
||||||
|
## Running end-to-end tests |
||||||
|
|
||||||
|
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. |
||||||
|
|
||||||
|
## Further help |
||||||
|
|
||||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
@ -0,0 +1,139 @@ |
|||||||
|
{ |
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", |
||||||
|
"version": 1, |
||||||
|
"newProjectRoot": "projects", |
||||||
|
"projects": { |
||||||
|
"angularTest": { |
||||||
|
"projectType": "application", |
||||||
|
"schematics": { |
||||||
|
"@schematics/angular:component": { |
||||||
|
"style": "scss", |
||||||
|
"skipTests": true |
||||||
|
}, |
||||||
|
"@schematics/angular:class": { |
||||||
|
"skipTests": true |
||||||
|
}, |
||||||
|
"@schematics/angular:directive": { |
||||||
|
"skipTests": true |
||||||
|
}, |
||||||
|
"@schematics/angular:guard": { |
||||||
|
"skipTests": true |
||||||
|
}, |
||||||
|
"@schematics/angular:interceptor": { |
||||||
|
"skipTests": true |
||||||
|
}, |
||||||
|
"@schematics/angular:pipe": { |
||||||
|
"skipTests": true |
||||||
|
}, |
||||||
|
"@schematics/angular:resolver": { |
||||||
|
"skipTests": true |
||||||
|
}, |
||||||
|
"@schematics/angular:service": { |
||||||
|
"skipTests": true |
||||||
|
} |
||||||
|
}, |
||||||
|
"root": "", |
||||||
|
"sourceRoot": "src", |
||||||
|
"prefix": "app", |
||||||
|
"architect": { |
||||||
|
"build": { |
||||||
|
"builder": "@angular-devkit/build-angular:browser", |
||||||
|
"options": { |
||||||
|
"outputPath": "dist/angular-test", |
||||||
|
"index": "src/index.html", |
||||||
|
"main": "src/main.ts", |
||||||
|
"polyfills": [ |
||||||
|
"zone.js" |
||||||
|
], |
||||||
|
"tsConfig": "tsconfig.app.json", |
||||||
|
"inlineStyleLanguage": "scss", |
||||||
|
"assets": [ |
||||||
|
"src/favicon.ico", |
||||||
|
"src/assets" |
||||||
|
], |
||||||
|
"styles": [ |
||||||
|
"@angular/material/prebuilt-themes/deeppurple-amber.css", |
||||||
|
"src/styles.scss" |
||||||
|
], |
||||||
|
"scripts": [] |
||||||
|
}, |
||||||
|
"configurations": { |
||||||
|
"production": { |
||||||
|
"budgets": [ |
||||||
|
{ |
||||||
|
"type": "initial", |
||||||
|
"maximumWarning": "500kb", |
||||||
|
"maximumError": "1mb" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "anyComponentStyle", |
||||||
|
"maximumWarning": "2kb", |
||||||
|
"maximumError": "4kb" |
||||||
|
} |
||||||
|
], |
||||||
|
"outputHashing": "all" |
||||||
|
}, |
||||||
|
"development": { |
||||||
|
"buildOptimizer": false, |
||||||
|
"optimization": false, |
||||||
|
"vendorChunk": true, |
||||||
|
"extractLicenses": false, |
||||||
|
"sourceMap": true, |
||||||
|
"namedChunks": true, |
||||||
|
"fileReplacements": [ |
||||||
|
{ |
||||||
|
"replace": "src/environments/environment.ts", |
||||||
|
"with": "src/environments/environment.development.ts" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
"defaultConfiguration": "production" |
||||||
|
}, |
||||||
|
"serve": { |
||||||
|
"builder": "@angular-devkit/build-angular:dev-server", |
||||||
|
"configurations": { |
||||||
|
"production": { |
||||||
|
"browserTarget": "angularTest:build:production" |
||||||
|
}, |
||||||
|
"development": { |
||||||
|
"browserTarget": "angularTest:build:development" |
||||||
|
} |
||||||
|
}, |
||||||
|
"defaultConfiguration": "development", |
||||||
|
"options": { |
||||||
|
"port": 9002 |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
"extract-i18n": { |
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n", |
||||||
|
"options": { |
||||||
|
"browserTarget": "angularTest:build" |
||||||
|
} |
||||||
|
}, |
||||||
|
"test": { |
||||||
|
"builder": "@angular-devkit/build-angular:karma", |
||||||
|
"options": { |
||||||
|
"polyfills": [ |
||||||
|
"zone.js", |
||||||
|
"zone.js/testing" |
||||||
|
], |
||||||
|
"tsConfig": "tsconfig.spec.json", |
||||||
|
"inlineStyleLanguage": "scss", |
||||||
|
"assets": [ |
||||||
|
"src/favicon.ico", |
||||||
|
"src/assets" |
||||||
|
], |
||||||
|
"styles": [ |
||||||
|
"@angular/material/prebuilt-themes/deeppurple-amber.css", |
||||||
|
"src/styles.scss" |
||||||
|
], |
||||||
|
"scripts": [] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,44 @@ |
|||||||
|
{ |
||||||
|
"name": "angular-test", |
||||||
|
"version": "0.0.0", |
||||||
|
"scripts": { |
||||||
|
"ng": "ng", |
||||||
|
"start": "ng serve", |
||||||
|
"build": "ng build", |
||||||
|
"watch": "ng build --watch --configuration development", |
||||||
|
"test": "ng test" |
||||||
|
}, |
||||||
|
"private": true, |
||||||
|
"dependencies": { |
||||||
|
"@angular/animations": "^15.1.0", |
||||||
|
"@angular/cdk": "^15.1.4", |
||||||
|
"@angular/common": "^15.1.0", |
||||||
|
"@angular/compiler": "^15.1.0", |
||||||
|
"@angular/core": "^15.1.0", |
||||||
|
"@angular/forms": "^15.1.0", |
||||||
|
"@angular/material": "^15.1.4", |
||||||
|
"@angular/platform-browser": "^15.1.0", |
||||||
|
"@angular/platform-browser-dynamic": "^15.1.0", |
||||||
|
"@angular/router": "^15.1.0", |
||||||
|
"@tailwindcss/forms": "^0.5.3", |
||||||
|
"@tailwindcss/typography": "^0.5.9", |
||||||
|
"ng2-search-filter": "^0.5.1", |
||||||
|
"rxjs": "~7.8.0", |
||||||
|
"tslib": "^2.3.0", |
||||||
|
"zone.js": "~0.12.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@angular-devkit/build-angular": "^15.1.4", |
||||||
|
"@angular/cli": "~15.1.4", |
||||||
|
"@angular/compiler-cli": "^15.1.0", |
||||||
|
"@types/jasmine": "~4.3.0", |
||||||
|
"jasmine-core": "~4.5.0", |
||||||
|
"karma": "~6.4.0", |
||||||
|
"karma-chrome-launcher": "~3.1.0", |
||||||
|
"karma-coverage": "~2.2.0", |
||||||
|
"karma-jasmine": "~5.1.0", |
||||||
|
"karma-jasmine-html-reporter": "~2.0.0", |
||||||
|
"tailwindcss": "^3.2.4", |
||||||
|
"typescript": "~4.9.4" |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,62 @@ |
|||||||
|
import { Pipe, PipeTransform, Injectable } from "@angular/core"; |
||||||
|
|
||||||
|
@Pipe({ |
||||||
|
name: "filter", |
||||||
|
pure: false |
||||||
|
}) |
||||||
|
@Injectable() |
||||||
|
export class Custom_Ng2SearchPipe implements PipeTransform { |
||||||
|
|
||||||
|
transform(items: any, term: string, excludes: any = []): any { |
||||||
|
if (!term || !items) return items; |
||||||
|
return Custom_Ng2SearchPipe.filter(items, term, excludes); |
||||||
|
} |
||||||
|
|
||||||
|
static filter( |
||||||
|
items: Array<{ [key: string]: any }>, |
||||||
|
term: string, |
||||||
|
excludes: any |
||||||
|
): Array<{ [key: string]: any }> { |
||||||
|
const toCompare = term.toLowerCase(); |
||||||
|
|
||||||
|
function checkInside(item: any, term: string) { |
||||||
|
if ( |
||||||
|
typeof item === "string" && |
||||||
|
item |
||||||
|
.toString() |
||||||
|
.toLowerCase() |
||||||
|
.includes(toCompare) |
||||||
|
) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
for (let property in item) { |
||||||
|
if ( |
||||||
|
item[property] === null || |
||||||
|
item[property] == undefined || |
||||||
|
excludes.includes(property) |
||||||
|
) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
if (typeof item[property] === "object") { |
||||||
|
if (checkInside(item[property], term)) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
} else if ( |
||||||
|
item[property] |
||||||
|
.toString() |
||||||
|
.toLowerCase() |
||||||
|
.includes(toCompare) |
||||||
|
) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
} |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
return items.filter(function (item) { |
||||||
|
return checkInside(item, term); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,25 @@ |
|||||||
|
import { NgModule } from '@angular/core'; |
||||||
|
import { RouterModule, Routes } from '@angular/router'; |
||||||
|
import { SchemasTabComponent } from './schemas-tab/schemas-tab.component'; |
||||||
|
import { LandingPageComponent } from './landing-page/landing-page.component'; |
||||||
|
import { RequestPageComponent } from './request-page/request-page.component'; |
||||||
|
import { JoinsPageComponent } from './joins-page/joins-page.component'; |
||||||
|
import { CreateJoinsPageComponent } from './create-joins-page/create-joins-page.component'; |
||||||
|
|
||||||
|
const routes: Routes = [ |
||||||
|
{ path: 'schematab', component: SchemasTabComponent }, |
||||||
|
{ path: '', component: LandingPageComponent }, |
||||||
|
{ path: 'request', component: RequestPageComponent }, |
||||||
|
{ path: 'joins', component: JoinsPageComponent }, |
||||||
|
{ path: 'createjoins', component: CreateJoinsPageComponent } |
||||||
|
]; |
||||||
|
|
||||||
|
@NgModule({ |
||||||
|
imports: [ |
||||||
|
RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' }) |
||||||
|
], |
||||||
|
exports: [ |
||||||
|
RouterModule |
||||||
|
] |
||||||
|
}) |
||||||
|
export class AppRoutingModule {} |
@ -0,0 +1,6 @@ |
|||||||
|
<div> |
||||||
|
<app-navbar></app-navbar> |
||||||
|
<div class="mt-4 px-12"> |
||||||
|
<router-outlet></router-outlet> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,10 @@ |
|||||||
|
import { Component } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-root', |
||||||
|
templateUrl: './app.component.html', |
||||||
|
styleUrls: ['./app.component.scss'] |
||||||
|
}) |
||||||
|
export class AppComponent { |
||||||
|
|
||||||
|
} |
@ -0,0 +1,57 @@ |
|||||||
|
|
||||||
|
import { NgModule } from '@angular/core'; |
||||||
|
import { BrowserModule } from '@angular/platform-browser'; |
||||||
|
|
||||||
|
import { AppComponent } from './app.component'; |
||||||
|
import { SchemasTabComponent } from './schemas-tab/schemas-tab.component'; |
||||||
|
import { AppRoutingModule } from './app-routing.module'; |
||||||
|
import { LandingPageComponent } from './landing-page/landing-page.component'; |
||||||
|
import { NavbarComponent } from './navbar/navbar.component'; |
||||||
|
import { RequestPageComponent } from './request-page/request-page.component'; |
||||||
|
import { HttpClientModule } from '@angular/common/http'; |
||||||
|
import { EmployeeService } from './service/employee.service'; |
||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
||||||
|
import { MatStepperModule } from '@angular/material/stepper'; |
||||||
|
import { MatToolbarModule } from '@angular/material/toolbar'; |
||||||
|
import {MatDialogModule} from '@angular/material/dialog'; |
||||||
|
import { MatIconModule } from "@angular/material/icon"; |
||||||
|
import { Custom_Ng2SearchPipe } from './../Custom_Ng2SearchPipe'; |
||||||
|
import { FormsModule } from '@angular/forms'; |
||||||
|
import { JoinsPageComponent } from './joins-page/joins-page.component'; |
||||||
|
import { CreateJoinsPageComponent } from './create-joins-page/create-joins-page.component'; |
||||||
|
import { JoinsTableComponent } from './joins-table/joins-table.component'; |
||||||
|
import { WhereCardComponent } from './where-card/where-card.component'; |
||||||
|
import { ColumnsCardComponent } from './columns-card/columns-card.component'; |
||||||
|
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner' |
||||||
|
|
||||||
|
@NgModule({ |
||||||
|
declarations: [ |
||||||
|
AppComponent, |
||||||
|
SchemasTabComponent, |
||||||
|
LandingPageComponent, |
||||||
|
NavbarComponent, |
||||||
|
RequestPageComponent, |
||||||
|
Custom_Ng2SearchPipe, |
||||||
|
JoinsPageComponent, |
||||||
|
CreateJoinsPageComponent, |
||||||
|
JoinsTableComponent, |
||||||
|
WhereCardComponent, |
||||||
|
ColumnsCardComponent |
||||||
|
], |
||||||
|
imports: [ |
||||||
|
BrowserModule, |
||||||
|
AppRoutingModule, |
||||||
|
HttpClientModule, |
||||||
|
BrowserAnimationsModule, |
||||||
|
MatStepperModule, |
||||||
|
MatToolbarModule, |
||||||
|
MatIconModule, |
||||||
|
FormsModule, |
||||||
|
MatDialogModule, |
||||||
|
MatProgressSpinnerModule |
||||||
|
|
||||||
|
], |
||||||
|
providers: [EmployeeService], |
||||||
|
bootstrap: [AppComponent] |
||||||
|
}) |
||||||
|
export class AppModule { } |
@ -0,0 +1,20 @@ |
|||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 rounded-lg overflow-hidden shadow-lg bg-slate-300 border-solid border-orange-400 border-2 p-2"> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Colonnes(Base) : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterBaseColumn" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="baseColumnData" (change)="sendColumnsData()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let col of baseColumns | filter : filterBaseColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }} ({{col.columnText}})</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Colonnes : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterSpecificColumn" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="specificColumnData" (change)="sendColumnsData()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let col of specificColumns | filter : filterSpecificColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }} ({{col.columnText}})</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,38 @@ |
|||||||
|
import { Component, EventEmitter, Input, Output } from '@angular/core'; |
||||||
|
import { InfoColumn } from '../model/info-column'; |
||||||
|
import { ColumnData } from '../model/column-data'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-columns-card', |
||||||
|
templateUrl: './columns-card.component.html', |
||||||
|
styleUrls: ['./columns-card.component.scss'] |
||||||
|
}) |
||||||
|
export class ColumnsCardComponent { |
||||||
|
@Input() baseColumns: InfoColumn[] | undefined |
||||||
|
@Input() specificColumns: InfoColumn[] | undefined |
||||||
|
@Input() childIndex: number | undefined; |
||||||
|
@Output() selectedColumn = new EventEmitter<ColumnData>(); |
||||||
|
specificColumnData: any; |
||||||
|
baseColumnData: any; |
||||||
|
filterBaseColumn: any; |
||||||
|
filterSpecificColumn: any; |
||||||
|
|
||||||
|
constructor(){} |
||||||
|
|
||||||
|
public sendColumnsData(){ |
||||||
|
if(this.baseColumnData && this.specificColumnData){ |
||||||
|
let tempsOpe = "AND"; |
||||||
|
if(this.childIndex === 0){ |
||||||
|
tempsOpe = "ON"; |
||||||
|
} |
||||||
|
const tempColumnData: ColumnData = { |
||||||
|
operator: tempsOpe, |
||||||
|
aliasColumn: this.baseColumnData.nameColumn, |
||||||
|
specColumn: this.specificColumnData.nameColumn, |
||||||
|
} |
||||||
|
console.log(tempColumnData) |
||||||
|
this.selectedColumn.emit(tempColumnData); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,86 @@ |
|||||||
|
|
||||||
|
<!--Card--> |
||||||
|
<div class="my-4"> |
||||||
|
|
||||||
|
<div class="flex sm:flex-nowrap flex-wrap sm:space-x-4"> |
||||||
|
<div class="w-full sm:w-2/3 h-full text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 "> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2"> |
||||||
|
<div class="p-4"> |
||||||
|
<div class="font-bold text-xl text-left">Selectionner un Schéma et une Table (Base) :</div> |
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||||
|
<div class="mt-2"> |
||||||
|
<label class="text-black text-left">Schémas : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterBaseSchema" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select (change)="useTablesWithBaseSchema($event)" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let schema of allSchema | filter : filterBaseSchema" value="{{ schema }}">{{ schema }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="tablesByBaseSchema" class="mt-2"> |
||||||
|
<label class="text-black text-left">Tables : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterBaseTables" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="baseTableData" (change)="getNameBaseTable()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let table of tablesByBaseSchema | filter : filterBaseTables" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="tablesByBaseSchema"> |
||||||
|
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'true':'false')" class="w-4 h-4 text-orange-400 bg-slate-400 border-slate-200 rounded focus:ring-orange-400 focus:ring-2"/> |
||||||
|
<label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Afficher aussi les Vues</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div *ngIf="baseTableName"> |
||||||
|
<div *ngFor="let hop of requestInfoJoin; index as i" > |
||||||
|
<app-joins-table [allAlias]="aliasData" [passJoinData]="allData[i]" (data)="retrieveData($event, i)" id="{{hop}}"></app-joins-table> |
||||||
|
<div class="flex inline-flex space-x-4"> |
||||||
|
<button (click)="addTable()" type="button" class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Jointure</button> |
||||||
|
|
||||||
|
<button *ngIf="!oneJoinRemaining" (click)="removeTable(i)" type="button" class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Supprimer cette jointure</button> |
||||||
|
|
||||||
|
<button (click)="addCondition()" type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Condition</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="whereCardList.length != 0"> |
||||||
|
<div *ngFor="let whereCards of whereCardList; index as i" > |
||||||
|
<app-where-card [allAlias]="aliasData" [childIndex]="i" id="{{whereCards}}" (conditionData)="getConditionData($event, i)"></app-where-card> |
||||||
|
<div class="flex inline-flex space-x-4"> |
||||||
|
<button (click)="addCondition()" type="button" class="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Condition</button> |
||||||
|
|
||||||
|
<button (click)="removeWhereCard(i)" type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Supprimer cette Condition</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="sticky top-20 w-full mt-2 sm:mt-0 sm:w-1/3 h-full text-center rounded-lg overflow-hidden shadow-lg bg-white p-4 "> |
||||||
|
<div class="text-xl font-bold pb-2">Résultat de la requête :</div> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-slate-900 text-white text-left pl-2"> |
||||||
|
|
||||||
|
<div>SELECT * FROM {{baseSchema}}.{{baseTableName}} AS {{baseTableNameLowerCase}}</div> |
||||||
|
<div *ngFor="let join of allData, index as i">{{join.joinSpec}} {{join.specificSchema}}.{{join.specificTable}} AS {{join.aliasSpecificTable}} |
||||||
|
<div *ngFor="let allCol of allData[i].columns, index as in"> |
||||||
|
{{allCol.operator}} {{join.baseAlias}}.{{allCol.aliasColumn}}={{join.aliasSpecificTable}}.{{allCol.specColumn}} |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div *ngFor="let cond of conditionData">{{ cond.operator }} {{ cond.alias }}.{{ cond.column }} {{ cond.condition }} {{ cond.value }}</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
@ -0,0 +1,412 @@ |
|||||||
|
|
||||||
|
import { HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import { AfterViewInit, Component, OnInit, QueryList, ViewChildren } from '@angular/core'; |
||||||
|
import { InfoTable } from '../model/info-table'; |
||||||
|
import { InfoColumnService } from '../service/info-column.service'; |
||||||
|
import { InfoTableService } from '../service/info-table.service'; |
||||||
|
import { JoinsTableComponent } from '../joins-table/joins-table.component'; |
||||||
|
import { Join } from '../model/join'; |
||||||
|
import { Alias } from '../model/alias'; |
||||||
|
import { WhereCardComponent } from '../where-card/where-card.component'; |
||||||
|
import { Condition } from '../model/condition'; |
||||||
|
import { ColumnData } from '../model/column-data'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-create-joins-page', |
||||||
|
templateUrl: './create-joins-page.component.html', |
||||||
|
styleUrls: ['./create-joins-page.component.scss'] |
||||||
|
}) |
||||||
|
export class CreateJoinsPageComponent implements OnInit, AfterViewInit{ |
||||||
|
@ViewChildren(JoinsTableComponent)joinsTableComponent!: QueryList<JoinsTableComponent>; |
||||||
|
@ViewChildren(WhereCardComponent)whereCardComponent!: QueryList<WhereCardComponent>; |
||||||
|
|
||||||
|
public allSchema: String[] | undefined; |
||||||
|
filterBaseSchema: any; |
||||||
|
filterBaseTables: any; |
||||||
|
tablesByBaseSchema: InfoTable[] | undefined; |
||||||
|
tablesByBaseSchemaAll: InfoTable[] | undefined; |
||||||
|
tablesByBaseSchemaNoViews: InfoTable[] | undefined; |
||||||
|
baseTableData: any; |
||||||
|
isChecked: boolean = false; |
||||||
|
requestInfoJoin: Array<JoinsTableComponent> = []; |
||||||
|
whereCardList: Array<WhereCardComponent> = []; |
||||||
|
baseTableName: String = ""; |
||||||
|
baseTableNameLowerCase: String = ""; |
||||||
|
oneJoinRemaining : boolean = true; |
||||||
|
baseSchema: String | undefined; |
||||||
|
displayJoins: boolean = false; |
||||||
|
allData: Join[] = []; |
||||||
|
aliasData: Alias[] = []; |
||||||
|
selectedAlias: String = ""; |
||||||
|
passSchema: String = ""; |
||||||
|
passTable: String = ""; |
||||||
|
baseAlias: Alias | undefined; |
||||||
|
memoAlias: Alias | undefined; |
||||||
|
conditionData: Condition[] = [] |
||||||
|
|
||||||
|
constructor( |
||||||
|
private infoColumnService: InfoColumnService, |
||||||
|
private infoTableService: InfoTableService |
||||||
|
){} |
||||||
|
|
||||||
|
ngAfterViewInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getSchemas(); |
||||||
|
this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService)); |
||||||
|
} |
||||||
|
|
||||||
|
public getSchemas():void { |
||||||
|
this.infoTableService.getSchemas().subscribe( |
||||||
|
(response : String[]) => { |
||||||
|
this.allSchema = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public useTablesWithBaseSchema (event: any){ |
||||||
|
this.baseSchema = event.target.value; |
||||||
|
this.infoTableService.getTablesBySchema(event.target.value).subscribe( |
||||||
|
(response : InfoTable[]) => { |
||||||
|
this.tablesByBaseSchemaAll = response; |
||||||
|
this.divideTablesAndViews(); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public divideTablesAndViews(){ |
||||||
|
|
||||||
|
if(this.tablesByBaseSchemaAll){ |
||||||
|
this.tablesByBaseSchemaNoViews = []; |
||||||
|
this.tablesByBaseSchemaAll.forEach((el, i) => { |
||||||
|
if(el.nameTable.length < 5){ |
||||||
|
this.tablesByBaseSchemaNoViews?.push(el); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
if(this.isChecked){ |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaAll; |
||||||
|
} else { |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public getNameBaseTable(){ |
||||||
|
let previousBaseAlias; |
||||||
|
if(this.baseSchema){ |
||||||
|
this.baseTableName = this.baseTableData.nameTable; |
||||||
|
this.baseTableNameLowerCase = this.baseTableName?.toLowerCase(); |
||||||
|
this.baseAlias = { |
||||||
|
nameSchema: this.baseSchema, |
||||||
|
nameTable: this.baseTableName, |
||||||
|
nameAlias: this.baseTableNameLowerCase, |
||||||
|
} |
||||||
|
if(this.aliasData.length != 0){ |
||||||
|
previousBaseAlias = this.aliasData[0].nameAlias; |
||||||
|
for(let iz = this.allData.length; iz >= 0; iz--){ |
||||||
|
if( this.allData[iz] && this.allData[iz].baseAlias == previousBaseAlias){ |
||||||
|
this.allData.splice(iz, 1); |
||||||
|
this.requestInfoJoin.splice(iz, 1); |
||||||
|
this.aliasData.splice(iz, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
if(this.requestInfoJoin.length === 0 ){ |
||||||
|
this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService)); |
||||||
|
} |
||||||
|
} |
||||||
|
this.aliasData.shift(); |
||||||
|
this.aliasData.unshift(this.baseAlias); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public addTable(){ |
||||||
|
this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService)); |
||||||
|
this.checkLength(); |
||||||
|
} |
||||||
|
|
||||||
|
public addCondition(){ |
||||||
|
this.whereCardList.push(new WhereCardComponent(this.infoColumnService, this.infoTableService)); |
||||||
|
} |
||||||
|
|
||||||
|
public checkAndRemoveIfAliasWasUse(previousAlias: String){ |
||||||
|
for(let iz = this.allData.length; iz >= 0; iz--){ |
||||||
|
if( this.allData[iz] && this.allData[iz].baseAlias == previousAlias){ |
||||||
|
this.allData.splice(iz, 1); |
||||||
|
this.requestInfoJoin.splice(iz, 1); |
||||||
|
this.aliasData.splice(iz, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
if(this.conditionData.length != 0){ |
||||||
|
for(let iy = this.conditionData.length; iy >= 0; iy--){ |
||||||
|
if( this.conditionData[iy] && this.conditionData[iy].alias == previousAlias){ |
||||||
|
this.conditionData.splice(iy, 1); |
||||||
|
this.whereCardList.splice(iy, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public removeTable(i: number){ |
||||||
|
this.requestInfoJoin.splice(i, 1); |
||||||
|
const deleteAlias = this.allData[i].aliasSpecificTable; |
||||||
|
let aliasSplitName = deleteAlias.slice(0, -1); |
||||||
|
this.allData.splice(i, 1); |
||||||
|
this.aliasData.shift(); |
||||||
|
|
||||||
|
this.checkAndRemoveIfAliasWasUse(deleteAlias); |
||||||
|
|
||||||
|
let indexOfHighest = -1; |
||||||
|
let highestValue = 0; |
||||||
|
let tempAlias; |
||||||
|
let inInclude = false; |
||||||
|
|
||||||
|
if(this.allData.length === 0){ |
||||||
|
this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService)); |
||||||
|
} else { |
||||||
|
this.allData.forEach((join, ind) => { |
||||||
|
const alias = join.aliasSpecificTable; |
||||||
|
if(alias.includes(aliasSplitName.toString())){ |
||||||
|
tempAlias = alias.slice(-1); |
||||||
|
let numTempAlias = +tempAlias; |
||||||
|
if(numTempAlias > highestValue){ |
||||||
|
indexOfHighest = ind; |
||||||
|
highestValue = numTempAlias; |
||||||
|
} |
||||||
|
inInclude = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
if(inInclude && highestValue != 0){ |
||||||
|
this.allData[indexOfHighest].aliasSpecificTable = deleteAlias || ""; |
||||||
|
this.aliasData.splice(i, 1); |
||||||
|
this.aliasData[indexOfHighest].nameAlias = deleteAlias; |
||||||
|
} else { |
||||||
|
this.aliasData.splice(i, 1); |
||||||
|
} |
||||||
|
if(this.baseAlias){ |
||||||
|
this.aliasData.unshift(this.baseAlias); |
||||||
|
} |
||||||
|
this.checkLength(); |
||||||
|
this.aliasData = [...this.aliasData] |
||||||
|
} |
||||||
|
|
||||||
|
public checkLength(){ |
||||||
|
if(this.requestInfoJoin.length > 1){ |
||||||
|
this.oneJoinRemaining = false; |
||||||
|
} else { |
||||||
|
this.oneJoinRemaining = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
public retrieveData(event: Join, index: number){ |
||||||
|
const tempData = event; |
||||||
|
if(this.allData.length != 0 && this.allData[index]){ |
||||||
|
const antAlias = this.allData[index].aliasSpecificTable; |
||||||
|
if(this.allData[index].aliasSpecificTable.includes(tempData.aliasSpecificTable.toString())){ |
||||||
|
|
||||||
|
} else { |
||||||
|
this.checkAndRemoveIfAliasWasUse(antAlias); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let switchData = ""; |
||||||
|
let tempNum = ""; |
||||||
|
let first = 0; |
||||||
|
let tem = 0; |
||||||
|
let tempAllData: Join[] = []; |
||||||
|
let indexAliasData: Join[] = []; |
||||||
|
let noIndexAliasData: Join[] = []; |
||||||
|
let alias = ""; |
||||||
|
let inInclude = false; |
||||||
|
let indexOfHighest = -1; |
||||||
|
let highestValue= -1; |
||||||
|
let tempAlias; |
||||||
|
tempAllData = [...this.allData]; |
||||||
|
|
||||||
|
if(this.allData.length === 0){ |
||||||
|
switchData = "emptyData"; |
||||||
|
} else { |
||||||
|
if(this.allData[index]){ |
||||||
|
if(this.allData.length != 1){ |
||||||
|
tempAllData.splice(index, 1); |
||||||
|
} |
||||||
|
tempAllData.forEach((join, i) => { |
||||||
|
alias = join.aliasSpecificTable.toString(); |
||||||
|
if(alias.includes(tempData.aliasSpecificTable.toString())){ |
||||||
|
indexAliasData.push(tempAllData[i]); |
||||||
|
switchData = "indexAlias"; |
||||||
|
first = 1; |
||||||
|
} else { |
||||||
|
if(first === 0){ |
||||||
|
switchData = "indexNoAlias"; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.allData.forEach((join, i) => { |
||||||
|
alias = join.aliasSpecificTable.toString(); |
||||||
|
if(alias.includes(tempData.aliasSpecificTable.toString())){ |
||||||
|
noIndexAliasData.push(tempAllData[i]); |
||||||
|
switchData = "noIndexAlias"; |
||||||
|
first = 1 |
||||||
|
} else { |
||||||
|
if(first === 0){ |
||||||
|
switchData = "noIndexNoAlias"; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
switch (switchData) { |
||||||
|
case "emptyData": |
||||||
|
tempData.aliasSpecificTable = tempData.aliasSpecificTable + "0"; |
||||||
|
this.allData.push(tempData); |
||||||
|
break; |
||||||
|
|
||||||
|
case "indexAlias": |
||||||
|
let memo = 0; |
||||||
|
const rememberAlias = this.allData[index].aliasSpecificTable; |
||||||
|
const aliasSplitName = rememberAlias.slice(0, -1); |
||||||
|
if(this.allData[index].aliasSpecificTable == tempData.aliasSpecificTable+"0"){ |
||||||
|
tempNum = "0" |
||||||
|
} |
||||||
|
else { |
||||||
|
indexAliasData.forEach((jo) => { |
||||||
|
const indexAliasName = jo.aliasSpecificTable; |
||||||
|
for(let num = 8; num > -1; num--){ |
||||||
|
if(indexAliasName == (tempData.aliasSpecificTable+num.toString())){ |
||||||
|
tem = +num + +1; |
||||||
|
if(memo < tem){ |
||||||
|
memo = tem; |
||||||
|
tempNum = memo.toString(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
this.allData.forEach((join, ind) => { |
||||||
|
const aliasRem = join.aliasSpecificTable; |
||||||
|
if(aliasRem.includes(aliasSplitName.toString())){ |
||||||
|
tempAlias = aliasRem.slice(-1); |
||||||
|
let numTempAlias = +tempAlias; |
||||||
|
if(numTempAlias > highestValue){ |
||||||
|
indexOfHighest = ind; |
||||||
|
highestValue = numTempAlias; |
||||||
|
} |
||||||
|
inInclude = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if(inInclude && highestValue != 0){ |
||||||
|
this.allData[indexOfHighest].aliasSpecificTable = rememberAlias || ""; |
||||||
|
} |
||||||
|
this.allData[index] = tempData; |
||||||
|
this.allData[index].aliasSpecificTable = tempData.aliasSpecificTable + tempNum; |
||||||
|
break; |
||||||
|
|
||||||
|
case "indexNoAlias": |
||||||
|
const rememberIndexAlias = this.allData[index].aliasSpecificTable; |
||||||
|
const indexAliasSplitName = rememberIndexAlias.slice(0, -1); |
||||||
|
this.allData.forEach((join, ind) => { |
||||||
|
const aliasRem = join.aliasSpecificTable; |
||||||
|
if(aliasRem.includes(indexAliasSplitName.toString())){ |
||||||
|
tempAlias = aliasRem.slice(-1); |
||||||
|
let numTempAlias = +tempAlias; |
||||||
|
if(numTempAlias > highestValue){ |
||||||
|
indexOfHighest = ind; |
||||||
|
highestValue = numTempAlias; |
||||||
|
} |
||||||
|
inInclude = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
if(inInclude && highestValue != 0){ |
||||||
|
this.allData[indexOfHighest].aliasSpecificTable = rememberIndexAlias || ""; |
||||||
|
} |
||||||
|
this.allData[index] = tempData; |
||||||
|
this.allData[index].aliasSpecificTable = tempData.aliasSpecificTable + "0"; |
||||||
|
break; |
||||||
|
|
||||||
|
case "noIndexAlias": |
||||||
|
let memRem = 0; |
||||||
|
noIndexAliasData.forEach((jo) => { |
||||||
|
const indexAliasName = jo.aliasSpecificTable; |
||||||
|
for(let num = 8; num > -1; num--){ |
||||||
|
if(indexAliasName == (tempData.aliasSpecificTable+num.toString())){ |
||||||
|
tem = +num + +1; |
||||||
|
if(memRem < tem){ |
||||||
|
memRem = tem; |
||||||
|
tempNum = memRem.toString(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
tempData.aliasSpecificTable = tempData.aliasSpecificTable + tempNum; |
||||||
|
this.allData.push(tempData); |
||||||
|
break; |
||||||
|
|
||||||
|
case "noIndexNoAlias": |
||||||
|
tempData.aliasSpecificTable = tempData.aliasSpecificTable + "0"; |
||||||
|
this.allData.push(tempData); |
||||||
|
break; |
||||||
|
} |
||||||
|
this.allData = [...this.allData] |
||||||
|
|
||||||
|
if(this.baseAlias){ |
||||||
|
this.aliasData.splice(0); |
||||||
|
this.aliasData.push(this.baseAlias) |
||||||
|
this.allData.forEach((all) => { |
||||||
|
const ephAlias: Alias = { |
||||||
|
nameSchema: all.specificSchema, |
||||||
|
nameTable: all.specificTable, |
||||||
|
nameAlias: all.aliasSpecificTable |
||||||
|
} |
||||||
|
this.aliasData.push(ephAlias); |
||||||
|
}); |
||||||
|
} |
||||||
|
this.aliasData = [...this.aliasData]; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public removeWhereCard(i: number){ |
||||||
|
this.whereCardList.splice(i, 1); |
||||||
|
if(this.conditionData[i]){ |
||||||
|
this.conditionData.splice(i, 1); |
||||||
|
} |
||||||
|
if(this.conditionData[0]){ |
||||||
|
this.conditionData[0].operator = "WHERE"; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public getConditionData(event: String[], index: number){ |
||||||
|
const tempCondition: Condition = { |
||||||
|
operator: event[0], |
||||||
|
alias: event[1], |
||||||
|
column: event[2], |
||||||
|
condition: event[3], |
||||||
|
value: event[4] |
||||||
|
} |
||||||
|
if(this.conditionData[index]){ |
||||||
|
this.conditionData[index] = tempCondition; |
||||||
|
} else { |
||||||
|
this.conditionData.push(tempCondition); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public checkValue(event: any){ |
||||||
|
if(this.isChecked){ |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaAll; |
||||||
|
} else { |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,136 @@ |
|||||||
|
<div class="my-4 grid sm:grid-cols-1 md:grid-cols-2 gap-5"> |
||||||
|
<!--Card--> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="px-6 py-4"> |
||||||
|
<div class="font-bold text-xl text-center">Selectionner un Schéma et une Table :</div> |
||||||
|
|
||||||
|
<div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div> |
||||||
|
|
||||||
|
<label class="text-black">Schémas : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterFirstSchema" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select (change)="useTablesWithFirstSchema($event)" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let schema of allSchema | filter : filterFirstSchema" value="{{ schema }}">{{ schema }}</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div> |
||||||
|
|
||||||
|
<div *ngIf="tablesByFirstSchema"> |
||||||
|
<label class="text-black">Tables : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterFirstTable" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="firstTableData" (change)="getColumnsForJoinTwo()" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let table of tablesByFirstSchema | filter : filterFirstTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="px-6 py-4 "> |
||||||
|
<div class="font-bold text-xl text-center">Selectionner un Schéma et une Table :</div> |
||||||
|
|
||||||
|
<div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div> |
||||||
|
|
||||||
|
<label class="text-black">Schémas : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterSecondSchema" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select (change)="useTablesWithSecondSchema($event)" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let schema of allSchema | filter : filterSecondSchema" value="{{ schema }}">{{ schema }}</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div> |
||||||
|
|
||||||
|
<div *ngIf="tablesBySecondSchema"> |
||||||
|
<label class="text-black">Tables : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterSecondTable" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="secondTableData" (change)="getColumnsForJoinTwo()" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let table of tablesBySecondSchema | filter : filterSecondTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="columnIsFull" class="my-4 grid grid-cols-1 sm:grid-cols-4 gap-5"> |
||||||
|
<!--Card--> |
||||||
|
<div class="sm:col-start-2 sm:col-span-2 rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="px-6 pt-4 "> |
||||||
|
<label class="text-black mb-4">Colonne(s) en commun : </label> |
||||||
|
|
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterColumn" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select (change)="displayColumnsInformations($event)" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let column of infoColumn | filter: filterColumn" id="{{ column.id }}" value="{{ column.id }}">{{ column.nameColumn }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<!--Card--> |
||||||
|
<div *ngIf="displayColumns" class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="bg-orange-400 w-full h-2 overflow-hidden my-2"></div> |
||||||
|
|
||||||
|
<div class="px-6 pb-4 grid justify-items-center"> |
||||||
|
<div class="font-bold text-xl mb-2">Colonne : {{ displayColumns.nameColumn }}</div> |
||||||
|
<p class="text-lg">Data Type : {{ displayColumns.dataType }}</p> |
||||||
|
<p class="text-lg">Taille : {{ displayColumns.lengthColumn }}</p> |
||||||
|
<p class="text-lg">Description : {{ displayColumns.columnText }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div *ngIf="displayColumns" class="my-4 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5"> |
||||||
|
<!--Card--> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="font-bold text-xl text-center pt-2">INNER JOIN</div> |
||||||
|
<div class="px-2 py-2"> |
||||||
|
<textarea rows="4" class="block p-2.5 w-full text-sm rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"> |
||||||
|
SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.* |
||||||
|
FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }} |
||||||
|
INNER JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }} |
||||||
|
ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="font-bold text-xl text-center pt-2">FULL JOIN</div> |
||||||
|
<div class="px-2 py-2"> |
||||||
|
<textarea rows="4" class="block p-2.5 w-full text-sm rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"> |
||||||
|
SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.* |
||||||
|
FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }} |
||||||
|
FULL JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }} |
||||||
|
ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="font-bold text-xl text-center pt-2">LEFT JOIN</div> |
||||||
|
<div class="px-2 py-2"> |
||||||
|
<textarea rows="4" class="block p-2.5 w-full text-sm rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"> |
||||||
|
SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.* |
||||||
|
FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }} |
||||||
|
LEFT JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }} |
||||||
|
ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="font-bold text-xl text-center pt-2">RIGHT JOIN</div> |
||||||
|
<div class="px-2 py-2"> |
||||||
|
<textarea rows="4" class="block p-2.5 w-full text-sm rounded-lg border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"> |
||||||
|
SELECT {{ nameFirstTableLowerCase }}.*, {{ nameSecondTableLowerCase }}.* |
||||||
|
FROM {{firstSchema}}.{{nameFirstTable}} AS {{ nameFirstTableLowerCase }} |
||||||
|
RIGHT JOIN {{secondSchema}}.{{nameSecondTable}} AS {{ nameSecondTableLowerCase }} |
||||||
|
ON {{ nameFirstTableLowerCase }}.{{ displayColumns.nameColumn }}={{ nameSecondTableLowerCase }}.{{ displayColumns.nameColumn }}</textarea> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
@ -0,0 +1,148 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { InfoColumnService } from '../service/info-column.service'; |
||||||
|
import { InfoTableService } from '../service/info-table.service'; |
||||||
|
import { HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import { InfoTable } from '../model/info-table'; |
||||||
|
import { InfoColumn } from '../model/info-column'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-joins-page', |
||||||
|
templateUrl: './joins-page.component.html', |
||||||
|
styleUrls: ['./joins-page.component.scss'] |
||||||
|
}) |
||||||
|
export class JoinsPageComponent implements OnInit{ |
||||||
|
public allSchema: String[] | undefined; |
||||||
|
filterFirstSchema: any; |
||||||
|
filterSecondSchema: any; |
||||||
|
filterFirstTable: any; |
||||||
|
filterSecondTable: any; |
||||||
|
filterColumn: any; |
||||||
|
public firstSchema: string | undefined; |
||||||
|
public secondSchema: string | undefined; |
||||||
|
public tablesByFirstSchema: InfoTable[] | undefined; |
||||||
|
public tablesBySecondSchema: InfoTable[] | undefined; |
||||||
|
firstTableData: any; |
||||||
|
secondTableData: any; |
||||||
|
public infoColumn: InfoColumn[] | undefined; |
||||||
|
public columnIsFull: boolean = false; |
||||||
|
public displayColumns: InfoColumn | undefined; |
||||||
|
|
||||||
|
|
||||||
|
public nameFirstTableLowerCase: String = ""; |
||||||
|
public nameSecondTableLowerCase: String = ""; |
||||||
|
public nameFirstTable: String = ""; |
||||||
|
public nameSecondTable: String = ""; |
||||||
|
public tables: string[] | undefined; |
||||||
|
public schemas: string[] | undefined; |
||||||
|
|
||||||
|
constructor( |
||||||
|
|
||||||
|
private infoColumnService: InfoColumnService, |
||||||
|
private infoTableService: InfoTableService |
||||||
|
){} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getSchemas(); |
||||||
|
} |
||||||
|
|
||||||
|
public getSchemas():void { |
||||||
|
this.infoTableService.getSchemas().subscribe( |
||||||
|
(response : String[]) => { |
||||||
|
this.allSchema = response; |
||||||
|
console.log(response); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public useTablesWithFirstSchema (event: any){ |
||||||
|
this.firstSchema = event.target.value; |
||||||
|
this.displayColumns = undefined; |
||||||
|
this.columnIsFull = false; |
||||||
|
this.infoTableService.getTablesBySchema(event.target.value).subscribe( |
||||||
|
(response : InfoTable[]) => { |
||||||
|
this.tablesByFirstSchema = response; |
||||||
|
console.log(response); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public useTablesWithSecondSchema (event: any){ |
||||||
|
this.columnIsFull = false; |
||||||
|
this.secondSchema = event.target.value; |
||||||
|
this.displayColumns = undefined; |
||||||
|
this.infoTableService.getTablesBySchema(event.target.value).subscribe( |
||||||
|
(response : InfoTable[]) => { |
||||||
|
this.tablesBySecondSchema = response; |
||||||
|
console.log(response); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public getColumnsForJoin (){ |
||||||
|
if(this.firstTableData && this.secondTableData && this.firstSchema && this.secondSchema){ |
||||||
|
this.infoColumnService.getColumnsForJoin(this.firstSchema, this.secondSchema, this.firstTableData.nameTable, this.secondTableData.nameTable).subscribe( |
||||||
|
(response : InfoColumn[]) => { |
||||||
|
this.infoColumn = response; |
||||||
|
console.log(this.infoColumn); |
||||||
|
if(this.infoColumn?.length === 0){ |
||||||
|
this.columnIsFull = false; |
||||||
|
} else { |
||||||
|
this.columnIsFull = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message); |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public displayColumnsInformations (event: any){ |
||||||
|
this.nameFirstTableLowerCase = this.firstTableData.nameTable.toLowerCase(); |
||||||
|
this.nameSecondTableLowerCase = this.secondTableData.nameTable.toLowerCase(); |
||||||
|
this.nameFirstTable = this.firstTableData.nameTable; |
||||||
|
this.nameSecondTable = this.secondTableData.nameTable; |
||||||
|
this.infoColumnService.getColumn(event.target.value).subscribe( |
||||||
|
(response : InfoColumn) => { |
||||||
|
this.displayColumns = response; |
||||||
|
console.log(response); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public getColumnsForJoinTwo (){ |
||||||
|
this.displayColumns = undefined; |
||||||
|
if(this.firstTableData && this.secondTableData && this.firstSchema && this.secondSchema){ |
||||||
|
this.schemas = [this.firstSchema, this.secondSchema]; |
||||||
|
this.tables = [this.firstTableData.nameTable, this.secondTableData.nameTable]; |
||||||
|
|
||||||
|
this.infoColumnService.getColumnsForJoinTwo(this.tables, this.schemas).subscribe( |
||||||
|
(response : InfoColumn[]) => { |
||||||
|
this.infoColumn = response; |
||||||
|
console.log(this.infoColumn); |
||||||
|
if(this.infoColumn?.length === 0){ |
||||||
|
this.columnIsFull = false; |
||||||
|
} else { |
||||||
|
this.columnIsFull = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message); |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,57 @@ |
|||||||
|
<div [ngClass]="{'normalCard' : goodAlias, 'alternativeCard' : !goodAlias}"> |
||||||
|
<div class="p-4"> |
||||||
|
<div class="font-bold text-xl text-left mb-2">Selectionner les informations de la jointure :</div> |
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4"> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Jointures : </label> |
||||||
|
<select [(ngModel)]="joinData" (change)="verifyAndSendData()" size="4" class="my-2 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let join of alljoins" [ngValue]="join">{{ join }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Schémas : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterBaseSchema" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select (change)="useTablesWithSpecificSchema($event)" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let schema of allSchema | filter : filterBaseSchema" value="{{ schema }}">{{ schema }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Tables : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterBaseTables" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="specificTableData" (change)="getSpecificColumns()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let table of tablesByBaseSchema | filter : filterBaseTables" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="allAlias"> |
||||||
|
<label class="text-black text-left">Alias(Base) : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterAlias" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="baseAlias" (change)="getBaseColumns()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let alias of tempAliasData | filter : filterAlias" [ngValue]="alias">{{ alias.nameAlias }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="tablesByBaseSchema" class="mb-2"> |
||||||
|
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'true':'false')" class="w-4 h-4 text-orange-400 bg-slate-400 border-slate-200 rounded focus:ring-orange-400 focus:ring-2"/> |
||||||
|
<label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Afficher aussi les Vues</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngFor="let cols of columnsInfo, index as ind"> |
||||||
|
<app-columns-card [baseColumns]="baseColumns" [specificColumns]="specificColumns" [childIndex]="ind" (selectedColumn)="retrieveColumnsData($event, ind)"></app-columns-card> |
||||||
|
|
||||||
|
<div class="flex inline-flex space-x-4"> |
||||||
|
<button (click)="addSelectColumns()" type="button" class="text-white text-lg bg-gradient-to-br from-teal-400 to-green-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 my-2">+</button> |
||||||
|
|
||||||
|
<button *ngIf="columnsInfo.length > 1" (click)="removeSelectColumns(ind)" type="button" class="text-gray-900 text-lg bg-gradient-to-br from-rose-600 to-red-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 font-medium rounded-full text-sm px-5 py-2.5 text-center my-2">-</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,25 @@ |
|||||||
|
// rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2 my-2 |
||||||
|
|
||||||
|
.normalCard { |
||||||
|
border-radius: 0.5rem; |
||||||
|
overflow: hidden; |
||||||
|
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
||||||
|
background-color: rgb(241 245 249); |
||||||
|
border-style: solid; |
||||||
|
border-color: rgb(251 146 60); |
||||||
|
border-width: 2px; |
||||||
|
margin-top: 0.5rem; /* 8px */ |
||||||
|
margin-bottom: 0.5rem; /* 8px */ |
||||||
|
} |
||||||
|
|
||||||
|
.alternativeCard { |
||||||
|
border-radius: 0.5rem; |
||||||
|
overflow: hidden; |
||||||
|
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
||||||
|
background-color: rgb(71 85 105); |
||||||
|
border-style: solid; |
||||||
|
border-color: rgb(251 146 60); |
||||||
|
border-width: 2px; |
||||||
|
margin-top: 0.5rem; /* 8px */ |
||||||
|
margin-bottom: 0.5rem; /* 8px */ |
||||||
|
} |
@ -0,0 +1,198 @@ |
|||||||
|
import { HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, QueryList, ViewChildren } from '@angular/core'; |
||||||
|
import { InfoColumn } from '../model/info-column'; |
||||||
|
import { InfoTable } from '../model/info-table'; |
||||||
|
import { InfoColumnService } from '../service/info-column.service'; |
||||||
|
import { InfoTableService } from '../service/info-table.service'; |
||||||
|
import { Alias } from '../model/alias'; |
||||||
|
import { Join } from '../model/join'; |
||||||
|
import { ColumnData } from '../model/column-data'; |
||||||
|
import { ColumnsCardComponent } from '../columns-card/columns-card.component'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-joins-table', |
||||||
|
templateUrl: './joins-table.component.html', |
||||||
|
styleUrls: ['./joins-table.component.scss'] |
||||||
|
}) |
||||||
|
export class JoinsTableComponent implements OnInit, OnChanges{ |
||||||
|
@ViewChildren(ColumnsCardComponent)joinsColumnsComponent!: QueryList<ColumnsCardComponent>; |
||||||
|
@Input() allAlias: Alias[] = []; |
||||||
|
@Input() passJoinData: Join | undefined; |
||||||
|
@Output() data = new EventEmitter<Join>(); |
||||||
|
@Output() selectedAlias = new EventEmitter<String>(); |
||||||
|
public allSchema: String[] | undefined; |
||||||
|
filterBaseSchema: any; |
||||||
|
filterBaseTables: any; |
||||||
|
isChecked: boolean = false; |
||||||
|
filterAlias: any; |
||||||
|
specificTableData: any; |
||||||
|
tablesByBaseSchema: InfoTable[] | undefined; |
||||||
|
tablesByBaseSchemaAll: InfoTable[] | undefined; |
||||||
|
tablesByBaseSchemaNoViews: InfoTable[] | undefined; |
||||||
|
joinData: any; |
||||||
|
alljoins: String[] = ['INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN']; |
||||||
|
selectedSchema: String | undefined; |
||||||
|
columnsForSpecificTable: InfoColumn[] | undefined; |
||||||
|
baseColumns: InfoColumn[] | undefined; |
||||||
|
specificColumns: InfoColumn[] | undefined; |
||||||
|
specificSchema: String | undefined; |
||||||
|
specificTable: String | undefined; |
||||||
|
baseAlias: Alias | undefined; |
||||||
|
myJoinData: Join | undefined; |
||||||
|
isGood: boolean = true; |
||||||
|
positionIndex: number = 0; |
||||||
|
tempAliasData: Alias[] = []; |
||||||
|
goodAlias = true; |
||||||
|
columnsInfo: Array<ColumnsCardComponent> = []; |
||||||
|
columnsData: ColumnData[] = []; |
||||||
|
|
||||||
|
constructor( |
||||||
|
private infoColumnService: InfoColumnService, |
||||||
|
private infoTableService: InfoTableService |
||||||
|
){} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getSchemas(); |
||||||
|
this.getBaseColumns(); |
||||||
|
this.columnsInfo.push(new ColumnsCardComponent()); |
||||||
|
} |
||||||
|
|
||||||
|
ngOnChanges(): void { |
||||||
|
this.getBaseColumns(); |
||||||
|
this.verifyAlias(); |
||||||
|
} |
||||||
|
|
||||||
|
public verifyAlias(){ |
||||||
|
this.tempAliasData = this.allAlias; |
||||||
|
if(this.passJoinData){ |
||||||
|
this.tempAliasData = []; |
||||||
|
const myAlias = this.passJoinData.aliasSpecificTable; |
||||||
|
this.allAlias.forEach((alias, i) =>{ |
||||||
|
if(alias.nameAlias !== myAlias){ |
||||||
|
this.tempAliasData.push(alias); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public getSchemas():void { |
||||||
|
this.infoTableService.getSchemas().subscribe( |
||||||
|
(response : String[]) => { |
||||||
|
this.allSchema = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public useTablesWithSpecificSchema (event: any){ |
||||||
|
this.specificSchema = event.target.value; |
||||||
|
this.infoTableService.getTablesBySchema(event.target.value).subscribe( |
||||||
|
(response : InfoTable[]) => { |
||||||
|
this.tablesByBaseSchemaAll = response; |
||||||
|
this.divideTablesAndViews(); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public divideTablesAndViews(){ |
||||||
|
if(this.tablesByBaseSchemaAll){ |
||||||
|
this.tablesByBaseSchemaNoViews = []; |
||||||
|
this.tablesByBaseSchemaAll.forEach((el, i) => { |
||||||
|
if(el.nameTable.length < 5){ |
||||||
|
this.tablesByBaseSchemaNoViews?.push(el); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
if(this.isChecked){ |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaAll; |
||||||
|
} else { |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public getBaseColumns():void { |
||||||
|
if(this.baseAlias){ |
||||||
|
this.infoColumnService.getSelectedColumns(this.baseAlias.nameSchema, this.baseAlias.nameTable).subscribe( |
||||||
|
(response : InfoColumn[]) => { |
||||||
|
this.baseColumns = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public getSpecificColumns():void { |
||||||
|
this.specificTable = this.specificTableData.nameTable; |
||||||
|
if(this.specificSchema && this.specificTable){ |
||||||
|
this.infoColumnService.getSelectedColumns(this.specificSchema, this.specificTable).subscribe( |
||||||
|
(response : InfoColumn[]) => { |
||||||
|
this.specificColumns = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public verifyAndSendData(){ |
||||||
|
if(this.specificSchema && this.specificTable && this.joinData && this.baseAlias && this.columnsData){ |
||||||
|
const tempLower = this.specificTable.toLowerCase(); |
||||||
|
this.myJoinData = { |
||||||
|
joinSpec: this.joinData, |
||||||
|
specificSchema: this.specificSchema, |
||||||
|
specificTable: this.specificTable, |
||||||
|
baseAlias: this.baseAlias.nameAlias, |
||||||
|
columns: this.columnsData, |
||||||
|
aliasSpecificTable: tempLower, |
||||||
|
} |
||||||
|
this.data.emit(this.myJoinData); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public addSelectColumns(){ |
||||||
|
this.columnsInfo.push(new ColumnsCardComponent()); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public removeSelectColumns(index: number){ |
||||||
|
this.columnsInfo.splice(index, 1) |
||||||
|
if(this.columnsData[index]){ |
||||||
|
this.columnsData.splice(index, 1); |
||||||
|
} |
||||||
|
if(this.columnsData[0]){ |
||||||
|
this.columnsData[0].operator = "ON"; |
||||||
|
} |
||||||
|
this.verifyAndSendData() |
||||||
|
} |
||||||
|
|
||||||
|
public retrieveColumnsData(data: ColumnData, index: number){ |
||||||
|
if(this.columnsData.length === 0){ |
||||||
|
this.columnsData.push(data); |
||||||
|
} |
||||||
|
if(this.columnsData[index]){ |
||||||
|
this.columnsData[index] = data; |
||||||
|
} else { |
||||||
|
this.columnsData.push(data); |
||||||
|
} |
||||||
|
|
||||||
|
this.verifyAndSendData(); |
||||||
|
console.log(this.columnsData); |
||||||
|
} |
||||||
|
|
||||||
|
public checkValue(event: any){ |
||||||
|
if(this.isChecked){ |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaAll; |
||||||
|
} else { |
||||||
|
this.tablesByBaseSchema = this.tablesByBaseSchemaNoViews; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,6 @@ |
|||||||
|
<div class="landing-block"> |
||||||
|
<img src="assets/images/logo-apsidetop-blanc.png" alt="Apside logo"> |
||||||
|
<div class="text-center text-lg text-white"> |
||||||
|
Produit créé par APSIDE TOP |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,11 @@ |
|||||||
|
.landing-block { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
} |
||||||
|
|
||||||
|
.landing-links { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
@ -0,0 +1,10 @@ |
|||||||
|
import { Component } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-landing-page', |
||||||
|
templateUrl: './landing-page.component.html', |
||||||
|
styleUrls: ['./landing-page.component.scss'] |
||||||
|
}) |
||||||
|
export class LandingPageComponent { |
||||||
|
|
||||||
|
} |
@ -0,0 +1,5 @@ |
|||||||
|
export interface Alias { |
||||||
|
nameSchema: String, |
||||||
|
nameTable: String, |
||||||
|
nameAlias: String, |
||||||
|
} |
@ -0,0 +1,5 @@ |
|||||||
|
export interface ColumnData { |
||||||
|
operator: String; |
||||||
|
aliasColumn: String; |
||||||
|
specColumn: String; |
||||||
|
} |
@ -0,0 +1,7 @@ |
|||||||
|
export interface Condition { |
||||||
|
operator: String; |
||||||
|
alias: String; |
||||||
|
column: String; |
||||||
|
condition: String; |
||||||
|
value: String; |
||||||
|
} |
@ -0,0 +1,7 @@ |
|||||||
|
export interface Employee { |
||||||
|
id: number; |
||||||
|
firstName: string; |
||||||
|
lastName: string; |
||||||
|
mail: string; |
||||||
|
password: string; |
||||||
|
} |
@ -0,0 +1,7 @@ |
|||||||
|
export interface InfoColumn { |
||||||
|
id: number; |
||||||
|
nameColumn: string; |
||||||
|
dataType: string; |
||||||
|
lengthColumn: number; |
||||||
|
columnText: string; |
||||||
|
} |
@ -0,0 +1,6 @@ |
|||||||
|
export interface InfoTable { |
||||||
|
id: number; |
||||||
|
nameTable: string; |
||||||
|
nameSchema: string; |
||||||
|
tableText: string; |
||||||
|
} |
@ -0,0 +1,9 @@ |
|||||||
|
import { ColumnData } from './column-data'; |
||||||
|
export interface Join { |
||||||
|
joinSpec: String; |
||||||
|
specificSchema: String; |
||||||
|
specificTable: String; |
||||||
|
baseAlias: String; |
||||||
|
columns: ColumnData[]; |
||||||
|
aliasSpecificTable: String; |
||||||
|
} |
@ -0,0 +1,63 @@ |
|||||||
|
|
||||||
|
<nav class="sticky top-0 left-0 right-0 z-50 bg-slate-900 hover:border-solid hover:border-b-2 hover:border-white border-b-2 border-slate-900 hover:ease-in-out duration-300"> |
||||||
|
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"> |
||||||
|
<div class="relative flex h-16 items-center justify-between"> |
||||||
|
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden"> |
||||||
|
<!-- Mobile menu button--> |
||||||
|
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> |
||||||
|
<svg (click)="openMobileMenu()" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> |
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> |
||||||
|
</svg> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"> |
||||||
|
<div class="flex flex-shrink-0 items-center"> |
||||||
|
<img routerLink="" class="block h-8 w-auto lg:hidden hover:cursor-pointer" src="../../assets/images/logo-apsidetop-blanc.png" alt="Your Company"> |
||||||
|
<img routerLink="" class="hidden h-8 w-auto lg:block hover:cursor-pointer" src="../../assets/images/logo-apsidetop-blanc.png" alt="Your Company"> |
||||||
|
</div> |
||||||
|
<div class="hidden sm:ml-6 sm:block" id="extend-menu"> |
||||||
|
<div class="flex space-x-4"> |
||||||
|
|
||||||
|
<a routerLink="request" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Recherche</a> |
||||||
|
|
||||||
|
<a routerLink="joins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Jointures</a> |
||||||
|
|
||||||
|
<a routerLink="createjoins" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Création</a> |
||||||
|
|
||||||
|
<button (click)="applyResetDatabase()" class="text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse">MAJ BDD</button> |
||||||
|
|
||||||
|
<mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"> |
||||||
|
<!-- Profile dropdown --> |
||||||
|
|
||||||
|
<div class="relative ml-3"> |
||||||
|
<div> |
||||||
|
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> |
||||||
|
<img class="h-8 w-8 rounded-full border-solid border-2 border-white" src="../../assets/images/userpng.png" alt=""> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Mobile menu, show/hide based on menu state. --> |
||||||
|
<div *ngIf="mobileOpen" class="sm:hidden" id="mobile-menu"> |
||||||
|
<div class="space-y-1 px-2 pt-2 pb-3"> |
||||||
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> |
||||||
|
<a routerLink="request" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Recherche</a> |
||||||
|
|
||||||
|
<a routerLink="joins" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Jointures</a> |
||||||
|
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a> |
||||||
|
|
||||||
|
<button (click)="applyResetDatabase()" class="ml-2 text-white bg-orange-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:animate-pulse">MAJ BDD</button> |
||||||
|
|
||||||
|
<mat-spinner *ngIf="isLoading" diameter="30" class="ml-2 mt-2"></mat-spinner> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
|
@ -0,0 +1,38 @@ |
|||||||
|
import { HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import { Component } from '@angular/core'; |
||||||
|
import { ResetDataService } from '../service/reset_data.service'; |
||||||
|
import { Router, RouterModule } from '@angular/router'; |
||||||
|
import { AppRoutingModule } from '../app-routing.module'; |
||||||
|
import { MatDialog, MatDialogModule } from '@angular/material/dialog'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-navbar', |
||||||
|
templateUrl: './navbar.component.html', |
||||||
|
styleUrls: ['./navbar.component.scss'] |
||||||
|
}) |
||||||
|
export class NavbarComponent { |
||||||
|
public mobileOpen: boolean = false; |
||||||
|
public isLoading: boolean = false; |
||||||
|
|
||||||
|
constructor(private resetDataService: ResetDataService, private router: Router){} |
||||||
|
|
||||||
|
public openMobileMenu(){ |
||||||
|
this.mobileOpen = !this.mobileOpen; |
||||||
|
} |
||||||
|
|
||||||
|
public applyResetDatabase():void { |
||||||
|
if(window.confirm('Êtes-vous sûr de vouloir recharger le BDD ? Cela peut prendre du temps !')){ |
||||||
|
this.isLoading = true; |
||||||
|
this.resetDataService.resetDatabase().subscribe( |
||||||
|
() => { |
||||||
|
//this.router.navigateByUrl('');
|
||||||
|
this.isLoading = false; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,96 @@ |
|||||||
|
<button class="flex bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow my-2 animate-bounce" (click)="refreshEverything()">Réinitialiser</button> |
||||||
|
|
||||||
|
<div class="max-w-full rounded-2xl overflow-hidden shadow-lg bg-white"> |
||||||
|
<mat-vertical-stepper class="text-white" [linear]="true"> |
||||||
|
<mat-step label="Choisissez un Schéma"> |
||||||
|
<div class="my-2"> |
||||||
|
|
||||||
|
<label class="text-black">Schémas : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterSchema" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="schemaName" (change)="useTablesWithSchemaName()" *ngIf="!schemasByTable" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let schema of allSchema | filter : filterSchema" [ngValue]="schema">{{ schema }}</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<select [(ngModel)]="schemaData" (change)="useTablesWithSchemaName()" *ngIf="schemasByTable" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let schema of schemasByTable | filter : filterSchema" [ngValue]="schema">{{ schema.nameSchema }}</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" matStepperNext>Continuer</button> |
||||||
|
</div> |
||||||
|
</mat-step> |
||||||
|
|
||||||
|
<mat-step label="Choisissez une Table"> |
||||||
|
<div class="my-2"> |
||||||
|
|
||||||
|
<label class="text-black">Tables : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterTable" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="tableData" (change)="useSchemaWithTableName()" *ngIf="!tablesBySchema" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let table of infoTable | filter : filterTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<select [(ngModel)]="tableData" (change)="useSchemaWithTableName()" *ngIf="tablesBySchema" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let table of tablesBySchema | filter : filterTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-2 mb-2" matStepperPrevious>Retour</button> |
||||||
|
<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" matStepperNext>Continuer</button> |
||||||
|
</div> |
||||||
|
</mat-step> |
||||||
|
|
||||||
|
<mat-step label="(Optionnel) Choisissez une colonne"> |
||||||
|
<div class="my-2"> |
||||||
|
|
||||||
|
<label class="text-black mb-4">Colonnes : </label> |
||||||
|
<button class="flex bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow my-2" (click)="resetColumnsInformations()">Reset</button> |
||||||
|
|
||||||
|
|
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterColumn" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select (change)="displayColumnsInformations($event)" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let column of infoColumn | filter: filterColumn" id="{{ column.id }}" value="{{ column.id }}">{{ column.nameColumn }} ({{ column.columnText }})</option> |
||||||
|
</select> |
||||||
|
|
||||||
|
<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-2 mb-2" matStepperPrevious>Retour</button> |
||||||
|
</div> |
||||||
|
</mat-step> |
||||||
|
</mat-vertical-stepper> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="my-4 grid grid-cols-1 sm:grid-cols-3 gap-5"> |
||||||
|
<!--Card--> |
||||||
|
<div *ngIf="currentTable" class="sm:col-start-2 rounded-lg overflow-hidden shadow-lg bg-white animate-pulse"> |
||||||
|
<div class="px-6 py-4 grid justify-items-center"> |
||||||
|
<div class="font-bold text-xl">Table : {{ currentTable.nameTable }}</div> |
||||||
|
<div class="font-bold text-xl">Schéma : {{ selectedSchema }}</div> |
||||||
|
<div class="bg-orange-400 w-full h-2 rounded-lg overflow-hidden my-2"></div> |
||||||
|
<p class="text-base">{{ currentTable.tableText }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="!displayColumns" class="my-4 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5"> |
||||||
|
<!--Card--> |
||||||
|
<div *ngFor="let column of infoColumn" class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="px-6 py-4"> |
||||||
|
<div class="font-bold text-xl mb-2">Colonne : {{ column.nameColumn }}</div> |
||||||
|
<p class="text-base">Data Type : {{ column.dataType }}</p> |
||||||
|
<p class="text-base">Taille : {{ column.lengthColumn }}</p> |
||||||
|
<p class="text-base">Description : {{ column.columnText }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="displayColumns" class="my-4 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5"> |
||||||
|
<!--Card--> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<div class="px-6 py-4"> |
||||||
|
<div class="font-bold text-xl mb-2">Colonne : {{ displayColumns.nameColumn }}</div> |
||||||
|
<p class="text-base">Data Type : {{ displayColumns.dataType }}</p> |
||||||
|
<p class="text-base">Taille : {{ displayColumns.lengthColumn }}</p> |
||||||
|
<p class="text-base">Description : {{ displayColumns.columnText }}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,163 @@ |
|||||||
|
import { HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import {FormBuilder, Validators} from '@angular/forms'; |
||||||
|
import { Component, Input, OnInit } from '@angular/core'; |
||||||
|
import { Employee } from '../model/employee'; |
||||||
|
import { EmployeeService } from '../service/employee.service'; |
||||||
|
import { InfoTable } from '../model/info-table'; |
||||||
|
import { InfoTableService } from '../service/info-table.service'; |
||||||
|
import { InfoColumn } from '../model/info-column'; |
||||||
|
import { InfoColumnService } from '../service/info-column.service'; |
||||||
|
import { MatStepperModule } from '@angular/material/stepper'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-request-page', |
||||||
|
templateUrl: './request-page.component.html', |
||||||
|
styleUrls: ['./request-page.component.scss'] |
||||||
|
}) |
||||||
|
export class RequestPageComponent implements OnInit { |
||||||
|
|
||||||
|
public allSchema: String[] | undefined; |
||||||
|
public infoTable: InfoTable[] | undefined; |
||||||
|
public infoColumn: InfoColumn[] | undefined; |
||||||
|
public tablesBySchema: InfoTable[] | undefined; |
||||||
|
public schemasByTable: InfoTable[] | undefined; |
||||||
|
public displayColumns: InfoColumn | undefined; |
||||||
|
public currentTable: InfoTable | undefined; |
||||||
|
public selectedSchema: String | undefined; |
||||||
|
filterSchema: any; |
||||||
|
filterTable: any; |
||||||
|
filterColumn: any; |
||||||
|
tableData: any; |
||||||
|
schemaData: any; |
||||||
|
schemaName: any;; |
||||||
|
|
||||||
|
firstFormGroup = this._formBuilder.group({ |
||||||
|
firstCtrl: ['', Validators.required], |
||||||
|
}); |
||||||
|
secondFormGroup = this._formBuilder.group({ |
||||||
|
secondCtrl: ['', Validators.required], |
||||||
|
}); |
||||||
|
|
||||||
|
constructor( |
||||||
|
private _formBuilder: FormBuilder , |
||||||
|
private infoColumnService: InfoColumnService, |
||||||
|
private infoTableService: InfoTableService |
||||||
|
){} |
||||||
|
|
||||||
|
|
||||||
|
ngOnInit(): void {; |
||||||
|
this.getSchemas(); |
||||||
|
this.getTables(); |
||||||
|
} |
||||||
|
|
||||||
|
public getSchemas():void { |
||||||
|
this.infoTableService.getSchemas().subscribe( |
||||||
|
(response : String[]) => { |
||||||
|
this.allSchema = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public getTables():void { |
||||||
|
this.infoTableService.getAllTables().subscribe( |
||||||
|
(response : InfoTable[]) => { |
||||||
|
this.infoTable = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public divideColumns(nameSch: String, tempsTab: InfoTable):void { |
||||||
|
console.log(nameSch, tempsTab.nameTable) |
||||||
|
this.infoColumnService.getSelectedColumns(nameSch, tempsTab.nameTable).subscribe( |
||||||
|
(response : InfoColumn[]) => { |
||||||
|
this.infoColumn = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
this.displayColumns = undefined; |
||||||
|
this.infoTableService.getTable(tempsTab.id).subscribe( |
||||||
|
(response : InfoTable) => { |
||||||
|
this.currentTable = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public displayColumnsInformations (event: any){ |
||||||
|
this.infoColumnService.getColumn(event.target.value).subscribe( |
||||||
|
(response : InfoColumn) => { |
||||||
|
this.displayColumns = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
public useTablesWithSchemaName (){ |
||||||
|
if(this.schemaName){ |
||||||
|
this.selectedSchema = this.schemaName; |
||||||
|
} else { |
||||||
|
this.selectedSchema = this.schemaData.nameSchema; |
||||||
|
} |
||||||
|
// this.displayColumns = undefined;
|
||||||
|
// this.currentTable = undefined;
|
||||||
|
// this.infoColumn = undefined;
|
||||||
|
|
||||||
|
if(this.selectedSchema){ |
||||||
|
this.infoTableService.getTablesBySchema(this.selectedSchema).subscribe( |
||||||
|
(response : InfoTable[]) => { |
||||||
|
this.tablesBySchema = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
if(this.tableData){ |
||||||
|
this.divideColumns(this.selectedSchema, this.tableData); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public useSchemaWithTableName (){ |
||||||
|
this.infoTableService.getSchemasByTable(this.tableData.nameTable).subscribe( |
||||||
|
(response : InfoTable[]) => { |
||||||
|
this.schemasByTable = response; |
||||||
|
console.log(response); |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
if(this.selectedSchema){ |
||||||
|
this.divideColumns(this.selectedSchema, this.tableData); |
||||||
|
} |
||||||
|
this.schemaName = null; |
||||||
|
} |
||||||
|
|
||||||
|
public resetColumnsInformations(){ |
||||||
|
this.displayColumns = undefined; |
||||||
|
} |
||||||
|
|
||||||
|
public refreshEverything(){ |
||||||
|
this.tablesBySchema = undefined; |
||||||
|
this.schemasByTable = undefined; |
||||||
|
this.selectedSchema = undefined; |
||||||
|
this.displayColumns = undefined; |
||||||
|
this.infoColumn = undefined; |
||||||
|
this.currentTable = undefined; |
||||||
|
this.tableData = null; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,48 @@ |
|||||||
|
<div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5"> |
||||||
|
<!--Card 1--> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<img class="w-full" src="/mountain.jpg" alt="Mountain"> |
||||||
|
<div class="px-6 py-4"> |
||||||
|
<div class="font-bold text-xl mb-2">Mountain</div> |
||||||
|
<p class="text-gray-700 text-base"> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div class="px-6 pt-4 pb-2"> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--Card 2--> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<img class="w-full" src="/river.jpg" alt="River"> |
||||||
|
<div class="px-6 py-4"> |
||||||
|
<div class="font-bold text-xl mb-2">River</div> |
||||||
|
<p class="text-gray-700 text-base"> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div class="px-6 pt-4 pb-2"> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#summer</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!--Card 3--> |
||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-white"> |
||||||
|
<img class="w-full" src="/forest.jpg" alt="Forest"> |
||||||
|
<div class="px-6 py-4"> |
||||||
|
<div class="font-bold text-xl mb-2">Forest</div> |
||||||
|
<p class="text-gray-700 text-base"> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div class="px-6 pt-4 pb-2"> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span> |
||||||
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#fall</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,35 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-schemas-tab', |
||||||
|
templateUrl: './schemas-tab.component.html', |
||||||
|
styleUrls: ['./schemas-tab.component.scss'] |
||||||
|
}) |
||||||
|
export class SchemasTabComponent implements OnInit{ |
||||||
|
title!: string; |
||||||
|
description!: string; |
||||||
|
createdDate!: Date; |
||||||
|
snaps!: number; |
||||||
|
imageUrl!: string; |
||||||
|
buttonText!: string |
||||||
|
|
||||||
|
ngOnInit(){ |
||||||
|
this.title = 'FirstTest'; |
||||||
|
this.description = 'FirstDescription'; |
||||||
|
this.createdDate = new Date(); |
||||||
|
this.snaps = 10; |
||||||
|
this.imageUrl = '/assets/images/apsidetop.png'; |
||||||
|
this.buttonText = 'Add Like'; |
||||||
|
} |
||||||
|
|
||||||
|
onLike(){ |
||||||
|
if(this.buttonText === 'Add Like'){ |
||||||
|
this.snaps++; |
||||||
|
this.buttonText = 'Unlike'; |
||||||
|
} else { |
||||||
|
this.snaps--; |
||||||
|
this.buttonText = "Add Like"; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,34 @@ |
|||||||
|
import { Injectable } from "@angular/core"; |
||||||
|
import { Observable } from "rxjs"; |
||||||
|
import { Employee } from '../model/employee'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { environment } from '../../environments/environment'; |
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class EmployeeService { |
||||||
|
private apiServerUrl = environment.apiBaseUrl; |
||||||
|
|
||||||
|
constructor(private http: HttpClient) {} |
||||||
|
|
||||||
|
public getAllEmployees(): Observable<Employee[]> { |
||||||
|
return this.http.get<Employee[]>(`${this.apiServerUrl}/api/employees/all`); |
||||||
|
} |
||||||
|
|
||||||
|
public getEmployee(employeeId: number): Observable<Employee> { |
||||||
|
return this.http.get<Employee>(`${this.apiServerUrl}/api/employee/${employeeId}`); |
||||||
|
} |
||||||
|
|
||||||
|
public addEmployee(employee: Employee): Observable<Employee> { |
||||||
|
return this.http.post<Employee>(`${this.apiServerUrl}/api/employee/add`, employee); |
||||||
|
} |
||||||
|
|
||||||
|
public updateEmployee(employee: Employee, employeeId: number): Observable<Employee> { |
||||||
|
return this.http.put<Employee>(`${this.apiServerUrl}/api/employee/update/${employeeId}`, employee); |
||||||
|
} |
||||||
|
|
||||||
|
public deleteEmployee(employeeId: number): Observable<void> { |
||||||
|
return this.http.delete<void>(`${this.apiServerUrl}/api/employee/delete/${employeeId}`); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,38 @@ |
|||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { environment } from '../../environments/environment.development'; |
||||||
|
import { HttpClient, HttpParams } from '@angular/common/http'; |
||||||
|
import { InfoColumn } from '../model/info-column'; |
||||||
|
import { Observable } from 'rxjs'; |
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class InfoColumnService { |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
private apiServerUrl = environment.apiBaseUrl; |
||||||
|
|
||||||
|
constructor(private http: HttpClient) { } |
||||||
|
|
||||||
|
public getAllColumns(): Observable<InfoColumn[]>{ |
||||||
|
return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/all`); |
||||||
|
} |
||||||
|
|
||||||
|
public getColumn(columnId: Number): Observable<InfoColumn>{ |
||||||
|
return this.http.get<InfoColumn>(`${this.apiServerUrl}/api/column/${columnId}`); |
||||||
|
} |
||||||
|
|
||||||
|
public getSelectedColumns(schema: String, table: String): Observable<InfoColumn[]>{ |
||||||
|
return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/${schema}/${table}`); |
||||||
|
} |
||||||
|
|
||||||
|
public getColumnsForJoin(firstSchema: String, secondSchema: String, firstTable: String, secondTable: String): Observable<InfoColumn[]>{ |
||||||
|
return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/${firstSchema}/${secondSchema}/${firstTable}/${secondTable}`); |
||||||
|
} |
||||||
|
|
||||||
|
public getColumnsForJoinTwo(tables: string[], schemas: string[]): Observable<InfoColumn[]>{ |
||||||
|
const paramsGetJoins = new HttpParams().set('tables', tables.toString()).set('schemas', schemas.toString()); |
||||||
|
return this.http.get<InfoColumn[]>(`${this.apiServerUrl}/api/columns/joins`, {params: paramsGetJoins}); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,35 @@ |
|||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import { Observable } from 'rxjs'; |
||||||
|
import { InfoTable } from '../model/info-table'; |
||||||
|
import { environment } from 'src/environments/environment'; |
||||||
|
|
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class InfoTableService { |
||||||
|
private apiServerUrl = environment.apiBaseUrl; |
||||||
|
|
||||||
|
constructor(private http: HttpClient) { } |
||||||
|
|
||||||
|
public getAllTables(): Observable<InfoTable[]>{ |
||||||
|
return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/tables/all`); |
||||||
|
} |
||||||
|
|
||||||
|
public getTable(tableId: Number): Observable<InfoTable>{ |
||||||
|
return this.http.get<InfoTable>(`${this.apiServerUrl}/api/table/${tableId}`); |
||||||
|
} |
||||||
|
|
||||||
|
public getSchemas(): Observable<String[]>{ |
||||||
|
return this.http.get<String[]>(`${this.apiServerUrl}/api/schemas/all`); |
||||||
|
} |
||||||
|
|
||||||
|
public getTablesBySchema(nameSchema : String): Observable<InfoTable[]>{ |
||||||
|
return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/tables/${nameSchema}`); |
||||||
|
} |
||||||
|
|
||||||
|
public getSchemasByTable(nameTable : String): Observable<InfoTable[]>{ |
||||||
|
return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/schemas/${nameTable}`); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,18 @@ |
|||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { environment } from '../../environments/environment.development'; |
||||||
|
import { HttpClient, HttpParams } from '@angular/common/http'; |
||||||
|
import { Observable } from 'rxjs'; |
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class ResetDataService { |
||||||
|
private apiServerUrl = environment.apiBaseUrl; |
||||||
|
|
||||||
|
constructor(private http: HttpClient) { } |
||||||
|
|
||||||
|
public resetDatabase(){ |
||||||
|
return this.http.post<void>(`${this.apiServerUrl}/api/reset`, null); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,42 @@ |
|||||||
|
<div class="rounded-lg overflow-hidden shadow-lg bg-slate-100 border-solid border-orange-400 border-2 my-2"> |
||||||
|
<div class="p-4"> |
||||||
|
<div class="font-bold text-xl text-left mb-2">Selectionner les informations de la Condition :</div> |
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 gap-4"> |
||||||
|
|
||||||
|
<div *ngIf="childIndex != 0"> |
||||||
|
<label class="text-black text-left">Opérateurs : </label> |
||||||
|
<select [(ngModel)]="operator" (change)="verifyAndSendConditionData()" size="4" class="my-2 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let ope of operatorList" [ngValue]="ope">{{ ope }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Alias : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterAlias" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="baseAlias" (change)="getColumns()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let alias of allAlias | filter : filterAlias" [ngValue]="alias">{{ alias.nameAlias }}</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Colonnes : </label> |
||||||
|
<input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterColumn" placeholder="Rechercher..."> |
||||||
|
|
||||||
|
<select [(ngModel)]="baseColumnData" (change)="verifyAndSendConditionData()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||||
|
<option *ngFor="let col of baseColumns | filter : filterColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }} ({{col.columnText}})</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div *ngIf="allAlias"> |
||||||
|
<label class="text-black text-left">Conditions : </label> |
||||||
|
<input type="text" (change)="verifyAndSendConditionData()" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="conditionOperator" placeholder="Condition..."> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<label class="text-black text-left">Valeurs : </label> |
||||||
|
<input type="text" (change)="verifyAndSendConditionData()" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="conditionValue" placeholder="Valeur..."> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,54 @@ |
|||||||
|
import { HttpErrorResponse } from '@angular/common/http'; |
||||||
|
import { Component, EventEmitter, Input, Output } from '@angular/core'; |
||||||
|
import { Alias } from '../model/alias'; |
||||||
|
import { InfoColumn } from '../model/info-column'; |
||||||
|
import { InfoColumnService } from '../service/info-column.service'; |
||||||
|
import { InfoTableService } from '../service/info-table.service'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-where-card', |
||||||
|
templateUrl: './where-card.component.html', |
||||||
|
styleUrls: ['./where-card.component.scss'] |
||||||
|
}) |
||||||
|
export class WhereCardComponent { |
||||||
|
@Input() allAlias: Alias[] = []; |
||||||
|
@Input() childIndex: number | undefined; |
||||||
|
@Output() conditionData = new EventEmitter<String[]>(); |
||||||
|
|
||||||
|
operator: any |
||||||
|
operatorList: String[] = ["AND", "OR"]; |
||||||
|
conditionValue: any; |
||||||
|
conditionOperator: any; |
||||||
|
filterAlias: any; |
||||||
|
filterColumn: any; |
||||||
|
baseAlias: Alias | undefined; |
||||||
|
baseColumns: InfoColumn[] | undefined; |
||||||
|
baseColumnData: any; |
||||||
|
|
||||||
|
constructor( |
||||||
|
private infoColumnService: InfoColumnService, |
||||||
|
private infoTableService: InfoTableService |
||||||
|
){} |
||||||
|
|
||||||
|
public getColumns():void { |
||||||
|
if(this.baseAlias){ |
||||||
|
this.infoColumnService.getSelectedColumns(this.baseAlias.nameSchema, this.baseAlias.nameTable).subscribe( |
||||||
|
(response : InfoColumn[]) => { |
||||||
|
this.baseColumns = response; |
||||||
|
}, |
||||||
|
(error: HttpErrorResponse) => { |
||||||
|
alert(error.message) |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public verifyAndSendConditionData(){ |
||||||
|
if(this.childIndex === 0){ |
||||||
|
this.operator = "WHERE"; |
||||||
|
} |
||||||
|
if(this.operator && this.baseAlias && this.baseColumnData && this.baseColumnData && this.conditionOperator && this.conditionValue){ |
||||||
|
this.conditionData.emit([this.operator, this.baseAlias.nameAlias, this.baseColumnData.nameColumn, this.conditionOperator, this.conditionValue]); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 50 KiB |
After Width: | Height: | Size: 39 KiB |
@ -0,0 +1,4 @@ |
|||||||
|
export const environment = { |
||||||
|
production: false, |
||||||
|
apiBaseUrl: 'http://localhost:9001' |
||||||
|
}; |
@ -0,0 +1,5 @@ |
|||||||
|
export const environment = { |
||||||
|
production: false, |
||||||
|
apiBaseUrl: 'http://localhost:8080' |
||||||
|
|
||||||
|
}; |
After Width: | Height: | Size: 948 B |
@ -0,0 +1,16 @@ |
|||||||
|
<!doctype html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<title>AngularTest</title> |
||||||
|
<base href="/"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico"> |
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com"> |
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> |
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
||||||
|
</head> |
||||||
|
<body class="bg-slate-900"> |
||||||
|
<app-root ></app-root> |
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,7 @@ |
|||||||
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; |
||||||
|
|
||||||
|
import { AppModule } from './app/app.module'; |
||||||
|
|
||||||
|
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule) |
||||||
|
.catch(err => console.error(err)); |
@ -0,0 +1,11 @@ |
|||||||
|
/* You can add global styles to this file, and also import other style files */ |
||||||
|
/* More informations on https://tailwindcss.com/ */ |
||||||
|
|
||||||
|
@import 'tailwindcss/base'; |
||||||
|
@import 'tailwindcss/components'; |
||||||
|
@import 'tailwindcss/utilities'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
html, body { height: 100%; } |
||||||
|
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } |
@ -0,0 +1,17 @@ |
|||||||
|
/** @type {import('tailwindcss').Config} */ |
||||||
|
module.exports = { |
||||||
|
prefix: '', |
||||||
|
purge: { |
||||||
|
content: [ |
||||||
|
'./src/**/*.{html,ts}', |
||||||
|
] |
||||||
|
}, |
||||||
|
darkMode: 'class', // or 'media' or 'class'
|
||||||
|
theme: { |
||||||
|
extend: {}, |
||||||
|
}, |
||||||
|
variants: { |
||||||
|
extend: {}, |
||||||
|
}, |
||||||
|
plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')], |
||||||
|
}; |
@ -0,0 +1,14 @@ |
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */ |
||||||
|
{ |
||||||
|
"extends": "./tsconfig.json", |
||||||
|
"compilerOptions": { |
||||||
|
"outDir": "./out-tsc/app", |
||||||
|
"types": [] |
||||||
|
}, |
||||||
|
"files": [ |
||||||
|
"src/main.ts" |
||||||
|
], |
||||||
|
"include": [ |
||||||
|
"src/**/*.d.ts" |
||||||
|
] |
||||||
|
} |
@ -0,0 +1,33 @@ |
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */ |
||||||
|
{ |
||||||
|
"compileOnSave": false, |
||||||
|
"compilerOptions": { |
||||||
|
"baseUrl": "./", |
||||||
|
"outDir": "./dist/out-tsc", |
||||||
|
"forceConsistentCasingInFileNames": true, |
||||||
|
"strict": true, |
||||||
|
"noImplicitOverride": true, |
||||||
|
"noPropertyAccessFromIndexSignature": true, |
||||||
|
"noImplicitReturns": true, |
||||||
|
"noFallthroughCasesInSwitch": true, |
||||||
|
"sourceMap": true, |
||||||
|
"declaration": false, |
||||||
|
"downlevelIteration": true, |
||||||
|
"experimentalDecorators": true, |
||||||
|
"moduleResolution": "node", |
||||||
|
"importHelpers": true, |
||||||
|
"target": "ES2022", |
||||||
|
"module": "ES2022", |
||||||
|
"useDefineForClassFields": false, |
||||||
|
"lib": [ |
||||||
|
"ES2022", |
||||||
|
"dom" |
||||||
|
] |
||||||
|
}, |
||||||
|
"angularCompilerOptions": { |
||||||
|
"enableI18nLegacyMessageIdFormat": false, |
||||||
|
"strictInjectionParameters": true, |
||||||
|
"strictInputAccessModifiers": true, |
||||||
|
"strictTemplates": true |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,14 @@ |
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */ |
||||||
|
{ |
||||||
|
"extends": "./tsconfig.json", |
||||||
|
"compilerOptions": { |
||||||
|
"outDir": "./out-tsc/spec", |
||||||
|
"types": [ |
||||||
|
"jasmine" |
||||||
|
] |
||||||
|
}, |
||||||
|
"include": [ |
||||||
|
"src/**/*.spec.ts", |
||||||
|
"src/**/*.d.ts" |
||||||
|
] |
||||||
|
} |
Loading…
Reference in new issue