floxx2112
2 years ago
parent
f393f32a12
commit
489e3fa34c
@ -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,134 @@ |
||||
{ |
||||
"$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" |
||||
}, |
||||
"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) |
||||
], |
||||
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,49 @@ |
||||
|
||||
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 { 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'; |
||||
|
||||
@NgModule({ |
||||
declarations: [ |
||||
AppComponent, |
||||
SchemasTabComponent, |
||||
LandingPageComponent, |
||||
NavbarComponent, |
||||
RequestPageComponent, |
||||
Custom_Ng2SearchPipe, |
||||
JoinsPageComponent, |
||||
CreateJoinsPageComponent, |
||||
JoinsTableComponent |
||||
], |
||||
imports: [ |
||||
BrowserModule, |
||||
AppRoutingModule, |
||||
HttpClientModule, |
||||
BrowserAnimationsModule, |
||||
MatStepperModule, |
||||
MatToolbarModule, |
||||
MatIconModule, |
||||
FormsModule |
||||
|
||||
], |
||||
providers: [EmployeeService], |
||||
bootstrap: [AppComponent] |
||||
}) |
||||
export class AppModule { } |
||||
@ -0,0 +1,62 @@ |
||||
|
||||
<!--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="flex space-x-4"> |
||||
<div class="w-1/2 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="w-1/2 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> |
||||
|
||||
|
||||
|
||||
</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(i)" type="button" class="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Ajouter une Jointure</button> |
||||
<button *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> |
||||
</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">{{join.joinSpec}} {{join.specificSchema}}.{{join.specificTable}} AS {{join.aliasSpecificTable}} ON {{join.baseAlias}}.{{join.baseColumn}}={{join.aliasSpecificTable}}.{{join.specificColumn}}</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
@ -0,0 +1,234 @@ |
||||
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'; |
||||
|
||||
@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>; |
||||
public allSchema: String[] | undefined; |
||||
filterBaseSchema: any; |
||||
filterBaseTables: any; |
||||
public tablesByBaseSchema: InfoTable[] | undefined; |
||||
baseTableData: any; |
||||
requestInfoJoin: Array<JoinsTableComponent> = []; |
||||
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; |
||||
|
||||
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.tablesByBaseSchema = response; |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
} |
||||
|
||||
public getNameBaseTable(){ |
||||
if(this.baseSchema){ |
||||
this.baseTableName = this.baseTableData.nameTable; |
||||
this.baseTableNameLowerCase = this.baseTableName?.toLowerCase(); |
||||
|
||||
this.baseAlias = { |
||||
nameSchema: this.baseSchema, |
||||
nameTable: this.baseTableName, |
||||
nameAlias: this.baseTableNameLowerCase, |
||||
} |
||||
|
||||
this.aliasData.shift(); |
||||
this.aliasData.unshift(this.baseAlias); |
||||
} |
||||
|
||||
} |
||||
|
||||
public addTable(i: number){ |
||||
this.requestInfoJoin.push(new JoinsTableComponent(this.infoColumnService, this.infoTableService)); |
||||
this.checkLength(); |
||||
} |
||||
|
||||
public removeTable(i: number){ |
||||
this.requestInfoJoin.splice(i, 1); |
||||
this.checkLength(); |
||||
const deleteAlias = this.allData[i].aliasSpecificTable; |
||||
let aliasSplitName = deleteAlias.slice(0, -1); |
||||
this.allData.splice(i, 1); |
||||
let indexOfHighest = -1; |
||||
let highestValue = 0; |
||||
let tempAlias; |
||||
let inInclude = false; |
||||
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){ |
||||
this.allData[indexOfHighest].aliasSpecificTable = deleteAlias || ""; |
||||
this.aliasData.shift(); |
||||
this.aliasData.splice(i, 1); |
||||
this.aliasData[indexOfHighest].nameAlias = deleteAlias; |
||||
} else { |
||||
this.aliasData.shift(); |
||||
this.aliasData.splice(i, 1); |
||||
} |
||||
if(this.baseAlias){ |
||||
this.aliasData.unshift(this.baseAlias); |
||||
} |
||||
} |
||||
|
||||
public checkLength(){ |
||||
if(this.requestInfoJoin.length > 1){ |
||||
this.oneJoinRemaining = false; |
||||
} else { |
||||
this.oneJoinRemaining = true; |
||||
} |
||||
} |
||||
|
||||
public retrieveData(event: String[], index: number){ |
||||
const tempData: Join = { |
||||
joinSpec: event[0], |
||||
specificSchema: event[1], |
||||
specificTable: event[2], |
||||
baseAlias: event[3], |
||||
baseColumn: event[4], |
||||
specificColumn: event[5], |
||||
aliasSpecificTable: event[6], |
||||
} |
||||
let tempNum = ""; |
||||
let aliasName = ""; |
||||
let first = 0; |
||||
let tempAllData: Join[] = []; |
||||
if(this.allData.length === 0){ |
||||
tempData.aliasSpecificTable = tempData.aliasSpecificTable + "0"; |
||||
} else { |
||||
this.allData.forEach((join, i) => { |
||||
const alias = join.aliasSpecificTable; |
||||
if(alias.includes(tempData.aliasSpecificTable.toString())){ |
||||
if (this.allData[index]){ |
||||
tempNum = "0"; |
||||
first = 1; |
||||
} else { |
||||
tempAllData.push(this.allData[i]); |
||||
} |
||||
} else if (this.allData[index]){ |
||||
tempNum = "0"; |
||||
first = 1; |
||||
} else { |
||||
tempNum = "0"; |
||||
} |
||||
}) |
||||
tempAllData.forEach((tempJoin) =>{ |
||||
const tempAlias = tempJoin.aliasSpecificTable; |
||||
for(let lastNum = 0; lastNum < 10; lastNum++){ |
||||
if(tempAlias == (tempData.aliasSpecificTable.toString())+lastNum.toString()){ |
||||
aliasName = tempAlias.slice(0, -1); |
||||
const tem = +lastNum + +1; |
||||
first = 2; |
||||
tempNum = tem.toString(); |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
if(first === 0){ |
||||
tempData.aliasSpecificTable = tempData.aliasSpecificTable + tempNum; |
||||
this.allData.push(tempData); |
||||
} else if (first === 1){ |
||||
this.allData[index] = tempData; |
||||
this.allData[index].aliasSpecificTable = tempData.aliasSpecificTable + tempNum; |
||||
} else if (first === 2){ |
||||
tempData.aliasSpecificTable = aliasName + tempNum; |
||||
this.allData.push(tempData); |
||||
} |
||||
|
||||
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 |
||||
} |
||||
console.log(ephAlias.nameAlias) |
||||
this.aliasData.push(ephAlias); |
||||
console.log(this.aliasData) |
||||
}); |
||||
} |
||||
console.log(this.allData); |
||||
} |
||||
|
||||
|
||||
// public getSelectedAlias(event: String){
|
||||
// this.selectedAlias = event;
|
||||
|
||||
// if(this.baseTableNameLowerCase == this.selectedAlias){
|
||||
// if(this.baseSchema && this.baseTableName)
|
||||
// this.passSchema = this.baseSchema;
|
||||
// this.passTable = this.baseTableName;
|
||||
// } else {
|
||||
// this.allData.forEach((join, i) => {
|
||||
// const alias = join.aliasSpecificTable;
|
||||
// if(alias == this.selectedAlias){
|
||||
// this.passSchema = join.specificSchema;
|
||||
// this.passTable = join.specificTable;
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
} |
||||
@ -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,59 @@ |
||||
<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 jointure :</div> |
||||
<div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 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> |
||||
<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)="verifyAndSendData()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||
<option *ngFor="let col of baseColumns | filter : filterBaseColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }}</option> |
||||
</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)="verifyAndSendData()" size="3" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5"> |
||||
<option *ngFor="let col of specificColumns | filter : filterSpecificColumn" id="{{ col.id }}" [ngValue]="col">{{ col.nameColumn }}</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,155 @@ |
||||
import { HttpErrorResponse } from '@angular/common/http'; |
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output } 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'; |
||||
|
||||
@Component({ |
||||
selector: 'app-joins-table', |
||||
templateUrl: './joins-table.component.html', |
||||
styleUrls: ['./joins-table.component.scss'] |
||||
}) |
||||
export class JoinsTableComponent implements OnInit, OnChanges{ |
||||
@Input() allAlias: Alias[] = []; |
||||
@Input() passJoinData: Join | undefined; |
||||
@Output() data = new EventEmitter<String[]>(); |
||||
@Output() selectedAlias = new EventEmitter<String>(); |
||||
public allSchema: String[] | undefined; |
||||
filterBaseSchema: any; |
||||
filterBaseTables: any; |
||||
filterBaseColumn: any; |
||||
filterSpecificColumn: any; |
||||
filterAlias: any; |
||||
specificTableData: any; |
||||
baseColumnData: any; |
||||
specificColumnData: any; |
||||
public tablesByBaseSchema: 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[] = [] |
||||
|
||||
constructor( |
||||
|
||||
private infoColumnService: InfoColumnService, |
||||
private infoTableService: InfoTableService |
||||
){} |
||||
|
||||
ngOnInit(): void { |
||||
this.getSchemas(); |
||||
this.getBaseColumns(); |
||||
this.verifyAlias(); |
||||
} |
||||
|
||||
ngOnChanges(): void { |
||||
this.getBaseColumns(); |
||||
this.verifyAlias(); |
||||
|
||||
} |
||||
|
||||
public verifyAlias(){ |
||||
|
||||
// console.log(this.allAlias);
|
||||
this.tempAliasData = this.allAlias; |
||||
// if(this.passJoinData){
|
||||
// this.tempAliasData = [];
|
||||
|
||||
// const myAlias = this.passJoinData.aliasSpecificTable;
|
||||
// console.log(myAlias)
|
||||
// this.allAlias.forEach((alias, i) =>{
|
||||
// if(alias.nameAlias == myAlias){
|
||||
// console.log(this.tempAliasData[i])
|
||||
|
||||
// this.positionIndex = i;
|
||||
// } else {
|
||||
// this.tempAliasData.push(alias);
|
||||
|
||||
// }
|
||||
|
||||
// })
|
||||
|
||||
// console.log(this.allAlias)
|
||||
// console.log(this.tempAliasData)
|
||||
// }
|
||||
} |
||||
|
||||
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.tablesByBaseSchema = response; |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
} |
||||
|
||||
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.baseColumnData && this.specificColumnData && this.baseAlias){ |
||||
const tempLower = this.specificTable.toLowerCase(); |
||||
this.myJoinData = { |
||||
joinSpec: this.joinData, |
||||
specificSchema: this.specificSchema, |
||||
specificTable: this.specificTable, |
||||
baseAlias: this.baseAlias.nameAlias, |
||||
baseColumn: this.baseColumnData.nameColumn, |
||||
specificColumn: this.specificColumnData.nameColumn, |
||||
aliasSpecificTable: tempLower, |
||||
} |
||||
this.data.emit([this.joinData, this.specificSchema, this.specificTable, this.baseAlias.nameAlias, this.baseColumnData.nameColumn, this.specificColumnData.nameColumn, tempLower]); |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -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,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 @@ |
||||
export interface Join { |
||||
joinSpec: String; |
||||
specificSchema: String; |
||||
specificTable: String; |
||||
baseAlias: String; |
||||
baseColumn: String; |
||||
specificColumn: String; |
||||
aliasSpecificTable: String; |
||||
} |
||||
@ -0,0 +1,54 @@ |
||||
|
||||
<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> |
||||
</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> |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
|
||||
@ -0,0 +1,14 @@ |
||||
import { Component } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-navbar', |
||||
templateUrl: './navbar.component.html', |
||||
styleUrls: ['./navbar.component.scss'] |
||||
}) |
||||
export class NavbarComponent { |
||||
public mobileOpen: boolean = false; |
||||
|
||||
public openMobileMenu(){ |
||||
this.mobileOpen = !this.mobileOpen; |
||||
} |
||||
} |
||||
@ -0,0 +1,91 @@ |
||||
|
||||
<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 (change)="useTablesWithSchemaName($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 : filterSchema" value="{{ schema }}">{{ schema }}</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)="getSelectedColumns()" *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)="getSelectedColumns()" *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 }}</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 *ngIf="currentTable" class="my-4 grid grid-cols-1 sm:grid-cols-3 gap-5"> |
||||
<!--Card--> |
||||
<div class="sm:col-start-2 rounded-lg overflow-hidden shadow-lg bg-white"> |
||||
<div class="px-6 py-4 grid justify-items-center"> |
||||
<div class="font-bold text-xl">Table : {{ currentTable.nameTable }}</div> |
||||
|
||||
<div class="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,137 @@ |
||||
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 displayColumns: InfoColumn | undefined; |
||||
public currentTable: InfoTable | undefined; |
||||
public selectedSchema: String| undefined; |
||||
filterSchema: any; |
||||
filterTable: any; |
||||
filterColumn: any; |
||||
tableData: 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.getEmployees();
|
||||
this.getSchemas(); |
||||
this.getTables(); |
||||
} |
||||
|
||||
public getSchemas():void { |
||||
this.infoTableService.getSchemas().subscribe( |
||||
(response : String[]) => { |
||||
this.allSchema = response; |
||||
console.log(response); |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
} |
||||
|
||||
public getTables():void { |
||||
this.infoTableService.getAllTables().subscribe( |
||||
(response : InfoTable[]) => { |
||||
this.infoTable = response; |
||||
console.log(response); |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
} |
||||
|
||||
public getSelectedColumns():void { |
||||
if(this.selectedSchema){ |
||||
this.infoColumnService.getSelectedColumns(this.selectedSchema, this.tableData.nameTable).subscribe( |
||||
(response : InfoColumn[]) => { |
||||
this.infoColumn = response; |
||||
console.log(response); |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
this.displayColumns = undefined; |
||||
this.infoTableService.getTable(this.tableData.id).subscribe( |
||||
(response : InfoTable) => { |
||||
this.currentTable = response; |
||||
console.log(this.currentTable); |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
public displayColumnsInformations (event: any){ |
||||
this.infoColumnService.getColumn(event.target.value).subscribe( |
||||
(response : InfoColumn) => { |
||||
this.displayColumns = response; |
||||
console.log(response); |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
} |
||||
|
||||
public useTablesWithSchemaName (event: any){ |
||||
this.displayColumns = undefined; |
||||
this.currentTable = undefined; |
||||
this.infoColumn = undefined; |
||||
this.selectedSchema = event.target.value; |
||||
this.infoTableService.getTablesBySchema(event.target.value).subscribe( |
||||
(response : InfoTable[]) => { |
||||
this.tablesBySchema = response; |
||||
console.log(response); |
||||
}, |
||||
(error: HttpErrorResponse) => { |
||||
alert(error.message) |
||||
} |
||||
); |
||||
} |
||||
|
||||
public resetColumnsInformations(){ |
||||
this.displayColumns = undefined; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
@ -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,31 @@ |
||||
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}`); |
||||
} |
||||
} |
||||
|
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:8080' |
||||
}; |
||||
@ -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