Added datasets count, removed navigation observable, fixed types

Author: axelstudios

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

@@ -0,0 +1,36 @@
+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, map, of, ReplaySubject, tap } from 'rxjs'
+import type { CountDatasetsResponse, ListDatasetsResponse } from './dataset.types'
+
+@Injectable({ providedIn: 'root' })
+export class DatasetService {
+  private _httpClient = inject(HttpClient)
+
+  private _datasetCount: ReplaySubject<number> = new ReplaySubject<number>(1)
+  datasetCount$ = this._datasetCount.asObservable()
+
+  // TODO watch active org, on change request dataset count
+
+  listDatasets(): Observable<ListDatasetsResponse> {
+    return this._httpClient.get<ListDatasetsResponse>('/api/v3/datasets/').pipe(tap(({ datasets }) => datasets))
+  }
+
+  countDatasets(): Observable<number> {
+    // TODO input dynamic org id
+    return this._httpClient.get<CountDatasetsResponse>('/api/v3/datasets/count/?organization_id=1').pipe(
+      map(({ datasets_count }) => {
+        // TODO once this takes an organization_id, only update `this._datasetCount` IFF it's the active org
+        this._datasetCount.next(datasets_count)
+        return datasets_count
+      }),
+      catchError((error: HttpErrorResponse) => {
+        // TODO toast or alert? also, better fallback value
+        console.error('Error occurred while counting datasets:', error.error)
+        return of(-1)
+      }),
+    )
+  }
+}

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

@@ -0,0 +1,41 @@
+// Subset type
+type ImportFile = {
+  created: string;
+  modified: string;
+  deleted: boolean;
+  import_record: number;
+  cycle: number;
+  file: string;
+  uploaded_filename: string;
+  cached_first_row: string;
+  id: number;
+}
+
+// Subset type
+type Dataset = {
+  deleted: boolean;
+  name: string;
+  app: 'seed';
+  owner: number;
+  access_level_instance: number;
+  start_time: string;
+  finish_time: string;
+  created_at: string;
+  updated_at: number;
+  last_modified_by: string;
+  matching_done: boolean;
+  super_organization: number;
+  id: number;
+  model: 'data_importer.importrecord';
+  importfiles: ImportFile[];
+}
+
+export type ListDatasetsResponse = {
+  status: 'success';
+  datasets: Dataset[];
+}
+
+export type CountDatasetsResponse = {
+  status: 'success';
+  datasets_count: number;
+}

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

@@ -0,0 +1,2 @@
+export * from './dataset.service'
+export * from './dataset.types'

src/@seed/components/navigation/navigation.service.ts

