paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Lovely file upload alerts

Browse Source
This commit is contained in:
Michael Shamoon
2021-01-26 02:32:45 -08:00
parent 5da2bced94
commit 62d3c27e4b
4 changed files with 48 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
View File

@@ -6,20 +6,22 @@
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card"
multiple="true" contentClassName="justify-content-center d-flex align-items-center p-5" [showBrowseBtn]=true multiple="true" contentClassName="justify-content-center d-flex align-items-center p-5" [showBrowseBtn]=true
browseBtnClassName="btn btn-sm btn-outline-primary ml-2" i18n-dropZoneLabel i18n-browseBtnLabel> browseBtnClassName="btn btn-sm btn-outline-primary ml-2" i18n-dropZoneLabel i18n-browseBtnLabel>
</ngx-file-drop> </ngx-file-drop>
</form> </form>
<p>Uploading {{getStatusUploading().length}} files...</p>
<div *ngFor="let status of getStatus()"> <div *ngFor="let status of getStatus()">
<p>{{status.filename}}: {{status.message}}</p> <ngb-alert type="secondary" class="mt-2 mb-0" [dismissible]="isFinished(status)" (closed)="dismiss(status)">
<ngb-progressbar [value]="status.getProgress()" [max]="1" [striped]="true" [animated]="!isFinished(status)" [type]="getType(status)"> <h6 class="alert-heading">{{status.filename}}</h6>
</ngb-progressbar> <p class="mb-0" *ngIf="!isFinished(status) || (isFinished(status) && !status.documentId)">{{status.message}}</p>
<ngb-progressbar [value]="status.getProgress()" [max]="1" [type]="getStatusColor(status)"></ngb-progressbar>
<div *ngIf="isFinished(status)" class="mb-2"> <div *ngIf="isFinished(status)">
<button *ngIf="status.documentId" class="btn btn-sm btn-outline-primary mr-2" routerLink="/documents/{{status.documentId}}" (click)="dismiss(status)">Open document</button> <button *ngIf="status.documentId" class="btn btn-sm btn-outline-primary mr-2" routerLink="/documents/{{status.documentId}}" (click)="dismiss(status)">
<button class="btn btn-sm btn-outline-secondary" (click)="dismiss(status)">Dismiss</button> <small>Open document</small>
</div> <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
</svg>
</button>
</div>
</ngb-alert>
</div> </div>
</div> </div>
</app-widget-frame> </app-widget-frame>

28
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
View File

@@ -3,3 +3,31 @@
::ng-deep .ngx-file-drop__drop-zone--over { ::ng-deep .ngx-file-drop__drop-zone--over {
background-color: $primaryFaded !important; background-color: $primaryFaded !important;
} }
form {
position: relative;
}
.alert {
transition: all 0.2s ease;
}
.alert-heading {
font-size: 80%;
font-weight: bold;
}
.btn-sm {
line-height: 1;
}
::ng-deep .progress {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
mix-blend-mode: soft-light;
pointer-events: none;
}

6
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
View File

@@ -41,7 +41,7 @@ export class UploadFileWidgetComponent implements OnInit {
return status.phase == FileStatusPhase.FAILED || status.phase == FileStatusPhase.SUCCESS return status.phase == FileStatusPhase.FAILED || status.phase == FileStatusPhase.SUCCESS
} }
getType(status: FileStatus) { getStatusColor(status: FileStatus) {
switch (status.phase) { switch (status.phase) {
case FileStatusPhase.PROCESSING: case FileStatusPhase.PROCESSING:
case FileStatusPhase.UPLOADING: case FileStatusPhase.UPLOADING:
@@ -56,7 +56,7 @@ export class UploadFileWidgetComponent implements OnInit {
dismiss(status: FileStatus) { dismiss(status: FileStatus) {
this.consumerStatusService.dismiss(status) this.consumerStatusService.dismiss(status)
} }
ngOnInit(): void { ngOnInit(): void {
} }
@@ -75,7 +75,7 @@ export class UploadFileWidgetComponent implements OnInit {
let formData = new FormData() let formData = new FormData()
formData.append('document', file, file.name) formData.append('document', file, file.name)
let status = this.consumerStatusService.newFileUpload(file.name) let status = this.consumerStatusService.newFileUpload(file.name)
status.message = "Connecting..." status.message = "Connecting..."
this.documentService.uploadDocument(formData).subscribe(event => { this.documentService.uploadDocument(formData).subscribe(event => {

5
src-ui/src/app/services/consumer-status.service.ts
View File

@@ -16,7 +16,7 @@ export class FileStatus {
taskId: string taskId: string
phase: FileStatusPhase = FileStatusPhase.STARTED phase: FileStatusPhase = FileStatusPhase.STARTED
currentPhaseProgress: number currentPhaseProgress: number
@@ -33,7 +33,8 @@ export class FileStatus {
case FileStatusPhase.UPLOADING: case FileStatusPhase.UPLOADING:
return this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.2 return this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.2
case FileStatusPhase.PROCESSING: case FileStatusPhase.PROCESSING:
return this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.8 + 0.2 if (this.currentPhaseProgress > 100) this.currentPhaseProgress = 0
return (this.currentPhaseProgress / this.currentPhaseMaxProgress * 0.8) + 0.2
case FileStatusPhase.SUCCESS: case FileStatusPhase.SUCCESS:
case FileStatusPhase.FAILED: case FileStatusPhase.FAILED:
return 1.0 return 1.0