Restore basic and compound example, add a new one to showcase trackBy…

… usage
patternfly · Aug 2, 2018 · 00e7e3d · 00e7e3d
1 parent a196c47
commit 00e7e3d
Show file tree

Hide file tree

Showing 9 changed files with 367 additions and 52 deletions.
diff --git a/src/app/list/basic-list/example/list-basic-example.component.html b/src/app/list/basic-list/example/list-basic-example.component.html
@@ -8,7 +8,6 @@
             [expandTemplate]="expandTemplate"
             [items]="items"
             [itemTemplate]="itemTemplate"
-            [trackByFn]="getTrackBy"
             (onActionSelect)="handleAction($event, null)"
             (onClick)="handleClick($event)"
             (onDblClick)="handleDblClick($event)"

diff --git a/src/app/list/basic-list/example/list-basic-example.component.ts b/src/app/list/basic-list/example/list-basic-example.component.ts
@@ -27,7 +27,6 @@ export class ListBasicExampleComponent implements OnInit {
   itemsAvailable: boolean = true;
   listConfig: ListConfig;
   selectType: string = 'checkbox';
-  setItemInterval: number;
 
   constructor() {
   }
@@ -115,6 +114,7 @@ export class ListBasicExampleComponent implements OnInit {
       nodeCount: 10,
       imageCount: 8
     }];
+    this.items = cloneDeep(this.allItems);
 
     this.emptyStateConfig = {
       actions: {
@@ -159,22 +159,11 @@ export class ListBasicExampleComponent implements OnInit {
       showRadioButton: false,
       useExpandItems: false
     } as ListConfig;
-
-    this.setItemInterval = setInterval(() => this.setItems(), 1000);
-    this.setItems();
   }
 
   ngDoCheck(): void {
   }
 
-  ngOnDestroy(): void {
-    clearInterval(this.setItemInterval);
-  }
-
-  setItems(): void {
-    this.items = cloneDeep(this.allItems);
-  }
-
   /**
    * Get the ActionConfig properties for each row
    *
@@ -261,17 +250,6 @@ export class ListBasicExampleComponent implements OnInit {
     return actionConfig;
   }
 
-  /**
-   * Get the tracking id to use for each row
-   *
-   * @param index The current row index
-   * @param item The current row item
-   * @returns number
-   */
-  getTrackBy(index: number, item: any): any {
-    return index;
-  }
-
   // Actions
 
   handleAction($event: Action, item: any): void {

diff --git a/src/app/list/basic-list/example/list-compound-example.component.html b/src/app/list/basic-list/example/list-compound-example.component.html
@@ -8,7 +8,6 @@
             [expandTemplate]="expandTemplate"
             [items]="items"
             [itemTemplate]="itemTemplate"
-            [trackByFn]="getTrackBy"
             (onActionSelect)="handleAction($event, null)"
             (onClick)="handleClick($event)">
           <ng-template #itemTemplate let-item="item">

diff --git a/src/app/list/basic-list/example/list-compound-example.component.ts b/src/app/list/basic-list/example/list-compound-example.component.ts
@@ -1,6 +1,5 @@
 import {
   Component,
-  OnDestroy,
   OnInit,
   ViewEncapsulation
 } from '@angular/core';
@@ -9,20 +8,18 @@ import { Action } from '../../../action/action';
 import { ActionConfig } from '../../../action/action-config';
 import { ListEvent } from '../../list-event';
 import { ListConfig } from '../list-config';
-import { cloneDeep } from 'lodash';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'list-compound-example',
   templateUrl: './list-compound-example.component.html'
 })
