Refactor support for the files component
This commit is contained in:
parent
e30e8681e4
commit
9a53faf338
GPG Key ID:
D2BF5FBA8298F246
@ -4,7 +4,6 @@
|
||||
<input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
|
||||
<input type="hidden" name="redirectTo" [value]="getReturnUrl()">
|
||||
<ion-button (click)="onSubmitClick()" type="submit" fill="outline" class="ion-margin-start">Upload</ion-button>
|
||||
<ion-button (click)="onDestroyClick()" type="submit" fill="outline" class="ion-margin-start" color="danger">Drop Files</ion-button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="existing-uploads">
|
||||
|
||||
@ -4,38 +4,106 @@ import {ApiService} from '../../../service/api.service';
|
||||
import {AlertController} from '@ionic/angular';
|
||||
import {Observable} from 'rxjs';
|
||||
import { APP_BASE_HREF } from '@angular/common';
|
||||
import {EditorService} from '../../../service/editor.service';
|
||||
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
|
||||
|
||||
@Component({
|
||||
selector: 'editor-files',
|
||||
templateUrl: './files.component.html',
|
||||
styleUrls: ['./files.component.scss'],
|
||||
})
|
||||
export class FilesComponent implements OnInit {
|
||||
@Input() readonly = false;
|
||||
@Input() hostRecord: HostRecord;
|
||||
@Output() hostRecordChange = new EventEmitter<HostRecord>();
|
||||
@Output() requestParentSave = new EventEmitter<FilesComponent>();
|
||||
@Output() requestParentDelete = new EventEmitter<FilesComponent>();
|
||||
export class FilesComponent extends EditorNodeContract implements OnInit {
|
||||
@Input() nodeId: string;
|
||||
@ViewChild('uploadForm') uploadForm: ElementRef;
|
||||
// @Input() readonly = false;
|
||||
// @Input() hostRecord: HostRecord;
|
||||
// @Output() hostRecordChange = new EventEmitter<HostRecord>();
|
||||
// @Output() requestParentSave = new EventEmitter<FilesComponent>();
|
||||
// @Output() requestParentDelete = new EventEmitter<FilesComponent>();
|
||||
|
||||
public fileRecords: Array<any> = [];
|
||||
public pendingSetup = true;
|
||||
public dbRecord: any = {};
|
||||
public dirty = false;
|
||||
|
||||
public get readonly() {
|
||||
return !this.node || !this.editorService.canEdit();
|
||||
}
|
||||
|
||||
constructor(
|
||||
protected api: ApiService,
|
||||
protected alerts: AlertController,
|
||||
public readonly editorService: EditorService,
|
||||
@Inject(APP_BASE_HREF) private baseHref: string
|
||||
) { }
|
||||
) { super(); }
|
||||
|
||||
public isDirty(): boolean | Promise<boolean> {
|
||||
return this.dirty;
|
||||
}
|
||||
|
||||
public writeChangesToNode(): void | Promise<void> {
|
||||
this.node.Value.Mode = 'files';
|
||||
}
|
||||
|
||||
public needsLoad(): boolean | Promise<boolean> {
|
||||
return this.node && this.pendingSetup;
|
||||
}
|
||||
|
||||
public async performLoad(): Promise<void> {
|
||||
if ( !this.node.Value ) {
|
||||
this.node.Value = {};
|
||||
}
|
||||
|
||||
if ( !this.node.Value.Value && !this.readonly ) {
|
||||
await new Promise((res, rej) => {
|
||||
this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
|
||||
next: result => {
|
||||
this.dbRecord = result.data;
|
||||
this.fileRecords = result.data.files;
|
||||
this.node.Value.Mode = 'files';
|
||||
this.node.Value.Value = result.data.UUID;
|
||||
this.node.value = result.data.UUID;
|
||||
this.dirty = true;
|
||||
res();
|
||||
},
|
||||
error: rej,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
await new Promise((res, rej) => {
|
||||
this.api.get(`/files/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
|
||||
next: result => {
|
||||
this.dbRecord = result.data;
|
||||
this.fileRecords = result.data.files;
|
||||
res();
|
||||
},
|
||||
error: rej,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.pendingSetup = false;
|
||||
}
|
||||
|
||||
public async performDelete(): Promise<void> {
|
||||
await new Promise((res, rej) => {
|
||||
this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/delete/${this.node.Value.Value}`).subscribe({
|
||||
next: result => {
|
||||
res();
|
||||
},
|
||||
error: rej,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getInitObservable().subscribe(() => {
|
||||
this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
getApiSubmit() {
|
||||
return this.api._build_url(`file/upload/${this.hostRecord.PageId}/${this.hostRecord.UUID}/${this.hostRecord.Value.Value}`);
|
||||
return this.api._build_url(`file/upload/${this.page.UUID}/${this.node.UUID}/${this.node.Value.Value}`);
|
||||
}
|
||||
|
||||
onSubmitClick() {
|
||||
@ -47,73 +115,11 @@ export class FilesComponent implements OnInit {
|
||||
}
|
||||
|
||||
getReturnUrl() {
|
||||
return `${this.baseHref}editor;id=${this.hostRecord.PageId}`;
|
||||
return `${this.baseHref}editor;id=${this.page.UUID}`;
|
||||
}
|
||||
|
||||
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');
|
||||
window.open(this.api._build_url(`files/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}/${fileRecord._id}`), '_blank');
|
||||
}
|
||||
|
||||
async onDestroyClick() {
|
||||
if ( this.readonly ) {
|
||||
return;
|
||||
}
|
||||
|
||||
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<any> {
|
||||
return new Observable<any>(sub => {
|
||||
if ( this.hostRecord && this.pendingSetup ) {
|
||||
if ( !this.hostRecord.Value ) {
|
||||
this.hostRecord.Value = {};
|
||||
}
|
||||
|
||||
if ( !this.hostRecord.Value.Value && !this.readonly ) {
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -37,6 +37,9 @@
|
||||
<ng-container *ngIf="node.type === 'code_ref'">
|
||||
<editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="node.type === 'file_ref'">
|
||||
<editor-files style="flex: 1;" [nodeId]="node.UUID"></editor-files>
|
||||
</ng-container>
|
||||
</div>
|
||||
<button class="host-add-button" (click)="onAddClick($event)">
|
||||
<i class="fa fa-plus"></i> Add Node
|
||||
|
||||
Loading…
Reference in New Issue
Block a user