feat(daffio): use tree in daffio guide nav

graycoreio · Sep 7, 2021 · 6e015fe · 6e015fe
1 parent b182bad
commit 6e015fe
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 46 deletions.
diff --git a/apps/daffio/src/app/api/pages/api-page/api-page.component.spec.ts b/apps/daffio/src/app/api/pages/api-page/api-page.component.spec.ts
@@ -49,7 +49,6 @@ describe('DaffioApiPageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DaffioApiPageComponent);
     component = fixture.componentInstance;
-    console.log(doc);
     stubActivatedRoute.data.next({ doc });
     fixture.detectChanges();
   });

diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html
@@ -1,7 +1,7 @@
 <daff-sidebar-viewport (backdropClicked)="close()" [mode]="mode$ | async" [opened]="showSidebar$ | async">
   <daff-sidebar class="daffio-sidebar" (escapePressed)="close()">
     <button type="button" daff-button class="daffio-sidebar__button">Get Started</button>
-		<daffio-guides-nav-tree [guideList]="sidebarContents$ | async"></daffio-guides-nav-tree>
+		<daffio-guides-nav [guideList]="sidebarContents$ | async"></daffio-guides-nav>
     <a routerLink="/api">API Index</a>
   </daff-sidebar>
   <ng-content></ng-content>

diff --git a/...affio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts b/...affio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts
@@ -12,7 +12,7 @@ import {
   StoreModule,
   combineReducers,
 } from '@ngrx/store';
