From feee9c10d05b4018e27d1556a6e0f4e44d1534fc Mon Sep 17 00:00:00 2001
From: Ross Perry <perryr16@gmail.com>
Date: Thu, 13 Feb 2025 20:19:40 +0000
Subject: [PATCH] reusable inventory tab component

---
 src/@seed/components/page/index.ts            |  1 +
 .../components/page/inventory-tab/index.ts    |  2 ++
 .../inventory-tab.component.html              | 14 +++++++++
 .../inventory-tab/inventory-tab.component.ts  | 31 +++++++++++++++++++
 .../page/inventory-tab/inventory-tab.types.ts |  4 +++
 .../page/table/table-container.component.ts   |  2 +-
 .../inventory/inventory.component.html        | 14 +--------
 .../modules/inventory/inventory.component.ts  |  4 +--
 src/app/modules/inventory/inventory.types.ts  |  2 +-
 .../column-mappings.component.html            | 15 +--------
 .../column-mappings.component.ts              | 13 ++++----
 .../column-settings.component.html            | 15 +--------
 .../column-settings.component.ts              |  5 ++-
 .../cycles/cycles.component.html              |  4 +--
 .../data-quality/data-quality.component.html  | 15 +--------
 .../data-quality/data-quality.component.ts    | 13 ++++----
 .../derived-columns.component.html            | 15 +--------
 .../derived-columns.component.ts              |  5 ++-
 .../members/members.component.html            |  4 +--
 .../organizations/organizations.types.ts      |  2 --
 20 files changed, 81 insertions(+), 99 deletions(-)
 create mode 100644 src/@seed/components/page/inventory-tab/index.ts
 create mode 100644 src/@seed/components/page/inventory-tab/inventory-tab.component.html
 create mode 100644 src/@seed/components/page/inventory-tab/inventory-tab.component.ts
 create mode 100644 src/@seed/components/page/inventory-tab/inventory-tab.types.ts

diff --git a/src/@seed/components/page/index.ts b/src/@seed/components/page/index.ts
index 16856ed..7227928 100644
--- a/src/@seed/components/page/index.ts
+++ b/src/@seed/components/page/index.ts
@@ -1,2 +1,3 @@
 export * from './page.component'
 export * from './table/table-container.component'
