Skip to content

Commit

Permalink
feat(daffio): dynamic nav and sidebar content (#2686)
Browse files Browse the repository at this point in the history
---------

Co-authored-by: xelaint <[email protected]>
  • Loading branch information
griest024 and xelaint committed Jan 9, 2024
1 parent 2b61dd8 commit 4fe945c
Show file tree
Hide file tree
Showing 41 changed files with 507 additions and 57 deletions.
10 changes: 3 additions & 7 deletions apps/daffio/src/app/api/api-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,27 @@ import {
RouterModule,
} from '@angular/router';

import { DaffRouteWithNamedViews } from '@daffodil/router';

import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
import { DaffioApiListResolver } from './resolvers/api-list-resolver.service';
import { DocsResolver } from '../docs/resolvers/docs-resolver.service';

export const apiRoutes: Routes = [
{
<DaffRouteWithNamedViews>{
path: '',
component: DaffioApiListPageComponent,
resolve: {
reference: DaffioApiListResolver,
},
data: {
sidebarMode: 'side-fixed',
},
},
{
path: '**',
component: DaffioApiPageComponent,
resolve: {
doc: DocsResolver,
},
data: {
sidebarMode: 'side-fixed',
},
},
];

Expand Down
2 changes: 2 additions & 0 deletions apps/daffio/src/app/api/api.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { DaffioApiListModule } from './components/api-list/api-list.module';
import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module';
import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.module';

@NgModule({
imports: [
Expand All @@ -17,6 +18,7 @@ import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.
DaffioDocsApiRoutingModule,
DaffioApiListModule,
DaffioDocViewerModule,
DaffioDocsSidebarModule,

DaffContainerModule,
],
Expand Down
45 changes: 38 additions & 7 deletions apps/daffio/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,48 @@ import {
RouterModule,
} from '@angular/router';

import { DaffRouteWithNamedViews } from '@daffodil/router';

import { DaffioDocsHeaderContainer } from './core/header/containers/docs-header/docs-header.component';
import { DaffioMarketingHeaderContainer } from './core/header/containers/marketing-header/marketing-header.component';
import { DaffioDocsSidebarComponent } from './core/sidebar/components/docs-sidebar/docs-sidebar.component';
import { DaffioMarketingSidebarComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.component';
import { TemplateComponent } from './core/template/template.component';
import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum';

export const appRoutes: Routes = [
{
path: '', component: TemplateComponent, children: [
{ path: '', pathMatch: 'full', loadChildren: () => import('./content/home/home.module').then(m => m.DaffioHomeModule) },
{ path: 'why-pwa', loadChildren: () => import('./content/why-pwa/why-pwa.module').then(m => m.DaffioWhyPwaModule) },
{ path: 'support', loadChildren: () => import('./content/support/support.module').then(m => m.DaffioSupportModule) },
{ path: 'api', loadChildren: () => import('./api/api.module').then(m => m.DaffioApiModule) },
{ path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) },
{ path: '404', loadChildren: () => import('./content/not-found/not-found.module').then(m => m.DaffioNotFoundModule) },
path: '', component: TemplateComponent,
children: [
<DaffRouteWithNamedViews>{
path: '',
children: [
{ path: '', pathMatch: 'full', loadChildren: () => import('./content/home/home.module').then(m => m.DaffioHomeModule) },
{ path: 'why-pwa', loadChildren: () => import('./content/why-pwa/why-pwa.module').then(m => m.DaffioWhyPwaModule) },
{ path: 'support', loadChildren: () => import('./content/support/support.module').then(m => m.DaffioSupportModule) },
{ path: '404', loadChildren: () => import('./content/not-found/not-found.module').then(m => m.DaffioNotFoundModule) },
],
data: {
daffNamedViews: {
[DaffioRouterNamedViewsEnum.NAV]: DaffioMarketingHeaderContainer,
[DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioMarketingSidebarComponent,
},
},
},

<DaffRouteWithNamedViews>{
path: '',
children: [
{ path: 'api', loadChildren: () => import('./api/api.module').then(m => m.DaffioApiModule) },
{ path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) },
],
data: {
daffNamedViews: {
[DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer,
[DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioDocsSidebarComponent,
},
},
},
],
},
{
Expand Down
8 changes: 8 additions & 0 deletions apps/daffio/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ import { DAFF_THEME_INITIALIZER } from '@daffodil/design';

import { AppRoutingModule } from './app-routing.module';
import { DaffioAppComponent } from './app.component';
import { DaffioDocsHeaderContainerModule } from './core/header/containers/docs-header/docs-header.module';
import { DaffioMarketingHeaderContainerModule } from './core/header/containers/marketing-header/marketing-header.module';
import { DaffioDocsSidebarComponentModule } from './core/sidebar/components/docs-sidebar/docs-sidebar.module';
import { DaffioMarketingSidebarComponentModule } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.module';
import { TemplateModule } from './core/template/template.module';
import { environment } from '../environments/environment';

Expand All @@ -28,6 +32,10 @@ import { environment } from '../environments/environment';
HttpClientModule,

AppRoutingModule,
DaffioMarketingHeaderContainerModule,
DaffioDocsHeaderContainerModule,
DaffioMarketingSidebarComponentModule,
DaffioDocsSidebarComponentModule,

//Make sure this loads after Router and Store
StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer,
Expand Down
2 changes: 2 additions & 0 deletions apps/daffio/src/app/content/home/home.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ 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';

Expand All @@ -19,6 +20,7 @@ import { IphoneModule } from '../../design/device/iphone/iphone.module';

DaffioHomeRoutingModule,
DaffioHomeViewModule,
DaffioMarketingHeaderContainerModule,
],
})
export class DaffioHomeModule { }
2 changes: 2 additions & 0 deletions apps/daffio/src/app/content/home/view/home-view.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ 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';
Expand All @@ -15,6 +16,7 @@ import { DaffioHomeHeroComponentModule } from '../components/home-hero/home-hero
DaffioHomeHeroComponentModule,
DaffioHomeCalloutPwaComponentModule,
DaffioHomeCalloutPlatformsComponentModule,
DaffioMarketingHeaderContainerModule,
],
declarations: [
DaffioHomeViewComponent,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<daffio-header>
<a routerLink="/" daffio-logo>
<daff-branding-logo type="full"></daff-branding-logo>
</a>
<daff-theme-switch-button theme-toggle></daff-theme-switch-button>
<a daffioHeaderItem routerLink="{{ link.path }}" *ngFor="let link of links">{{ link.title }}</a>
<a daff-button color="theme-contrast" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
<button daff-icon-button color="theme-contrast" aria-label="Open Docs Sidebar"
sidebar-button
(click)="openDocsSidebar()">
<fa-icon [icon]="faBars"></fa-icon>
</button>
</daffio-header>
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@ import {
Store,
} from '@ngrx/store';

import { DaffioHeaderContainer } from './header.component';
import { ToggleSidebar } from '../../sidebar/actions/sidebar.actions';
import * as fromSidebar from '../../sidebar/reducers/index';
import { DaffioDocsHeaderContainer } from './docs-header.component';
import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions';
import * as fromSidebar from '../../../../core/sidebar/reducers/index';

@Component({ template: '<daffio-header-container></daffio-header-container>' })
@Component({ template: '<daffio-docs-header-container></daffio-docs-header-container>' })
class WrapperComponent {}

describe('DaffioHeaderContainer', () => {
describe('DaffioDocsHeaderContainer', () => {
let component: WrapperComponent;
let fixture: ComponentFixture<WrapperComponent>;
let daffioHeaderContainer: DaffioHeaderContainer;
let daffioDocsHeaderContainer: DaffioDocsHeaderContainer;

let store: Store<fromSidebar.State>;

Expand All @@ -38,7 +38,7 @@ describe('DaffioHeaderContainer', () => {
],
declarations: [
WrapperComponent,
DaffioHeaderContainer,
DaffioDocsHeaderContainer,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
Expand All @@ -54,7 +54,7 @@ describe('DaffioHeaderContainer', () => {
spyOn(store, 'dispatch');
fixture.detectChanges();

daffioHeaderContainer = fixture.debugElement.query(By.css('daffio-header-container')).componentInstance;
daffioDocsHeaderContainer = fixture.debugElement.query(By.css('daffio-docs-header-container')).componentInstance;
});

it('should create', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
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',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioDocsHeaderContainer {
faBars = faBars;

links: any[] = [
{ path: '/api', title: 'API Index' },
];

constructor(private store: Store<any>) { }

openDocsSidebar() {
this.store.dispatch(new ToggleSidebar());
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { DaffLogoModule } from '@daffodil/branding';
import { DaffButtonModule } from '@daffodil/design/button';
import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';

import { DaffioHeaderContainer } from './header.component';
import { DaffioHeaderComponentModule } from '../components/header.module';
import { DaffioDocsHeaderContainer } from './docs-header.component';
import { DaffioHeaderComponentModule } from '../../components/header.module';

@NgModule({
imports: [
Expand All @@ -23,10 +23,10 @@ import { DaffioHeaderComponentModule } from '../components/header.module';
FontAwesomeModule,
],
declarations: [
DaffioHeaderContainer,
DaffioDocsHeaderContainer,
],
exports: [
DaffioHeaderContainer,
DaffioDocsHeaderContainer,
],
})
export class DaffioHeaderModule { }
export class DaffioDocsHeaderContainerModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
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: '<daffio-marketing-header-container></daffio-marketing-header-container>' })
class WrapperComponent {}

describe('DaffioMarketingHeaderContainer', () => {
let component: WrapperComponent;
let fixture: ComponentFixture<WrapperComponent>;
let daffioMarketingHeaderContainer: DaffioMarketingHeaderContainer;

let store: Store<fromSidebar.State>;

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());
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@ import {
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { Store } from '@ngrx/store';

import { ToggleSidebar } from '../../sidebar/actions/sidebar.actions';

import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions';

@Component({
selector: 'daffio-header-container',
templateUrl: './header.component.html',
selector: 'daffio-marketing-header-container',
templateUrl: './marketing-header.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffioHeaderContainer {
export class DaffioMarketingHeaderContainer {
faBars = faBars;

links: any[] = [
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
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 { 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,

FontAwesomeModule,
],
declarations: [
DaffioMarketingHeaderContainer,
],
exports: [
DaffioMarketingHeaderContainer,
],
})
export class DaffioMarketingHeaderContainerModule { }
Loading

0 comments on commit 4fe945c

Please sign in to comment.