Dialog جديد فارغ
الـ HTML
<div [dir]="lang === 'ar'?'rtl':'ltr'">
<h2 *ngIf="data.ingredient_id" class="text-center text-uppercase" style="margin-top: 20px; margin-bottom: 0;">
{{lang === 'ar'? '# '+ data.ingredient_id +' - '+ data.ar_name: '# '+ data.ingredient_id +' - '+ data.en_name}}
</h2>
<h2 *ngIf="!data.ingredient_id" class="text-center text-uppercase" style="margin-top: 20px; margin-bottom: 0;">
{{lang === 'ar'? data.ar_name: data.en_name}}
</h2>
<mat-dialog-content style="min-height: 90vh !important;">
<div *ngIf="loading">
<div fxLayoutAlign="center center" role="status">
<mat-spinner style="max-width: 40px !important; max-height: 40px !important;"></mat-spinner>
</div>
<div class="text-center mt-3" role="status">
<span class="text-center">{{'LOADING.PLEASE_WAIT' | translate}}</span>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions [align]="(lang === 'ar')? 'start':'end'">
<button (click)="openEditDialog(data)" mat-raised-button color="primary">
<mat-icon>edit</mat-icon>
<span class="text-white">{{'BUTTONS.EDIT' | translate}}</span>
</button>
<button mat-raised-button color="warn" mat-dialog-close>
<mat-icon>close</mat-icon>
<span class="text-white">{{'BUTTONS.CLOSE' | translate}}</span>
</button>
</mat-dialog-actions>
</div>
<ng-template #spinner>
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</ng-template>
<ng-template #angularSpinner>
<mat-spinner color="primary"></mat-spinner>
</ng-template>
<ng-template #noValue>
{{ 'MAINTENANCE_REQUESTS_TYPES.NOT_SPECIFIED' | translate}}
</ng-template>
الـ TS:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { LocalStorageService } from 'src/app/services/_local-storage.service';
import { CopyToClipboardService } from 'src/app/services/copy-to-clipboard.service';
import { CostDialogComponent } from '../cost-dialog/cost-dialog.component';
import { CostsService } from 'src/app/services/costs.service';
@Component({
selector: 'app-view-cost-dialog',
templateUrl: './view-cost-dialog.component.html',
styleUrls: ['./view-cost-dialog.component.scss']
})
export class ViewCostDialogComponent {
lang: string = 'ar';
loading: boolean = true;
constructor(
private localStorageService: LocalStorageService,
public dialog: MatDialog,
public copyToClipboardService: CopyToClipboardService,
private costsService: CostsService,
public translateService: TranslateService,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.lang = this.localStorageService.getLanguageCode();
this.waiting();
}
waiting() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 500); // 5000 milliseconds = 5 seconds
}
openEditDialog(item: any) {
const dialogRef = this.dialog.open(CostDialogComponent, {
data: item,
disableClose: true,
height: '98%',
width: '98%',
panelClass: 'full-screen-modal',
});
dialogRef.afterClosed().subscribe(result => {
this.costsService.updateItem(result, true);
setTimeout(() => {
}, 1000);
});
}
}
تعليقات
إرسال تعليق