Merge pull request #1823 from CarnegieLearningWeb/enhancement/parse-f…

…ail-error-msg-in-import-modal parse failed message added in common import container
CarnegieLearningWeb · Aug 14, 2024 · a398be3 · a398be3
2 parents 9bde686 + 621b8e9
commit a398be3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/...e-component-lib/components/common-import-container/common-import-container.component.html b/...e-component-lib/components/common-import-container/common-import-container.component.html
@@ -5,10 +5,13 @@
   (drop)="onDrop($event)"
   [ngClass]="{ 'drag-over': (isDragOver | async) }"
 >
-    <span class="material-symbols-outlined">upload</span>
-    <p class="ft-12-600 drag-text">Drag and drop or</p>
-    <button mat-flat-button color="primary" class="choose-json-btn" (click)="fileInput.click()">
-      <span>{{ buttonLabel }}</span>
-    </button>
-    <input [accept]="fileType" type="file" multiple #fileInput style="display: none" (change)="onFileSelected($event)" />
+  <span class="material-symbols-outlined">upload</span>
+  <p class="ft-12-600 drag-text">Drag and drop or</p>
+  <button mat-flat-button color="primary" class="choose-json-btn" (click)="fileInput.click()">
+    <span>{{ buttonLabel }}</span>
+  </button>
+  <input [accept]="fileType" type="file" multiple #fileInput style="display: none" (change)="onFileSelected($event)" />
+  <div *ngIf="showParseFailedError" class="ft-14-500 parse-error">
+    Error: Invalid {{ getFileTypeSubstring() }}
+  </div>
 </div>
diff --git a/...e-component-lib/components/common-import-container/common-import-container.component.scss b/...e-component-lib/components/common-import-container/common-import-container.component.scss
@@ -26,4 +26,8 @@
   .choose-json-btn {
     padding: 0 16px;
   }
+
+  .parse-error {
+    color: var(--red-2);
+  }
 }
diff --git a/...one-component-lib/components/common-import-container/common-import-container.component.ts b/...one-component-lib/components/common-import-container/common-import-container.component.ts
@@ -38,6 +38,7 @@ import { FILE_TYPE } from 'upgrade_types';
 export class CommonImportContainerComponent {
   @Input() fileType!: FILE_TYPE;
   @Input() buttonLabel!: string;
+  @Input() showParseFailedError?: boolean;
   @Output() filesSelected = new EventEmitter<File[]>();
 
   isDragOver = new BehaviorSubject<boolean>(false);
@@ -55,6 +56,10 @@ export class CommonImportContainerComponent {
     this.handleFileSelection(event.dataTransfer?.files);
   }
 
+  getFileTypeSubstring(): string {
+    return this.fileType.substring(1).toUpperCase();
+  }
+
   private handleDragState(event: DragEvent, isOver: boolean) {
     event.preventDefault();
     event.stopPropagation();