List view checklist select mode

skyux-spa-visual-tests/src/app/list-view-checklist/list-view-checklist-visual.component.html

@@ -1,10 +1,19 @@
+<button
+  type="button"
+  class="sky-btn sky-btn-primary"
+  style="margin-bottom: 10px;"
+  (click)="toggleSelectMode()">
+  Switch select mode
+</button>
+
 <div id="screenshot-list-view-checklist" style="background-color: white">
   <sky-list [data]="data">
     <sky-list-toolbar></sky-list-toolbar>
     <sky-list-view-checklist
       label="column1"
       description="column2"
-      name="checklist">
+      name="checklist"
+      [selectMode]="selectMode">
     </sky-list-view-checklist>
   </sky-list>
 </div>

skyux-spa-visual-tests/src/app/list-view-checklist/list-view-checklist-visual.component.ts

@@ -8,6 +8,8 @@ import { Observable } from 'rxjs/Observable';
 })
 export class ListViewChecklistVisualComponent {
 
+  public selectMode: string = 'multiple';
+
   public data: Observable<Array<any>> = Observable.of([
     { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples'},
     { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
@@ -17,4 +19,12 @@ export class ListViewChecklistVisualComponent {
     { id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
     { id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
   ]);
+
+  public toggleSelectMode() {
+    if (this.selectMode === 'multiple') {
+      this.selectMode = 'single';
+    } else {
+      this.selectMode = 'multiple';
+    }
+  }
 }

skyux-spa-visual-tests/src/app/list-view-checklist/list-view-checklist.visual-spec.ts

@@ -26,4 +26,16 @@ describe('list-view-checklist component', () => {
     });
 
   });
+
+  it('should display checklist view single select', () => {
+    return SkyVisualTest.setupTest('list-view-checklist')
+    .then(() => {
+      element(by.css('.sky-btn.sky-btn-primary')).click();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'list-view-checklist-single',
+        selector: '#screenshot-list-view-checklist'
+      });
+    });
+
+  });
 });

src/app/components/list-view-checklist/index.html

@@ -6,6 +6,13 @@
   </sky-demo-page-summary>
 
   <sky-demo-page-properties>
+    <sky-demo-page-property
+      propertyName="selectMode"
+      [isOptional]="true"
+      defaultValue="multiple"
+    >
+       When set to single, the checklist will only allow selection of one item in the checklist.
+    </sky-demo-page-property>
     <sky-demo-page-property
         propertyName="name"
         [isOptional]="false"

src/app/components/list-view-checklist/list-view-checklist-demo.component.html

@@ -1,11 +1,37 @@
+<div style="margin-bottom: 10px;">
+  <h3>Selection mode</h3>
+  <div>
+    <sky-radio
+      name="selectMode"
+      [(ngModel)]="selectMode"
+      value="multiple">
+      <sky-radio-label>
+        Default select mode
+      </sky-radio-label>
+    </sky-radio>
+  </div>
+  <div>
+    <sky-radio
+      name="selectMode"
+      [(ngModel)]="selectMode"
+      value="single">
+      <sky-radio-label>
+        Single select mode
+      </sky-radio-label>
+    </sky-radio>
+  </div>
+</div>
+
+
 <sky-list
   [data]="items"
   (selectedIdsChange)="selectedItemsChange($event)">
   <sky-list-toolbar>
   </sky-list-toolbar>
   <sky-list-view-checklist
     label="column2"
-    description="column3">
+    description="column3"
+    [selectMode]="selectMode">
   </sky-list-view-checklist>
 </sky-list>
 <div>

src/app/components/list-view-checklist/list-view-checklist-demo.component.ts

