Added support for multiple select options

edcarroll · edcarroll · commit 2a1306f98af5 · 2016-04-16T15:01:08.000+01:00
diff --git a/README.md b/README.md
@@ -80,7 +80,7 @@ To run the demo app:
 $ npm run demo
 ```
 
-To compile the demo app without running the app:
+To compile the demo app without running it:
 
 ```bash
 $ npm run tsc-demo
diff --git a/components/dropdown/dropdown.service.ts b/components/dropdown/dropdown.service.ts
@@ -3,14 +3,16 @@ import {EventEmitter, ElementRef} from 'angular2/core';
 const DISABLED = 'disabled';
 const OUTSIDECLICK = 'outsideClick';
 
-const KEYCODE = {
+export const KEYCODE = {
     LEFT: 37,
     UP: 38,
     RIGHT: 39,
     DOWN: 40,
 
     ESCAPE: 27,
-    ENTER: 13
+    ENTER: 13,
+
+    BACKSPACE: 	8
 };
 
 export class DropdownService {
@@ -154,15 +156,14 @@ export class DropdownService {
                 this.selectPreviousItem();
                 break;
             case KEYCODE.ENTER:
-                if (!this.selectedItem.hasAttribute("suiDropdown")) {
+                if (this.selectedItem && !this.selectedItem.hasAttribute("suiDropdown")) {
                     (<HTMLElement> this.selectedItem).click();
-
-                    this.isOpen = false;
+                    this.selectedItem = null;
                     break;
                 }
                 //Fall through on purpose! (So enter on a nested dropdown acts as right arrow)
             case KEYCODE.RIGHT:
-                if (this.selectedItem.hasAttribute("suiDropdown")) {
+                if (this.selectedItem && this.selectedItem.hasAttribute("suiDropdown")) {
                     (<HTMLElement> this.selectedItem).click();
                     this.selectedItem = this.selectedItem.querySelector(`.${this.itemClass}:not(.${this.itemDisabledClass})`);
                 }
diff --git a/components/search/search.component.ts b/components/search/search.component.ts
@@ -5,7 +5,7 @@ import {Dropdown, DropdownMenu} from '../dropdown';
 @Component({
     selector: 'sui-search',
     directives: [DropdownMenu],
-    inputs: ['placeholder', 'options', 'optionsField', 'searchDelay', 'icon'],
+    inputs: ['placeholder', 'options', 'optionsField', 'searchDelay', 'icon', 'isDisabled'],
     outputs: ['selectedOptionChange'],
     host: {
         '[class.visible]': 'isOpen',
@@ -40,6 +40,7 @@ export class Search extends Dropdown implements AfterViewInit {
 
     public selectedOption:any;
     public selectedOptionChange:EventEmitter<any> = new EventEmitter(false);
+    public onItemSelected:EventEmitter<any> = new EventEmitter(false);
 
     protected _options:Array<any> = [];
     protected _optionsLookup:((query:string) => Promise<any>);
@@ -74,7 +75,6 @@ export class Search extends Dropdown implements AfterViewInit {
             this._queryTimer = setTimeout(() => {
                 this.search(() => {
                     this.isOpen = true;
-                    this._loading = false;
                 });
             }, this.searchDelay);
             return;
@@ -99,6 +99,7 @@ export class Search extends Dropdown implements AfterViewInit {
         if (this._optionsLookup) {
             if (this._resultsCache[this._query]) {
                 this._results = this._resultsCache[this._query];
+                this._loading = false;
                 callback();
                 return;
             }
@@ -110,6 +111,7 @@ export class Search extends Dropdown implements AfterViewInit {
             return;
         }
         this._results = this.options.filter((o:string) => this.deepValue(o, this.optionsField).slice(0, this.query.length).toLowerCase() == this.query.toLowerCase());
+        this._loading = false;
         callback();
     }
 
@@ -128,8 +130,9 @@ export class Search extends Dropdown implements AfterViewInit {
 
     public select(result:any):void {
         this.selectedOption = result;
-        this.selectedOptionChange.emit(this.selectedOption);
-        this._query = this.deepValue(this.selectedOption, this.optionsField);
+        this.selectedOptionChange.emit(result);
+        this.onItemSelected.emit(result);
+        this._query = this.deepValue(result, this.optionsField);
         this.isOpen = false;
     }
 
diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -2,26 +2,36 @@ import {Component, Directive, Provider, Input, ViewChild, HostBinding, ElementRe
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from 'angular2/common';
 import {Search, SearchValueAccessor} from '../search';
 import {DropdownMenu} from '../dropdown';
+import {KEYCODE} from '../dropdown/dropdown.service';
 
 @Component({
     selector: 'sui-select',
     directives: [DropdownMenu],
-    inputs: ['placeholder', 'options', 'optionsField', 'isSearchable', 'searchDelay', 'isDisabled'],
+    inputs: ['placeholder', 'options', 'optionsField', 'isSearchable', 'searchDelay', 'isDisabled', 'allowMultiple'],
     outputs: ['selectedOptionChange'],
     host: {
         '[class.visible]': 'isOpen',
         '[class.disabled]': 'isDisabled'
     },
     template: `
 <i class="dropdown icon"></i>
-<input *ngIf="isSearchable" class="search" type="text" autocomplete="off" [(ngModel)]="query">
-<div *ngIf="!selectedOption" class="default text" [class.filtered]="query" (click)="focus()">{{ placeholder }}</div>
+<!-- Multi-select labels -->
+<a *ngFor="#selected of selectedOptions; #i = index" class="ui label" (click)="selectedOptionClick($event)">
+    <content [innerHTML]="selectedOptionsHTML[i]"></content>
+    <i class="delete icon" (click)="deselectOption(selected); selectedOptionClick($event)"></i>
+</a>
+<!-- Search input box -->
+<input *ngIf="isSearchable" class="search" type="text" autocomplete="off" [(ngModel)]="query" (keydown)="searchKeyDown($event)">
+<!-- Single-select label -->
+<div *ngIf="!selectedOption" class="default text" [class.filtered]="query">{{ placeholder }}</div>
 <div *ngIf="selectedOption" class="text" [class.filtered]="query" [innerHTML]="selectedOptionHTML"></div>
+<!-- Select dropdown menu -->
 <div class="menu" suiDropdownMenu>
     <ng-content></ng-content>
     <div *ngIf="!results.length" class="message">No Results</div>
 </div>
-`
+`,
+    styles: [`:host input.search { width: 12em !important; }`]
 })
 export class Select extends Search {
     @ViewChild(DropdownMenu) protected _menu:DropdownMenu;
@@ -32,12 +42,17 @@ export class Select extends Search {
 
     @HostBinding('class.search')
     public isSearchable:boolean = false;
+    @HostBinding('class.multiple')
+    public allowMultiple:boolean = false;
     protected searchDelay:number = 0;
     @HostBinding('class.loading')
     protected _loading:boolean = false;
     public placeholder:string = "Select one";
     public selectedOptionHTML:string;
 
+    public selectedOptions:any = [];
+    public selectedOptionsHTML:Array<string> = [];
+
     @HostBinding('class.active')
     public get isOpen():boolean {
         return this._service.isOpen;
@@ -48,27 +63,33 @@ export class Select extends Search {
     }
 
     protected get results():Array<any> {
+        var results = this.options;
         if (this.isSearchable || this._optionsLookup) {
-            return this._results;
+            results = this._results;
+        }
+        if (this.allowMultiple) {
+            results =  results.filter(r => (this.selectedOptions || []).indexOf(r) == -1);
         }
-        return this.options;
+        return results;
     }
 
     constructor(private el:ElementRef) {
         super(el);
         this._allowEmptyQuery = true;
 
+        this._service.autoClose = "outsideClick";
+
         this._service.itemClass = "item";
         this._service.itemSelectedClass = "selected";
 
         this._service.isOpenChange.subscribe((isOpen:boolean) => {
             if (isOpen) {
-                if (this.isSearchable) {
+                if (this.isSearchable && !this._service.selectedItem) {
                     this._service.selectNextItem();
                 }
             }
             else {
-                if (this.query) {
+                if (this.query && !this.allowMultiple) {
                     if (this._service.selectedItem) {
                         (<HTMLElement> this._service.selectedItem).click();
                         return;
@@ -79,18 +100,62 @@ export class Select extends Search {
         });
     }
 
-    public selectOption(result:any, valueHTML:string):void {
-        super.select(result);
+    public selectOption(option:any, valueHTML:string):void {
+        if (!this.allowMultiple) {
+            super.select(option);
+            this.selectedOptionHTML = valueHTML;
+        }
+        else {
+            this.selectedOptions = this.selectedOptions || [];
+            this.selectedOptions.push(option);
+            this.selectedOptionsHTML.push(valueHTML);
+
+            this.selectedOptionChange.emit(this.selectedOptions);
+            this.onItemSelected.emit(option);
+        }
+        if (this.isSearchable) {
+            this.focusFirstItem();
+            this.focusSearch();
+        }
         this._query = "";
-        this.selectedOptionHTML = valueHTML;
+        if (this.isSearchable) {
+            this.search(() => {});
+        }
+    }
+
+    public deselectOption(option:any) {
+        var index = this.selectedOptions.indexOf(option);
+        this.selectedOptions.splice(index, 1);
+        this.selectedOptionsHTML.splice(index, 1);
+        this.selectedOptionChange.emit(this.selectedOptions);
+    }
+
+    //noinspection JSMethodCanBeStatic
+    private selectedOptionClick(event) {
+        event.stopPropagation();
     }
 
-    private focus() {
+    private focusSearch() {
         if (this.isSearchable) {
             this._service.dropdownElement.nativeElement.querySelector("input").focus();
         }
     }
 
+    private focusFirstItem() {
+        setTimeout(() => {
+            this._service.selectedItem = null;
+            this._service.selectNextItem();
+        })
+    }
+
+    public writeValue(value:any) {
+        if (this.allowMultiple) {
+            this.selectedOptions = value;
+            return;
+        }
+        this.selectedOption = value;
+    }
+
     @HostListener('click', ['$event'])
     public click(event:MouseEvent):boolean {
         event.stopPropagation();
@@ -100,6 +165,7 @@ export class Select extends Search {
                 this.search(() => {
                     this._loading = false;
                     this.isOpen = true;
+                    this.focusSearch();
                 });
             }
             else if ((<Element> event.target).tagName != "INPUT") {
@@ -108,6 +174,16 @@ export class Select extends Search {
         }
         return false;
     }
+
+    public searchKeyDown(event) {
+        if (event.which == KEYCODE.BACKSPACE && !this._query) {
+            var selectedOptions = this.selectedOptions || [];
+            var lastSelectedOption = selectedOptions[selectedOptions.length - 1];
+            if (lastSelectedOption) {
+                this.deselectOption(lastSelectedOption);
+            }
+        }
+    }
 }
 
 @Component({
@@ -122,8 +198,9 @@ export class SelectOption {
 
     constructor(private host:Select, private el:ElementRef) { }
 
-    @HostListener('click')
-    public click():boolean {
+    @HostListener('click', ['$event'])
+    public click(event):boolean {
+        event.stopPropagation();
         this.host.selectOption(this.value, this.el.nativeElement.innerHTML);
         return false;
     }
diff --git a/demo/app/components/test.page.ts b/demo/app/components/test.page.ts
@@ -20,14 +20,21 @@ import {TEMPLATE_DIRECTIVES} from "../../../components/template";
     <div class="ui dividing right rail"></div>
     <h2 class="ui dividing header">Examples</h2>
     <div class="ui segment">
-        <sui-select [placeholder]="placeholder" [options]="options" optionsField="test" [(ngModel)]="selected" [isSearchable]="true" [isDisabled]="isDisabled" #select>
+        <sui-select [placeholder]="placeholder" [options]="options" optionsField="test" [(ngModel)]="selected" [isSearchable]="true" #select>
             <sui-select-option *ngFor="#result of select.results" [value]="result"><i class="af flag"></i>{{ result.test }}</sui-select-option>
         </sui-select>
     </div>
     <div class="ui segment">
-        <sui-checkbox [(ngModel)]="isDisabled">Disabled?</sui-checkbox>
         <p>Selected option: {{ selected | json }}</p>
     </div>
+    <div class="ui segment">
+        <sui-select class="fluid" [options]="options" optionsField="test" [(ngModel)]="selectedItems" [isSearchable]="false" [allowMultiple]="true" #multiSelect>
+            <sui-select-option *ngFor="#result of multiSelect.results" [value]="result"><i class="af flag"></i>{{ result.test }}</sui-select-option>
+        </sui-select>
+    </div>
+    <div class="ui segment">
+        <p>Selected items: {{ selectedItems | json }}</p>
+    </div>
 </div>
 `
 })