+export * from './inventory-tab'
diff --git a/src/@seed/components/page/inventory-tab/index.ts b/src/@seed/components/page/inventory-tab/index.ts
new file mode 100644
index 0000000..63ba8fb
--- /dev/null
+++ b/src/@seed/components/page/inventory-tab/index.ts
@@ -0,0 +1,2 @@
+export * from './inventory-tab.component'
+export * from './inventory-tab.types'
diff --git a/src/@seed/components/page/inventory-tab/inventory-tab.component.html b/src/@seed/components/page/inventory-tab/inventory-tab.component.html
new file mode 100644
index 0000000..865abe9
--- /dev/null
+++ b/src/@seed/components/page/inventory-tab/inventory-tab.component.html
@@ -0,0 +1,14 @@
+<div class="flex space-x-1" *transloco="let t">
+  @for (tab of config.tabs; track tab) {
+    <div
+      class="bg-default relative flex cursor-pointer self-start overflow-hidden rounded-t border border-b-0 pb-1 pl-5 pr-4 pt-2"
+      [ngClass]="type === tab ? ['z-2', 'text-primary'] : ['bg-slate-50', 'dark:bg-slate-700']"
+      (click)="config.action(tab)"
+      matRipple
+    >
+      <div class="overflow-hidden">
+        <div class="truncate font-medium leading-6">{{ t(tab) }}</div>
+      </div>
+    </div>
+  }
+</div>
diff --git a/src/@seed/components/page/inventory-tab/inventory-tab.component.ts b/src/@seed/components/page/inventory-tab/inventory-tab.component.ts
new file mode 100644
index 0000000..84c0cd0
--- /dev/null
+++ b/src/@seed/components/page/inventory-tab/inventory-tab.component.ts
@@ -0,0 +1,31 @@
+import { NgClass } from '@angular/common'
+import type { OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { Subject } from 'rxjs'
+import { SharedImports } from '@seed/directives'
+import type { InventoryType } from 'app/modules/inventory/inventory.types'
+import type { Config } from './inventory-tab.types'
+
+@Component({
+  selector: 'seed-page-inventory-tab',
+  templateUrl: './inventory-tab.component.html',
+  imports: [NgClass, SharedImports],
+})
+export class InventoryTabComponent implements OnDestroy, OnInit {
+  private _route = inject(ActivatedRoute)
+  @Input() config: Config
+  type: InventoryType
+  private readonly _unsubscribeAll$ = new Subject<void>()
+
+  ngOnInit(): void {
+    this._route.paramMap.subscribe((params) => {
+      this.type = params.get('type') as InventoryType
+    })
+  }
+
+  ngOnDestroy(): void {
+    this._unsubscribeAll$.next()
+    this._unsubscribeAll$.complete()
+  }
+}
diff --git a/src/@seed/components/page/inventory-tab/inventory-tab.types.ts b/src/@seed/components/page/inventory-tab/inventory-tab.types.ts
new file mode 100644
index 0000000..4c2f4be
--- /dev/null
+++ b/src/@seed/components/page/inventory-tab/inventory-tab.types.ts
@@ -0,0 +1,4 @@
+export type Config = {
+  action: (tab: string) => void;
+  tabs: string[];
+}
diff --git a/src/@seed/components/page/table/table-container.component.ts b/src/@seed/components/page/table/table-container.component.ts
index c2f1c1e..2eef399 100644
--- a/src/@seed/components/page/table/table-container.component.ts
+++ b/src/@seed/components/page/table/table-container.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 
 @Component({
-  selector: 'seed-page-table-container',
+  selector: 'seed-page-inventory-table-container',
   templateUrl: './table-container.component.html',
   imports: [],
 })
diff --git a/src/app/modules/inventory/inventory.component.html b/src/app/modules/inventory/inventory.component.html
index 0c75640..2da28bf 100644
--- a/src/app/modules/inventory/inventory.component.html
+++ b/src/app/modules/inventory/inventory.component.html
@@ -11,19 +11,7 @@
       </div>
 
       <!-- Tabs -->
-      <div class="flex space-x-1">
-        @for (tab of tabs; track tab) {
-          <div
-            class="bg-default relative flex cursor-pointer self-start overflow-hidden rounded-t-xl border border-b-0 pb-1 pl-5 pr-4 pt-2"
-            [ngClass]="type === tab ? 'z-2' : ['bg-slate-50', 'dark:bg-slate-700']"
-            (click)="toggleInventoryType(tab)"
-          >
-            <div class="overflow-hidden">
-              <div class="truncate font-medium leading-6">{{ t(tab) }}</div>
-            </div>
-          </div>
-        }
-      </div>
+      <seed-page-inventory-tab [config]="{ tabs, action: toggleInventoryType.bind(this) }"></seed-page-inventory-tab>
     </div>
   </div>
 
diff --git a/src/app/modules/inventory/inventory.component.ts b/src/app/modules/inventory/inventory.component.ts
index 7d0284c..47138d5 100644
--- a/src/app/modules/inventory/inventory.component.ts
+++ b/src/app/modules/inventory/inventory.component.ts
@@ -1,9 +1,9 @@
-import { NgClass } from '@angular/common'
 import { Component, inject, ViewEncapsulation } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTabsModule } from '@angular/material/tabs'
 import { ActivatedRoute, Router } from '@angular/router'
