Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

#83 - add loading mask to file box
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills 2021-02-04 16:22:16 -06:00
parent eaa7b69024
commit 95948573df
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/components/nodes/file-box/file-box.component.html
View File

@ -10,7 +10,7 @@
(click)="navigateBack(rec)" (click)="navigateBack(rec)"
>{{ rec.name }}&nbsp;&nbsp;/</button> >{{ rec.name }}&nbsp;&nbsp;/</button>
<ion-input <ion-input
[readonly]="readonly" [readonly]="readonly || isLoading"
[(ngModel)]="fileBoxName" [(ngModel)]="fileBoxName"
(change)="onRecordNameChange($event)" (change)="onRecordNameChange($event)"
style="flex: 1; font-size: 15pt;" style="flex: 1; font-size: 15pt;"
@ -23,9 +23,9 @@
><i class="fa fa-times"></i></button> ><i class="fa fa-times"></i></button>
</div> </div>
<ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;"> <ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;">
<ion-button (click)="onActionClick('folder-add')"><i class="fa fa-folder-plus"></i>&nbsp;&nbsp;Folder</ion-button> <ion-button [disabled]="isLoading" (click)="onActionClick('folder-add')"><i class="fa fa-folder-plus"></i>&nbsp;&nbsp;Folder</ion-button>
<ion-button (click)="onUploadFilesClick($event)"><i class="fa fa-upload"></i>&nbsp;&nbsp;Upload Files</ion-button> <ion-button [disabled]="isLoading" (click)="onUploadFilesClick($event)"><i class="fa fa-upload"></i>&nbsp;&nbsp;Upload Files</ion-button>
<ion-button (click)="openFileBox()" *ngIf="!fullPage"><i class="fa fa-external-link-alt"></i>&nbsp;&nbsp;Open</ion-button> <ion-button [disabled]="isLoading" (click)="openFileBox()" *ngIf="!fullPage"><i class="fa fa-external-link-alt"></i>&nbsp;&nbsp;Open</ion-button>
<div class="buffer"></div> <div class="buffer"></div>
@ -34,6 +34,7 @@
<ion-input <ion-input
placeholder="Quick filter..." placeholder="Quick filter..."
(ionChange)="onQuickFilterChange($event)" (ionChange)="onQuickFilterChange($event)"
[readonly]="isLoading"
></ion-input> ></ion-input>
</div> </div>
@ -41,8 +42,9 @@
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<div class="content-wrapper" (contextmenu)="onSurfaceContextMenu($event)"> <div class="content-wrapper" (contextmenu)="onSurfaceContextMenu($event)">
<div *ngIf="!items || !items.length" class="empty-text" (contextmenu)="onSurfaceContextMenu($event)">No files or folders.</div> <div *ngIf="!isLoading && (!items || !items.length)" class="empty-text" (contextmenu)="onSurfaceContextMenu($event)">No files or folders.</div>
<div *ngIf="items && items.length" class="folders"> <div *ngIf="isLoading" class="empty-text">Loading...</div>
<div *ngIf="!isLoading && items && items.length" class="folders">
<ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)"> <ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)">
<div class="folder item" *ngIf="item.type === 'folder'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)"> <div class="folder item" *ngIf="item.type === 'folder'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
<div class="icon folder"><i class="fa fa-folder"></i></div> <div class="icon folder"><i class="fa fa-folder"></i></div>
@ -50,7 +52,7 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
<div *ngIf="items && items.length" class="files"> <div *ngIf="!isLoading && items && items.length" class="files">
<ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)"> <ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)">
<div class="folder item" *ngIf="item.type === 'file'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)"> <div class="folder item" *ngIf="item.type === 'file'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
<div [ngClass]="'icon ' + item.category"><i [ngClass]="categoryIcons[item.category]"></i></div> <div [ngClass]="'icon ' + item.category"><i [ngClass]="categoryIcons[item.category]"></i></div>

7
src/app/components/nodes/file-box/file-box.component.ts
View File

@ -56,6 +56,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
protected dirty = false; protected dirty = false;
protected pendingSetup = true; protected pendingSetup = true;
public isLoading = true;
public notAvailableOffline = false; public notAvailableOffline = false;
public fileBoxName = 'New File Box'; public fileBoxName = 'New File Box';
public record?: FileBoxRecord; public record?: FileBoxRecord;
@ -143,12 +144,14 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
} }
public async loadBox(): Promise<void> { public async loadBox(): Promise<void> {
this.isLoading = true;
this.fileBoxName = this.record.name; this.fileBoxName = this.record.name;
const files = await this.api.getFileBoxFiles(this.page.UUID, this.node.UUID, this.record.UUID); const files = await this.api.getFileBoxFiles(this.page.UUID, this.node.UUID, this.record.UUID);
const children = await this.api.getFileBoxChildren(this.page.UUID, this.node.UUID, this.record.UUID); const children = await this.api.getFileBoxChildren(this.page.UUID, this.node.UUID, this.record.UUID);
this.items = [...children, ...files]; this.items = [...children, ...files];
this.refilter(); this.refilter();
this.isLoading = false;
} }
public async navigateUp() { public async navigateUp() {
@ -207,7 +210,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
} }
async onSurfaceContextMenu(event: MouseEvent) { async onSurfaceContextMenu(event: MouseEvent) {
if ( this.readonly ) { if ( this.readonly || this.isLoading ) {
return; return;
} }
@ -266,7 +269,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
} }
async onItemContextMenu(item: FileBoxItem, event: MouseEvent) { async onItemContextMenu(item: FileBoxItem, event: MouseEvent) {
if ( this.readonly ) { if ( this.readonly || this.isLoading ) {
return; return;
} }