@@ -3,13 +3,13 @@ import type { NavigationItem } from '@seed/components'
 
 @Injectable({ providedIn: 'root' })
 export class SeedNavigationService {
-  private _componentRegistry: Map<string, any> = new Map<string, any>()
-  private _navigationStore: Map<string, NavigationItem[]> = new Map<string, any>()
+  private _componentRegistry = new Map<string, unknown>()
+  private _navigationStore = new Map<string, NavigationItem[]>()
 
   /**
    * Register navigation component
    */
-  registerComponent(name: string, component: any): void {
+  registerComponent(name: string, component: unknown): void {
     this._componentRegistry.set(name, component)
   }
 
@@ -24,7 +24,7 @@ export class SeedNavigationService {
    * Get navigation component from the registry
    */
   getComponent<T>(name: string): T {
-    return this._componentRegistry.get(name)
+    return this._componentRegistry.get(name) as T
   }
 
   /**

src/@seed/components/navigation/vertical/vertical.component.ts

@@ -94,8 +94,12 @@ export class VerticalNavigationComponent implements OnChanges, OnInit, AfterView
   onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1)
   private _animationsEnabled = false
   private _asideOverlay: HTMLElement
-  private readonly _handleAsideOverlayClick = () => { this.closeAside() }
-  private readonly _handleOverlayClick = () => { this.close() }
+  private readonly _handleAsideOverlayClick = () => {
+    this.closeAside()
+  }
+  private readonly _handleOverlayClick = () => {
+    this.close()
+  }
   private _hovered = false
   private _mutationObserver: MutationObserver
   private _overlay: HTMLElement
@@ -134,8 +138,7 @@ export class VerticalNavigationComponent implements OnChanges, OnInit, AfterView
   /**
    * Setter for seedScrollbarDirectives
    */
-  @ViewChildren(ScrollbarDirective)
-  set seedScrollbarDirectives(seedScrollbarDirectives: QueryList<ScrollbarDirective>) {
+  @ViewChildren(ScrollbarDirective) set seedScrollbarDirectives(seedScrollbarDirectives: QueryList<ScrollbarDirective>) {
     // Store the directives
     this._scrollbarDirectives = seedScrollbarDirectives
 
@@ -159,31 +162,17 @@ export class VerticalNavigationComponent implements OnChanges, OnInit, AfterView
       })
   }
 
-  /**
-   * On mouseenter
-   *
-   * @private
-   */
-  @HostListener('mouseenter')
-  private _onMouseenter(): void {
-    // Enable the animations
+  @HostListener('mouseenter') private _onMouseenter(): void {
     this._enableAnimations()
 
-    // Set the hovered
+    // Set hovered state
     this._hovered = true
   }
 
-  /**
-   * On mouseleave
-   *
-   * @private
-   */
-  @HostListener('mouseleave')
-  private _onMouseleave(): void {
-    // Enable the animations
+  @HostListener('mouseleave') private _onMouseleave(): void {
     this._enableAnimations()
 
-    // Set the hovered
+    // Set hovered state
     this._hovered = false
   }
 
@@ -304,7 +293,7 @@ export class VerticalNavigationComponent implements OnChanges, OnInit, AfterView
     // This fixes the problem by reading the 'top' value from the html element and adding it as a
     // 'marginTop' to the navigation itself.
     this._mutationObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
+      for (const mutation of mutations) {
         const mutationTarget = mutation.target as HTMLElement
         if (mutation.attributeName === 'class') {
           if (mutationTarget.classList.contains('cdk-global-scrollblock')) {
@@ -314,7 +303,7 @@ export class VerticalNavigationComponent implements OnChanges, OnInit, AfterView
             this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null)
           }
         }
-      })
+      }
     })
     this._mutationObserver.observe(this._document.documentElement, {
       attributes: true,
@@ -339,15 +328,15 @@ export class VerticalNavigationComponent implements OnChanges, OnInit, AfterView
         }
       } else {
         // Go through all the scrollbar directives
-        this._scrollbarDirectives.forEach((seedScrollbarDirective) => {
+        for (const seedScrollbarDirective of this._scrollbarDirectives) {
           // Skip if not enabled
           if (!seedScrollbarDirective.isEnabled()) {
             return
           }
 
           // Scroll to the active element
           seedScrollbarDirective.scrollToElement('.seed-vertical-navigation-item-active', -120, true)
-        })
+        }
       }
     })
   }
@@ -468,33 +457,11 @@ export class VerticalNavigationComponent implements OnChanges, OnInit, AfterView
     }
   }
 
-  /**
-   * Enable the animations
-   *
-   * @private
-   */
   private _enableAnimations(): void {
-    // Return if the animations are already enabled
-    if (this._animationsEnabled) {
-      return
-    }
-
-    // Enable the animations
     this._animationsEnabled = true
   }
 
-  /**
-   * Disable the animations
-   *
-   * @private
-   */
   private _disableAnimations(): void {
-    // Return if the animations are already disabled
-    if (!this._animationsEnabled) {
-      return
-    }
-
-    // Disable the animations
     this._animationsEnabled = false
   }
 

src/@seed/services/config/config.screens.ts

@@ -0,0 +1,6 @@
+export const screens: Record<string, string> = {
+  sm: '600px',
+  md: '960px',
+  lg: '1280px',
+  xl: '1440px',
+}

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

@@ -1,6 +1,5 @@
 // Types
 export type Scheme = 'auto' | 'dark' | 'light'