+import { InventoryTabComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
 import type { InventoryType } from './inventory.types'
 
@@ -11,7 +11,7 @@ import type { InventoryType } from './inventory.types'
   selector: 'seed-inventory',
   templateUrl: './inventory.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [MatButtonModule, MatIconModule, MatTabsModule, NgClass, SharedImports],
+  imports: [MatButtonModule, MatIconModule, MatTabsModule, SharedImports, InventoryTabComponent],
 })
 export class InventoryComponent {
   private _activatedRoute = inject(ActivatedRoute)
diff --git a/src/app/modules/inventory/inventory.types.ts b/src/app/modules/inventory/inventory.types.ts
index d112265..44438de 100644
--- a/src/app/modules/inventory/inventory.types.ts
+++ b/src/app/modules/inventory/inventory.types.ts
@@ -1 +1 @@
-export type InventoryType = 'properties' | 'taxlots'
+export type InventoryType = 'properties' | 'taxlots' | 'goal'
diff --git a/src/app/modules/organizations/column-mappings/column-mappings.component.html b/src/app/modules/organizations/column-mappings/column-mappings.component.html
index 2ce3bd4..1b66cd3 100644
--- a/src/app/modules/organizations/column-mappings/column-mappings.component.html
+++ b/src/app/modules/organizations/column-mappings/column-mappings.component.html
@@ -1,18 +1,5 @@
 <seed-page [config]="{ title: 'Column Mappings' }" *transloco="let t">
-  <div class="flex space-x-1">
-    @for (tab of tabs; track tab) {
-      <div
-        class="bg-default relative flex cursor-pointer self-start overflow-hidden rounded-t-xl border border-b-0 pb-1 pl-5 pr-4 pt-2"
-        [ngClass]="type === tab ? 'z-2' : ['bg-slate-50', 'dark:bg-slate-700']"
-        (click)="toggleInventoryType(tab)"
-        matRipple
-      >
-        <div class="overflow-hidden">
-          <div class="truncate font-medium leading-6">{{ t(tab) }}</div>
-        </div>
-      </div>
-    }
-  </div>
+  <seed-page-inventory-tab [config]="{ tabs, action: toggleInventoryType.bind(this) }"></seed-page-inventory-tab>
 
   <div class="z-1 -mt-px flex-auto border-t pt-4 sm:pt-6">
     <div class="mx-auto w-full max-w-screen-xl">{{ t(type) }} column mappings table</div>
diff --git a/src/app/modules/organizations/column-mappings/column-mappings.component.ts b/src/app/modules/organizations/column-mappings/column-mappings.component.ts
index fc4fade..902fd5b 100644
--- a/src/app/modules/organizations/column-mappings/column-mappings.component.ts
+++ b/src/app/modules/organizations/column-mappings/column-mappings.component.ts
@@ -1,23 +1,22 @@
-import { NgClass } from '@angular/common'
 import type { OnInit } from '@angular/core'
 import { Component, inject, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { PageComponent } from '@seed/components'
+import { InventoryTabComponent, PageComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
-import type { OrganizationTab } from '../organizations.types'
+import type { InventoryType } from 'app/modules/inventory/inventory.types'
 
 @Component({
   selector: 'seed-organizations-column-mappings',
   templateUrl: './column-mappings.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, PageComponent, SharedImports],
+  imports: [InventoryTabComponent, PageComponent, SharedImports],
 })
 export class ColumnMappingsComponent implements OnInit {
   private _route = inject(ActivatedRoute)
   private _router = inject(Router)
 
-  readonly tabs: OrganizationTab[] = ['properties', 'taxlots']
-  type = this._route.snapshot.paramMap.get('type') as OrganizationTab
+  readonly tabs: InventoryType[] = ['properties', 'taxlots']
+  type = this._route.snapshot.paramMap.get('type') as InventoryType
   readonly urlSegment = 'column-mappings'
   readonly table_type = 'Column Mappings'
 
@@ -25,7 +24,7 @@ export class ColumnMappingsComponent implements OnInit {
     console.log('organizations column mappings')
   }
 
-  async toggleInventoryType(type: OrganizationTab) {
+  async toggleInventoryType(type: InventoryType) {
     if (type !== this.type) {
       const newRoute = `/organizations/column-mappings/${type}`
       await this._router.navigateByUrl(newRoute, { skipLocationChange: false })
diff --git a/src/app/modules/organizations/column-settings/column-settings.component.html b/src/app/modules/organizations/column-settings/column-settings.component.html
index 8118a16..a79a431 100644
--- a/src/app/modules/organizations/column-settings/column-settings.component.html
+++ b/src/app/modules/organizations/column-settings/column-settings.component.html
@@ -1,18 +1,5 @@
 <seed-page [config]="{ title: 'Column Settings' }" *transloco="let t">
-  <div class="flex space-x-1">
-    @for (tab of tabs; track tab) {
-      <div
-        class="bg-default relative flex cursor-pointer self-start overflow-hidden rounded-t-xl border border-b-0 pb-1 pl-5 pr-4 pt-2"
-        [ngClass]="type === tab ? 'z-2' : ['bg-slate-50', 'dark:bg-slate-700']"
-        (click)="toggleInventoryType(tab)"
-        matRipple
-      >
-        <div class="overflow-hidden">
-          <div class="truncate font-medium leading-6">{{ t(tab) }}</div>
-        </div>
-      </div>
-    }
-  </div>
+  <seed-page-inventory-tab [config]="{ tabs, action: toggleInventoryType.bind(this) }"></seed-page-inventory-tab>
 
   <div class="z-1 -mt-px flex-auto border-t pt-4 sm:pt-6">
     <div class="mx-auto w-full max-w-screen-xl">{{ t(type) }} column settings table</div>
diff --git a/src/app/modules/organizations/column-settings/column-settings.component.ts b/src/app/modules/organizations/column-settings/column-settings.component.ts
index e108015..2f4bc05 100644
--- a/src/app/modules/organizations/column-settings/column-settings.component.ts
+++ b/src/app/modules/organizations/column-settings/column-settings.component.ts
@@ -1,8 +1,7 @@
-import { NgClass } from '@angular/common'
 import type { OnInit } from '@angular/core'
 import { Component, inject, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { PageComponent } from '@seed/components'
+import { InventoryTabComponent, PageComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
 import type { InventoryType } from '../../inventory/inventory.types'
 
@@ -10,7 +9,7 @@ import type { InventoryType } from '../../inventory/inventory.types'
   selector: 'seed-organizations-column-settings',
   templateUrl: './column-settings.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, PageComponent, SharedImports],
+  imports: [InventoryTabComponent, PageComponent, SharedImports],
 })
 export class ColumnSettingsComponent implements OnInit {
   private _route = inject(ActivatedRoute)
diff --git a/src/app/modules/organizations/cycles/cycles.component.html b/src/app/modules/organizations/cycles/cycles.component.html
index 4288fc9..2b60084 100644
--- a/src/app/modules/organizations/cycles/cycles.component.html
+++ b/src/app/modules/organizations/cycles/cycles.component.html
@@ -1,6 +1,6 @@
 <seed-page [config]="{ title: 'Cycles', action: createCycle, actionIcon: 'fa-solid:plus', actionText: 'Create Cycle' }" title="Cycles">
   <!-- Cycles Table -->
-  <seed-page-table-container>
+  <seed-page-inventory-table-container>
     <table class="mat-elevation-z8 w-full bg-transparent" mat-table matSort [dataSource]="cyclesDataSource" [trackBy]="trackByFn">
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -40,5 +40,5 @@
         <tr mat-row *matRowDef="let row; columns: cyclesColumns"></tr>
       </tbody>
     </table>
-  </seed-page-table-container>
+  </seed-page-inventory-table-container>
 </seed-page>
diff --git a/src/app/modules/organizations/data-quality/data-quality.component.html b/src/app/modules/organizations/data-quality/data-quality.component.html
index c814c7c..befb6a4 100644
--- a/src/app/modules/organizations/data-quality/data-quality.component.html
+++ b/src/app/modules/organizations/data-quality/data-quality.component.html
@@ -1,18 +1,5 @@
 <seed-page [config]="{ title: 'Data Quality' }" *transloco="let t">
-  <div class="flex space-x-1">
-    @for (tab of tabs; track tab) {
-      <div
-        class="bg-default relative flex cursor-pointer self-start overflow-hidden rounded-t-xl border border-b-0 pb-1 pl-5 pr-4 pt-2"
-        [ngClass]="type === tab ? 'z-2' : ['bg-slate-50', 'dark:bg-slate-700']"
-        (click)="toggleInventoryType(tab)"
-        matRipple
-      >
-        <div class="overflow-hidden">
-          <div class="truncate font-medium leading-6">{{ t(tab) }}</div>
-        </div>
-      </div>
-    }
-  </div>
+  <seed-page-inventory-tab [config]="{ tabs, action: toggleInventoryType.bind(this) }"></seed-page-inventory-tab>
 
   <div class="z-1 -mt-px flex-auto border-t pt-4 sm:pt-6">
     <div class="mx-auto w-full max-w-screen-xl">{{ t(type) }} table</div>
diff --git a/src/app/modules/organizations/data-quality/data-quality.component.ts b/src/app/modules/organizations/data-quality/data-quality.component.ts
index 1c6b9cf..b309d1e 100644
--- a/src/app/modules/organizations/data-quality/data-quality.component.ts
+++ b/src/app/modules/organizations/data-quality/data-quality.component.ts
@@ -1,23 +1,22 @@
-import { NgClass } from '@angular/common'
 import type { OnInit } from '@angular/core'
 import { Component, inject, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { PageComponent } from '@seed/components'
+import { InventoryTabComponent, PageComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
-import type { OrganizationTab } from '../organizations.types'
+import type { InventoryType } from 'app/modules/inventory/inventory.types'
 
 @Component({
   selector: 'seed-organizations-data-quality',
   templateUrl: './data-quality.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, PageComponent, SharedImports],
+  imports: [InventoryTabComponent, PageComponent, SharedImports],
 })
 export class DataQualityComponent implements OnInit {
   private _route = inject(ActivatedRoute)
   private _router = inject(Router)
 
-  readonly tabs: OrganizationTab[] = ['properties', 'taxlots', 'goal']
-  type = this._route.snapshot.paramMap.get('type') as OrganizationTab
+  readonly tabs: InventoryType[] = ['properties', 'taxlots', 'goal']
+  type = this._route.snapshot.paramMap.get('type') as InventoryType
   readonly table_type = 'Data Quality'
   readonly urlSegment = 'data-quality'
 
@@ -25,7 +24,7 @@ export class DataQualityComponent implements OnInit {
     console.log('organizations data quality')
   }
 
-  async toggleInventoryType(type: OrganizationTab) {
+  async toggleInventoryType(type: InventoryType) {
     if (type !== this.type) {
       const newRoute = `/organizations/data-quality/${type}`
       await this._router.navigateByUrl(newRoute, { skipLocationChange: false })
diff --git a/src/app/modules/organizations/derived-columns/derived-columns.component.html b/src/app/modules/organizations/derived-columns/derived-columns.component.html
index 6d7c917..e3e642d 100644
--- a/src/app/modules/organizations/derived-columns/derived-columns.component.html
+++ b/src/app/modules/organizations/derived-columns/derived-columns.component.html
@@ -1,18 +1,5 @@
 <seed-page [config]="{ title: 'Derived Columns' }" *transloco="let t">
-  <div class="flex space-x-1">
-    @for (tab of tabs; track tab) {
-      <div
-        class="bg-default relative flex cursor-pointer self-start overflow-hidden rounded-t-xl border border-b-0 pb-1 pl-5 pr-4 pt-2"
-        [ngClass]="type === tab ? 'z-2' : ['bg-slate-50', 'dark:bg-slate-700']"
-        (click)="toggleInventoryType(tab)"
-        matRipple
-      >
-        <div class="overflow-hidden">
-          <div class="truncate font-medium leading-6">{{ t(tab) }}</div>
-        </div>
-      </div>
-    }
-  </div>
+  <seed-page-inventory-tab [config]="{ tabs, action: toggleInventoryType.bind(this) }"></seed-page-inventory-tab>
 
   <div class="z-1 -mt-px flex-auto border-t pt-4 sm:pt-6">
     <div class="mx-auto w-full max-w-screen-xl">{{ t(type) }} derived columns table</div>
diff --git a/src/app/modules/organizations/derived-columns/derived-columns.component.ts b/src/app/modules/organizations/derived-columns/derived-columns.component.ts
index efc32db..b75581d 100644
--- a/src/app/modules/organizations/derived-columns/derived-columns.component.ts
+++ b/src/app/modules/organizations/derived-columns/derived-columns.component.ts
@@ -1,8 +1,7 @@
-import { NgClass } from '@angular/common'
 import type { OnInit } from '@angular/core'
 import { Component, inject, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { PageComponent } from '@seed/components'
+import { InventoryTabComponent, PageComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
 import type { InventoryType } from '../../inventory/inventory.types'
 
@@ -10,7 +9,7 @@ import type { InventoryType } from '../../inventory/inventory.types'
   selector: 'seed-organizations-derived-columns',
   templateUrl: './derived-columns.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, PageComponent, SharedImports],
+  imports: [InventoryTabComponent, PageComponent, SharedImports],
 })
 export class DerivedColumnsComponent implements OnInit {
   private _route = inject(ActivatedRoute)
diff --git a/src/app/modules/organizations/members/members.component.html b/src/app/modules/organizations/members/members.component.html
index 682b132..ec0c03b 100644
--- a/src/app/modules/organizations/members/members.component.html
+++ b/src/app/modules/organizations/members/members.component.html
@@ -1,6 +1,6 @@
 <seed-page [config]="{ title: 'Members' }">
   <!-- Members table -->
-  <seed-page-table-container>
+  <seed-page-inventory-table-container>
     <table class="mat-elevation-z8 w-full bg-transparent" mat-table matSort [dataSource]="membersDataSource" [trackBy]="trackByFn">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>Member Name</th>
@@ -46,5 +46,5 @@
         <tr mat-row *matRowDef="let row; columns: membersColumns"></tr>
       </tbody>
     </table>
-  </seed-page-table-container>
+  </seed-page-inventory-table-container>
 </seed-page>
diff --git a/src/app/modules/organizations/organizations.types.ts b/src/app/modules/organizations/organizations.types.ts
index be2f615..03787b2 100644
--- a/src/app/modules/organizations/organizations.types.ts
+++ b/src/app/modules/organizations/organizations.types.ts
@@ -12,5 +12,3 @@ export type Organization = {
 export type OrganizationsList = Organization[]
 
 export type OrganizationGenericTypeMatcher = { segments: UrlSegment[]; validTypes: string[]; validPage: string }
-
-export type OrganizationTab = 'goal' | 'properties' | 'taxlots'