fix(quicknote): Fixing quick note demo and clean up

bullhorn · Jun 19, 2017 · 305550a · 305550a
1 parent da09b47
commit 305550a
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 25 deletions.
diff --git a/demo/main.module.ts b/demo/main.module.ts
@@ -13,6 +13,7 @@ import { ColorComponent, CompositionComponent, TypographyComponent, IconographyC
 import {
     ButtonDemoComponent,
     RadioDemoComponent,
+    CustomQuickNoteResults,
     QuickNoteDemoComponent,
     ModalDemoComponent,
     FormDemoComponent,
@@ -62,6 +63,7 @@ import './demo.scss';
         IconographyComponent,
         ButtonDemoComponent,
         RadioDemoComponent,
+        CustomQuickNoteResults,
         QuickNoteDemoComponent,
         ModalDemoComponent,
         FormDemoComponent,
@@ -134,6 +136,7 @@ import './demo.scss';
         ImageCell,
         ActionsCell,
         CustomPickerResults,
+        CustomQuickNoteResults,
         CustomDemoComponent
     ],
     bootstrap: [DemoComponent]

diff --git a/demo/pages/elements/form/FormDemo.ts b/demo/pages/elements/form/FormDemo.ts
@@ -150,7 +150,7 @@ export class FormDemoComponent {
             },
             options: {
                 tags: ['First', 'Second'],
-                references: ['Third', 'Forth'],
+                references: ['Third', 'Fourth'],
                 boos: ['Test']
             },
             renderer: {

diff --git a/demo/pages/elements/quick-note/QuickNoteDemo.scss b/demo/pages/elements/quick-note/QuickNoteDemo.scss
@@ -2,4 +2,10 @@
     div.data {
         padding: 10px;
     }
+    quick-note-results,
+    .quick-note-results {
+        novo-list {
+            width: 100%;
+        }
+    }
 }
diff --git a/demo/pages/elements/quick-note/QuickNoteDemo.ts b/demo/pages/elements/quick-note/QuickNoteDemo.ts
@@ -14,15 +14,17 @@ import { QuickNoteResults } from './../../../../index';
     },
     template: `
         <novo-loading theme="line" *ngIf="isLoading && !matches.length"></novo-loading>
-        <ul *ngIf="matches.length > 0">
-            <li
+        <novo-list *ngIf="matches.length > 0">
+            <novo-list-item
                 *ngFor="let match of matches"
                 (click)="selectMatch($event)"
                 [class.active]="match===activeMatch"
                 (mouseenter)="selectActive(match)">
-                **CUSTOM** <b [innerHtml]="highlight(match.label, term)"></b>
-            </li>
-        </ul>
+                <item-content>
+                    **CUSTOM** <b [innerHtml]="highlight(match.label, term)"></b>
+                </item-content>
+            </novo-list-item>
+        </novo-list>
         <p class="picker-error" *ngIf="hasError">Oops! An error occured.</p>
         <p class="picker-null" *ngIf="!isLoading && !matches.length && !hasError">No results to display...</p>
     `
