Spaces:
Building
Building
File size: 2,812 Bytes
095ba3b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
interface DialogData {
title: string;
imported: number;
failed: number;
errors: string[];
}
@Component({
selector: 'app-import-results-dialog',
standalone: true,
imports: [
CommonModule,
MatDialogModule,
MatButtonModule,
MatIconModule,
MatDividerModule
],
template: `
<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
<div class="summary">
<div class="stat success" *ngIf="data.imported > 0">
<mat-icon>check_circle</mat-icon>
<span>{{ data.imported }} successfully imported</span>
</div>
<div class="stat error" *ngIf="data.failed > 0">
<mat-icon>error</mat-icon>
<span>{{ data.failed }} failed to import</span>
</div>
</div>
<mat-divider *ngIf="data.errors.length > 0"></mat-divider>
<div class="errors" *ngIf="data.errors.length > 0">
<h3>Import Errors:</h3>
<ul>
<li *ngFor="let error of data.errors" class="error-item">
{{ error }}
</li>
</ul>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="close()">OK</button>
</mat-dialog-actions>
`,
styles: [`
.summary {
display: flex;
gap: 24px;
margin-bottom: 16px;
.stat {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
&.success {
color: #4caf50;
}
&.error {
color: #f44336;
}
mat-icon {
font-size: 24px;
width: 24px;
height: 24px;
}
}
}
.errors {
margin-top: 16px;
h3 {
margin-bottom: 12px;
color: #f44336;
}
ul {
margin: 0;
padding-left: 20px;
max-height: 300px;
overflow-y: auto;
}
.error-item {
margin-bottom: 8px;
color: #666;
}
}
`]
})
export default class ImportResultsDialogComponent {
constructor(
public dialogRef: MatDialogRef<ImportResultsDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData
) {}
close() {
this.dialogRef.close();
}
} |