-export class ListCompoundExampleComponent implements OnInit, OnDestroy {
+export class ListCompoundExampleComponent implements OnInit {
   actionConfig: ActionConfig;
   actionsText: string = '';
   allItems: any[];
   items: any[];
   listConfig: ListConfig;
-  setItemInterval: number;
 
   constructor() {
   }
@@ -110,7 +107,7 @@ export class ListCompoundExampleComponent implements OnInit, OnDestroy {
       nodeCount: 10,
       imageCount: 8
     }];
-    this.items = cloneDeep(this.allItems);
+    this.items = this.allItems;
 
     this.actionConfig = {
       primaryActions: [{
@@ -158,27 +155,11 @@ export class ListCompoundExampleComponent implements OnInit, OnDestroy {
       showCheckbox: false,
       useExpandItems: false
     } as ListConfig;
-
-
-    this.setItemInterval = setInterval(() => this.setItems(), 1000);
-    this.setItems();
   }
 
   ngDoCheck(): void {
   }
 
-  ngOnDestroy(): void {
-    clearInterval(this.setItemInterval);
-  }
-
-  setItems(): void {
-    this.items = cloneDeep(this.items);
-  }
-
-  getTrackBy(index: number, item: any): any {
-    return index;
-  }
-
   // Actions
 
   handleAction($event: Action, item: any): void {

diff --git a/src/app/list/basic-list/example/list-example.component.html b/src/app/list/basic-list/example/list-example.component.html
@@ -18,5 +18,8 @@ <h4>List Component Example</h4>
     <tab heading="Heading" (select)="tabSelected($event)">
       <list-heading-example *ngIf="activeTab === 'Heading'"></list-heading-example>
     </tab>
+    <tab heading="Polling" (select)="tabSelected($event)">
+      <list-polling-example *ngIf="activeTab === 'Polling'"></list-polling-example>
+    </tab>
   </tabset>
 </div>
diff --git a/src/app/list/basic-list/example/list-example.module.ts b/src/app/list/basic-list/example/list-example.module.ts
@@ -16,6 +16,7 @@ import { ListModule } from '../list.module';
 import { ListBasicExampleComponent } from './list-basic-example.component';
 import { ListCompoundExampleComponent } from './list-compound-example.component';
 import { ListHeadingExampleComponent } from './list-heading-example.component';
+import { ListPollingExampleComponent } from './list-polling-example.component';
 import { ListExampleComponent } from './list-example.component';
 import { ListPinExampleComponent } from './list-pin-example.component';
 import { NodesContentComponent } from './content/nodes-content.component';
@@ -30,6 +31,7 @@ import { SortArrayPipeModule } from '../../../pipe/sort-array';
     ListBasicExampleComponent,
     ListCompoundExampleComponent,
     ListHeadingExampleComponent,
+    ListPollingExampleComponent,
     ListExampleComponent,
     ListPinExampleComponent,
     NodesContentComponent

diff --git a/src/app/list/basic-list/example/list-polling-example.component.html b/src/app/list/basic-list/example/list-polling-example.component.html
@@ -0,0 +1,159 @@
+<div class="padding-15">
+  <div class="row">
+    <div class="col-sm-12">
+      <div class="form-group">
+        <pfng-list id="myList"
+            [actionTemplate]="actionTemplate"
+            [config]="listConfig"
+            [expandTemplate]="expandTemplate"
+            [items]="items"
+            [itemTemplate]="itemTemplate"
+            [trackBy]="trackByIndex"
+            (onActionSelect)="handleAction($event, null)"
+            (onClick)="handleClick($event)"
+            (onDblClick)="handleDblClick($event)"
+            (onSelectionChange)="handleSelectionChange($event)">
+          <ng-template #itemTemplate let-item="item" let-index="index">
+            <div class="list-pf-left">
+              <span class="fa {{item.typeIcon}} list-pf-icon list-pf-icon-bordered list-pf-icon-small"></span>
+            </div>
+            <div class="list-pf-content-wrapper">
+              <div class="list-pf-main-content">
+                <div class="list-pf-title">{{item.name}}</div>
+                <div class="list-pf-description text-overflow-pf">{{item.address}}</div>
+              </div>
+              <div class="list-pf-additional-content">
+                <div>
+                  <span class="pficon pficon-screen"></span>
+                  <strong>{{item.hostCount}}</strong> Hosts
+                </div>
+                <div>
+                  <span class="pficon pficon-cluster"></span>
+                  <strong>{{item.clusterCount}}</strong> Clusters
+                </div>
+                <div>
+                  <span class="pficon pficon-container-node"></span>
+                  <strong>{{item.nodeCount}}</strong> Nodes
+                </div>
+                <div>
+                  <span class="pficon pficon-image"></span>
+                  <strong>{{item.imageCount}}</strong> Images
+                </div>
+              </div>
+            </div>
+          </ng-template>
+          <ng-template #actionTemplate let-item="item" let-index="index">
+            <pfng-action class="list-pf-actions"
+                [config]="actionConfig"
+                (onActionSelect)="handleAction($event, item)">
+            </pfng-action>
+          </ng-template>
+          <ng-template #expandTemplate let-item="item" let-index="index">
+            <p>This should stay open while the list updates.</p>
+            <basic-content [item]="item"></basic-content>
+          </ng-template>
+        </pfng-list>
+      </div>
+    </div>
+  </div>
+  <div class="row padding-top-10">
+    <div class="col-sm-12">
+      <h4 class="actions-label">Settings</h4>
+      <hr/>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <form role="form">
+        <div class="form-group">
+          <label class="radio-inline">
+            <input id="selectType1" name="selectType" type="radio"
+                   [(ngModel)]="selectType" value="checkbox" (ngModelChange)="updateSelectionType()">Checkbox
+          </label>
+          <label class="radio-inline">
+            <input id="selectType2" name="selectType" type="radio"
+                   [(ngModel)]="selectType" value="radio" (ngModelChange)="updateSelectionType()">Radio Button
+          </label>
+          <label class="radio-inline">
+            <input id="selectType3" name="selectType" type="radio"
+                   [(ngModel)]="selectType" value="row" (ngModelChange)="updateSelectionType()">Row
+          </label>
+          <label class="radio-inline">
+            <input id="selectType4" name="selectType" type="radio"
+                   [(ngModel)]="selectType" value="none" (ngModelChange)="updateSelectionType()">None
+          </label>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <form role="form">
+        <div class="form-group">
+          <label class="checkbox-inline">
+            <input id="dblClick" name="dblClick" type="checkbox"
+                   [(ngModel)]="listConfig.dblClick"
+                   (ngModelChange)="listConfig.multiSelect = false">Double Click
+          </label>
+          <label class="checkbox-inline">
+            <input id="multiSelect" name="multiSelect" type="checkbox"
+                   [(ngModel)]="listConfig.multiSelect"
+                   [disabled]="listConfig.dblClick">Multi Select
+          </label>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <form role="form">
+        <div class="form-group">
+          <label class="checkbox-inline">
+            <input id="useExpandingRows" name="useExpandingRows" type="checkbox"
+                   [(ngModel)]="listConfig.useExpandItems">Simple Expansion
+          </label>
+          <label class="checkbox-inline">
+            <input id="itemsAvailable" name="itemsAvailable" type="checkbox"
+                   [(ngModel)]="itemsAvailable"
+                   (ngModelChange)="updateItemsAvailable()">Items Available
+          </label>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <button (click)="resetItems()">Reset items</button>
+    </div>
+  </div>
+  <div class="row padding-top-10">
+    <div class="col-sm-12">
+      <h4 class="actions-label">Actions</h4>
+      <hr/>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <textarea rows="3" class="col-sm-12">{{actionsText}}</textarea>
+    </div>
+  </div>
+  <div class="row padding-top-10">
+    <div class="col-sm-12">
+      <h4>Code</h4>
+      <hr/>
+    </div>
+  </div>
+  <div>
+    <tabset>
+      <tab heading="api">
+        <iframe class="demoframe" src="docs/classes/listcomponent.html"></iframe>
+      </tab>
+      <tab heading="html">
+        <include-content src="src/app/list/basic-list/example/list-basic-example.component.html"></include-content>
+      </tab>
+      <tab heading="typescript">
+        <include-content src="src/app/list/basic-list/example/list-basic-example.component.ts"></include-content>
+      </tab>
+    </tabset>
+  </div>
+</div>