Contrib > Checklist "show selected items"

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

@@ -18,7 +18,7 @@ describe('list-view-checklist component', () => {
   it('should display checklist view with checked', () => {
     return SkyVisualTest.setupTest('list-view-checklist')
     .then(() => {
-      element(by.css('sky-checkbox')).click();
+      element(by.css('.sky-list-view-checklist sky-checkbox')).click();
       return SkyVisualTest.compareScreenshot({
         screenshotName: 'list-view-checklist-checked',
         selector: '#screenshot-list-view-checklist'
@@ -27,6 +27,19 @@ describe('list-view-checklist component', () => {
 
   });
 
+  it('should display only checked items when "only show selected items" is checked', () => {
+    return SkyVisualTest.setupTest('list-view-checklist')
+    .then(() => {
+      element(by.css('.sky-list-view-checklist sky-checkbox')).click();
+      element(by.css('#sky-list-view-checklist-show-selected')).click();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'list-view-checklist-only-show-selected-items',
+        selector: '#screenshot-list-view-checklist'
+      });
+    });
+
+  });
+
   it('should display checklist view single select', () => {
     return SkyVisualTest.setupTest('list-view-checklist')
     .then(() => {

src/locales/resources_en_US.json

@@ -39,6 +39,10 @@
     "_description": "Text for the link in a checklist to select all items.",
     "message": "Select all"
   },
+  "checklist_show_selected": {
+    "_description": "Text for the checkbox in a checklist to show only selected items.",
+    "message": "Only show selected items"
+  },
   "chevron_collapse": {
     "_description": "Screen reader text for when clicking the chevron would collapse the corresponding section",
     "message": "Collapse"

src/modules/filter/filter-button.component.html

@@ -4,6 +4,7 @@
   [attr.aria-controls]="ariaControls"
   [attr.aria-expanded]="ariaExpanded"
   [attr.title]="'filter_button_title' | skyResources"
+  [disabled]="disabled"
   [id]="filterButtonId"
   [ngClass]="{'sky-filter-btn-active sky-rounded-corners': active}"
   (click)="filterButtonOnClick()">

src/modules/filter/filter-button.component.ts

@@ -37,6 +37,9 @@ export class SkyFilterButtonComponent {
   @Input()
   public showButtonText = false;
 
+  @Input()
+  public disabled: boolean = false;
+
   @Output()
   public filterButtonClick: EventEmitter<any> = new EventEmitter();
 

src/modules/list-column-selector-action/list-column-selector-action.spec.ts

@@ -8,10 +8,18 @@ import {
   tick
 } from '@angular/core/testing';
 
+import {
+  DebugElement
+} from '@angular/core';
+
 import {
   NoopAnimationsModule
 } from '@angular/platform-browser/animations';
 
+import {
+  By
+} from '@angular/platform-browser';
+
 import {
   RouterTestingModule
 } from '@angular/router/testing';
@@ -103,8 +111,6 @@ describe('List column selector action', () => {
       secondaryActionsService: SkyListSecondaryActionsService;
 
     beforeEach(() => {
-      dispatcher = new ListStateDispatcher();
-      state = new ListState(dispatcher);
       secondaryActionsService = jasmine.createSpyObj(
         'SkyListSecondaryActionsService',
         ['addSecondaryAction', 'removeSecondaryAction']
@@ -132,8 +138,8 @@ describe('List column selector action', () => {
         .overrideComponent(SkyListComponent, {
           set: {
             providers: [
-              { provide: ListState, useValue: state },
-              { provide: ListStateDispatcher, useValue: dispatcher }
+              ListState,
+              ListStateDispatcher
             ]
           }
         });
@@ -149,6 +155,10 @@ describe('List column selector action', () => {
       nativeElement = fixture.nativeElement as HTMLElement;
       fixture.detectChanges();
 
+      let skyListDebugEl: DebugElement = fixture.debugElement.query(By.directive(SkyListComponent));
+      state = skyListDebugEl.injector.get(ListState);
+      dispatcher = skyListDebugEl.injector.get(ListStateDispatcher);
+
       // always skip the first update to ListState, when state is ready
       // run detectChanges once more then begin tests
       state.skip(1).take(1).subscribe(() => fixture.detectChanges());
@@ -251,9 +261,6 @@ describe('List column selector action', () => {
       component: ListColumnSelectorActionDeprecatedTestComponent;
 
     beforeEach(() => {
-      dispatcher = new ListStateDispatcher();
-      state = new ListState(dispatcher);
-
       TestBed.configureTestingModule({
         declarations: [
           ListColumnSelectorActionDeprecatedTestComponent
@@ -273,8 +280,8 @@ describe('List column selector action', () => {
         .overrideComponent(SkyListComponent, {
           set: {
             providers: [
-              { provide: ListState, useValue: state },
-              { provide: ListStateDispatcher, useValue: dispatcher }
+              ListStateDispatcher,
+              ListState
             ]
           }
         });
@@ -284,6 +291,10 @@ describe('List column selector action', () => {
       fixture = TestBed.createComponent(ListColumnSelectorActionDeprecatedTestComponent);
       nativeElement = fixture.nativeElement as HTMLElement;
       component = fixture.componentInstance;
+
+      let skyListDebugEl: DebugElement = fixture.debugElement.query(By.directive(SkyListComponent));
+      state = skyListDebugEl.injector.get(ListState);
+      dispatcher = skyListDebugEl.injector.get(ListStateDispatcher);
     });
 
     beforeEach(inject([SkyModalService], (_modalService: SkyModalService) => {

src/modules/list-data-provider-in-memory/list-data-in-memory.provider.ts

@@ -38,7 +38,7 @@ export class SkyListInMemoryDataProvider extends ListDataProvider {
     if (data) {
       data.subscribe(items => {
         this.items.next(items.map(d =>
-          new ListItemModel(d.id || moment().toDate().getTime().toString() , d)
+          new ListItemModel(d.id || moment().toDate().getTime().toString(), d)
         ));
       });
     }
@@ -50,48 +50,59 @@ export class SkyListInMemoryDataProvider extends ListDataProvider {
 
   public get(request: ListDataRequestModel): Observable<ListDataResponseModel> {
     return this.filteredItems(request).map((result: Array<ListItemModel>) => {
-        if (request.pageNumber && request.pageSize) {
-          let itemStart = (request.pageNumber - 1) * request.pageSize;
-          let pagedResult = result.slice(itemStart, itemStart + request.pageSize);
-          return new ListDataResponseModel({
-            count: result.length,
-            items: pagedResult
-          });
-        } else {
-          return new ListDataResponseModel({
-            count: result.length,
-            items: result
-          });
-        }
+      if (request.pageNumber && request.pageSize) {
+        let itemStart = (request.pageNumber - 1) * request.pageSize;
+        let pagedResult = result.slice(itemStart, itemStart + request.pageSize);
+        return new ListDataResponseModel({
+          count: result.length,
+          items: pagedResult
+        });
+      } else {
+        return new ListDataResponseModel({
+          count: result.length,
+          items: result
+        });
+      }
 
     });
   }
 
   private filteredItems(request: ListDataRequestModel): Observable<Array<ListItemModel>> {
+    const showSelectedId = ['show-selected'];
+
     return this.items.map(items => {
       let dataChanged = false;
       let search = request.search;
       let sort = request.sort;
-      let filters = request.filters;
+      let filters: ListFilterModel[] = request.filters;
 
       if (this.lastItems === undefined || this.lastItems !== items) {
         dataChanged = true;
         this.lastItems = items;
       }
 
       let searchChanged = false;
-      if (this.lastSearch === undefined || this.lastSearch !== search) {
-        searchChanged = true;
-        this.lastSearch = search;
-      }
-
       let filtersChanged = false;
 
-      if (this.lastFilters === undefined || this.lastFilters !== filters) {
+      if (request.isToolbarDisabled) {
+        searchChanged = true;
+        search = new ListSearchModel();
+
+        filters = filters.filter(f => showSelectedId.indexOf(f.name) >= 0);
         filtersChanged = true;
-        this.lastFilters = filters;
+      } else {
+        if (this.lastSearch === undefined || this.lastSearch !== search) {
+          searchChanged = true;
+        }
+
+        if (this.lastFilters === undefined || this.lastFilters !== filters) {
+          filtersChanged = true;
+        }
       }
 
+      this.lastSearch = search;
+      this.lastFilters = filters;
+
       let result = items;
 
       if (!dataChanged && !filtersChanged && this.lastFilterResults !== undefined) {

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

@@ -4,24 +4,24 @@
     <sky-toolbar-section>
       <sky-toolbar-item *ngFor="let item of leftTemplates">
         <sky-list-toolbar-item-renderer
-          [template]="item.template"
           [attr.sky-cmp-id]="item.id"
+          [template]="item.template"
         >
         </sky-list-toolbar-item-renderer>
       </sky-toolbar-item>
       <sky-toolbar-item *ngFor="let item of centerTemplates">
         <sky-list-toolbar-item-renderer
-          [template]="item.template"
           [attr.sky-cmp-id]="item.id"
+          [template]="item.template"
         >
         </sky-list-toolbar-item-renderer>
       </sky-toolbar-item>
       <sky-toolbar-item *ngFor="let item of rightTemplates"
         [attr.sky-toolbar-id]="item.id"
       >
         <sky-list-toolbar-item-renderer
-          [template]="item.template"
           [attr.sky-cmp-id]="item.id"
+          [template]="item.template"
         >
         </sky-list-toolbar-item-renderer>
       </sky-toolbar-item>
@@ -45,33 +45,33 @@
       <sky-toolbar-section>
         <sky-toolbar-item>
           <sky-list-toolbar-item-renderer
-            [template]="search"
             sky-cmp-id="search"
+            [template]="search"
           >
           </sky-list-toolbar-item-renderer>
         </sky-toolbar-item>
       </sky-toolbar-section>
       <sky-toolbar-section [hidden]="!hasAdditionalToolbarSection">
         <sky-toolbar-item *ngFor="let item of leftTemplates">
           <sky-list-toolbar-item-renderer
-            [template]="item.template"
             [attr.sky-cmp-id]="item.id"
+            [template]="item.template"
           >
           </sky-list-toolbar-item-renderer>
         </sky-toolbar-item>
         <sky-toolbar-item *ngFor="let item of centerTemplates">
           <sky-list-toolbar-item-renderer
-            [template]="item.template"
             [attr.sky-cmp-id]="item.id"
+            [template]="item.template"
           >
           </sky-list-toolbar-item-renderer>
         </sky-toolbar-item>
         <sky-toolbar-item *ngFor="let item of rightTemplates"
           [attr.sky-toolbar-id]="item.id"
         >
           <sky-list-toolbar-item-renderer *ngIf="item.id !== 'search'"
-            [template]="item.template"
             [attr.sky-cmp-id]="item.id"
+            [template]="item.template"
           >
           </sky-list-toolbar-item-renderer>
         </sky-toolbar-item>
@@ -80,9 +80,10 @@
     </sky-toolbar>
   </div>
   <div
-    *ngIf="hasInlineFilters && inlineFilterBarExpanded"
+    *ngIf="!(isToolbarDisabled | async) && hasInlineFilters && inlineFilterBarExpanded"
+    [attr.aria-labelledby]="filterButtonId"
     [id]="listFilterInlineId"
-    [attr.aria-labelledby]="filterButtonId">
+  >
     <ng-content select="sky-list-filter-inline">
     </ng-content>
   </div>
@@ -91,6 +92,7 @@
 <ng-template #search>
   <div *ngIf="isSearchEnabled | async">
     <sky-search
+      [disabled]="isToolbarDisabled | async"
       [expandMode]="(type | async) === 'search' ? 'fit' : 'responsive'"
       [placeholderText]="placeholder"
       [searchText]="searchTextInput | async"
@@ -121,6 +123,7 @@
     [active]="hasAppliedFilters | async"
     [ariaControls]="listFilterInlineId"
     [ariaExpanded]="inlineFilterBarExpanded"
+    [disabled]="isToolbarDisabled | async"
     [filterButtonId]="filterButtonId"
     [showButtonText]="true"
     (filterButtonClick)="inlineFilterButtonClick()"

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

@@ -4,6 +4,10 @@
   /deep/ .sky-toolbar-container, /deep/ .sky-search-dismiss-absolute {
     background-color: $sky-background-color-neutral-light;
   }
+  /deep/ input[type="text"]:disabled, /deep/ .sky-search-btn:disabled  {
+    background-color:  $sky-background-color-disabled;
+    opacity: 1;
+  }
 }
 
 .sky-list-toolbar-container {

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

@@ -102,6 +102,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
   public rightTemplates: ListToolbarItemModel[];
   public type: Observable<string>;
   public isSearchEnabled: Observable<boolean>;
+  public isToolbarDisabled: Observable<boolean>;
   public isSortSelectorEnabled: Observable<boolean>;
   public appliedFilters: Observable<Array<ListFilterModel>>;
   public hasAppliedFilters: Observable<boolean>;
@@ -228,6 +229,11 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
     this.isSearchEnabled = this.toolbarState.map(s => s.config)
       .distinctUntilChanged().map(c => c.searchEnabled);
 
+    this.isToolbarDisabled = this.state.map(s => s.toolbar)
+      .distinctUntilChanged().map(c => {
+        return c.disabled;
+      });
+
     this.isSortSelectorEnabled = this.toolbarState.map(s => s.config)
       .distinctUntilChanged().map(c => c.sortSelectorEnabled);
 
@@ -236,11 +242,11 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
       .distinctUntilChanged()
       .map((filters) => {
         let activeFilters = filters.filter((f) => {
-            return f.value !== '' &&
-              f.value !== undefined &&
-              f.value !== false &&
-              f.value !== f.defaultValue;
-          });
+          return f.value !== '' &&
+            f.value !== undefined &&
+            f.value !== false &&
+            f.value !== f.defaultValue;
+        });
         return activeFilters.length > 0;
       });
 
@@ -300,7 +306,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
 
   public setSort(sort: ListSortLabelModel): void {
     this.dispatcher.sortSetFieldSelectors(
-      [{fieldSelector: sort.fieldSelector, descending: sort.descending}]
+      [{ fieldSelector: sort.fieldSelector, descending: sort.descending }]
     );
   }
 

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

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

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

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