-import { DaffioGuidesNavTreeModule } from 'apps/daffio/src/app/guides/components/guides-nav-tree/guides-nav-tree.module';
+import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module';
 import { cold } from 'jasmine-marbles';
 
 import {
@@ -47,7 +47,7 @@ describe('DaffioSidebarViewportContainer', () => {
         RouterTestingModule,
         NoopAnimationsModule,
         DaffSidebarModule,
-        DaffioGuidesNavTreeModule,
+        DaffioGuidesNavModule,
         HttpClientTestingModule,
       ],
       declarations: [

diff --git a/apps/daffio/src/app/core/sidebar/sidebar.module.ts b/apps/daffio/src/app/core/sidebar/sidebar.module.ts
@@ -7,7 +7,7 @@ import {
   DaffButtonModule,
 } from '@daffodil/design';
 
-import { DaffioGuidesNavTreeModule } from '../../guides/components/guides-nav-tree/guides-nav-tree.module';
+import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides-nav.module';
 import { DaffioSidebarViewportContainer } from './containers/sidebar-viewport/sidebar-viewport.component';
 import { DaffioSidebarStateModule } from './sidebar.state.module';
 
@@ -18,7 +18,7 @@ import { DaffioSidebarStateModule } from './sidebar.state.module';
     DaffioSidebarStateModule,
     DaffSidebarModule,
     DaffButtonModule,
-    DaffioGuidesNavTreeModule,
+    DaffioGuidesNavModule,
   ],
   declarations: [
     DaffioSidebarViewportContainer,

diff --git a/apps/daffio/src/app/guides/components/guides-nav-tree/guides-nav-tree.component.html b/apps/daffio/src/app/guides/components/guides-nav-tree/guides-nav-tree.component.html
diff --git a/apps/daffio/src/app/guides/components/guides-nav-tree/guides-nav-tree.component.scss b/apps/daffio/src/app/guides/components/guides-nav-tree/guides-nav-tree.component.scss
diff --git a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.html b/apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.html
@@ -0,0 +1,57 @@
+<daff-tree *ngIf="guideList">
+	<ng-container *ngFor="let guide of guideList.children">
+		<ng-container *ngIf="guide.children.length  === 0">
+			<a daff-tree-item [selected]="rla.isActive" [routerLink]="guide.path" routerLinkActive #rla="routerLinkActive" [routerLinkActiveOptions]="activeRouterLinkConfiguration">
+				<span daffTreeItemTitle>{{ guide.title }}</span>
+			</a>
+		</ng-container>
+		<ng-container *ngIf="guide.children.length > 0">
+			<daff-tree-item>
+				<div daffTreeItemTitle>{{ guide.title }}</div>
+				<ng-container *ngFor="let guide of guide.children">
+					<ng-container *ngIf="guide.children.length  === 0">
+						<a daff-tree-item [selected]="rla.isActive" [routerLink]="guide.path" routerLinkActive #rla="routerLinkActive" [routerLinkActiveOptions]="activeRouterLinkConfiguration">
+							<span daffTreeItemTitle>{{ guide.title }}</span>
+						</a>
+					</ng-container>
+					<ng-container *ngIf="guide.children.length > 0">
+						<daff-tree-item>
+							<div daffTreeItemTitle>{{ guide.title }}</div>
+							<ng-container *ngFor="let guide of guide.children">
+								<ng-container *ngIf="guide.children.length  === 0">
+									<a daff-tree-item [selected]="rla.isActive" [routerLink]="guide.path" routerLinkActive #rla="routerLinkActive" [routerLinkActiveOptions]="activeRouterLinkConfiguration">
+										<span daffTreeItemTitle>{{ guide.title }}</span>
+									</a>
+								</ng-container>
+								<ng-container *ngIf="guide.children.length > 0">
+									<daff-tree-item>
+										<div daffTreeItemTitle>{{ guide.title }}</div>
+										<ng-container *ngFor="let guide of guide.children">
+											<ng-container *ngIf="guide.children.length  === 0">
+												<a daff-tree-item [selected]="rla.isActive" [routerLink]="guide.path" routerLinkActive #rla="routerLinkActive" [routerLinkActiveOptions]="activeRouterLinkConfiguration">
+													<span daffTreeItemTitle>{{ guide.title }}</span>
+												</a>
+											</ng-container>
+											<ng-container *ngIf="guide.children.length > 0">
+												<daff-tree-item>
+													<div daffTreeItemTitle>{{ guide.title }}</div>
+													<ng-container *ngFor="let guide of guide.children">
+														<ng-container *ngIf="guide.children.length  === 0">
+															<a daff-tree-item [selected]="rla.isActive" [routerLink]="guide.path" routerLinkActive #rla="routerLinkActive" [routerLinkActiveOptions]="activeRouterLinkConfiguration">
+																<span daffTreeItemTitle>{{ guide.title }}</span>
+															</a>
+														</ng-container>
+													</ng-container>
+												</daff-tree-item>
+											</ng-container>
+										</ng-container>
+									</daff-tree-item>
+								</ng-container>
+							</ng-container>
+						</daff-tree-item>
+					</ng-container>
+				</ng-container>
+			</daff-tree-item>
+		</ng-container>
+	</ng-container>
+</daff-tree>
diff --git a/...av-tree/guides-nav-tree.component.spec.ts → ...s/guides-nav/guides-nav.component.spec.ts b/...av-tree/guides-nav-tree.component.spec.ts → ...s/guides-nav/guides-nav.component.spec.ts
@@ -8,15 +8,15 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { DaffLinkSetModule } from '@daffodil/design';
 
-import { DaffioGuidesNavTreeComponent } from './guides-nav-tree.component';
+import { DaffioGuidesNavComponent } from './guides-nav.component';
 
-describe('DaffioGuidesNavTreeComponent', () => {
-  let component: DaffioGuidesNavTreeComponent;
-  let fixture: ComponentFixture<DaffioGuidesNavTreeComponent>;
+describe('DaffioGuidesNavComponent', () => {
+  let component: DaffioGuidesNavComponent;
+  let fixture: ComponentFixture<DaffioGuidesNavComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [DaffioGuidesNavTreeComponent],
+      declarations: [DaffioGuidesNavComponent],
       imports: [
         RouterTestingModule,
         DaffLinkSetModule,
@@ -26,7 +26,7 @@ describe('DaffioGuidesNavTreeComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DaffioGuidesNavTreeComponent);
+    fixture = TestBed.createComponent(DaffioGuidesNavComponent);
     component = fixture.componentInstance;
     const guideWithoutChildren = {
       id: 'id2',
@@ -65,8 +65,8 @@ describe('DaffioGuidesNavTreeComponent', () => {
     expect(anchorTags.length).toEqual(2);
   });
 
-  it('should render a daff-nav-accordion-item for each guide', () => {
-    const daffNavAccordionItem = fixture.debugElement.queryAll(By.css('daff-nav-accordion-item'));
-    expect(daffNavAccordionItem.length).toEqual(4);
+  it('should render a daff-tree-item for each guide', () => {
+    const daffTreeItem = fixture.debugElement.queryAll(By.css('daff-tree-item'));
+    expect(daffTreeItem.length).toEqual(4);
   });
 });
diff --git a/...des-nav-tree/guides-nav-tree.component.ts → ...onents/guides-nav/guides-nav.component.ts b/...des-nav-tree/guides-nav-tree.component.ts → ...onents/guides-nav/guides-nav.component.ts
@@ -3,18 +3,22 @@ import {
   Component,
   Input,
 } from '@angular/core';
+import { RouterLinkActive } from '@angular/router';
 
 import { DaffioGuideList } from '../../../docs/models/guide-list';
 
 @Component({
-  selector: 'daffio-guides-nav-tree',
-  templateUrl: './guides-nav-tree.component.html',
-  styleUrls: ['guides-nav-tree.component.scss'],
+  selector: 'daffio-guides-nav',
+  templateUrl: './guides-nav.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffioGuidesNavTreeComponent {
+export class DaffioGuidesNavComponent {
   /**
    * The guide list to render
    */
   @Input() guideList: DaffioGuideList;
+
+  activeRouterLinkConfiguration: RouterLinkActive['routerLinkActiveOptions'] = {
+    exact: true,
+  };
 }
diff --git a/...guides-nav-tree/guides-nav-tree.module.ts → ...omponents/guides-nav/guides-nav.module.ts b/...guides-nav-tree/guides-nav-tree.module.ts → ...omponents/guides-nav/guides-nav.module.ts
@@ -5,25 +5,24 @@ import { RouterModule } from '@angular/router';
 import {
   DaffListModule,
   DaffLinkSetModule,
-  DaffAccordionModule,
 } from '@daffodil/design';
+import { DaffTreeModule } from '@daffodil/design/tree';
 
-import { DaffioGuidesNavTreeComponent } from './guides-nav-tree.component';
-
+import { DaffioGuidesNavComponent } from './guides-nav.component';
 
 @NgModule({
   declarations: [
-    DaffioGuidesNavTreeComponent,
+    DaffioGuidesNavComponent,
   ],
   exports: [
-    DaffioGuidesNavTreeComponent,
+    DaffioGuidesNavComponent,
   ],
   imports: [
     CommonModule,
+    RouterModule,
     DaffLinkSetModule,
     DaffListModule,
-    RouterModule,
-    DaffAccordionModule,
+    DaffTreeModule,
   ],
 })
-export class DaffioGuidesNavTreeModule { }
+export class DaffioGuidesNavModule { }
diff --git a/apps/daffio/src/app/guides/pages/guides-page.component.spec.ts b/apps/daffio/src/app/guides/pages/guides-page.component.spec.ts
@@ -49,7 +49,6 @@ describe('DaffioGuidesPageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DaffioGuidesPageComponent);
     component = fixture.componentInstance;
-    console.log(doc);
     stubActivatedRoute.data.next({ doc });
     fixture.detectChanges();
   });