Creates reusable seed-page component (#9)

* seed page component

tab pages

lint

styles

* titles

* styles

---------

Co-authored-by: Caleb Rutan <crutan@users.noreply.github.com>

Author: perryr16

src/@seed/components/index.ts

@@ -4,3 +4,4 @@ export * from './drawer'
 export * from './loading-bar'
 export * from './masonry'
 export * from './navigation'
+export * from './page'

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

@@ -0,0 +1 @@
+export * from './page.component'

src/@seed/components/page/page.component.html

@@ -0,0 +1,19 @@
+<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
+  <div
+    class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8 dark:bg-transparent"
+  >
+    <div class="min-w-0 flex-1">
+      <h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-4xl">{{ config.title }}</h2>
+    </div>
+    <!-- Actions -->
+    @if (config.action) {
+      <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">
+        <a mat-flat-button color="primary" (click)="config.action()">
+          <mat-icon class="icon-size-4" [svgIcon]="config.actionIcon"></mat-icon>
+          <span class="ml-2">{{ config.actionText }}</span>
+        </a>
+      </div>
+    }
+  </div>
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core'
+import { MatButtonModule } from '@angular/material/button'
+import { MatIconModule } from '@angular/material/icon'
+import { SharedImports } from '@seed/directives'
+import type { Config } from './page.types'
+
+@Component({
+  selector: 'seed-page',
+  templateUrl: './page.component.html',
+  imports: [MatButtonModule, MatIconModule, SharedImports],
+})
+export class PageComponent {
+  @Input() config: Config
+}

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

@@ -0,0 +1,6 @@
+export type Config = {
+  action?: () => void;
+  actionIcon?: string;
+  actionText?: string;
+  title: string;
+}

src/app/modules/data/data.component.html

@@ -1,19 +1,4 @@
-<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
-  <div
-    class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8 dark:bg-transparent"
-  >
-    <div class="min-w-0 flex-1">
-      <h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-4xl">Data</h2>
-    </div>
-    <!-- Actions -->
-    <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">
-      <a mat-flat-button color="primary">
-        <mat-icon class="icon-size-4" svgIcon="fa-solid:plus"></mat-icon>
-        <span class="ml-2">Create data set</span>
-      </a>
-    </div>
-  </div>
-
+<seed-page [config]="{ title: 'Data', action: createDataset, actionIcon: 'fa-solid:plus', actionText: 'Create Dataset' }">
   <!-- Main -->
   <div class="flex-auto pt-4 sm:pt-6">
     <div class="mx-auto w-full max-w-screen-xl">
@@ -72,4 +57,5 @@ <h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight
       </div>
     </div>
   </div>
-</div>
+  <!-- </div> -->
+</seed-page>

src/app/modules/data/data.component.ts

@@ -9,14 +9,15 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { from, skip } from 'rxjs'
 import type { Dataset } from '@seed/api/dataset'
 import { UserService } from '@seed/api/user'
+import { PageComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
 
 @Component({
   selector: 'seed-data',
   templateUrl: './data.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [DatePipe, MatButtonModule, MatIconModule, MatSortModule, MatTableModule, SharedImports],
+  imports: [DatePipe, MatButtonModule, MatIconModule, MatSortModule, MatTableModule, PageComponent, SharedImports],
 })
 export class DataComponent implements OnInit, AfterViewInit {
   private _activatedRoute = inject(ActivatedRoute)
@@ -38,6 +39,10 @@ export class DataComponent implements OnInit, AfterViewInit {
     })
   }
 
+  createDataset(): void {
+    console.log('create dataset')
+  }
+
   ngAfterViewInit(): void {
     this.datasetsDataSource.sort = this.sort()
   }

src/app/modules/organizations/access-level-tree/access-level-tree.component.html

@@ -0,0 +1,3 @@
+<seed-page [config]="{ title: 'Access Level Tree' }">
+  <div>Access Level Tree Content</div>
+</seed-page>

src/app/modules/organizations/organizations-access-level-tree/organizations-access-level-tree.component.ts src/app/modules/organizations/access-level-tree/access-level-tree.component.ts

@@ -1,13 +1,14 @@
 import type { OnInit } from '@angular/core'
 import { Component } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
+import { PageComponent } from '@seed/components'
 
 @Component({
   selector: 'seed-organizations-access-level-tree',
-  templateUrl: './organizations-access-level-tree.component.html',
-  imports: [MatIconModule],
+  templateUrl: './access-level-tree.component.html',
+  imports: [MatIconModule, PageComponent],
 })
-export class OrganizationsAccessLevelTreeComponent implements OnInit {
+export class AccessLevelTreeComponent implements OnInit {
   ngOnInit(): void {
     console.log('organizations access level tree')
   }

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

@@ -1,4 +1,4 @@
-<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
+<seed-page [config]="{ title: 'Column Mappings' }" *transloco="let t">
   <div class="flex space-x-1">
     @for (tab of tabs; track tab) {
       <div
@@ -17,4 +17,4 @@
   <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>
   </div>
-</div>
+</seed-page>

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

@@ -2,16 +2,17 @@ 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 { SharedImports } from '@seed/directives'
 import type { OrganizationTab } from '../organizations.types'
 
 @Component({
   selector: 'seed-organizations-column-mappings',
-  templateUrl: './organizations-column-mappings.component.html',
+  templateUrl: './column-mappings.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, SharedImports],
+  imports: [NgClass, PageComponent, SharedImports],
 })
-export class OrganizationsColumnMappingsComponent implements OnInit {
+export class ColumnMappingsComponent implements OnInit {
   private _route = inject(ActivatedRoute)
   private _router = inject(Router)
 

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

@@ -1,4 +1,4 @@
-<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
+<seed-page [config]="{ title: 'Column Settings' }" *transloco="let t">
   <div class="flex space-x-1">
     @for (tab of tabs; track tab) {
       <div
@@ -17,4 +17,4 @@
   <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>
   </div>
-</div>
+</seed-page>

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

@@ -2,16 +2,17 @@ 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 { SharedImports } from '@seed/directives'
 import type { InventoryType } from '../../inventory/inventory.types'
 
 @Component({
   selector: 'seed-organizations-column-settings',
-  templateUrl: './organizations-column-settings.component.html',
+  templateUrl: './column-settings.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, SharedImports],
+  imports: [NgClass, PageComponent, SharedImports],
 })
-export class OrganizationsColumnSettingsComponent implements OnInit {
+export class ColumnSettingsComponent implements OnInit {
   private _route = inject(ActivatedRoute)
   private _router = inject(Router)
 

src/app/modules/organizations/cycles/cycles.component.html

@@ -1,18 +1,4 @@
-<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
-  <div
-    class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8 dark:bg-transparent"
-  >
-    <div class="min-w-0 flex-1">
-      <h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-4xl">Cycles</h2>
-    </div>
-    <!-- Actions -->
-    <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">
-      <a mat-flat-button color="primary" (click)="createCycle()">
-        <mat-icon class="icon-size-4" svgIcon="fa-solid:plus"></mat-icon>
-        <span class="ml-2">Create cycle</span>
-      </a>
-    </div>
-  </div>
+<seed-page [config]="{ title: 'Cycles', action: createCycle, actionIcon: 'fa-solid:plus', actionText: 'Create Cycle' }" title="Cycles">
   <!-- Cycles Table -->
   <div class="flex-auto pt-4 sm:pt-6">
     <div class="mx-auto w-full max-w-screen-xl">
@@ -63,4 +49,5 @@ <h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight
       </div>
     </div>
   </div>
-</div>
+  <!-- </div> -->
+</seed-page>

src/app/modules/organizations/cycles/cycles.component.ts

@@ -7,21 +7,31 @@ import { MatIconModule } from '@angular/material/icon'
 import { MatTableDataSource, MatTableModule } from '@angular/material/table'
 import type { Cycle, CyclesResponse } from '@seed/api/cycle'
 import { CycleService } from '@seed/api/cycle/cycle.service'
+import { PageComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
 import { DeleteModalComponent } from './modal/delete-modal.component'
 import { FormModalComponent } from './modal/form-modal.component'
 
 @Component({
   selector: 'seed-organizations-cycles',
   templateUrl: './cycles.component.html',
-  imports: [MatButtonModule, MatDialogModule, MatIconModule, MatTableModule, CommonModule, SharedImports],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatTableModule,
+    PageComponent,
+    SharedImports,
+  ],
 })
-export class OrganizationsCyclesComponent implements OnInit {
+export class CyclesComponent implements OnInit {
   private _cycleService = inject(CycleService)
   private _dialog = inject(MatDialog)
   private _orgId: number
   private _existingNames: string[]
 
+  // actionConfig: { action: () => void; icon: string; text: string }
   cyclesDataSource = new MatTableDataSource<Cycle>([])
   cyclesColumns = ['id', 'name', 'start', 'end', 'actions']
 
@@ -39,7 +49,8 @@ export class OrganizationsCyclesComponent implements OnInit {
     })
   }
 
-  createCycle(): void {
+  createCycle = () => {
+  // createCycle(): void {
     const dialogRef = this._dialog.open(FormModalComponent, {
       width: '40rem',
       data: { cycle: null, orgId: this._orgId, existingNames: this._existingNames },

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

@@ -1,4 +1,4 @@
-<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
+<seed-page [config]="{ title: 'Data Quality' }" *transloco="let t">
   <div class="flex space-x-1">
     @for (tab of tabs; track tab) {
       <div
@@ -17,4 +17,4 @@
   <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>
   </div>
-</div>
+</seed-page>

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

@@ -2,16 +2,17 @@ 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 { SharedImports } from '@seed/directives'
 import type { OrganizationTab } from '../organizations.types'
 
 @Component({
   selector: 'seed-organizations-data-quality',
-  templateUrl: './organizations-data-quality.component.html',
+  templateUrl: './data-quality.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, SharedImports],
+  imports: [NgClass, PageComponent, SharedImports],
 })
-export class OrganizationsDataQualityComponent implements OnInit {
+export class DataQualityComponent implements OnInit {
   private _route = inject(ActivatedRoute)
   private _router = inject(Router)
 

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

@@ -1,4 +1,4 @@
-<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
+<seed-page [config]="{ title: 'Derived Columns' }" *transloco="let t">
   <div class="flex space-x-1">
     @for (tab of tabs; track tab) {
       <div
@@ -17,4 +17,4 @@
   <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>
   </div>
-</div>
+</seed-page>

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

@@ -2,16 +2,17 @@ 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 { SharedImports } from '@seed/directives'
 import type { InventoryType } from '../../inventory/inventory.types'
 
 @Component({
   selector: 'seed-organizations-derived-columns',
-  templateUrl: './organizations-derived-columns.component.html',
+  templateUrl: './derived-columns.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [NgClass, SharedImports],
+  imports: [NgClass, PageComponent, SharedImports],
 })
-export class OrganizationsDerivedColumnsComponent implements OnInit {
+export class DerivedColumnsComponent implements OnInit {
   private _route = inject(ActivatedRoute)
   private _router = inject(Router)
 

src/app/modules/organizations/email-templates/email-templates.component.html

@@ -0,0 +1,3 @@
+<seed-page [config]="{ title: 'Email Templates' }">
+  <div>Email Templates Content</div>
+</seed-page>

src/app/modules/organizations/organizations-email-templates/organizations-email-templates.component.ts src/app/modules/organizations/email-templates/email-templates.component.ts

@@ -1,11 +1,13 @@
 import type { OnInit } from '@angular/core'
 import { Component } from '@angular/core'
+import { PageComponent } from '@seed/components'
 
 @Component({
   selector: 'seed-organizations-email-templates',
-  templateUrl: './organizations-email-templates.component.html',
+  templateUrl: './email-templates.component.html',
+  imports: [PageComponent],
 })
-export class OrganizationsEmailTemplatesComponent implements OnInit {
+export class EmailTemplatesComponent implements OnInit {
   ngOnInit(): void {
     console.log('organizations email templates')
   }

src/app/modules/organizations/index.ts

@@ -1,12 +1,10 @@
-export * from './organizations-access-level-tree/organizations-access-level-tree.component'
-export * from './organizations-column-mappings/organizations-column-mappings.component'
-export * from './organizations-column-settings/organizations-column-settings.component'
+export * from './access-level-tree/access-level-tree.component'
+export * from './column-mappings/column-mappings.component'
+export * from './column-settings/column-settings.component'
 export * from './cycles/cycles.component'
-export * from './organizations-data-quality/organizations-data-quality.component'
-export * from './organizations-derived-columns/organizations-derived-columns.component'
-export * from './organizations-email-templates/organizations-email-templates.component'
-export * from './organizations-labels/organizations-labels.component'
-export * from './organizations-members/organizations-members.component'
-export * from './organizations-list/organizations-list.component'
-export * from './organizations-nav/organizations-nav.component'
+export * from './data-quality/data-quality.component'
+export * from './derived-columns/derived-columns.component'
+export * from './email-templates/email-templates.component'
+export * from './labels/labels.component'
+export * from './members/members.component'
 export * from './settings/settings.component'

src/app/modules/organizations/labels/labels.component.html

@@ -0,0 +1,3 @@
+<seed-page [config]="{ title: 'Labels' }">
+  <div>Labels Content</div>
+</seed-page>

src/app/modules/organizations/organizations-labels/organizations-labels.component.ts src/app/modules/organizations/labels/labels.component.ts

@@ -1,13 +1,14 @@
 import type { OnInit } from '@angular/core'
 import { Component } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
+import { PageComponent } from '@seed/components'
 
 @Component({
   selector: 'seed-organizations-labels',
-  templateUrl: './organizations-labels.component.html',
-  imports: [MatIconModule],
+  templateUrl: './labels.component.html',
+  imports: [PageComponent, MatIconModule],
 })
-export class OrganizationsLabelsComponent implements OnInit {
+export class LabelsComponent implements OnInit {
   ngOnInit(): void {
     console.log('organizations labels')
   }

src/app/modules/organizations/members/members.component.html

@@ -0,0 +1,3 @@
+<seed-page [config]="{ title: 'Members' }">
+  <div>Members Content</div>
+</seed-page>