From 813f4b094bf78835ef75527af71b651e7a3381a1 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sun, 9 Feb 2020 04:37:52 -0600 Subject: [PATCH] Add file uploader support --- src/app/app.component.html | 8 +- src/app/app.component.ts | 12 +- src/app/components/components.module.ts | 7 +- .../editor/database/database.component.ts | 16 +-- .../editor/files/files.component.html | 23 ++++ .../editor/files/files.component.scss | 4 + .../editor/files/files.component.ts | 104 ++++++++++++++++++ .../editor/host/host.component.html | 8 ++ .../components/editor/host/host.component.ts | 1 - .../node-picker/node-picker.component.html | 4 + src/app/pages/editor/editor.page.ts | 5 +- src/app/service/api.service.ts | 2 +- src/app/service/page.service.ts | 1 - 13 files changed, 172 insertions(+), 23 deletions(-) create mode 100644 src/app/components/editor/files/files.component.html create mode 100644 src/app/components/editor/files/files.component.scss create mode 100644 src/app/components/editor/files/files.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index f2cb62e..efa5ef8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -10,8 +10,10 @@ - Navigate - + + + + @@ -50,4 +52,4 @@ - \ No newline at end of file + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e1f3e21..7f5a4ac 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -16,18 +16,17 @@ import { Observable } from 'rxjs'; export class AppComponent implements OnInit { public addChildTarget: any = false; public deleteTarget: any = false; + public refreshingMenu = false; public lastClickEvent: Array = []; public nodes = []; public options = { actionMapping: { mouse: { dblClick: (tree, node, $event) => { - console.log({ tree, node, $event }); const id = node.data.id; this.router.navigate(['/editor', { id }]); }, click: (tree, node, $event) => { - console.log('click', { tree, node, $event }); TREE_ACTIONS.FOCUS(tree, node, $event); this.addChildTarget = node; this.deleteTarget = node; @@ -158,6 +157,14 @@ export class AppComponent implements OnInit { await alert.present(); } + onMenuRefresh() { + this.refreshingMenu = true; + this.reloadMenuItems().subscribe(); + setTimeout(() => { + this.refreshingMenu = false; + }, 2000); + } + reloadMenuItems() { return new Observable(sub => { this.api.get('/menu/items').subscribe(result => { @@ -178,7 +185,6 @@ export class AppComponent implements OnInit { toggleDark() { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); this.darkMode = !this.darkMode; - console.log('toggel Dark mode'); document.body.classList.toggle('dark', this.darkMode); } diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index a2ae438..326421f 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -9,11 +9,12 @@ import {ColumnsComponent} from './editor/database/columns/columns.component'; import {FormsModule} from '@angular/forms'; import {CodeComponent} from './editor/code/code.component'; import {MonacoEditorModule} from 'ngx-monaco-editor'; +import {FilesComponent} from './editor/files/files.component'; @NgModule({ - declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent], + declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent], imports: [CommonModule, IonicModule, AgGridModule, FormsModule, MonacoEditorModule], - entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent], - exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent] + entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent], + exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent] }) export class ComponentsModule {} diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts index ce9596f..6b84653 100644 --- a/src/app/components/editor/database/database.component.ts +++ b/src/app/components/editor/database/database.component.ts @@ -35,17 +35,19 @@ export class DatabaseComponent implements OnInit { rowData = []; ngOnInit() { - this.loader.create({message: 'Loading database...'}).then(loader => { - loader.present().then(() => { + // this.loader.create({message: 'Loading database...'}).then(loader => { + // setTimeout(() => { + // loader.present().then(() => { this.getInitObservable().subscribe(() => { this.getColumnLoadObservable().subscribe(() => { this.getDataLoadObservable().subscribe(() => { - loader.dismiss(); + // loader.dismiss(); }); }); }); - }); - }); + // }); + // }, 100); + // }); } onCellValueChanged() { @@ -80,7 +82,7 @@ export class DatabaseComponent implements OnInit { }); const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns` this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => { - this.columnDefs = res.data; + // this.columnDefs = res.data; }); } }); @@ -202,7 +204,7 @@ export class DatabaseComponent implements OnInit { getInitObservable(): Observable { return new Observable(sub => { - if ( this.hostRecord && this.pendingSetup ) { + if ( this.hostRecord.UUID && this.pendingSetup ) { if ( !this.hostRecord.Value ) { this.hostRecord.Value = {}; } diff --git a/src/app/components/editor/files/files.component.html b/src/app/components/editor/files/files.component.html new file mode 100644 index 0000000..23f0f0a --- /dev/null +++ b/src/app/components/editor/files/files.component.html @@ -0,0 +1,23 @@ +
+
+
+ + Upload + Drop Files +
+
+
+ + + + + + {{ fileRecords[i].original_name }} + + + + + + +
+
diff --git a/src/app/components/editor/files/files.component.scss b/src/app/components/editor/files/files.component.scss new file mode 100644 index 0000000..46ebbe3 --- /dev/null +++ b/src/app/components/editor/files/files.component.scss @@ -0,0 +1,4 @@ +div.files-wrapper { + border: 2px solid #8c8c8c; + border-radius: 3px; +} diff --git a/src/app/components/editor/files/files.component.ts b/src/app/components/editor/files/files.component.ts new file mode 100644 index 0000000..d072f51 --- /dev/null +++ b/src/app/components/editor/files/files.component.ts @@ -0,0 +1,104 @@ +import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import HostRecord from '../../../structures/HostRecord'; +import {ApiService} from '../../../service/api.service'; +import {AlertController} from '@ionic/angular'; +import {Observable} from 'rxjs'; + +@Component({ + selector: 'editor-files', + templateUrl: './files.component.html', + styleUrls: ['./files.component.scss'], +}) +export class FilesComponent implements OnInit { + @Input() hostRecord: HostRecord; + @Output() hostRecordChange = new EventEmitter(); + @Output() requestParentSave = new EventEmitter(); + @Output() requestParentDelete = new EventEmitter(); + @ViewChild('uploadForm', {static: false}) uploadForm: ElementRef; + + public fileRecords: Array = []; + public pendingSetup = true; + public dbRecord: any = {}; + + constructor( + protected api: ApiService, + protected alerts: AlertController, + ) { } + + ngOnInit() { + this.getInitObservable().subscribe(() => { + + }); + } + + getApiSubmit() { + return this.api._build_url(`file/upload/${this.hostRecord.PageId}/${this.hostRecord.UUID}/${this.hostRecord.Value.Value}`); + } + + onSubmitClick() { + this.uploadForm.nativeElement.submit(); + } + + downloadFile(fileRecord) { + // tslint:disable-next-line:max-line-length + window.open(this.api._build_url(`files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/${fileRecord._id}`), '_blank'); + } + + async onDestroyClick() { + const alert = await this.alerts.create({ + header: 'Are you sure?', + message: 'You are about to delete these files. This action cannot be undone.', + buttons: [ + { + text: 'Keep Them', + role: 'cancel', + }, + { + text: 'Delete Them', + handler: async () => { + this.api.post(`/files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/delete/${this.hostRecord.Value.Value}`) + .subscribe(res => { + this.requestParentDelete.emit(this); + }); + }, + }, + ], + }); + + await alert.present(); + } + + getInitObservable(): Observable { + return new Observable(sub => { + if ( this.hostRecord && this.pendingSetup ) { + if ( !this.hostRecord.Value ) { + this.hostRecord.Value = {}; + } + + if ( !this.hostRecord.Value.Value ) { + this.api.post(`/files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => { + this.dbRecord = res.data; + this.fileRecords = res.data.files; + this.hostRecord.Value.Mode = 'files'; + this.hostRecord.Value.Value = res.data.UUID; + this.hostRecord.value = res.data.UUID; + this.hostRecordChange.emit(this.hostRecord); + this.pendingSetup = false; + sub.next(true); + sub.complete(); + }); + } else { + this.api.get(`/files/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => { + this.fileRecords = res.data.files; + this.pendingSetup = false; + sub.next(true); + sub.complete(); + }); + } + } else { + this.pendingSetup = true; + } + }); + } + +} diff --git a/src/app/components/editor/host/host.component.html b/src/app/components/editor/host/host.component.html index d265088..071815b 100644 --- a/src/app/components/editor/host/host.component.html +++ b/src/app/components/editor/host/host.component.html @@ -42,4 +42,12 @@ (requestParentDelete)="onRequestDelete($event)" > +
+ +
diff --git a/src/app/components/editor/host/host.component.ts b/src/app/components/editor/host/host.component.ts index 80168ab..4ed3b12 100644 --- a/src/app/components/editor/host/host.component.ts +++ b/src/app/components/editor/host/host.component.ts @@ -70,7 +70,6 @@ export class HostComponent implements OnInit { } onLIKeyUp($event, i) { - console.log({$event}); if ( $event.code === 'Enter' ) { /*const newListLines = []; this.liItems.forEach((li, index) => { diff --git a/src/app/components/editor/node-picker/node-picker.component.html b/src/app/components/editor/node-picker/node-picker.component.html index 466ad27..56fde2c 100644 --- a/src/app/components/editor/node-picker/node-picker.component.html +++ b/src/app/components/editor/node-picker/node-picker.component.html @@ -35,4 +35,8 @@ Code Editor + + + Upload Files + diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts index 33c1c52..822fc10 100644 --- a/src/app/pages/editor/editor.page.ts +++ b/src/app/pages/editor/editor.page.ts @@ -29,8 +29,6 @@ export class EditorPage implements OnInit { this.route.params.subscribe(params => { this.pageId = params.id; }); - - console.log('editor page', this); } ngOnInit() {} @@ -41,6 +39,7 @@ export class EditorPage implements OnInit { this.pageRecord = pageRecord; this.pages.get_nodes(pageRecord).subscribe((hosts: Array) => { this.hostRecords = hosts; + this.onSaveClick(); }); }); } else { @@ -59,10 +58,8 @@ export class EditorPage implements OnInit { }); popover.onDidDismiss().then(arg => { - console.log({arg}); const defValue = this.getDefaultValue(arg.data); const hostRec = new HostRecord(defValue); - console.log({hostRec}); hostRec.type = arg.data; hostRec.PageId = this.pageRecord.UUID; this.hostRecords.push(hostRec); diff --git a/src/app/service/api.service.ts b/src/app/service/api.service.ts index 1fced0b..095185b 100644 --- a/src/app/service/api.service.ts +++ b/src/app/service/api.service.ts @@ -48,7 +48,7 @@ export class ApiService { }); } - private _build_url(endpoint) { + public _build_url(endpoint) { if ( !endpoint.startsWith('/') ) { endpoint = `/${endpoint}`; } diff --git a/src/app/service/page.service.ts b/src/app/service/page.service.ts index f440d63..a6580f0 100644 --- a/src/app/service/page.service.ts +++ b/src/app/service/page.service.ts @@ -52,7 +52,6 @@ export class PageService { } save_nodes(page: PageRecord, nodes: Array): Observable> { - console.log('save nodes', {nodes}) return new Observable>(sub => { nodes = nodes.map(x => { x.PageId = page.UUID;