From 1eb347b5f8f0c2c352796f68275f88f423fd632d Mon Sep 17 00:00:00 2001 From: floxx2112 Date: Thu, 6 Apr 2023 16:11:44 +0200 Subject: [PATCH] main update (script management) Add(new file or existing file with drag and drop)/modify.delete script + link to Git + search by name --- package-lock.json | 9 ++ package.json | 1 + src/CustomFilterScript.ts | 20 +++ src/app/add-script/add-script.component.html | 64 +++++++++ src/app/add-script/add-script.component.scss | 0 src/app/add-script/add-script.component.ts | 127 ++++++++++++++++++ src/app/app-routing.module.ts | 8 +- src/app/app.module.ts | 14 +- src/app/directives/dnd.directive.ts | 53 ++++++++ .../edit-script/edit-script.component.html | 30 +++++ .../edit-script/edit-script.component.scss | 0 src/app/edit-script/edit-script.component.ts | 52 +++++++ src/app/model/script.ts | 5 + src/app/navbar/navbar.component.html | 2 + .../script-management.component.html | 48 +++++++ .../script-management.component.scss | 0 .../script-management.component.ts | 81 +++++++++++ src/app/service/script.service.ts | 32 +++++ src/assets/svg/edit.svg | 1 + src/assets/svg/trash.svg | 1 + src/assets/svg/upload.svg | 1 + 21 files changed, 546 insertions(+), 3 deletions(-) create mode 100644 src/CustomFilterScript.ts create mode 100644 src/app/add-script/add-script.component.html create mode 100644 src/app/add-script/add-script.component.scss create mode 100644 src/app/add-script/add-script.component.ts create mode 100644 src/app/directives/dnd.directive.ts create mode 100644 src/app/edit-script/edit-script.component.html create mode 100644 src/app/edit-script/edit-script.component.scss create mode 100644 src/app/edit-script/edit-script.component.ts create mode 100644 src/app/model/script.ts create mode 100644 src/app/script-management/script-management.component.html create mode 100644 src/app/script-management/script-management.component.scss create mode 100644 src/app/script-management/script-management.component.ts create mode 100644 src/app/service/script.service.ts create mode 100644 src/assets/svg/edit.svg create mode 100644 src/assets/svg/trash.svg create mode 100644 src/assets/svg/upload.svg diff --git a/package-lock.json b/package-lock.json index bdecbe0..774f9ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", "ng2-search-filter": "^0.5.1", + "ngx-dropzone": "^3.1.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" @@ -8838,6 +8839,14 @@ "resolved": "https://registry.npmjs.org/ng2-search-filter/-/ng2-search-filter-0.5.1.tgz", "integrity": "sha512-noN8R+Gyxo5ZuboEOvq+u0zKio6pEf1IVYQTCZfAfXm6ONmzWu/M2xK0di9oVUprDbPBQXCGUuvD5i2GD+35HA==" }, + "node_modules/ngx-dropzone": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/ngx-dropzone/-/ngx-dropzone-3.1.0.tgz", + "integrity": "sha512-5RBaEl07QUcY6sv/BBPyIxN6nbWY/KqTGheEKgbuGS0N1QPFY7NJUo8+X3fYUwQgLS+wjJeqPiR37dd0YNDtWA==", + "dependencies": { + "tslib": "^2.0.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/package.json b/package.json index 01f3ceb..2e062ef 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", "ng2-search-filter": "^0.5.1", + "ngx-dropzone": "^3.1.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" diff --git a/src/CustomFilterScript.ts b/src/CustomFilterScript.ts new file mode 100644 index 0000000..b840cc7 --- /dev/null +++ b/src/CustomFilterScript.ts @@ -0,0 +1,20 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { Script } from './app/model/script'; + +@Pipe({ + name: 'filterscript', + pure: false +}) +export class CustomFilterScript implements PipeTransform { + transform(items: Script[], filter: string): any { + if (!items || !filter) { + return items; + } + // filter items array, items which match and return true will be + // kept, false will be filtered out + if(filter){ + return items.filter(item => item.name.indexOf(filter) !== -1); + } + + } +} diff --git a/src/app/add-script/add-script.component.html b/src/app/add-script/add-script.component.html new file mode 100644 index 0000000..19d6e8a --- /dev/null +++ b/src/app/add-script/add-script.component.html @@ -0,0 +1,64 @@ +
+
+ +
+
+ + +
+
+
+ +
+
Vueillez rentrer le contenu du Script :
+ +
+ + +
+
+ + +
Glisser / Déposer le script ici
+
+
+
+
+
+
{{ file?.name }}
+
Taille: {{ formatBytes(file.size) }}
+
+
+ +
+
+
+
+
Contenu du Script :
+ +
+ +
+
+
+ +
+
Informations du Script :
+
Nom du Script :
+ +
Type d'extension :
+ + + + + +
+ +
+
+ diff --git a/src/app/add-script/add-script.component.scss b/src/app/add-script/add-script.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/add-script/add-script.component.ts b/src/app/add-script/add-script.component.ts new file mode 100644 index 0000000..e1e86a8 --- /dev/null +++ b/src/app/add-script/add-script.component.ts @@ -0,0 +1,127 @@ +import { HttpErrorResponse } from '@angular/common/http'; +import { Component } from '@angular/core'; +import { MatIconRegistry } from '@angular/material/icon'; +import { DomSanitizer } from '@angular/platform-browser'; +import { Observable, Subject } from 'rxjs'; +import { Script } from '../model/script'; +import { Router, RouterModule } from '@angular/router'; +import { ScriptService } from '../service/script.service'; + +@Component({ + selector: 'app-add-script', + templateUrl: './add-script.component.html', + styleUrls: ['./add-script.component.scss'] +}) +export class AddScriptComponent { + nameOfFile : String | undefined; + nameOfExtension : String | undefined; + listOfExtension : String[] = ["sql", "ps1", "txt", "bat"]; + newFile : boolean = false; + newFileData: String | undefined; + existingFileData: String | undefined; + files: File[] = []; + contentOfFiles: string[] = []; + scriptToSend: Script | undefined; + + constructor( + private scriptService: ScriptService, + private router: Router, + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer){ + this.matIconRegistry.addSvgIcon('upload', this.domSanitizer.bypassSecurityTrustResourceUrl('../../assets/svg/upload.svg')), + this.matIconRegistry.addSvgIcon('trash', this.domSanitizer.bypassSecurityTrustResourceUrl('../../assets/svg/trash.svg')) + } + + + public isNewFile (){ + this.newFile = true; + } + + public isExistingFile (){ + this.newFile = false; + } + + public deleteFile(index: number) { + this.files.splice(index, 1); + if(index == 0){ + this.newFileData = undefined; + } + } + + public onFileDropped(event: any){ + this.readFile(event[0]).subscribe((output) => { + this.newFileData = output; + }) + for(const item of event){ + this.files.push(item); + } + console.log(this.files) + } + + public displayText(index: number){ + this.readFile(this.files[index]).subscribe((output) => { + this.newFileData = output; + }) + } + + readFile(file: File): Observable { + const sub = new Subject(); + var reader = new FileReader(); + + reader.onload = () => { + const content: string = reader.result as string; + sub.next(content); + sub.complete(); + }; + + reader.readAsText(file); + return sub.asObservable(); + } + + public renderFileContent( value: string[] ) : void { + console.log(value) + //this.existingFileData = value; + this.newFileData = value[0]; + console.log(this.existingFileData) + + } + public seeCont(){ + console.log(this.newFileData) + } + + public formatBytes(bytes: number) { + if (bytes === 0) { + return '0 Bytes'; + } + const k = 1024; + const dm = 2; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; + } + + public addScriptToCentral(){ + if(this.nameOfExtension && this.nameOfFile && (this.existingFileData || this.newFileData)){ + const fullName = this.nameOfFile + "." + this.nameOfExtension; + let tempData: String = ""; + if(this.newFile && this.newFileData){ + tempData = this.newFileData + } else if(!this.newFile && this.existingFileData){ + tempData = this.existingFileData + } + this.scriptToSend = { + extension: this.nameOfExtension, + name: fullName, + data: tempData, + } + this.scriptService.addOneScript(this.scriptToSend).subscribe( + () => { + this.router.navigateByUrl('scriptmanagement'); + }, + (error: HttpErrorResponse) => { + alert(error.message) + }); + } + } + +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3899401..8d03d69 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -5,13 +5,19 @@ 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'; +import { ScriptManagementComponent } from './script-management/script-management.component'; +import { AddScriptComponent } from './add-script/add-script.component'; +import { EditScriptComponent } from './edit-script/edit-script.component'; const routes: Routes = [ { path: 'schematab', component: SchemasTabComponent }, { path: '', component: LandingPageComponent }, { path: 'request', component: RequestPageComponent }, { path: 'joins', component: JoinsPageComponent }, - { path: 'createjoins', component: CreateJoinsPageComponent } + { path: 'createjoins', component: CreateJoinsPageComponent }, + { path: 'scriptmanagement', component: ScriptManagementComponent }, + { path: 'addscript', component: AddScriptComponent}, + { path: 'editscript', component: EditScriptComponent}, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index be17048..76a3fcd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,7 +22,12 @@ import { CreateJoinsPageComponent } from './create-joins-page/create-joins-page. import { JoinsTableComponent } from './joins-table/joins-table.component'; import { WhereCardComponent } from './where-card/where-card.component'; import { ColumnsCardComponent } from './columns-card/columns-card.component'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner' +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; +import { ScriptManagementComponent } from './script-management/script-management.component'; +import { AddScriptComponent } from './add-script/add-script.component'; +import { DndDirective } from './directives/dnd.directive' +import { CustomFilterScript } from 'src/CustomFilterScript'; +import { EditScriptComponent } from './edit-script/edit-script.component'; @NgModule({ declarations: [ @@ -32,11 +37,16 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner' NavbarComponent, RequestPageComponent, Custom_Ng2SearchPipe, + CustomFilterScript, JoinsPageComponent, CreateJoinsPageComponent, JoinsTableComponent, WhereCardComponent, - ColumnsCardComponent + ColumnsCardComponent, + ScriptManagementComponent, + AddScriptComponent, + DndDirective, + EditScriptComponent ], imports: [ BrowserModule, diff --git a/src/app/directives/dnd.directive.ts b/src/app/directives/dnd.directive.ts new file mode 100644 index 0000000..93eb179 --- /dev/null +++ b/src/app/directives/dnd.directive.ts @@ -0,0 +1,53 @@ +import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core'; + +@Directive({ + selector: '[appDnd]' +}) +export class DndDirective { + @HostBinding('class.animate-pulse') fileOver: boolean | undefined; + @Output() fileDropped = new EventEmitter(); + @Output() textDrop = new EventEmitter(); + listOfContent: string[] = []; + + // Dragover listener + @HostListener('dragover', ['$event']) onDragOver(evt: any) { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = true; + } + + // Dragleave listener + @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = false; + } + + // Drop listener + @HostListener('drop', ['$event']) public ondrop(evt: any) { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = false; + let files = evt.dataTransfer.files; + if (files.length > 0) { + this.fileDropped.emit(files); + // for(let i = 0; i < files.length; i++){ + // var reader = new FileReader(); + // console.log(files[i]) + // reader.readAsText(files[i]); + // reader.onload = () => { + // this.listOfContent.push(reader.result as string); + + // } + // } + + // this.textDrop.emit( this.listOfContent); + + } + } + + constructor(){ + + } + +} diff --git a/src/app/edit-script/edit-script.component.html b/src/app/edit-script/edit-script.component.html new file mode 100644 index 0000000..19a5d4e --- /dev/null +++ b/src/app/edit-script/edit-script.component.html @@ -0,0 +1,30 @@ +
+
+ +
+
+
+
Contenu du Script :
+ + + +
+
+
+ +
+
Informations du Script :
+
Nom du Script :
+ +
Type d'extension :
+ + +
+
+
+ diff --git a/src/app/edit-script/edit-script.component.scss b/src/app/edit-script/edit-script.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/edit-script/edit-script.component.ts b/src/app/edit-script/edit-script.component.ts new file mode 100644 index 0000000..d3138cf --- /dev/null +++ b/src/app/edit-script/edit-script.component.ts @@ -0,0 +1,52 @@ +import { HttpErrorResponse } from '@angular/common/http'; +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { ScriptService } from '../service/script.service'; + +@Component({ + selector: 'app-edit-script', + templateUrl: './edit-script.component.html', + styleUrls: ['./edit-script.component.scss'] +}) +export class EditScriptComponent { + defaultName: String | undefined; + newName: String | undefined; + newExtension: String | undefined; + newData: String | undefined; + listOfExtension : String[] = ["sql", "ps1", "txt", "bat"]; + + constructor(private router: Router, + private scriptService: ScriptService,){ + const navigation = this.router.getCurrentNavigation(); + if(navigation){ + const state = navigation.extras.state as { + name: string, + extension: string, + data: string + }; + const splitString = state.name.split("."); + this.defaultName = state.name; + this.newName = splitString[0]; + this.newExtension = state.extension; + this.newData = state.data; + console.log(this.defaultName, this.newData) + } + } + + public editScript(){ + if(this.newExtension && this.newName && this.newData && this.defaultName){ + const fullName = this.newName + "." + this.newExtension; + console.log(this.defaultName, fullName, this.newData) + + this.scriptService.editScript(this.newData, this.defaultName, fullName).subscribe( + () => { + this.router.navigateByUrl('scriptmanagement'); + }, + (error: HttpErrorResponse) => { + alert(error.message) + }); + } + } + + +} diff --git a/src/app/model/script.ts b/src/app/model/script.ts new file mode 100644 index 0000000..679f7c2 --- /dev/null +++ b/src/app/model/script.ts @@ -0,0 +1,5 @@ +export interface Script { + extension: String, + name: String, + data: String +} diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index 1748a31..c5b6913 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -24,6 +24,8 @@ Création + Gestionnaire + diff --git a/src/app/script-management/script-management.component.html b/src/app/script-management/script-management.component.html new file mode 100644 index 0000000..7340e24 --- /dev/null +++ b/src/app/script-management/script-management.component.html @@ -0,0 +1,48 @@ +
+
+
+ +
+
+ || Gestionnaire de Scripts || +
+
+ Ajouter un Script + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ {{script.extension}} +
+
+ {{script.name}} +
+
+
+ + +
+
+
+
+ +
+
+
Contenu du Script :
+ +
+
+
diff --git a/src/app/script-management/script-management.component.scss b/src/app/script-management/script-management.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/script-management/script-management.component.ts b/src/app/script-management/script-management.component.ts new file mode 100644 index 0000000..2e1c8c3 --- /dev/null +++ b/src/app/script-management/script-management.component.ts @@ -0,0 +1,81 @@ +import { HttpErrorResponse } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { ScriptService } from '../service/script.service'; +import { Script } from '../model/script'; +import { MatIconRegistry } from '@angular/material/icon'; +import { DomSanitizer } from '@angular/platform-browser'; +import { Router, NavigationExtras } from '@angular/router'; + + +@Component({ + selector: 'app-script-management', + templateUrl: './script-management.component.html', + styleUrls: ['./script-management.component.scss'] +}) +export class ScriptManagementComponent implements OnInit { + listScript: String[] = ['INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN', 'LEFT JOIN', 'RIGHT JOIN', 'FULL JOIN']; + textTo: String | undefined; + allScripts: Script[] = []; + filterScriptName: any; + + constructor( + private router: Router, + private scriptService: ScriptService, + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer + ){ + this.matIconRegistry.addSvgIcon('edit', this.domSanitizer.bypassSecurityTrustResourceUrl('../../assets/svg/edit.svg')), + this.matIconRegistry.addSvgIcon('trash', this.domSanitizer.bypassSecurityTrustResourceUrl('../../assets/svg/trash.svg')) + + } + + ngOnInit(): void{ + this.getAllScripts(); + } + + public displayText(text: String){ + if(this.allScripts){ + this.textTo = text; + } + } + + public editScript(script: Script){ + const navigationExtras: NavigationExtras = { + state: { + name: script.name, + extension: script.extension, + data: script.data + } + }; + this.router.navigate(['editscript'], navigationExtras); + + } + + public getAllScripts(){ + this.scriptService.retreiveScripts().subscribe( + (response : Script[]) => { + this.allScripts = response; + }, + (error: HttpErrorResponse) => { + alert(error.message) + } + ); + } + + public deleteSpecifiedScript(name: String){ + if(window.confirm('Êtes-vous sûr de vouloir supprimer ce Script ?')){ + this.scriptService.deleteScript(name).subscribe( + () => { + this.getAllScripts(); + this.textTo = undefined; + }, + (error: HttpErrorResponse) => { + alert(error.message) + } + ); + } + + } + + +} diff --git a/src/app/service/script.service.ts b/src/app/service/script.service.ts new file mode 100644 index 0000000..a807e8e --- /dev/null +++ b/src/app/service/script.service.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import { environment } from '../../environments/environment.development'; +import { HttpClient, HttpParams } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { Script } from '../model/script'; + +@Injectable({ + providedIn: 'root' +}) +export class ScriptService { + private apiServerUrl = environment.apiBaseUrl; + + constructor(private http: HttpClient) { } + + public retreiveScripts(): Observable{ + return this.http.get(`${this.apiServerUrl}/api/scripts`); + } + + public deleteScript(name: String){ + return this.http.delete(`${this.apiServerUrl}/api/script/delete/${name}`); + } + + public addOneScript(script: Script){ + const paramsAddScript = new HttpParams().set('content', script.data.toString()).set('name', script.name.toString()); + return this.http.get(`${this.apiServerUrl}/api/script/add`, {params: paramsAddScript}); + } + + public editScript(content: String, defaultName: String, newName: String){ + const paramsAddScript = new HttpParams().set('content', content.toString()).set('defaultname', defaultName.toString()).set('newname', newName.toString()); + return this.http.get(`${this.apiServerUrl}/api/script/edit`, {params: paramsAddScript}); + } +} diff --git a/src/assets/svg/edit.svg b/src/assets/svg/edit.svg new file mode 100644 index 0000000..05766a7 --- /dev/null +++ b/src/assets/svg/edit.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svg/trash.svg b/src/assets/svg/trash.svg new file mode 100644 index 0000000..dde1449 --- /dev/null +++ b/src/assets/svg/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/upload.svg b/src/assets/svg/upload.svg new file mode 100644 index 0000000..76ae2a2 --- /dev/null +++ b/src/assets/svg/upload.svg @@ -0,0 +1 @@ +