fix(import): allow users to import more than one file at a time

Author: nana-boateng

src/app/components/import/import.component.html

@@ -94,15 +94,13 @@ <h2 class="import-heading w-full py-6 font-bold">
     </div>
 
     <div class="flex flex-col px-5">
-      @if (!importSucceeded()) {
-        @if (file) {
-          <span class="text-base">{{ file.name }}</span>
-        } @else {
-          <dct-file-upload-button
-            class=""
-            (fileSelected)="onFileSelected($event)"
-          ></dct-file-upload-button>
-        }
+      @if (file) {
+        <span class="text-base">{{ file.name }}</span>
+      } @else {
+        <dct-file-upload-button
+          class=""
+          (fileSelected)="onFileSelected($event)"
+        ></dct-file-upload-button>
       }
 
       @if (importing && importNotStarted()) {

src/app/components/import/import.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FileUploadButtonComponent } from './file-upload-button/file-upload-button.component';
 import { FormsModule } from '@angular/forms';
@@ -17,7 +17,12 @@ import { TranslateModule } from '@ngx-translate/core';
 @Component({
   selector: 'dct-import',
   standalone: true,
-  imports: [CommonModule, FormsModule, FileUploadButtonComponent, TranslateModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    FileUploadButtonComponent,
+    TranslateModule,
+  ],
   templateUrl: './import.component.html',
   styleUrl: './import.component.css',
   changeDetection: ChangeDetectionStrategy.Default,
@@ -43,7 +48,14 @@ export class ImportComponent {
   error = true;
   loading = false;
 
-  constructor(private store: Store) {}
+  constructor(private store: Store) {
+    effect(() => {
+      if (this.importSucceeded()) {
+        this.file = undefined;
+        this.store.dispatch(XmlManipulationActions.resetImport());
+      }
+    });
+  }
 
   onFileSelected(file: File) {
     // Handle the selected file here