Imports Polling and loading bar (#19)

fylein · Feb 5, 2021 · 1ebdd07 · 1ebdd07
1 parent 0ec20bc
commit 1ebdd07
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/src/app/si/sync-export/sync/sync.component.html b/src/app/si/sync-export/sync/sync.component.html
@@ -46,6 +46,9 @@
           </button>
         </div>
       </div>
+      <div class="sync-card--loader" *ngIf="isExpensesSyncing">
+        <mat-progress-bar mode="buffer"></mat-progress-bar>
+      </div>
       <div *ngIf="errorOccurred" class="sync-card--error" fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="sync-card--error-icon">error</mat-icon>
         <div>

diff --git a/src/app/si/sync-export/sync/sync.component.scss b/src/app/si/sync-export/sync/sync.component.scss
@@ -33,6 +33,10 @@ $fy-error: #da1e28;
       background-color: $fy-secondary;
     }
 
+    &--loader {
+      margin: 16px 0;
+    }
+
     &--error {
       margin: 12px 0;
       padding: 12px;

diff --git a/src/app/si/sync-export/sync/sync.component.ts b/src/app/si/sync-export/sync/sync.component.ts
@@ -6,8 +6,9 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { FormBuilder } from '@angular/forms';
 import { ExpenseGroupSettingsDialogComponent } from './expense-group-settings-dialog/expense-group-settings-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { forkJoin } from 'rxjs';
+import { forkJoin, from, interval } from 'rxjs';
 import { WorkspaceService } from 'src/app/core/services/workspace.service';
+import { switchMap, takeWhile } from 'rxjs/operators';
 
 @Component({
   selector: 'app-sync',
@@ -30,16 +31,28 @@ export class SyncComponent implements OnInit {
     const that = this;
     that.isExpensesSyncing = true;
     that.expenseGroupService.syncExpenseGroups().subscribe((res) => {
-      that.updateLastSyncStatus();
-      that.snackBar.open('Import Complete');
-      that.isExpensesSyncing = false;
+      that.checkSyncStatus();
     }, (error) => {
       that.isExpensesSyncing = false;
       that.snackBar.open('Import Failed');
       that.errorOccurred = true;
     });
   }
 
+  checkSyncStatus() {
+    const that = this;
+    interval(3000).pipe(
+      switchMap(() => from(that.taskService.getAllTasks('ALL'))),
+      takeWhile((response) => response.results.filter(task => task.status === 'IN_PROGRESS'  && task.type === 'FETCHING_EXPENSES').length > 0, true)
+    ).subscribe((res) => {
+      if (res.results.filter(task => task.status === 'COMPLETE'  && task.type === 'FETCHING_EXPENSES').length === 1) {
+        that.updateLastSyncStatus();
+        that.isExpensesSyncing = false;
+        that.snackBar.open('Import Complete');
+      }
+    });
+  }
+
   getDescription() {
     const that = this;