-export type Screens = Record<string, string>
 export type Themes = { id: string; name: string }[]
 
 /**
@@ -10,7 +9,6 @@ export type Themes = { id: string; name: string }[]
 export type SEEDConfig = {
   layout: string;
   scheme: Scheme;
-  screens: Screens;
   theme: 'theme-default';
   themes: Themes;
 }

src/@seed/services/media-watcher/media-watcher.service.ts

@@ -1,64 +1,49 @@
-import type { BreakpointState } from '@angular/cdk/layout'
 import { BreakpointObserver } from '@angular/cdk/layout'
 import { inject, Injectable } from '@angular/core'
-import type { Observable } from 'rxjs'
-import { map, ReplaySubject, switchMap } from 'rxjs'
-import { ConfigService } from '../config'
+import { map, ReplaySubject } from 'rxjs'
+import { screens } from '../config/config.screens'
 
 @Injectable({ providedIn: 'root' })
 export class MediaWatcherService {
   private _breakpointObserver = inject(BreakpointObserver)
-  private _configService = inject(ConfigService)
-
-  private _onMediaChange: ReplaySubject<{
-    matchingAliases: string[];
-    matchingQueries: any;
-  }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1)
+  private _onMediaChange = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: Record<string, string> }>(1)
 
   constructor() {
-    this._configService.config$
-      .pipe(
-        map((config) => Object.fromEntries(Object.entries(config.screens).map(([alias, screen]) => [alias, `(min-width: ${screen})`]))),
-        switchMap((screens) =>
-          this._breakpointObserver.observe(Object.values(screens)).pipe(
-            map((state) => {
-              // Prepare the observable values and set their defaults
-              const matchingAliases: string[] = []
-              const matchingQueries: any = {}
+    const mediaQueries = Object.fromEntries(Object.entries(screens).map(([alias, minWidth]) => [alias, `(min-width: ${minWidth})`]))
 
-              // Get the matching breakpoints and use them to fill the subject
-              const matchingBreakpoints = Object.entries(state.breakpoints).filter(([/* query */, matches]) => matches) ?? []
-              for (const [query] of matchingBreakpoints) {
-                // Find the alias of the matching query
-                const matchingAlias = Object.entries(screens).find(([/* alias */, q]) => q === query)[0]
+    const aliasMap = Object.entries(mediaQueries).reduce<Record<string, string>>((acc, [alias, query]) => ({ ...acc, [query]: alias }), {})
 
-                // Add the matching query to the observable values
-                if (matchingAlias) {
-                  matchingAliases.push(matchingAlias)
-                  matchingQueries[matchingAlias] = query
-                }
-              }
-
-              // Execute the observable
-              this._onMediaChange.next({
-                matchingAliases,
-                matchingQueries,
-              })
-            }),
-          ),
-        ),
+    this._breakpointObserver
+      .observe(Object.values(mediaQueries))
+      .pipe(
+        map(({ breakpoints }) => {
+          // Prepare the observable values and set their defaults
+          const matchingAliases: string[] = []
+          const matchingQueries: Record<string, string> = {}
+
+          for (const [query] of Object.entries(breakpoints).filter(([, isMatch]) => isMatch)) {
+            // Find the alias of the matching query
+            const alias = aliasMap[query]
+
+            matchingAliases.push(alias)
+            matchingQueries[alias] = query
+          }
+
+          // Execute the observable
+          this._onMediaChange.next({
+            matchingAliases,
+            matchingQueries,
+          })
+        }),
       )
       .subscribe()
   }
 
-  get onMediaChange$(): Observable<{
-    matchingAliases: string[];
-    matchingQueries: any;
-  }> {
+  get onMediaChange$() {
     return this._onMediaChange.asObservable()
   }
 
-  onMediaQueryChange$(query: string | string[]): Observable<BreakpointState> {
+  onMediaQueryChange$(query: string | string[]) {
     return this._breakpointObserver.observe(query)
   }
 }

src/app/app.config.ts

@@ -95,12 +95,6 @@ export const appConfig: ApplicationConfig = {
       seed: {
         layout: 'main',
         scheme: 'light',
-        screens: {
-          sm: '600px',
-          md: '960px',
-          lg: '1280px',
-          xl: '1440px',
-        },
         theme: 'theme-default',
         themes: [
           {

src/app/app.resolvers.ts

@@ -1,18 +1,10 @@
 import { inject } from '@angular/core'
 import { forkJoin } from 'rxjs'
-// import { DatasetService } from '@seed/api/dataset'
 import { VersionService } from '@seed/api/version/version.service'
-import { NavigationService } from 'app/core/navigation/navigation.service'
 
 export const initialDataResolver = () => {
-  // const datasetService = inject(DatasetService)
-  const navigationService = inject(NavigationService)
   const versionService = inject(VersionService)
 
-  // Fork join multiple API endpoint calls to wait all of them to finish
-  return forkJoin([
-    versionService.get(),
-    // datasetService.countDatasets(),
-    navigationService.get(),
-  ])
+  // Fork join multiple API endpoint calls to wait on all of them to finish
+  return forkJoin([versionService.get()])
 }