@@ -24,6 +24,8 @@ export class SkyListViewChecklistDemoComponent {
 
   public selectedItems: Array<any> = [];
 
+  public selectMode: string = 'multiple';
+
   public selectedItemsChange(selectedMap: Map<string, boolean>) {
     this.items.take(1).subscribe((items) => {
       this.selectedItems = items.filter((item) => {

src/modules/list-toolbar/list-toolbar.component.html

@@ -37,7 +37,7 @@
           </sky-list-toolbar-item-renderer>
         </sky-toolbar-item>
       </sky-toolbar-section>
-      <sky-toolbar-section>
+      <sky-toolbar-section [hidden]="!(hasAdditionalToolbarSection | async)">
         <sky-toolbar-item  *ngFor="let item of leftTemplates | async">
           <sky-list-toolbar-item-renderer
             [template]="item.template"

src/modules/list-toolbar/list-toolbar.component.spec.ts

@@ -1,6 +1,8 @@
 import {
   TestBed,
   async,
+  fakeAsync,
+  tick,
   ComponentFixture
 } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
@@ -210,6 +212,28 @@ describe('List Toolbar Component', () => {
 
       }));
 
+      it('should remove sort when sort selectors not available', fakeAsync(() => {
+        initializeToolbar();
+        tick();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          tick();
+          dispatcher.sortSetGlobal([]);
+          dispatcher.sortSetAvailable([]);
+          fixture.detectChanges();
+          tick();
+          fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+            state.take(1).subscribe((current) => {
+              expect(current.toolbar.items
+              .filter((item) => { return item.id === 'sort-selector'; }).length).toBe(0);
+            });
+          });
+        });
+      }));
+
       it('should not display when sortSelectorEnabled is false', async(() => {
         component.sortEnabled = false;
         initializeToolbar();

src/modules/list-toolbar/list-toolbar.component.ts

@@ -102,6 +102,8 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
 
   public inlineFilterBarExpanded: boolean = false;
 
+  public hasAdditionalToolbarSection: Observable<boolean>;
+
   @ContentChildren(SkyListToolbarItemComponent)
   private toolbarItems: QueryList<SkyListToolbarItemComponent>;
 
@@ -123,6 +125,8 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
   @ViewChild('inlineFilterButton')
   private inlineFilterButtonTemplate: TemplateRef<any>;
 
+  private hasSortSelectors: boolean = false;
+
   constructor(
     private state: ListState,
     private dispatcher: ListStateDispatcher,
@@ -145,6 +149,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
 
     getValue(this.toolbarType, (type: string) => {
       this.dispatcher.next(new ListToolbarSetTypeAction(this.toolbarType));
+
     });
 
     getValue(this.sortSelectorEnabled, (sortSelectorEnabled: any) =>
@@ -155,22 +160,28 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
       )
      );
 
-    this.dispatcher.toolbarAddItems([
-      this.toolbarType !== 'search' ?
-        new ListToolbarItemModel({
-          id: 'search',
-          template: this.searchTemplate,
-          location: 'center'
-        }) : undefined,
-        new ListToolbarItemModel({
-          id: 'sort-selector',
-          template: this.sortSelectorTemplate,
-          location: 'right'
-        })
-    ].filter(item => item !== undefined));
-
     this.sortSelectors = this.getSortSelectors();
 
+    // Initialize the sort toolbar item if necessary
+    this.sortSelectors.distinctUntilChanged().subscribe((currentSort) => {
+
+      if (currentSort.length > 0 && !this.hasSortSelectors) {
+        this.hasSortSelectors = true;
+        this.dispatcher.toolbarAddItems([
+          new ListToolbarItemModel({
+            id: 'sort-selector',
+            template: this.sortSelectorTemplate,
+            location: 'right'
+          })
+        ], 0);
+      } else if (currentSort.length < 1 && this.hasSortSelectors) {
+        this.hasSortSelectors = false;
+        this.dispatcher.toolbarRemoveItems([
+          'sort-selector'
+        ]);
+      }
+    });
+
     this.searchTextInput = this.state.map(s => s.search.searchText).distinctUntilChanged();
 
     this.view = this.state.map(s => s.views.active).distinctUntilChanged();
@@ -183,6 +194,20 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
 
     this.type = this.state.map((state) => state.toolbar.type).distinctUntilChanged();
 
+    this.type.subscribe((toolbarType) => {
+      if (toolbarType === 'search') {
+        this.dispatcher.toolbarRemoveItems(['search']);
+      } else {
+        this.dispatcher.toolbarAddItems([
+          new ListToolbarItemModel({
+            id: 'search',
+            template: this.searchTemplate,
+            location: 'center'
+          })
+        ]);
+      }
+    });
+
     this.isSearchEnabled = this.toolbarState.map(s => s.config)
       .distinctUntilChanged().map(c => c.searchEnabled);
 
@@ -194,24 +219,27 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
     })
     .distinctUntilChanged()
     .map((filters) => {
-      let activeFilters = filters
-        .filter((f) => {
+      let activeFilters = filters.filter((f) => {
           return f.value !== '' &&
             f.value !== undefined &&
             f.value !== false &&
             f.value !== f.defaultValue;
         });
       return activeFilters.length > 0;
     });
+
+    this.hasAdditionalToolbarSection = this.state.map((current) => {
+      return current.toolbar.items.length > 0;
+    });
   }
 
   public ngAfterContentInit() {
-    this.toolbarItems.forEach(toolbarItem =>
+    this.toolbarItems.forEach((toolbarItem) => {
       this.dispatcher.toolbarAddItems(
         [new ListToolbarItemModel(toolbarItem)],
         toolbarItem.index
-      )
-    );
+      );
+    });
 
     let sortModels = this.toolbarSorts.map(sort =>
       new ListSortLabelModel(
@@ -273,12 +301,13 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
         global: Array<ListSortLabelModel>,
         fieldSelectors: Array<ListSortFieldSelectorModel>
       ) => {
+
         // Get sorts that are in the global that are not in the available
         let sorts = global.filter(
           g => available.filter(a => a.fieldSelector === g.fieldSelector).length === 0
         );
 
-        return [...sorts, ...available].map(sortLabels => {
+        let resultSortSelectors = [...sorts, ...available].map(sortLabels => {
           let fs = fieldSelectors.filter(f => {
             return f.fieldSelector === sortLabels.fieldSelector
               && f.descending === sortLabels.descending;
@@ -293,6 +322,8 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit {
             selected: selected
           };
         });
+
+        return resultSortSelectors;
       });
   }
 

src/modules/list-view-checklist/fixtures/list-view-checklist-toolbar.component.fixture.html

@@ -4,6 +4,7 @@
   <sky-list-toolbar>
   </sky-list-toolbar>
   <sky-list-view-checklist
+    [selectMode]="selectMode"
     label="column2"
     description="column3">
   </sky-list-view-checklist>

src/modules/list-view-checklist/fixtures/list-view-checklist-toolbar.component.fixture.ts

@@ -9,6 +9,7 @@ import {
 })
 export class ListViewChecklistToolbarTestComponent {
   public selectedItems: Map<string, boolean>;
+  public selectMode: string = 'multiple';
 
   constructor(@Inject('items') public items: any) {
   }

src/modules/list-view-checklist/list-view-checklist-item.component.scss

@@ -27,4 +27,19 @@
     cursor: pointer;
     padding-left: $sky-padding;
   }
+
+  /deep/ .sky-list-view-checklist-single-button {
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px dotted $sky-color-gray-lighter;
+    display: block;
+    text-align: left;
+    margin-bottom: 0;
+    padding: $sky-padding;
+    width: 100%;
+    cursor: pointer;
+  }
+  /deep/ .sky-list-view-checklist-single-button.sky-list-view-checklist-row-selected {
+    background-color: $sky-selected-color;
+  }
 }