diff --git a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.html b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.html index 90c7dec3..4f74bc87 100644 --- a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.html +++ b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.html @@ -1,243 +1,300 @@
-
+
- {{settings.text}} + {{settings.text}} + {{settings.text}} - - {{item[settings.labelKey]}} + + {{selectedItems[settings.labelKey]}}
- {{item[settings.labelKey]}} + {{item[settings.labelKey]}} - - - - - + + + + + + +
-
- -
-
- {{item[settings.labelKey]}} - - - - - - +
+
+ {{item[settings.labelKey]}} + + + + + + +
-
- +{{selectedItems?.length - settings.badgeShowLimit }} - - - - - + +{{selectedItems?.length - settings.badgeShowLimit }} + + + + + - - + + -
-
-
-
-
-
-
- -
- -
- - +
+
+
+
+
+
+ + +
+ +
+ + - - + + - - + + - - - - - -
-
-
- - +
-
- +
+
+ + {{settings.filterSelectAllText}} + {{settings.filterUnSelectAllText}} + +
+
+ +
- - + + -
- +
+ +
-
-
-
- - +
+
+ + +
-
-
-
    -
  • - - -
    • -
-
-
-
    +
    +
      +
    • + + +
      • +
    +
    +
    +
    • - +
    -
    -
    -
      -
    • - - - -
      • -
    -
    -
    -
      +
    +
    +
      +
    • + + + +
      • +
    +
    +
    +
    • - +
    -
    -
    -
      - -
    • - - - -
      • -
    • - - - -
      • -       -
    -
    -
    -
      - -
    • - - -
        - -
      • - - - -
        • -         +
    +
    +
      + +
    • + + + +
      • +
    • + + + +
      • +
    - - - -
-
-
- -
    - -
  • - - -
    • -
  • - - -
    • -     +
+
+
    + +
  • + + +
      + +
    • + + + +
      • +       +
    + +
    • +
- -
-
-
    +
+
+ +
    + +
  • + + +
    • +
  • + + +
    • +     +
+ +
+
+
    -
  • - - -
      - -
    • - - -
      • -       -
    -
    • +
  • + + +
      + +
    • + + +
      • +       +
    +
    • - -
