fetch mammping via cache service

Author: perryr16

src/@seed/api/cache/cache.service.ts

@@ -0,0 +1,21 @@
+import type { HttpErrorResponse } from '@angular/common/http'
+import { HttpClient } from '@angular/common/http'
+import { inject, Injectable } from '@angular/core'
+import type { Observable } from 'rxjs'
+import { catchError } from 'rxjs'
+import { ErrorService } from '@seed/services'
+
+@Injectable({ providedIn: 'root' })
+export class CacheService {
+  private _errorService = inject(ErrorService)
+  private _httpClient = inject(HttpClient)
+
+  getCacheEntry(orgId: number, uniqueId: number): Observable<unknown> {
+    const url = `/api/v3/cache_entries/${uniqueId}/?organization_id=${orgId}`
+    return this._httpClient.get<unknown>(url).pipe(
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error fetching cache entry')
+      }),
+    )
+  }
+}

src/@seed/api/cache/index.ts

@@ -0,0 +1 @@
+export * from './cache.service'

src/@seed/api/index.ts

@@ -1,5 +1,6 @@
 export * from './analysis'
 export * from './audit-template'
+export * from './cache'
 export * from './column'
 export * from './column-mapping-profile'
 export * from './config'

src/@seed/api/mapping/mapping.service.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import { catchError, map, type Observable } from 'rxjs'
 import { ErrorService } from '@seed/services'
-import type { MappedData, MappingResultsResponse } from '../dataset'
+import type { MappedData } from '../dataset'
 import type { ProgressResponse, SubProgressResponse } from '../progress'
 import { UserService } from '../user'
 import type { FirstFiveRowsResponse, MappingSuggestionsResponse, MatchingResultsResponse, RawColumnNamesResponse } from './mapping.types'
@@ -66,9 +66,9 @@ export class MappingService {
       )
   }
 
