bug fixes and add new item if not found on filter feature.

Pradeep Terli · Pradeep Terli · commit da307cc16f70 · 2018-11-11T21:34:41.000+05:30
diff --git a/README.md b/README.md
@@ -248,7 +248,8 @@ The following list of settings are supported by the component. Configure the set
 | searchBy | Array | Search the list by certain properties of the list item. Ex: ["itemName, "id","name"]. Deafult is , it will search the list by all the properties of list item | [] |
 | lazyLoading | Boolean | Enable lazy loading. Used to render large datasets. | false |
 | showCheckbox | Boolean | Show or hide checkboxes in the list | true |
-
+| addNewItemOnFilter | Boolean | Whe you filter items and if, the item is not found, you can add the text as new item to the list | false |
+| addNewButtonText | String | The text in the button when `addNewItemOnFilter` is enabled | 'Add' |
 
 ### Events
 - `onSelect` - Return the selected item on selection.
@@ -265,6 +266,8 @@ The following list of settings are supported by the component. Configure the set
     Example : (onClose)="onClose($event)"
 - `onScrollToEnd` - Callback event fired when the dropdown list is scrolled to the end. Usually used with virtual scrolling, to load data on      scroll.
     Example : (onScrollToEnd)="fetchMore($event)"
+- `onAddFilterNewItem` - Callback event fired when you click the `Add` button which will appear when `addNewItemOnFilter` setting is enabled.
+    Example : (onAddFilterNewItem)="onAddItem($event)"
 
 ## Run locally
 - Clone the repository or downlod the .zip,.tar files.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular2-multiselect-dropdown",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Angular 2 and angular 4 multiselect dropdown component.",
   "keywords": [
     "angular 2 multiselect dropdown",
diff --git a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.html b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.html
@@ -83,7 +83,10 @@
                 <span [hidden]="!isFilterSelectAll">{{settings.filterUnSelectAllText}}</span>
             </label>
             </div>
-            <label *ngIf="filterLength == 0" [hidden]="filter == undefined || filter?.length == 0">{{settings.noDataLabel}}</label>
+            <label class="nodata-label" *ngIf="filterLength == 0" [hidden]="filter == undefined || filter?.length == 0">{{settings.noDataLabel}}</label>
+            <div class="btn-container" *ngIf="settings.addNewItemOnFilter && filterLength == 0" [hidden]="filter == undefined || filter?.length == 0">
+            <button class="c-btn btn-iceblue" (click)="addFilterNewItem()">{{settings.addNewButtonText}}</button>
+            </div>
         </div>
         <div class="filter-select-all" *ngIf="settings.lazyLoading && settings.enableFilterSelectAll">
             <div class="pure-checkbox select-all" *ngIf="filter?.length > 0 && infiniteFilterLength > 0" (click)="toggleInfiniteFilterSelectAll()">
@@ -113,7 +116,7 @@
                         class="pure-checkbox" [ngClass]="{'selected-item': isSelected(item) == true }">
                         <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"
                         />
-                        <label>{{item.id}}-{{item[settings.labelKey]}}</label>
+                        <label>{{item.id}} {{item[settings.labelKey]}}</label>
                     </li>
                 </ul>
             </virtual-scroll>
diff --git a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.scss b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.scss
@@ -9,11 +9,10 @@ virtual-scroll {
     display: inline-block;
     border-width: 1px;
     line-height: 1.25;
-    /*background: $btn-background;*/
-    /*border: 1px solid $btn-border;*/
     border-radius: 3px;
     font-size: 14px;
-    /*color: $btn-text-color;*/
+    padding: 5px 10px;
+    cursor: pointer;
 }
 .c-btn.disabled{
     background: #ccc;
@@ -336,4 +335,16 @@ virtual-scroll {
 .loading-icon {
     width: 20px;
     float: right;
+}
+.nodata-label {
+    width: 100%;
+    text-align: center;
+    padding: 10px 0px 0px;
+}
+.btn-container {
+    text-align: center;
+    padding: 0px 5px 10px;
+}
+.btn-iceblue {
+    
 }
diff --git a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.ts b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.component.ts
@@ -70,6 +70,9 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
     @Output('onFilterDeSelectAll')
     onFilterDeSelectAll: EventEmitter<Array<any>> = new EventEmitter<Array<any>>();
 
+    @Output('onAddFilterNewItem')
+    onAddFilterNewItem: EventEmitter<any> = new EventEmitter<any>();
+
     @ContentChild(Item) itemTempl: Item;
     @ContentChild(Badge) badgeTempl: Badge;
     @ContentChild(Search) searchTempl: Search;
@@ -78,6 +81,7 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
     @ViewChild('searchInput') searchInput: ElementRef;
     @ViewChild('selectedList') selectedListElem: ElementRef;
 
+    filterPipe: ListFilterPipe;
     public selectedItems: Array<any>;
     public isActive: boolean = false;
     public isSelectAll: boolean = false;
@@ -128,7 +132,9 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
         primaryKey: 'id',
         position: 'bottom',
         enableFilterSelectAll: true,
-        selectGroup: false
+        selectGroup: false,
+        addNewItemOnFilter: false,
+        addNewButtonText: "Add"
     }
     public parseError: boolean;
     public filteredList: any = [];
@@ -319,8 +325,8 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
             return false;
         }
         this.isActive = !this.isActive;
-        if (this.isActive && this.searchInput) {
-            if (this.settings.searchAutofocus && this.settings.enableSearchFilter && !this.searchTempl) {
+        if (this.isActive) {
+            if (this.settings.searchAutofocus && this.searchInput && this.settings.enableSearchFilter && !this.searchTempl) {
                 setTimeout(() => {
                     this.searchInput.nativeElement.focus();
                 }, 0);
@@ -632,6 +638,11 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
         }
 
     }
+    addFilterNewItem(){
+        this.onAddFilterNewItem.emit(this.filter);
+        this.filterPipe = new ListFilterPipe(this.ds);
+        this.filterPipe.transform(this.data, this.filter, this.settings.searchBy);
+    }
 }
 
 @NgModule({
diff --git a/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.interface.ts b/projects/angular2-multiselect-dropdown-lib/src/lib/multiselect.interface.ts
@@ -25,4 +25,6 @@ export interface DropdownSettings{
     position:string;
     loading?: boolean;
     selectGroup?: boolean;
+    addNewItemOnFilter?: boolean;
+    addNewButtonText: string;
 } 
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -42,6 +42,7 @@
       <a [routerLink]="['searchfilter']" routerLinkActive="active" href="#" class="list-group-item list-group-item-action">Search filter</a>
       <a [routerLink]="['customSearchAPI']" routerLinkActive="active" href="#" class="list-group-item list-group-item-action">Custom Search / Search API</a>
       <a [routerLink]="['searchFilterByOneProperty']" routerLinkActive="active" href="#" class="list-group-item list-group-item-action">Search Filter By one Property/key</a>
+      <a [routerLink]="['searchfilterAddNewItem']" routerLinkActive="active" href="#" class="list-group-item list-group-item-action">Search and Add New Item</a>
       <a [routerLink]="['groupby']" routerLinkActive="active" href="#" class="list-group-item list-group-item-action">Group By</a>
       <a [routerLink]="['templating']" routerLinkActive="active" href="#" class="list-group-item list-group-item-action">Templating</a>
       <a [routerLink]="['usinginform']" routerLinkActive="active" href="#" class="list-group-item list-group-item-action">Using in Template Driven Forms</a>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { RemoteDataExample } from './examples/remoteData';
 import { CustomSearchExample } from './examples/customSearch';
 import { SearchFilterByOnePropertyExample } from './examples/searchByOneProperty';
 import {LazyLoadingRemoteDataExample } from './examples/lazyLoadingRemoteData';
+import {SearchFilterAddItemExample } from './examples/searchFilterAddNewItem';
 
 @NgModule({
   declarations: [
@@ -56,7 +57,8 @@ import {LazyLoadingRemoteDataExample } from './examples/lazyLoadingRemoteData';
     RemoteDataExample,
     CustomSearchExample,
     SearchFilterByOnePropertyExample,
-    LazyLoadingRemoteDataExample
+    LazyLoadingRemoteDataExample,
+    SearchFilterAddItemExample
     ],
   imports: [
     BrowserModule,
diff --git a/src/app/app.router.ts b/src/app/app.router.ts
@@ -23,6 +23,7 @@ import { RemoteDataExample } from './examples/remoteData';
 import { CustomSearchExample } from './examples/customSearch';
 import { SearchFilterByOnePropertyExample } from './examples/searchByOneProperty';
 import {LazyLoadingRemoteDataExample } from './examples/lazyLoadingRemoteData';
+import {SearchFilterAddItemExample } from './examples/searchFilterAddNewItem';
 
 const appRoutes: Routes = [
   { path: '', redirectTo: '/basic', pathMatch: 'full' },
@@ -46,7 +47,8 @@ const appRoutes: Routes = [
   { path: 'remoteData', component: RemoteDataExample },
   { path: 'customSearchAPI', component: CustomSearchExample },
   { path: 'searchFilterByOneProperty',  component: SearchFilterByOnePropertyExample },
-  { path: 'lazyloadingRemoteData', component: LazyLoadingRemoteDataExample}
+  { path: 'lazyloadingRemoteData', component: LazyLoadingRemoteDataExample},
+  { path: 'searchfilterAddNewItem', component: SearchFilterAddItemExample}
 ];
 
 
diff --git a/src/app/examples/searchFilter.ts b/src/app/examples/searchFilter.ts
@@ -35,7 +35,8 @@ export class SearchFilterExample implements OnInit {
       selectAllText: 'Select All',
       unSelectAllText: 'UnSelect All',
       enableSearchFilter: true,
-      badgeShowLimit: 3
+      badgeShowLimit: 3,
+      addNewItemOnFilter: true
     };
   }
   onItemSelect(item: any) {
diff --git a/src/app/examples/searchFilterAddNewItem.ts b/src/app/examples/searchFilterAddNewItem.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './views/searchFilter.html'
+})
+export class SearchFilterAddItemExample implements OnInit {
+
+  itemList = [];
+  selectedItems = [];
+  settings = {};
+  count = 6;
+  constructor() {
+
+  }
+  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"},
+                          {"id":2,"itemName":"Singapore","name":"SN"},
+                          {"id":3,"itemName":"Australia","name":"AU"},
+                          {"id":4,"itemName":"Canada","name":"CA"}];
+    this.settings = {
+      singleSelection: false,
+      text: "Select Countries",
+      selectAllText: 'Select All',
+      unSelectAllText: 'UnSelect All',
+      enableSearchFilter: true,
+      addNewItemOnFilter: true
+    };
+  }
+  onAddItem(data:string){
+    this.count++;
+    this.itemList.push({"id": this.count,"itemName":data,"name":data});
+    this.selectedItems.push({"id": this.count,"itemName":data,"name":data});
+  }
+  onItemSelect(item: any) {
+    console.log(item);
+    console.log(this.selectedItems);
+  }
+  OnItemDeSelect(item: any) {
+    console.log(item);
+    console.log(this.selectedItems);
+  }
+  onSelectAll(items: any) {
+    console.log(items);
+  }
+  onDeSelectAll(items: any) {
+    console.log(items);
+  }
+  cssgist: boolean = false;
+  title: string = "Search and Add New Item, if not found";
+  tsgist: string = "CuppaLabs/c1e00c870c3e3b9213e69e0a93518cc6";
+  htmlgist: string = "CuppaLabs/0583ba4be8b7c192d14f04375f96c074";
+  tstitle: string = "searchFilterAddNewItem.ts"
+  htmltitle: string = "searchFilter.html";
+}
diff --git a/src/app/examples/views/searchFilter.html b/src/app/examples/views/searchFilter.html
@@ -0,0 +1,28 @@
+<h2 class="example-title">{{title}}</h2>
+<div class="col-md-8 mr-auto ml-auto dropdown-container">
+    <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings" (onSelect)="onItemSelect($event)"
+        (onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)" 
+        (onAddFilterNewItem)="onAddItem($event)">
+        </angular2-multiselect>
+</div>
+      <div class="alert alert-warning" role="alert">
+        <b>How this example works !! </b> 
+        <br>
+        When you try to filter the list items, if no search results are available, you would see an 'Add' button. On clicking the add button, it would emit the text that you enter in the input field to your controlle in the callback method, as show in the below code.
+        You can add this item to the data list. If you wish, that this item be selected, add it to selected items list.
+              </div>
+<h4 class="example-title code-section">Code</h4>
+
+<p-tabView>
+    <p-tabPanel header="{{tstitle}}">
+       <ng2-gist [gistId]="tsgist"></ng2-gist>
+    </p-tabPanel>
+    <p-tabPanel header="{{htmltitle}}">
+        <ng2-gist [gistId]="htmlgist"></ng2-gist>
+    </p-tabPanel>
+    <span *ngIf="cssgist">
+        <p-tabPanel header="{{csstitle}}">
+        <ng2-gist [gistId]="cssgist"></ng2-gist>
+    </p-tabPanel>
+    </span>
+</p-tabView>
diff --git a/src/themes/default.theme.scss b/src/themes/default.theme.scss
@@ -110,4 +110,9 @@ $selected-background: #e9f4ff;
 }
 .selected-item{
     background: $selected-background;
+}
+.btn-iceblue {
+    background: $base-color;
+    border: 1px solid $btn-border;
+    color: #fff;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angular2-multiselect-dropdown",`
`3`		`- "version": "4.0.0",`
	`3`	`+ "version": "4.1.0",`
`4`	`4`	`"description": "Angular 2 and angular 4 multiselect dropdown component.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"angular 2 multiselect dropdown",`
Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,6 @@ export interface DropdownSettings{`
`25`	`25`	`position:string;`
`26`	`26`	`loading?: boolean;`
`27`	`27`	`selectGroup?: boolean;`
	`28`	`+ addNewItemOnFilter?: boolean;`
	`29`	`+ addNewButtonText: string;`
`28`	`30`	`}`