Fix view id navigation bug (#47)

propertyId -> viewId, fix list org bug

Author: perryr16

cspell.json

@@ -26,7 +26,7 @@
     "FEMP",
     "falsey",
     "greenbutton",
-    "movened",
+    "moveend",
     "NMEC",
     "overlaycontainer",
     "SRID",

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

@@ -7,20 +7,7 @@ import { OrganizationService } from '@seed/api/organization'
 import { ErrorService } from '@seed/services'
 import { SnackBarService } from 'app/core/snack-bar/snack-bar.service'
 import { UserService } from '../user'
-import type {
-  AnalysesMessage,
-  Analysis,
-  AnalysisResponse,
-  AnalysisServiceType,
-  AnalysisSummary,
-  AnalysisView,
-  AnalysisViews,
-  ListAnalysesResponse,
-  ListMessagesResponse,
-  OriginalView,
-  PropertyAnalysesResponse,
-  View,
-} from './analysis.types'
+import type { AnalysesMessage, Analysis, AnalysisResponse, AnalysisServiceType, AnalysisSummary, AnalysisView, AnalysisViews, ListAnalysesResponse, ListMessagesResponse, PropertyAnalysesResponse, View } from './analysis.types'
 
 @Injectable({ providedIn: 'root' })
 export class AnalysisService {
@@ -33,14 +20,16 @@ export class AnalysisService {
   private _analysis = new BehaviorSubject<Analysis>(null)
   private _views = new BehaviorSubject<View[]>([])
   private _view = new BehaviorSubject<View>(null)
-  private _originalViews = new BehaviorSubject<OriginalView[]>([])
+  private _originalView = new BehaviorSubject<number>(null)
+  private _originalViews = new BehaviorSubject<Record<number, number>>(null)
   private _messages = new BehaviorSubject<AnalysesMessage[]>([])
   private readonly _unsubscribeAll$ = new Subject<void>()
   orgId: number
   analyses$ = this._analyses.asObservable()
   analysis$ = this._analysis.asObservable()
   views$ = this._views.asObservable()
   view$ = this._view.asObservable()
+  originalView$ = this._originalView.asObservable()
   originalViews$ = this._originalViews.asObservable()
   messages$ = this._messages.asObservable()
   pollingStatuses?: Subscription
@@ -143,12 +132,12 @@ export class AnalysisService {
   }
 
   // get analysis view
-  getAnalysisView(orgId: number, analysisId: number, viewId: number): Observable<View> {
+  getAnalysisView(orgId: number, analysisId: number, viewId: number): Observable<AnalysisView> {
     const url = `/api/v3/analyses/${analysisId}/views/${viewId}/?organization_id=${orgId}`
     return this._httpClient.get<AnalysisView>(url).pipe(
-      map((response) => response.view),
-      tap((view) => {
+      tap(({ view, original_view }) => {
         this._view.next(view)
+        this._originalView.next(original_view)
       }),
       catchError((error: HttpErrorResponse) => {
         return this._errorService.handleError(error, 'Error fetching analysis view')

src/@seed/api/analysis/analysis.types.ts

@@ -47,14 +47,11 @@ export type AnalysisOutputFile = {
   id: number;
 }
 
-// OriginalView is an array of key values where the key is a string and the value is a number
-export type OriginalView = Record<string, number>
-
 export type ListAnalysesResponse = {
   status: 'success';
   analyses: Analysis[];
   views: View[];
-  original_views: OriginalView[];
+  original_views: Record<number, number>;
 }
 
 export type AnalysisResponse = {
@@ -75,13 +72,13 @@ export type AnalysesViews = {
 export type AnalysisViews = {
   status: 'success';
   views: View[];
-  original_views: OriginalView[];
+  original_views: Record<number, number>;
 }
 
 export type AnalysisView = {
   status: 'success';
   view: View;
-  original_view: OriginalView;
+  original_view: number;
 }
 
 export type AnalysesMessage = {

src/app/modules/analyses/analysis/analysis.component.ts

@@ -48,6 +48,7 @@ export class AnalysisComponent implements OnDestroy, OnInit {
   gridTheme$ = this._configService.gridTheme$
   gridHeight = 0
   messages: AnalysesMessage[]
+  originalViews: Record<number, number>
   orgId: number
   views: View[] = []
   gridViews: (View & { messages?: string[] })[] = []
@@ -81,20 +82,24 @@ export class AnalysisComponent implements OnDestroy, OnInit {
     this._analysisService.getAnalysisViews(this.orgId, this.analysisId)
     this._analysisService.getMessages(this.orgId, this.analysisId)
 
-    combineLatest([this._analysisService.analysis$, this._analysisService.views$, this._analysisService.messages$])
-      .pipe(
-        filter(([analysis, views]) => !!analysis && views.length && analysis.id === this.analysisId),
-        takeUntil(this._unsubscribeAll$),
-        tap(([analysis, views, messages]) => {
-          this.analysis = analysis
-          this.views = views
-          this.messages = messages
-          this.analysisDescription = this._analysisService.getAnalysisDescription(analysis)
-          this.formatViews()
-          this.setColumnDefs()
-        }),
-      )
-      .subscribe()
+    combineLatest([
+      this._analysisService.analysis$,
+      this._analysisService.views$,
+      this._analysisService.messages$,
+      this._analysisService.originalViews$,
+    ]).pipe(
+      filter(([analysis, views]) => !!analysis && views.length && analysis.id === this.analysisId),
+      takeUntil(this._unsubscribeAll$),
+      tap(([analysis, views, messages, originalViews]) => {
+        this.analysis = analysis
+        this.views = views
+        this.messages = messages
+        this.originalViews = originalViews
+        this.analysisDescription = this._analysisService.getAnalysisDescription(analysis)
+        this.formatViews()
+        this.setColumnDefs()
+      }),
+    ).subscribe()
   }
 
   formatViews() {
@@ -216,10 +221,12 @@ export class AnalysisComponent implements OnDestroy, OnInit {
 
     const target = event.event.target as HTMLElement
     const action = target.getAttribute('data-action')
-    const { id, output_files, property } = event.data as View
+    const { id, output_files } = event.data as View
 
     if (action === 'viewProperty') {
-      void this._router.navigate([`/properties/${property}`])
+      // map viewId to propertyViewId
+      const propertyViewId: number = this.originalViews[id]
+      void this._router.navigate([`/properties/${propertyViewId}`])
     } else if (action === 'viewResults') {
       void this._router.navigate([`/analyses/${this.analysisId}/views/${id}`])
       // this.viewResults(id)

src/app/modules/analyses/analysis_view/analysis-view.component.html

@@ -21,7 +21,7 @@
       </div>
       <div class="flex gap-4">
         <span class="text-secondary w-20">Property </span>
-        <a class="text-primary dark:text-primary-400" [routerLink]="['/properties/', view.property]">
+        <a class="text-primary dark:text-primary-400" [routerLink]="['/properties/', propertyViewId]">
           <span class="mr-1 text-lg">{{ viewDisplayField$ | async }}</span>
           <span class="material-icons text-secondary text-sm">open_in_new</span>
         </a>

src/app/modules/analyses/analysis_view/analysis-view.component.ts

@@ -42,6 +42,7 @@ export class AnalysisViewComponent implements OnDestroy, OnInit {
   orgId: number
   apvId = Number(this._route.snapshot.paramMap.get('viewId')) // analysis_property_view_id
   view: Partial<View> = {}
+  propertyViewId: number
   gridApi: GridApi
   viewDisplayField$: Observable<string>
   type: InventoryType = 'properties'
@@ -74,12 +75,16 @@ export class AnalysisViewComponent implements OnDestroy, OnInit {
     this.messages = messages.filter((m) => m.analysis_property_view === this.apvId)
 
     return this._analysisService.getAnalysisView(this.orgId, this.analysisId, this.apvId).pipe(
-      switchMap(() => this._analysisService.view$),
+      switchMap(() => combineLatest([
+        this._analysisService.view$,
+        this._analysisService.originalView$,
+      ])),
       takeUntil(this._unsubscribeAll$),
-      tap((view) => {
+      tap(([view, originalView]) => {
         this.view = view
+        this.propertyViewId = originalView
         this.cycle = cycles.find((c) => c.id === view.cycle)
-        this.viewDisplayField$ = this._organizationService.getViewDisplayField(view.property, this.type)
+        this.viewDisplayField$ = this._organizationService.getViewDisplayField(this.propertyViewId, this.type)
         this.formatTableResults()
       }),
     )

src/app/modules/inventory-list/list/grid/grid.component.ts

@@ -89,12 +89,12 @@ export class InventoryGridComponent implements OnChanges {
     const target = event.event.target as HTMLElement
     const action = target.getAttribute('data-action') as 'detail' | 'notes' | 'meters' | null
     if (!action) return
-    const { id } = event.data as { id: string; file: string; filename: string }
+    const { property_view_id } = event.data as { property_view_id: string; file: string; filename: string }
 
     const urlMap = {
-      detail: [`/${this.inventoryType}`, id],
-      notes: [`/${this.inventoryType}`, id, 'notes'],
-      meters: [`/${this.inventoryType}`, id, 'meters'],
+      detail: [`/${this.inventoryType}`, property_view_id],
+      notes: [`/${this.inventoryType}`, property_view_id, 'notes'],
+      meters: [`/${this.inventoryType}`, property_view_id, 'meters'],
     }
 
     return void this._router.navigate(urlMap[action])

src/app/modules/inventory-list/list/inventory.component.ts

@@ -12,7 +12,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 import { ActivatedRoute } from '@angular/router'
 import type { ColDef, GridApi } from 'ag-grid-community'
 import type { Observable } from 'rxjs'
-import { BehaviorSubject, combineLatest, filter, map, of, Subject, switchMap, takeUntil, tap } from 'rxjs'
+import { BehaviorSubject, catchError, combineLatest, filter, map, of, Subject, switchMap, takeUntil, tap } from 'rxjs'
 import type { Cycle } from '@seed/api/cycle'
 import { CycleService } from '@seed/api/cycle/cycle.service'
 import { InventoryService } from '@seed/api/inventory'
@@ -108,7 +108,6 @@ export class InventoryComponent implements OnDestroy, OnInit {
   initPage() {
     this._userService.currentOrganizationId$
       .pipe(
-        takeUntil(this._unsubscribeAll$),
         switchMap((orgId) => this.getDependencies(orgId)),
         map((results) => this.setDependencies(results)),
         switchMap((profile_id) => this.getProfile(profile_id)),
@@ -117,6 +116,11 @@ export class InventoryComponent implements OnDestroy, OnInit {
           this.setFilterSorts()
           this.initStreams()
         }),
+        takeUntil(this._unsubscribeAll$),
+        catchError((err) => {
+          console.error('Error initializing inventory:', err)
+          return of(null)
+        }),
       )
       .subscribe()
   }

src/app/modules/inventory-list/map/map.component.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @cspell/spellchecker */
 import type { OnDestroy, OnInit } from '@angular/core'
 import { Component, inject } from '@angular/core'
 import { MatCheckboxModule } from '@angular/material/checkbox'