garrettmills
4 years ago
parent
f4c86a06e2
commit
813f4b094b
@ -0,0 +1,23 @@
|
||||
<div class="files-wrapper">
|
||||
<div class="new-uploads" style="margin: 20px;">
|
||||
<form #uploadForm [action]="getApiSubmit()" enctype="multipart/form-data" method="post">
|
||||
<input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
|
||||
<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">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col *ngFor="let upload of fileRecords; let i = index" size-xl="4" size-lg="6" size-md="12">
|
||||
<ion-card>
|
||||
<ion-item>
|
||||
<ion-label>{{ fileRecords[i].original_name }}</ion-label>
|
||||
<ion-button (click)="downloadFile(fileRecords[i])" fill="outline" color="lighter" slot="end"><ion-icon color="primary" name="arrow-down"></ion-icon></ion-button>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
div.files-wrapper {
|
||||
border: 2px solid #8c8c8c;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@ -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<HostRecord>();
|
||||
@Output() requestParentSave = new EventEmitter<FilesComponent>();
|
||||
@Output() requestParentDelete = new EventEmitter<FilesComponent>();
|
||||
@ViewChild('uploadForm', {static: false}) uploadForm: ElementRef;
|
||||
|
||||
public fileRecords: Array<any> = [];
|
||||
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<any> {
|
||||
return new Observable<any>(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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue