Upload import-results-dialog.component.ts

flare-ui/src/app/dialogs/import-results-dialog/import-results-dialog.component.ts

@@ -0,0 +1,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();
+  }
+}