paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Use progress bar for button delay

Browse Source
This commit is contained in:
Michael Shamoon 2022-03-16 13:17:08 -07:00
parent 4667e0bf88
commit 3dee012415
2 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
View File

@ -8,9 +8,12 @@
<p *ngIf="message">{{message}}</p> <p *ngIf="message">{{message}}</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>Cancel</button> <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>
<span class="d-inline-block" style="padding-bottom: 1px;" >Cancel</span>
</button>
<button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled"> <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
{{btnCaption}} {{btnCaption}}
<span *ngIf="!confirmButtonEnabled"> ({{seconds}})</span> <ngb-progressbar *ngIf="!confirmButtonEnabled" style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
<span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
</button> </button>
</div> </div>

27
src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
View File

@ -1,6 +1,6 @@
import { Component, EventEmitter, Input, Output } from '@angular/core' import { Component, EventEmitter, Input, Output } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
import { Subject } from 'rxjs' import { interval, Subject, switchMap, take } from 'rxjs'
@Component({ @Component({
selector: 'app-confirm-dialog', selector: 'app-confirm-dialog',
@ -33,19 +33,28 @@ export class ConfirmDialogComponent {
confirmButtonEnabled = true confirmButtonEnabled = true
seconds = 0 seconds = 0
secondsTotal = 0
confirmSubject: Subject<boolean> confirmSubject: Subject<boolean>
delayConfirm(seconds: number) { delayConfirm(seconds: number) {
this.confirmButtonEnabled = false const refreshInterval = 0.15 // s
this.secondsTotal = seconds
this.seconds = seconds this.seconds = seconds
setTimeout(() => {
if (this.seconds <= 1) { interval(refreshInterval * 1000)
this.confirmButtonEnabled = true .pipe(
} else { take(this.secondsTotal / refreshInterval + 2) // need 2 more for animation to complete after 0
this.delayConfirm(seconds - 1) )
} .subscribe((count) => {
}, 1000) this.seconds = Math.max(
0,
this.secondsTotal - refreshInterval * (count + 1)
)
this.confirmButtonEnabled =
this.secondsTotal - refreshInterval * count < 0
})
} }
cancel() { cancel() {