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