Merge pull request #1357 from CarnegieLearningWeb/fix/issue-1274-reopen

Solve UI bugs of validation loading spinner
CarnegieLearningWeb · Mar 15, 2024 · e52ab20 · e52ab20
2 parents c3990aa + fdef5c6
commit e52ab20
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 51 deletions.
diff --git a/backend/packages/Upgrade/src/api/controllers/ExperimentController.ts b/backend/packages/Upgrade/src/api/controllers/ExperimentController.ts
@@ -1146,21 +1146,44 @@ export class ExperimentController {
   /**
    * @swagger
    * /experiments/{validation}:
-   *    put:
+   *    post:
    *       description: Validating Experiment
    *       consumes:
    *         - application/json
    *       parameters:
-   *         - in: path
+   *         - in: body
+   *           name: experiments
+   *           required: true
+   *           schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 fileContent:
+   *                   type: string
+   *           description: Experiment Files
    *       tags:
    *         - Experiments
    *       produces:
    *         - application/json
    *       responses:
    *          '200':
-   *            description: Validations are done
+   *            description: Validations are completed
+   *            schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 error:
+   *                   type: string
    *          '401':
    *            description: AuthorizationRequiredError
+   *          '500':
+   *            description: Internal Server Error
    */
   @Post('/validation')
   public validateExperiment(
@@ -1173,21 +1196,44 @@ export class ExperimentController {
   /**
    * @swagger
    * /experiments/{import}:
-   *    put:
+   *    post:
    *       description: Import New Experiment
    *       consumes:
    *         - application/json
    *       parameters:
-   *         - in: path
+   *         - in: body
+   *           name: experiments
+   *           required: true
+   *           schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 fileContent:
+   *                   type: string
+   *           description: Experiment Files
    *       tags:
    *         - Experiments
    *       produces:
    *         - application/json
    *       responses:
    *          '200':
    *            description: Experiment is imported
+   *            schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 error:
+   *                   type: string
    *          '401':
    *            description: AuthorizationRequiredError
+   *          '500':
+   *            description: Internal Server Error
    */
   @Post('/import')
   public importExperiment(

diff --git a/...features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts b/...features/dashboard/home/components/modal/import-experiment/import-experiment.component.ts
@@ -48,13 +48,12 @@ export class ImportExperimentComponent implements OnInit {
   }
 
   async importExperiment() {
+    this.onCancelClick();
     const importResult = (await this.dataService
       .importExperiment(this.allExperiments)
       .toPromise()) as ValidateExperimentError[];
     //this.experimentService.importExperiment(this.allExperiments);
     this.showNotification(importResult);
-    this.onCancelClick();
-
     this.experimentService.loadExperiments(true);
   }
 
@@ -86,8 +85,6 @@ export class ImportExperimentComponent implements OnInit {
   }
 
   async uploadFile(event) {
-    const index = 0;
-    const reader = new FileReader();
     this.uploadedFileCount = event.target.files.length;
     this.importFileErrors = [];
     this.allExperiments = [];
@@ -97,25 +94,22 @@ export class ImportExperimentComponent implements OnInit {
     // Set loading to true before processing the files
     this.isLoadingExperiments$ = true;
 
-    const readFile = (fileIndex) => {
-      if (fileIndex >= event.target.files.length) {
-        // Check if this is the last file
-        if (fileIndex >= this.uploadedFileCount) {
-          this.checkValidation();
-          this.isLoadingExperiments$ = false;
-        }
-        return;
-      }
-      const file = event.target.files[fileIndex];
-      const fileName = file.name;
-      reader.onload = (e) => {
-        const fileContent = e.target.result;
-        this.allExperiments.push({ fileName: fileName, fileContent: fileContent });
-        readFile(fileIndex + 1);
-      };
-      reader.readAsText(file);
-    };
-
-    readFile(index);
+    const filesArray = Array.from(event.target.files) as any[];
+    await Promise.all(
+      filesArray.map((file) => {
+        return new Promise<void>((resolve) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const fileContent = e.target.result;
+            this.allExperiments.push({ fileName: file.name, fileContent: fileContent });
+            resolve();
+          };
+          reader.readAsText(file);
+        });
+      })
+    );
+
+    await this.checkValidation();
+    this.isLoadingExperiments$ = false;
   }
 }
diff --git a/...features/dashboard/segments/components/modal/import-segment/import-segment.component.html b/...features/dashboard/segments/components/modal/import-segment/import-segment.component.html
@@ -6,27 +6,29 @@
       {{ 'segments.import-segmemt.message.text' | translate }}
     </p>
     <input accept=".json" type="file" multiple class="ft-14-400 file-input" (change)="uploadFile($event)" />
-    <ng-container *ngIf="importFileErrors.length">
-      <mat-table class="table" [dataSource]="importFileErrorsDataSource">
-        <!-- File Name -->
-        <ng-container matColumnDef="File Name">
-          <mat-header-cell class="ft-12-700" *matHeaderCellDef> File Name </mat-header-cell>
-          <mat-cell class="ft-12-600" *matCellDef="let element">
-            {{ element.fileName }}
-          </mat-cell>
-        </ng-container>
+    <ng-container *ngIf="!isLoadingSegments$; else loadingSegmentState">
+      <ng-container *ngIf="importFileErrors.length">
+        <mat-table class="table" [dataSource]="importFileErrorsDataSource">
+          <!-- File Name -->
+          <ng-container matColumnDef="File Name">
+            <mat-header-cell class="ft-12-700" *matHeaderCellDef> File Name </mat-header-cell>
+            <mat-cell class="ft-12-600" *matCellDef="let element">
+              {{ element.fileName }}
+            </mat-cell>
+          </ng-container>
 
-        <!-- Error -->
-        <ng-container matColumnDef="Error">
-          <mat-header-cell class="ft-12-700" *matHeaderCellDef> Error/Warning </mat-header-cell>
-          <mat-cell class="ft-12-600" *matCellDef="let element">
-            {{ element.error }}
-          </mat-cell>
-        </ng-container>
+          <!-- Error -->
+          <ng-container matColumnDef="Error">
+            <mat-header-cell class="ft-12-700" *matHeaderCellDef> Error/Warning </mat-header-cell>
+            <mat-cell class="ft-12-600" *matCellDef="let element">
+              {{ element.error }}
+            </mat-cell>
+          </ng-container>
 
-        <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-      </mat-table>
+          <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+        </mat-table>
+      </ng-container>
     </ng-container>
   </div>
 
@@ -50,3 +52,9 @@
     </button>
   </div>
 </div>
+
+<ng-template #loadingSegmentState>
+  <div class="loading-container">
+    <mat-spinner diameter="60"></mat-spinner>
+  </div>
+</ng-template>
diff --git a/...features/dashboard/segments/components/modal/import-segment/import-segment.component.scss b/...features/dashboard/segments/components/modal/import-segment/import-segment.component.scss
@@ -34,4 +34,12 @@
     justify-content: flex-end;
     padding: 0 40px 40px;
   }
+
+  .loading-container {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    margin-top: 60px;
+  }
 }
diff --git a/...p/features/dashboard/segments/components/modal/import-segment/import-segment.component.ts b/...p/features/dashboard/segments/components/modal/import-segment/import-segment.component.ts
@@ -37,12 +37,12 @@ export class ImportSegmentComponent {
   }
 
   async importSegments() {
+    this.onCancelClick();
     const importResult = (await this.segmentdataService
       .importSegments(this.fileData)
       .toPromise()) as SegmentImportError[];
 
     this.showNotification(importResult);
-    this.onCancelClick();
 
     this.segmentsService.fetchSegments(true);
   }
@@ -75,12 +75,12 @@ export class ImportSegmentComponent {
 
     fileList.forEach((file) => {
       const reader = new FileReader();
-      reader.onload = (e) => {
+      reader.onload = async (e) => {
         const fileContent = e.target?.result;
         this.fileData.push({ fileName: file.name, fileContent: fileContent });
         // Check if this is the last file and validate
         if (this.fileData.length === this.uploadedFileCount) {
-          this.validateFiles();
+          await this.validateFiles();
           this.isLoadingSegments$ = false;
         }
       };