List view checklist select mode (#873)

* Attempt to implement single select mode * More attempts * Ng4 upgrade (#799) * Package upgrades * Fixed tslint issues TODO: - fix search and sort tests * Update package.json * Fix context replacement plugin * Remove forkCheckerPlugin from webpack * Fix contentBase error * fix sort test add logging back to karma.conf * Fix search tests TODO: - fix code coverage gaps * Fix lint errors * ignore new istanbul quirks * update rollup to include platform browser name * Angular 4 Upgrade > Additional Edits (#702) * Allow for proper nesting for getting data for lists and grids (#671) * Changed the list helper getData function to set the result to null if the final part was undefined so that nesting works correctly. * Added unit tests * updates skyux2 docs to use stache2 (#681) * home page and pulling in stache things * removed need for title service * components demo component using stache * removed change to package json * removed unecessary method * updating learn page and removing overview folder * spacing issue fixed * Convert reference topics to Stache 2 * refactored all the tutorial section * Doc tweaks for Stache 2. * Final doc tweaks before merge * versioned without vs * Update builder version (#693) * Update builder version * Remove unneeded packages * Update full page modal header sizes (#679) * Update full page modal header sizes * Update full screen modal screenshots * Travis build 1313 pushed to skyux2 [ci skip] * Update wait component z-index (#684) * Travis build 1316 pushed to skyux2 [ci skip] * Adjust padding for closeable tab (#685) To account for built-in padding in the close button. * Travis build 1318 pushed to skyux2 [ci skip] * Handle styles for filedrop when links are not allowed (#686) * Travis build 1325 pushed to skyux2 [ci skip] * Add cancel button to wizard docs and update modal button spacing (#689) * Added yarn lock * Cleaned files based on lint rules * Removed unused comments * Updated excluded source maps * Updated version of tslint * Fixed linting errors * Reverting version of browserstack-local * Update to connect to browserstack properly Use browserstack service instead of binary. Also fix error with axe. * Fix variable name * Bump tests * Remove unit tests to test visual tests on their own * Actually remove unit tests for ci to run visuals * Use one parallel test * Add error logs for wdio * Add unit tests back * Log build number for visual tests on ci * Add logs to see what's going on * Try to use travis browsersrtack addon * try using travis browserstack again * remove old browserstack stuff * Use encrypted variables with travis browserstack * Add more logging and use different travis encryption * Add more logging * Add more logging to webdriver * Add more logging * Tweak visual server settings * try running visual test webpack dev server * set noInfo to false * update host for dev server * use local browserstack wdio * see what error occurs when using nonsense text * Add env variables back * Add more wdio configuration * Use browserstack binary * Remove extra options from visual-server * Remove unneeded logging * make log level silent * Run entire test suite Revert normalize-sass to original version * use old wdio versions for testing * Add connection retry settings * whitespace bump * Re update wdio packages * Remove unneeded logging * Remove parallel testing * Use sudo required for builds * remove reference to browserstack-local * See how 25 parallel tests run * Use 3 parallel visual tests and latest stable version of node * Update visual-server.js * Update travis-script.sh * Updated formatting * More adjustments * Added console logs * Added error checking * Added logs * Reduced number of instances * Updated logs * Updated log * Updated logs * Updates * Removed console logs * Changed styles for visual test * Updated wait test * Updates to private variables * Updated list toolbar default * Updated public variable * Updating selenium version * Fixed bugs with templates * Cleaned up unnecessary changes * Updated version of stache * Upped max instances * Up wait for timeout * Add some waitForVisibles in alert and action button * Added path resolves * Builder visual (#791) * Add start of visual tests * continue working on skyux builder visual tests * more work on getting builder visual tests to work * More work around visual tests * fix package name typo * Update import paths for visual test spa * Add normalize-scss to package.json * Fix moment import to work with rollup This way works also with copying the dist folder to node_modules * fix tile strangeness * start scripts for visual test setup * Continue protractor work * start of visual test command * duplicate a bit of work to get protractor ready to go * Get protractor to go to a page * Add first pass at image comparison TODO: - do not fail when image does not exist * Continue pixdiff work * Work on thresholds * Screenshots working with alert visual test TODO: - create compare screenshot wrapper function - get action button tests - get working with browserstack - get working with browserstack and TravisCI * Add wrapper function for visual tests TODO: - accessibility testing - more elegant way to change size - use browserstack - travis commands * Add checkAccessibility TODO: - browserstack configuration - get working in travis * Break out local visual test conf file * Add content for ci visual tests TODO: - switch configuration file used based on argue - test using browserstack - add the rest of the tests - get TravisCI implementations working * Allow visual tests to change config based on command line * Browserstack tests working * fix browserstack local visual tests TODO: - get other tests moved over - test using browserstack - get TravisCI integration working - remove all traces of wdio and old tests * Add avatar visual test * Add button visual test * Add visual tests for card, checkbox, and chevron * Add datepicker, definition list, and dropdown visual tests * Add error, file drop, and filter visual tests * Add visual tests for grid, key-info, label, list-secondary-actions, list-view-checklist, and modals * add visual tests for navbar * Add page summary visual tests * Add visual tests for paging, radio, repeater * Add visual tests for search, sort, tabs * Add visual tests for text-expand, text-expand-repeater, tiles * Finsih visual tests * Updated visual tests * Update ci tests * fix package.json conflict * update other visual test scripts * Tweak scripts * Fix lint errors * Attempt to add path for skyux/dist/core * Updated stache version * ignore temporary visual test files * Update code coverage * Remove some old visual tests * Remove old visual test artifacts * Remove other old visual test artifacts * remove webdriver packages from package.json * Update documentation for visual tests * Finish documentation for new visual test methodology * Fix visual test selector in new modal tests * Updated version of Stache (#805) * Updated version of stache * Add tsconfig ignore for visual tests * Hit release candidate branch * Fix build errors * Update baseline screenshots in travis scripts * white space bump * update travis scripts (#806) * update travis scripts * update visual baseline script * Update visual baseline with logging (#807) * Travis build 1644 pushed to skyux2 [ci skip] * Changelog and package updates for rc.0 (#808) * Merge 32 (#816) * AppSettings and config files docs. * appSettings and config files docs. * Doc tweaks. * Code sample cleanup * Max height transition (#804) * update builder version for skyux documentation * pass string to expandmode * Update container for component search * Use class instead of inline styles * work on text expand firefox bug * continue work on firefox transitions * Adjust text expand animation for firefox * Update tests for new text expand animation * Fix tslint errors * Update master plunker to point to beta release (#812) * List paging first page (#814) * Only set page number on search when paging exists * Add tests for search paging bug * Updates for beta.32 (#815) * Fix typo for iso8601 * Update dependencies for spa visual tests * Updates for rc.1 (#817) * Updates for rc.1 * Tweak changelog styles * Update karma firefox (#818) * Drop down primary (#819) * added primary in html class * testing for primary dropdown option * lint errors fixed * documentation fixes from john * documentation changes * changed isPrimary boolean property to buttonStyle string property * fixed test errors * Updated versions of Stache, Builder (#821) * Updated version of stache * Add tsconfig ignore for visual tests * Hit release candidate branch * Fix build errors * Update baseline screenshots in travis scripts * white space bump * Update package.json * Update package.json * Update package.json * Updated releases * Updated version of stache * Updated version of stache * Added resolve for visual tests * Updated version of stache * Merging master branch, Release 2.0.0-beta.2 (#826) * AppSettings and config files docs. * appSettings and config files docs. * Doc tweaks. * Code sample cleanup * Max height transition (#804) * update builder version for skyux documentation * pass string to expandmode * Update container for component search * Use class instead of inline styles * work on text expand firefox bug * continue work on firefox transitions * Adjust text expand animation for firefox * Update tests for new text expand animation * Fix tslint errors * Update master plunker to point to beta release (#812) * List paging first page (#814) * Only set page number on search when paging exists * Add tests for search paging bug * Updates for beta.32 (#815) * Adding Autonumeric Pipe/Module (#792) * Adding Autonumeric * Fixed Test * Changed name from SkyAutonumeric to SkyNumeric * Changing formatting * Changes per comments, OptionsObject used * Updated wording * Email validation (#810) * created email validation ts * email validation scss * email validation code and test start * email validator testing files * last lint error fixed * component page summary * error message/red halo doesn't show until lost focus * Changes from Patrick * Changes from Patrick (took care of errors) * added form control for demo input box consistency * Fixed lint errors * Added sky-form-control to demo/removed onInit from module code * Lint errors * Add note about serving in Windows 10 with IE11 or Edge. (#820) * Add note about serving in Windows 10 with IE11 or Edge. * Rework note based on feedback from Bobby. * Updates for beta.33 (#825) * Fixed linting errors * Update package.json * Dont run skyux build for now * Updated travis script * Readded build * Moved remove commands * Updated version of builder * Updated changelog and version * Get select all and clear all buttons hiding correctly for single select checklist * Add logic around single select functionality in template TODO: - styles - unit tests - docs - visual tests * fix package.json conflict * Added appropriate styles for checklist single select TODO: - accessibility for checklist - unit tests - visual tests - docs * Add cursor pointer styles for single select checklist * fix sort ordering * Add checklist test stubs and accessibility roles for single select * Added initial tests for single select checklist TODO: - unit tests around removing sort - docs - visual tests * Add unit tests for list toolbar * Fix lint errors and unit tests * Add documentation for checklist select mode * Add visual tests for single select checklist * fix package.json conflict * Updated demo to use radio buttons * Updated demo header for select mode choices
blackbaud · Jul 17, 2017 · 2ec30fe · 2ec30fe
1 parent a34fad3
commit 2ec30fe
Show file tree

Hide file tree

Showing 20 changed files with 462 additions and 60 deletions.
diff --git a/skyux-spa-visual-tests/src/app/list-view-checklist/list-view-checklist-visual.component.html b/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>
diff --git a/skyux-spa-visual-tests/src/app/list-view-checklist/list-view-checklist-visual.component.ts b/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';
+    }
+  }
 }
diff --git a/skyux-spa-visual-tests/src/app/list-view-checklist/list-view-checklist.visual-spec.ts b/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'
+      });
+    });
+
+  });
 });
diff --git a/src/app/components/list-view-checklist/index.html b/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"

diff --git a/src/app/components/list-view-checklist/list-view-checklist-demo.component.html b/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>

diff --git a/src/app/components/list-view-checklist/list-view-checklist-demo.component.ts b/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) => {

diff --git a/src/modules/list-toolbar/list-toolbar.component.html b/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"

diff --git a/src/modules/list-toolbar/list-toolbar.component.spec.ts b/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();

diff --git a/src/modules/list-toolbar/list-toolbar.component.ts b/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;
       });
   }
 

diff --git a/src/modules/list-view-checklist/fixtures/list-view-checklist-toolbar.component.fixture.html b/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>

diff --git a/src/modules/list-view-checklist/fixtures/list-view-checklist-toolbar.component.fixture.ts b/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) {
   }

diff --git a/src/modules/list-view-checklist/list-view-checklist-item.component.scss b/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;
+  }
 }