@@ -60,24 +62,24 @@ export class QuickNoteDemoComponent {
     private CustomQuickNoteDemoTpl:string = CustomQuickNoteDemoTpl;
     private CustomQuickNoteResultsDemoTpl:string = CustomQuickNoteResultsDemoTpl;
     private placeholder:string = 'Enter your note text here. Reference people and distribution lists using @ (eg. @John Smith). Reference other records using # (e.g. #Project Manager)';
-    private config:any;
+    private basic:any;
     private custom:any;
-    private custom2:any;
+    private customResults:any;
 
     constructor() {
         let customData = {
             tags: [{ id: 1, name: 'OH YA!', test: 'TWO' }, { id: 2, name: 'TAGGING!', test: 'ONE' }],
             references: [{ id: 1, title: 'Awesome Reference' }, { id: 2, title: 'Angular2' }]
         };
-        this.config = {
+        this.basic = {
             triggers: {
                 tags: '@',
                 references: '#',
                 boos: '^'
             },
             options: {
                 tags: ['First', 'Second'],
-                references: ['Third', 'Forth'],
+                references: ['Third', 'Fourth'],
                 boos: ['Test']
             },
             renderer: {
@@ -126,7 +128,7 @@ export class QuickNoteDemoComponent {
                 }
             }
         };
-        this.custom2 = {
+        this.customResults = {
             resultsTemplate: CustomQuickNoteResults,
             triggers: {
                 names: '@',

diff --git a/demo/pages/elements/quick-note/templates/BasicQuickNote.html b/demo/pages/elements/quick-note/templates/BasicQuickNote.html
@@ -1,4 +1,4 @@
-<novo-quick-note [(ngModel)]="note" [placeholder]="placeholder" [config]="config"></novo-quick-note>
+<novo-quick-note [(ngModel)]="note" [placeholder]="placeholder" [config]="basic"></novo-quick-note>
 <div class="data">
     <p>Note: {{note | json}}</p>
 </div>
diff --git a/demo/pages/elements/quick-note/templates/CustomQuickNoteResults.html b/demo/pages/elements/quick-note/templates/CustomQuickNoteResults.html
@@ -1,4 +1,4 @@
-<novo-quick-note [(ngModel)]="note3" [placeholder]="placeholder" [config]="custom2"></novo-quick-note>
+<novo-quick-note [(ngModel)]="note3" [placeholder]="placeholder" [config]="customResults"></novo-quick-note>
 <div class="data">
     <p>Note: {{note3 | json}}</p>
 </div>
diff --git a/src/elements/picker/extras/base-picker-results/BasePickerResults.ts b/src/elements/picker/extras/base-picker-results/BasePickerResults.ts
@@ -205,20 +205,23 @@ export class BasePickerResults {
         return this.element.nativeElement;
     }
 
-    getChildenOfListElement() {
-        let list = this.getListElement();
-        return list.children;
+    getChildrenOfListElement() {
+        let children = [];
+        if (this.getListElement()) {
+            children = this.getListElement().children;
+        }
+        return children;
     }
 
     scrollToActive() {
         let list = this.getListElement();
-        let items = this.getChildenOfListElement();
+        let items = this.getChildrenOfListElement();
         let index = this.matches.indexOf(this.activeMatch);
         let item = items[index];
         if (item) {
             list.scrollTop = item.offsetTop;
         } else {
-            console.warn('BasePickerResults - could not find result item to scroll to, try overriding getListElement() or getChildenOfListElement() in your PickerResults Component'); // tslint: disable-line
+            console.warn('BasePickerResults - could not find result item to scroll to, try overriding getListElement() or getChildrenOfListElement() in your PickerResults Component'); // tslint: disable-line
         }
     }
 

diff --git a/src/elements/quick-note/extras/quick-note-results/QuickNoteResults.spec.ts b/src/elements/quick-note/extras/quick-note-results/QuickNoteResults.spec.ts
@@ -4,6 +4,7 @@ import { TestBed, async } from '@angular/core/testing';
 import { QuickNoteResults } from './QuickNoteResults';
 import { NovoLabelService } from '../../../../services/novo-label-service';
 import { NovoLoadingElement } from '../../../loading/Loading';
+import { NovoListElement, NovoListItemElement, NovoItemContentElement } from '../../../list/List';
 
 describe('Elements: QuickNoteResults', () => {
     describe('Extras: ', () => {
@@ -14,7 +15,10 @@ describe('Elements: QuickNoteResults', () => {
             TestBed.configureTestingModule({
                 declarations: [
                     QuickNoteResults,
-                    NovoLoadingElement
+                    NovoLoadingElement,
+                    NovoListElement,
+                    NovoListItemElement,
+                    NovoItemContentElement
                 ],
                 providers: [
                     { provide: NovoLabelService, useClass: NovoLabelService }

diff --git a/src/elements/quick-note/extras/quick-note-results/QuickNoteResults.ts b/src/elements/quick-note/extras/quick-note-results/QuickNoteResults.ts
@@ -14,15 +14,17 @@ import { NovoLabelService } from '../../../../services/novo-label-service';
     },
     template: `
         <novo-loading theme="line" *ngIf="isLoading && !matches.length"></novo-loading>
-        <ul *ngIf="matches.length > 0">
-            <li
+        <novo-list *ngIf="matches.length > 0">
+            <novo-list-item
                 *ngFor="let match of matches"
                 (click)="selectMatch($event)"
                 [class.active]="match===activeMatch"
                 (mouseenter)="selectActive(match)">
-                <span [innerHtml]="highlight(match.label, term)"></span>
-            </li>
-        </ul>
+                <item-content>
+                    <p [innerHtml]="highlight(match.label, term)"></p>
+                </item-content>
+            </novo-list-item>
+        </novo-list>
         <p class="picker-error" *ngIf="hasError">{{ labels.quickNoteError }}</p>
         <p class="picker-null" *ngIf="!isLoading && !matches.length && !hasError">{{ labels.quickNoteEmpty }}</p>
     `
@@ -110,7 +112,6 @@ export class QuickNoteResults extends PickerResults {
         });
     }
 
-
     /**
      * @name selectMatch
      * @param event