TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-17 17:31:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated confirm dialog to support async requests with loading spinner

Browse Source
This commit is contained in:
Isaac Abadi
2020-07-25 15:55:52 -04:00
parent d7631360cc
commit c5b0a7a697
3 changed files with 36 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/dialogs/confirm-dialog/confirm-dialog.component.html
View File

@@ -1,12 +1,15 @@
<h4 mat-dialog-title>{{dialogTitle}}</h4> <h4 mat-dialog-title>{{dialogTitle}}</h4>
<mat-dialog-content> <mat-dialog-content>
<div> <div style="margin-bottom: 10px;">
{{dialogText}} {{dialogText}}
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. --> <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
<button color="primary" mat-flat-button type="submit" [mat-dialog-close]="true">{{submitText}}</button> <button color="primary" mat-flat-button type="submit" (click)="confirmClicked()">{{submitText}}</button>
<div class="mat-spinner" *ngIf="submitClicked">
<mat-spinner [diameter]="25"></mat-spinner>
</div>
<span class="spacer"></span> <span class="spacer"></span>
<button style="float: right;" mat-stroked-button mat-dialog-close>Cancel</button> <button style="float: right;" mat-stroked-button mat-dialog-close>Cancel</button>
</mat-dialog-actions> </mat-dialog-actions>

6
src/app/dialogs/confirm-dialog/confirm-dialog.component.scss
View File

@@ -1 +1,5 @@
.spacer {flex: 1 1 auto;} .spacer {flex: 1 1 auto;}
.mat-spinner {
margin-left: 8px;
}

32
src/app/dialogs/confirm-dialog/confirm-dialog.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, OnInit, Inject } from '@angular/core'; import { Component, OnInit, Inject, EventEmitter } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({ @Component({
selector: 'app-confirm-dialog', selector: 'app-confirm-dialog',
@@ -8,14 +8,34 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
}) })
export class ConfirmDialogComponent implements OnInit { export class ConfirmDialogComponent implements OnInit {
dialogTitle: 'Confirm'; dialogTitle = 'Confirm';
dialogText: 'Would you like to confirm?'; dialogText = 'Would you like to confirm?';
submitText: 'Yes' submitText = 'Yes'
submitClicked = false;
constructor(@Inject(MAT_DIALOG_DATA) public data: any) { doneEmitter: EventEmitter<any> = null;
onlyEmitOnDone = false;
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<ConfirmDialogComponent>) {
if (this.data.dialogTitle) { this.dialogTitle = this.data.dialogTitle }; if (this.data.dialogTitle) { this.dialogTitle = this.data.dialogTitle };
if (this.data.dialogText) { this.dialogText = this.data.dialogText }; if (this.data.dialogText) { this.dialogText = this.data.dialogText };
if (this.data.submitText) { this.submitText = this.data.submitText }; if (this.data.submitText) { this.submitText = this.data.submitText };
// checks if emitter exists, if so don't autoclose as it should be handled by caller
if (this.data.doneEmitter) {
this.doneEmitter = this.data.doneEmitter;
this.onlyEmitOnDone = true;
}
}
confirmClicked() {
if (this.onlyEmitOnDone) {
this.doneEmitter.emit(true);
this.submitClicked = true;
} else {
this.dialogRef.close(true);
}
} }
ngOnInit(): void { ngOnInit(): void {