-  mappingResults(orgId: number, importFileId: number): Observable<MappingResultsResponse> {
+  mappingResults(orgId: number, importFileId: number): Observable<ProgressResponse> {
     const url = `/api/v3/import_files/${importFileId}/mapping_results/?organization_id=${orgId}`
-    return this._httpClient.post<MappingResultsResponse>(url, {})
+    return this._httpClient.post<ProgressResponse>(url, {})
       .pipe(
         catchError((error: HttpErrorResponse) => {
           return this._errorService.handleError(error, 'Error fetching mapping results')

src/@seed/services/uploader/uploader.service.ts

@@ -51,7 +51,7 @@ export class UploaderService {
       switchMap(() => this.checkProgress(progressKey)),
       tap((response) => {
         this._updateProgressBarObj({ data: response, offset, multiplier, progressBarObj })
-        if (response.status === 'success') successFn()
+        if (response.status === 'success') successFn(response)
       }),
       catchError(() => {
         // TODO the interval needs to continue if the error was network-related

src/@seed/services/uploader/uploader.types.ts

@@ -16,7 +16,7 @@ export type CheckProgressLoopParams = {
   progressKey: string;
   offset?: number;
   multiplier?: number;
-  successFn?: () => void;
+  successFn?: (response: ProgressResponse) => void;
   failureFn?: () => void;
   progressBarObj: ProgressBarObj;
   subProgress?: boolean;

src/app/modules/datasets/data-mappings/data-mapping.component.html

@@ -56,7 +56,7 @@
     </mat-step>
 
     <mat-step [completed]="completed[2]" label="Mapping" editable="false">
-      <seed-progress-bar [progress]="progressBarObj.progress" [total]="progressBarObj.total" title="Mapping Data..."></seed-progress-bar>
+      <seed-progress-bar [progress]="progressBarObj.progress" [total]="progressBarObj.total" [title]="progressTitle"></seed-progress-bar>
     </mat-step>
 
     <mat-step [completed]="completed[3]" label="Review Mappings" editable="false">

src/app/modules/datasets/data-mappings/data-mapping.component.ts

@@ -7,7 +7,7 @@ import { ActivatedRoute } from '@angular/router'
 import { AgGridAngular } from 'ag-grid-angular'
 import { catchError, filter, forkJoin, of, Subject, switchMap, take, takeUntil, tap } from 'rxjs'
 import type { Column, ColumnMappingProfile, ColumnMappingProfileType, Cycle, ImportFile, MappingResultsResponse, MappingSuggestionsResponse, Organization, ProgressResponse } from '@seed/api'
-import { ColumnMappingProfileService, ColumnService, CycleService, DatasetService, MappingService, OrganizationService, UserService } from '@seed/api'
+import { CacheService, ColumnMappingProfileService, ColumnService, CycleService, DatasetService, MappingService, OrganizationService, UserService } from '@seed/api'
 import { PageComponent, ProgressBarComponent } from '@seed/components'
 import { MaterialImports } from '@seed/materials'
 import { UploaderService } from '@seed/services/uploader'
@@ -40,6 +40,7 @@ export class DataMappingComponent implements OnDestroy, OnInit {
   @ViewChild(MapDataComponent) mapDataComponent!: MapDataComponent
   @ViewChild(MatchMergeComponent) matchMergeComponent!: MatchMergeComponent
   private readonly _unsubscribeAll$ = new Subject<void>()
+  private _cacheService = inject(CacheService)
   private _columnMappingProfileService = inject(ColumnMappingProfileService)
   private _columnService = inject(ColumnService)
   private _cycleService = inject(CycleService)
@@ -71,11 +72,12 @@ export class DataMappingComponent implements OnDestroy, OnInit {
   matchingTaxLotColumns: string[] = []
   org: Organization
   orgId: number
+  progressBarObj = this._uploaderService.defaultProgressBarObj
+  progressTitle = 'Mapping Data...'
   propertyColumns: Column[]
   rawColumnNames: string[] = []
   taxlotColumns: Column[]
 
-  progressBarObj = this._uploaderService.defaultProgressBarObj
 
   ngOnInit(): void {
     // this._userService.currentOrganizationId$
@@ -181,7 +183,6 @@ export class DataMappingComponent implements OnDestroy, OnInit {
       this._snackBar.alert('Error starting mapping')
     }
     const successFn = () => {
-      this.nextStep(2)
       this.getMappingResults()
     }
 
@@ -214,10 +215,25 @@ export class DataMappingComponent implements OnDestroy, OnInit {
   }
 
   getMappingResults(): void {
-    this.nextStep(2)
+    this.progressTitle = 'Fetching Mapping Results...'
+    const successFn = ({ unique_id }: ProgressResponse) => {
+      this._cacheService.getCacheEntry(this.orgId, unique_id)
+        .pipe(
+          tap((response) => {
+            this.mappingResultsResponse = response as MappingResultsResponse
+            this.nextStep(2)
+          }),
+        )
+        .subscribe()
+    }
+
     this._mappingService.mappingResults(this.orgId, this.fileId)
       .pipe(
-        tap((mappingResultsResponse) => { this.mappingResultsResponse = mappingResultsResponse }),
+        switchMap(({ progress_key }) => this._uploaderService.checkProgressLoop({
+          progressKey: progress_key,
+          successFn,
+          progressBarObj: this.progressBarObj,
+        })),
       )
       .subscribe()
   }

src/app/modules/datasets/data-mappings/step3/save-mappings.component.html

@@ -72,13 +72,3 @@
   >
   </ag-grid-angular>
 }
-
-@if (loading) {
-  <div class="m-10">
-    <div class="mb-5 flex items-center space-x-2">
-      <mat-icon class="text-primary-600" svgIcon="fa-solid:hourglass-half"></mat-icon>
-      <div class="text-secondary text-xl font-medium leading-6">Fetching Mapping Results...</div>
-    </div>
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-  </div>
-}