From 43a55167cbc38911450e95c264435acc42ad7aaf Mon Sep 17 00:00:00 2001 From: Peter Lauck Date: Thu, 22 Aug 2024 21:55:27 +0000 Subject: [PATCH 1/2] feat(daffio): render nav lists from route data --- apps/daffio/src/app/app-routing.module.ts | 16 +++-- apps/daffio/src/app/app.module.ts | 4 -- .../src/app/content/home/home.module.ts | 2 - .../app/content/home/view/home-view.module.ts | 2 - .../docs-header/docs-header.component.html | 13 ---- .../docs-header/docs-header.component.scss | 5 -- .../docs-header/docs-header.component.ts | 30 -------- .../docs-header/docs-header.module.ts | 34 --------- .../marketing-header.component.spec.ts | 72 ------------------- .../marketing-header.component.ts | 29 -------- .../marketing-header.module.ts | 34 --------- .../header/header.component.html} | 15 ++-- .../header/header.component.scss} | 4 +- .../header/header.component.spec.ts} | 24 ++++--- .../app/core/nav/header/header.component.ts | 66 +++++++++++++++++ .../src/app/core/nav/link/route.type.ts | 9 +++ apps/daffio/src/app/core/nav/link/type.ts | 5 ++ .../app/core/nav/sidebar-body/component.html | 11 +++ .../app/core/nav/sidebar-body/component.scss | 4 ++ .../app/core/nav/sidebar-body/component.ts | 43 +++++++++++ apps/daffio/src/app/core/router/route.type.ts | 3 + .../src/app/docs/docs-routing.module.ts | 12 ++-- 22 files changed, 184 insertions(+), 253 deletions(-) delete mode 100644 apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html delete mode 100644 apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.scss delete mode 100644 apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts delete mode 100644 apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts delete mode 100644 apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts delete mode 100644 apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts delete mode 100644 apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts rename apps/daffio/src/app/core/{header/containers/marketing-header/marketing-header.component.html => nav/header/header.component.html} (58%) rename apps/daffio/src/app/core/{header/containers/marketing-header/marketing-header.component.scss => nav/header/header.component.scss} (84%) rename apps/daffio/src/app/core/{header/containers/docs-header/docs-header.component.spec.ts => nav/header/header.component.spec.ts} (70%) create mode 100644 apps/daffio/src/app/core/nav/header/header.component.ts create mode 100644 apps/daffio/src/app/core/nav/link/route.type.ts create mode 100644 apps/daffio/src/app/core/nav/link/type.ts create mode 100644 apps/daffio/src/app/core/nav/sidebar-body/component.html create mode 100644 apps/daffio/src/app/core/nav/sidebar-body/component.scss create mode 100644 apps/daffio/src/app/core/nav/sidebar-body/component.ts diff --git a/apps/daffio/src/app/app-routing.module.ts b/apps/daffio/src/app/app-routing.module.ts index 1e1cd1e757..460dad3f20 100644 --- a/apps/daffio/src/app/app-routing.module.ts +++ b/apps/daffio/src/app/app-routing.module.ts @@ -4,10 +4,9 @@ import { RouterModule, } from '@angular/router'; -import { DaffRouteWithNamedViews } from '@daffodil/router'; - import { DaffioMarketingFooterComponent } from './core/footer/marketing-footer/marketing-footer.component'; -import { DaffioMarketingHeaderContainer } from './core/header/containers/marketing-header/marketing-header.component'; +import { DaffioNavHeaderContainer } from './core/nav/header/header.component'; +import { DaffioRoute } from './core/router/route.type'; import { DaffioMarketingSidebarContentComponent } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component'; import { DaffioSidebarFooterComponent } from './core/sidebar/components/sidebar-footer/sidebar-footer.component'; import { DaffioSidebarHeaderComponent } from './core/sidebar/components/sidebar-header/sidebar-header.component'; @@ -17,17 +16,23 @@ import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enu export const appRoutes: Routes = [ - { + { path: '', component: TemplateComponent, data: { daffNamedViews: { + [DaffioRouterNamedViewsEnum.NAV]: DaffioNavHeaderContainer, [DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent, [DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent, }, + daffioNavLinks: [ + { url: '/why-pwa', title: 'Why PWA' }, + { url: '/docs', title: 'Docs' }, + { url: 'https://github.com/sponsors/graycoreio', title: 'Sponsor', external: true }, + ], }, children: [ - { + { path: '', children: [ { path: '', pathMatch: 'full', loadChildren: () => import('./content/home/home.module').then(m => m.DaffioHomeModule) }, @@ -37,7 +42,6 @@ export const appRoutes: Routes = [ ], data: { daffNamedViews: { - [DaffioRouterNamedViewsEnum.NAV]: DaffioMarketingHeaderContainer, [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioMarketingSidebarContentComponent, [DaffioRouterNamedViewsEnum.FOOTER]: DaffioMarketingFooterComponent, }, diff --git a/apps/daffio/src/app/app.module.ts b/apps/daffio/src/app/app.module.ts index 7182cb8de4..5fc6d9f2f3 100644 --- a/apps/daffio/src/app/app.module.ts +++ b/apps/daffio/src/app/app.module.ts @@ -21,8 +21,6 @@ import { AppRoutingModule } from './app-routing.module'; import { DaffioAppComponent } from './app.component'; import { DaffioMarketingFooterComponentModule } from './core/footer/marketing-footer/marketing-footer.module'; import { DaffioSimpleFooterComponentModule } from './core/footer/simple-footer/simple-footer.module'; -import { DaffioDocsHeaderContainerModule } from './core/header/containers/docs-header/docs-header.module'; -import { DaffioMarketingHeaderContainerModule } from './core/header/containers/marketing-header/marketing-header.module'; import { DaffioDocsSidebarContentComponentModule } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module'; import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module'; import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module'; @@ -40,8 +38,6 @@ import { environment } from '../environments/environment'; HttpClientModule, AppRoutingModule, - DaffioMarketingHeaderContainerModule, - DaffioDocsHeaderContainerModule, DaffioMarketingSidebarContentComponentModule, DaffioDocsSidebarContentComponentModule, DaffioSidebarHeaderComponentModule, diff --git a/apps/daffio/src/app/content/home/home.module.ts b/apps/daffio/src/app/content/home/home.module.ts index cb67a63b63..73e728e166 100644 --- a/apps/daffio/src/app/content/home/home.module.ts +++ b/apps/daffio/src/app/content/home/home.module.ts @@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router'; import { DaffioHomeRoutingModule } from './home-routing.module'; import { DaffioHomeViewModule } from './view/home-view.module'; -import { DaffioMarketingHeaderContainerModule } from '../../core/header/containers/marketing-header/marketing-header.module'; import { TemplateModule } from '../../core/template/template.module'; import { IphoneModule } from '../../design/device/iphone/iphone.module'; @@ -20,7 +19,6 @@ import { IphoneModule } from '../../design/device/iphone/iphone.module'; DaffioHomeRoutingModule, DaffioHomeViewModule, - DaffioMarketingHeaderContainerModule, ], }) export class DaffioHomeModule { } diff --git a/apps/daffio/src/app/content/home/view/home-view.module.ts b/apps/daffio/src/app/content/home/view/home-view.module.ts index fd2500e018..2a4503bf43 100644 --- a/apps/daffio/src/app/content/home/view/home-view.module.ts +++ b/apps/daffio/src/app/content/home/view/home-view.module.ts @@ -3,7 +3,6 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { DaffioHomeViewComponent } from './home-view.component'; -import { DaffioMarketingHeaderContainerModule } from '../../../core/header/containers/marketing-header/marketing-header.module'; import { DaffioHomeCalloutPlatformsComponentModule } from '../components/home-callout-platforms/home-callout-platforms.module'; import { DaffioHomeCalloutPwaComponentModule } from '../components/home-callout-pwa/home-callout-pwa.module'; import { DaffioHomeHeroComponentModule } from '../components/home-hero/home-hero.module'; @@ -16,7 +15,6 @@ import { DaffioHomeHeroComponentModule } from '../components/home-hero/home-hero DaffioHomeHeroComponentModule, DaffioHomeCalloutPwaComponentModule, DaffioHomeCalloutPlatformsComponentModule, - DaffioMarketingHeaderContainerModule, ], declarations: [ DaffioHomeViewComponent, diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html deleted file mode 100644 index eb9ad2c602..0000000000 --- a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - {{ link.title }} - Get Started - - \ No newline at end of file diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.scss b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.scss deleted file mode 100644 index 16c1d221ff..0000000000 --- a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -// @use 'utilities' as daff; - -// .daffio-docs-header { -// padding: 0 24px; -// } \ No newline at end of file diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts deleted file mode 100644 index ff006ae22e..0000000000 --- a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, -} from '@angular/core'; -import { faBars } from '@fortawesome/free-solid-svg-icons'; -import { Store } from '@ngrx/store'; - -import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'; - -@Component({ - selector: 'daffio-docs-header-container', - templateUrl: './docs-header.component.html', - styleUrls: ['./docs-header.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class DaffioDocsHeaderContainer { - faBars = faBars; - - links: any[] = [ - { path: '/docs/guides', title: 'Guides' }, - { path: '/docs/packages', title: 'Packages' }, - { path: '/docs/api', title: 'API Reference' }, - ]; - - constructor(private store: Store) { } - - openDocsSidebar() { - this.store.dispatch(new ToggleSidebar()); - } -} diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts deleted file mode 100644 index c9dfccf9c1..0000000000 --- a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; - -import { DaffLogoModule } from '@daffodil/branding'; -import { DaffButtonModule } from '@daffodil/design/button'; -import { DaffContainerModule } from '@daffodil/design/container'; -import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch'; - -import { DaffioDocsHeaderContainer } from './docs-header.component'; -import { DaffioHeaderComponentModule } from '../../components/header.module'; - -@NgModule({ - imports: [ - CommonModule, - RouterModule, - - DaffioHeaderComponentModule, - DaffLogoModule, - DaffButtonModule, - DaffThemeSwitchButtonModule, - DaffContainerModule, - - FontAwesomeModule, - ], - declarations: [ - DaffioDocsHeaderContainer, - ], - exports: [ - DaffioDocsHeaderContainer, - ], -}) -export class DaffioDocsHeaderContainerModule { } diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts deleted file mode 100644 index 8f7d0dc71a..0000000000 --- a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { - CUSTOM_ELEMENTS_SCHEMA, - Component, -} from '@angular/core'; -import { - ComponentFixture, - TestBed, - waitForAsync, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { RouterTestingModule } from '@angular/router/testing'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; -import { - StoreModule, - Store, -} from '@ngrx/store'; - -import { DaffioMarketingHeaderContainer } from './marketing-header.component'; -import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'; -import * as fromSidebar from '../../../../core/sidebar/reducers/index'; - -@Component({ template: '' }) -class WrapperComponent {} - -describe('DaffioMarketingHeaderContainer', () => { - let component: WrapperComponent; - let fixture: ComponentFixture; - let daffioMarketingHeaderContainer: DaffioMarketingHeaderContainer; - - let store: Store; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - StoreModule.forRoot({}), - RouterTestingModule, - FontAwesomeModule, - ], - declarations: [ - WrapperComponent, - DaffioMarketingHeaderContainer, - ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - component = fixture.componentInstance; - store = TestBed.inject(Store); - spyOn(store, 'dispatch'); - fixture.detectChanges(); - - daffioMarketingHeaderContainer = fixture.debugElement.query(By.css('daffio-marketing-header-container')).componentInstance; - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - describe('when [sidebar-button] is clicked', () => { - it('should call store.dispatch with a ToggleSidebar action', () => { - const sidebarButton = fixture.debugElement.query(By.css('[sidebar-button]')).nativeElement; - sidebarButton.click(); - - expect(store.dispatch).toHaveBeenCalledWith(new ToggleSidebar()); - }); - }); -}); diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts deleted file mode 100644 index 4096835ac9..0000000000 --- a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, -} from '@angular/core'; -import { faBars } from '@fortawesome/free-solid-svg-icons'; -import { Store } from '@ngrx/store'; - -import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'; - -@Component({ - selector: 'daffio-marketing-header-container', - templateUrl: './marketing-header.component.html', - styleUrls: ['./marketing-header.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class DaffioMarketingHeaderContainer { - faBars = faBars; - - links: any[] = [ - { path: '/why-pwa', title: 'Why PWA' }, - { path: '/docs', title: 'Docs' }, - ]; - - constructor(private store: Store) { } - - openSidebar() { - this.store.dispatch(new ToggleSidebar()); - } -} diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts deleted file mode 100644 index 2b2d70ee45..0000000000 --- a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; - -import { DaffLogoModule } from '@daffodil/branding'; -import { DaffButtonModule } from '@daffodil/design/button'; -import { DaffContainerModule } from '@daffodil/design/container'; -import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch'; - -import { DaffioMarketingHeaderContainer } from './marketing-header.component'; -import { DaffioHeaderComponentModule } from '../../components/header.module'; - -@NgModule({ - imports: [ - CommonModule, - RouterModule, - - DaffioHeaderComponentModule, - DaffLogoModule, - DaffButtonModule, - DaffThemeSwitchButtonModule, - DaffContainerModule, - - FontAwesomeModule, - ], - declarations: [ - DaffioMarketingHeaderContainer, - ], - exports: [ - DaffioMarketingHeaderContainer, - ], -}) -export class DaffioMarketingHeaderContainerModule { } diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html b/apps/daffio/src/app/core/nav/header/header.component.html similarity index 58% rename from apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html rename to apps/daffio/src/app/core/nav/header/header.component.html index 687d587a5c..daac82f777 100644 --- a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html +++ b/apps/daffio/src/app/core/nav/header/header.component.html @@ -1,12 +1,19 @@ - + - {{ link.title }} - Sponsor + @for (link of links$ | async; track $index) { + + @if (link.external) { + {{link.title}} + } @else { + {{ link.title }} + } + + } Get Started -