+ +
+
{{settings.noDataLabel}}
-
{{settings.noDataLabel}}
-
\ No newline at end of file diff --git a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.ts b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.ts index 7b8bda55..7c698747 100644 --- a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.ts +++ b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, HostListener, ChangeDetectionStrategy,OnDestroy, NgModule, SimpleChanges, OnChanges, ChangeDetectorRef, AfterViewChecked, ViewEncapsulation, ContentChild, ViewChild, forwardRef, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core'; +import { Component, OnInit, HostListener, ChangeDetectionStrategy, OnDestroy, NgModule, SimpleChanges, OnChanges, ChangeDetectorRef, AfterViewChecked, ViewEncapsulation, ContentChild, ViewChild, forwardRef, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core'; import { FormsModule, NG_VALUE_ACCESSOR, ControlValueAccessor, NG_VALIDATORS, Validator, FormControl } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { MyException } from './multiselect.model'; @@ -7,9 +7,9 @@ import { ClickOutsideDirective, ScrollDirective, styleDirective, setPosition } f import { ListFilterPipe } from './list-filter'; import { Item, Badge, Search, TemplateRenderer, CIcon } from './menu-item'; import { DataService } from './multiselect.service'; -import { Subscription, Subject } from 'rxjs'; +import { Subscription, Subject } from 'rxjs'; import { VirtualScrollerModule, VirtualScrollerComponent } from './virtual-scroll/virtual-scroll'; -import { map, debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operators'; +import { map, debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operators'; import { ThrowStmt } from '@angular/compiler'; export const DROPDOWN_CONTROL_VALUE_ACCESSOR: any = { @@ -100,7 +100,7 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang searchTerm$ = new Subject(); filterPipe: ListFilterPipe; - public selectedItems: Array; + public selectedItems: Array | any; public isActive: boolean = false; public isSelectAll: boolean = false; public isFilterSelectAll: boolean = false; @@ -158,24 +158,23 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang escapeToClose: true, clearAll: true } - randomSize:boolean = true; + randomSize: boolean = true; public parseError: boolean; public filteredList: any = []; virtualScroollInit: boolean = false; - @ViewChild(VirtualScrollerComponent, {static: false}) + @ViewChild(VirtualScrollerComponent, { static: false }) private virtualScroller: VirtualScrollerComponent; constructor(public _elementRef: ElementRef, private cdr: ChangeDetectorRef, private ds: DataService) { this.searchTerm$.asObservable().pipe( - debounceTime(1000), - distinctUntilChanged(), - tap(term => term) + debounceTime(1000), + distinctUntilChanged(), + tap(term => term) ).subscribe(val => { this.filterInfiniteList(val); }); } ngOnInit() { - this.settings = Object.assign(this.defaultSettings, this.settings); - + this.settings = Object.assign(this.defaultSettings, this.settings) this.cachedItems = this.cloneArray(this.data); if (this.settings.position == 'top') { setTimeout(() => { @@ -217,12 +216,18 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang } if (changes.loading) { } - if(this.settings.lazyLoading && this.virtualScroollInit && changes.data){ + if (this.settings.lazyLoading && this.virtualScroollInit && changes.data) { this.virtualdata = changes.data.currentValue; } } ngDoCheck() { if (this.selectedItems) { + if (!this.settings.singleSelection && !this.isArray(this.selectedItems)) { + this.selectedItems = this.selectedItems ? [this.selectedItems] : []; + } + if (this.settings.singleSelection && this.isArray(this.selectedItems)) { + this.selectedItems = this.selectedItems ? this.selectedItems[0] : {}; + } if (this.selectedItems.length == 0 || this.data.length == 0 || this.selectedItems.length < this.data.length) { this.isSelectAll = false; } @@ -243,7 +248,6 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang if (this.settings.disabled) { return false; } - let found = this.isSelected(item); let limit = this.selectedItems.length < this.settings.limitSelection ? true : false; @@ -286,12 +290,12 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang if (this.settings.groupBy) { this.groupedData = this.transformData(this.data, this.settings.groupBy); this.groupCachedItems = this.cloneArray(this.groupedData); - this.selectedItems = [value[0]]; + this.selectedItems = value[0]; } else { try { if (value.length > 1) { - this.selectedItems = [value[0]]; + this.selectedItems = value[0]; throw new MyException(404, { "msg": "Single Selection Mode, Selected Items cannot have more than one item." }); } else { @@ -336,19 +340,25 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang trackByFn(index: number, item: any) { return item[this.settings.primaryKey]; } + isSelected(clickedItem: any) { let found = false; - this.selectedItems && this.selectedItems.forEach(item => { - if (clickedItem[this.settings.primaryKey] === item[this.settings.primaryKey]) { + if (!this.settings.singleSelection) { + this.selectedItems && this.selectedItems.forEach(item => { + if (clickedItem[this.settings.primaryKey] === item[this.settings.primaryKey]) { + found = true; + } + }); + } else { + if (clickedItem[this.settings.primaryKey] === this.selectedItems[this.settings.primaryKey]) { found = true; } - }); + } return found; } addSelected(item: any) { if (this.settings.singleSelection) { - this.selectedItems = []; - this.selectedItems.push(item); + this.selectedItems = item; this.closeDropdown(); } else @@ -357,11 +367,17 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang this.onTouchedCallback(this.selectedItems); } removeSelected(clickedItem: any) { - this.selectedItems && this.selectedItems.forEach(item => { - if (clickedItem[this.settings.primaryKey] === item[this.settings.primaryKey]) { - this.selectedItems.splice(this.selectedItems.indexOf(item), 1); + if (this.settings.singleSelection) { + if (clickedItem[this.settings.primaryKey] === this.selectedItems[this.settings.primaryKey]) { + this.selectedItems = {}; } - }); + } else { + this.selectedItems && this.selectedItems.forEach(item => { + if (clickedItem[this.settings.primaryKey] === item[this.settings.primaryKey]) { + this.selectedItems.splice(this.selectedItems.indexOf(item), 1); + } + }); + } this.onChangeCallback(this.selectedItems); this.onTouchedCallback(this.selectedItems); } @@ -384,7 +400,7 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang setTimeout(() => { this.calculateDropdownDirection(); }, 0); - if(this.settings.lazyLoading){ + if (this.settings.lazyLoading) { this.virtualdata = this.data; this.virtualScroollInit = true; } @@ -470,17 +486,17 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang this.groupedData = this.cloneArray(this.groupCachedItems); this.groupedData = this.groupedData.filter(obj => { let arr = []; - if(obj[this.settings.labelKey].toLowerCase().indexOf(this.filter.toLowerCase()) > -1){ + if (obj[this.settings.labelKey].toLowerCase().indexOf(this.filter.toLowerCase()) > -1) { arr = obj.list; - } + } else { arr = obj.list.filter(t => { return t[this.settings.labelKey].toLowerCase().indexOf(this.filter.toLowerCase()) > -1; }); } - + obj.list = arr; - if(obj[this.settings.labelKey].toLowerCase().indexOf(this.filter.toLowerCase()) > -1){ + if (obj[this.settings.labelKey].toLowerCase().indexOf(this.filter.toLowerCase()) > -1) { return arr; } else { @@ -496,18 +512,18 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang if (!this.isFilterSelectAll) { let added = []; if (this.settings.groupBy) { -/* this.groupedData.forEach((item: any) => { - if (item.list) { - item.list.forEach((el: any) => { - if (!this.isSelected(el)) { - this.addSelected(el); - added.push(el); - } - }); - } - this.updateGroupInfo(item); - - }); */ + /* this.groupedData.forEach((item: any) => { + if (item.list) { + item.list.forEach((el: any) => { + if (!this.isSelected(el)) { + this.addSelected(el); + added.push(el); + } + }); + } + this.updateGroupInfo(item); + + }); */ this.ds.getFilteredData().forEach((el: any) => { if (!this.isSelected(el) && !el.hasOwnProperty('grpTitle')) { @@ -533,16 +549,16 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang else { let removed = []; if (this.settings.groupBy) { -/* this.groupedData.forEach((item: any) => { - if (item.list) { - item.list.forEach((el: any) => { - if (this.isSelected(el)) { - this.removeSelected(el); - removed.push(el); - } - }); - } - }); */ + /* this.groupedData.forEach((item: any) => { + if (item.list) { + item.list.forEach((el: any) => { + if (this.isSelected(el)) { + this.removeSelected(el); + removed.push(el); + } + }); + } + }); */ this.ds.getFilteredData().forEach((el: any) => { if (this.isSelected(el)) { this.removeSelected(el); @@ -769,11 +785,11 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang this.infiniteFilterLength = 0; } onScrollEnd(e: any) { - if(e.endIndex === this.data.length - 1 || e.startIndex === 0){ - + if (e.endIndex === this.data.length - 1 || e.startIndex === 0) { + } this.onScrollToEnd.emit(e); - + } ngOnDestroy() { if (this.subscription) { @@ -852,6 +868,14 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang this.selectedItems = []; this.onDeSelectAll.emit(this.selectedItems); } + + isArray(obj: any) { + return !!obj && obj.constructor === Array; + } + + isObjectEmpty(obj: any) { + return Object.keys(obj).length === 0 + } } @NgModule({ @@ -860,4 +884,4 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang exports: [AngularMultiSelect, ClickOutsideDirective, ScrollDirective, styleDirective, ListFilterPipe, Item, TemplateRenderer, Badge, Search, setPosition, CIcon], providers: [DataService] }) -export class AngularMultiSelectModule { } +export class AngularMultiSelectModule { } \ No newline at end of file diff --git a/src/app/examples/singleselection.ts b/src/app/examples/singleselection.ts index 926b719a..7cb63708 100644 --- a/src/app/examples/singleselection.ts +++ b/src/app/examples/singleselection.ts @@ -1,51 +1,49 @@ import { Component, OnInit } from '@angular/core'; @Component({ - templateUrl: './views/view.html' + templateUrl: './views/view.html' }) export class SingleSelectionExample implements OnInit { itemList = []; - selectedItems = []; + selectedItems = {}; settings = {}; - constructor(){ - + constructor() { + } - ngOnInit(){ - + ngOnInit() { + this.itemList = [ - {"id":1,"itemName":"India","name":"IN"}, - {"id":2,"itemName":"Singapore","name":"SN"}, - {"id":3,"itemName":"Australia","name":"AU"}, - {"id":4,"itemName":"Canada","name":"CA"}, - {"id":5,"itemName":"South Korea","name":"SK"}, - {"id":6,"itemName":"Brazil","name":"BR"} - ]; - - this.selectedItems = [ - {"id":1,"itemName":"India","name":"IN"}]; - this.settings = {singleSelection: true, text:"Select Country",clearAll:false}; + { "id": 1, "itemName": "India", "name": "IN" }, + { "id": 2, "itemName": "Singapore", "name": "SN" }, + { "id": 3, "itemName": "Australia", "name": "AU" }, + { "id": 4, "itemName": "Canada", "name": "CA" }, + { "id": 5, "itemName": "South Korea", "name": "SK" }, + { "id": 6, "itemName": "Brazil", "name": "BR" } + ]; + + this.selectedItems = + { "id": 1, "itemName": "India", "name": "IN" }; + this.settings = { singleSelection: true, text: "Select Country", clearAll: false }; } - onItemSelect(item:any){ - console.log(item); + onItemSelect(item: any) { console.log(this.selectedItems); } - OnItemDeSelect(item:any){ - console.log(item); + OnItemDeSelect(item: any) { console.log(this.selectedItems); } - onSelectAll(items: any){ + onSelectAll(items: any) { console.log(items); } - onDeSelectAll(items: any){ + onDeSelectAll(items: any) { console.log(items); } -cssgist: boolean = false; - title: string = "Single Selection"; - tsgist: string = "CuppaLabs/6ef578ce507dfd548eec39e008b4de14"; - htmlgist: string = "CuppaLabs/eb78d42ab7971fda6493586e329bfdb8"; - tstitle: string = "singleSelection.ts" - htmltitle: string = "singleSelection.html"; + cssgist: boolean = false; + title: string = "Single Selection"; + tsgist: string = "CuppaLabs/6ef578ce507dfd548eec39e008b4de14"; + htmlgist: string = "CuppaLabs/eb78d42ab7971fda6493586e329bfdb8"; + tstitle: string = "singleSelection.ts" + htmltitle: string = "singleSelection.html"; }