Create reusable inventory tab component

src/@seed/components/page/index.ts

@@ -1,2 +1,3 @@
 export * from './page.component'
 export * from './table/table-container.component'
+export * from './inventory-tab'

src/@seed/components/page/inventory-tab/index.ts

@@ -0,0 +1,2 @@
+export * from './inventory-tab.component'
+export * from './inventory-tab.types'

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>

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()
+  }
+}

src/@seed/components/page/inventory-tab/inventory-tab.types.ts

@@ -0,0 +1,4 @@
+export type Config = {
+  action: (tab: string) => void;
+  tabs: string[];
+}

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: [],
 })

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>
 

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

@@ -1,17 +1,17 @@
-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'
 
 @Component({
   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)

src/app/modules/inventory/inventory.types.ts

@@ -1 +1 @@
-export type InventoryType = 'properties' | 'taxlots'
+export type InventoryType = 'properties' | 'taxlots' | 'goal'

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>

src/app/modules/organizations/column-mappings/column-mappings.component.ts

@@ -1,31 +1,30 @@
-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'
 
   ngOnInit(): void {
     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 })

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>

src/app/modules/organizations/column-settings/column-settings.component.ts

@@ -1,16 +1,15 @@
-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'
 
 @Component({
   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)

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>

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>

src/app/modules/organizations/data-quality/data-quality.component.ts

@@ -1,31 +1,30 @@
-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'
 
   ngOnInit(): void {
     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 })

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>

src/app/modules/organizations/derived-columns/derived-columns.component.ts

@@ -1,16 +1,15 @@
-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'
 
 @Component({
   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)

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>

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'