From 0001181e9c8dbbd88de3fd8739d4ded511c31627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20TINANT?= <herve.tinant@finquest.com>
Date: Thu, 13 Jul 2017 18:20:13 +0200
Subject: [PATCH] feat: Allow unshow more items

---
 src/lib/index.ts                              |  1 -
 .../src/component/tree-select.component.html  | 53 ++++++++++++-------
 .../src/component/tree-select.component.scss  |  5 +-
 .../src/component/tree-select.component.ts    | 10 ++--
 src/lib/src/module.ts                         |  4 +-
 src/lib/src/pipe/isVisible.pipe.ts            | 10 ----
 6 files changed, 44 insertions(+), 39 deletions(-)
 delete mode 100644 src/lib/src/pipe/isVisible.pipe.ts

diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5517287..46e67a2 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,4 @@
 export { TreeSelectDefaultOptions } from './src/model/tree-select-default-options';
 export { TreeSelectComponent } from './src/component/tree-select.component';
 export { ItemPipe } from './src/pipe/item.pipe';
-export { IsVisiblePipe } from './src/pipe/isVisible.pipe';
 export { NgxTreeSelectModule } from './src/module';
diff --git a/src/lib/src/component/tree-select.component.html b/src/lib/src/component/tree-select.component.html
index d59acd7..4036d16 100644
--- a/src/lib/src/component/tree-select.component.html
+++ b/src/lib/src/component/tree-select.component.html
@@ -2,28 +2,45 @@
 
   <!-- Control display -->
   <div [class.disabled]="disabled">
-    <span tabindex="-1" class="btn btn-default btn-secondary form-control" [class.selected-container-text]="!multiple" [class.selected-container-item]="multiple"
-      (click)="toggle($event)">
-            <span *ngIf="selection.length <= 0"
-                  class="ui-select-placeholder text-muted">{{placeholder}}</span>
-    <span *ngFor="let itm of selection | IsVisiblePipe" class="pull-left" [class.selected-item-text]="!multiple" [class.selected-item-item]="multiple"
-      [class.btn]="multiple" [class.btn-default]="multiple" [class.btn-xs]="multiple">
-                    {{itm.text}}
-                    <a *ngIf="multiple && !disabled"
-                       class="close"
-                       (click)="removeItem($event, itm)">x</a>
-            </span>
-    <span class="pull-right more-items-icon" (click)="loadMore($event)" *ngIf="loadAllItems">(...)</span>
-    <i class="caret pull-right"></i>
+    <span tabindex="-1"
+          class="btn btn-default btn-secondary form-control"
+          [class.selected-container-text]="!multiple"
+          [class.selected-container-item]="multiple"
+          (click)="toggle($event)">
+      <span *ngIf="selection.length <= 0"
+            class="ui-select-placeholder text-muted">{{placeholder}}</span>
+      <span *ngFor="let itm of selection; let idx=index">
+        <span *ngIf="moreLoaded || maxVisibleItemCount == 0 || idx<maxVisibleItemCount"
+              class="pull-left"
+              [class.selected-item-text]="!multiple"
+              [class.selected-item-item]="multiple"
+              [class.btn]="multiple"
+              [class.btn-default]="multiple"
+              [class.btn-xs]="multiple">
+          {{itm.text}}
+          <a *ngIf="multiple && !disabled" class="close" (click)="removeItem($event, itm)">x</a>
+        </span>
+      </span>
+
     </span>
+      <span class="pull-right more-items-icon" (click)="loadMore($event)" *ngIf="showMoreLink">(...)</span>
+      <i class="caret pull-right"></i>
   </div>
   <!-- options template -->
-  <ul *ngIf="!disabled && isOpen && internalItems && internalItems.length > 0" class="dropdown-menu" role="menu">
-    <input name="filterText" *ngIf="allowFilter" type="text" [(ngModel)]="filter" (click)="setInputFocus()" (blur)="setInputFocusOut()"
-      class="form-control" placeholder="{{filterPlaceholder}}" [ngModelOptions]="{standalone: true}" />
+  <ul *ngIf="!disabled && isOpen && internalItems && internalItems.length > 0"
+      class="dropdown-menu"
+      role="menu">
+    <input name="filterText"
+           *ngIf="allowFilter"
+           type="text"
+           [(ngModel)]="filter"
+           (click)="setInputFocus()"
+           (blur)="setInputFocusOut()"
+           class="form-control"
+           placeholder="{{filterPlaceholder}}"
+           [ngModelOptions]="{standalone: true}" />
     <li *ngFor="let o of internalItems | ItemPipe: filter " role="menuitem">
-      <tree-select-item [item]="o" (selected)="itemSelected()" [onTouchedCallBack]="onTouchedCallback">
-      </tree-select-item>
+      <tree-select-item [item]="o" (selected)="itemSelected()" [onTouchedCallBack]="onTouchedCallback"></tree-select-item>
     </li>
   </ul>
 </div>
diff --git a/src/lib/src/component/tree-select.component.scss b/src/lib/src/component/tree-select.component.scss
index 803df8f..d3fecab 100644
--- a/src/lib/src/component/tree-select.component.scss
+++ b/src/lib/src/component/tree-select.component.scss
@@ -53,10 +53,10 @@ ul {
 .more-items-icon {
   opacity: 0.5;
   height: 10px;
-  margin-top: -2px;
   position: absolute;
   right: 20px;
-  top: 30%;
+  bottom: 23px;
+  z-index: 100;
 }
 
 .close {
@@ -65,6 +65,7 @@ ul {
   margin-left: 5px;
   padding-top: 3px;
   position: absolute;
+  z-index: 50;
 }
 
 .caret {
diff --git a/src/lib/src/component/tree-select.component.ts b/src/lib/src/component/tree-select.component.ts
index 93627b3..433c67b 100644
--- a/src/lib/src/component/tree-select.component.ts
+++ b/src/lib/src/component/tree-select.component.ts
@@ -27,6 +27,8 @@ export class TreeSelectComponent implements ControlValueAccessor {
   private onChangeCallback: (_: any) => void = noop;
   private haveFocus = false;
   private inputFocus = false;
+  public showMoreLink = false;
+  public moreLoaded = false;
 
   @Input() public disabled = false;
   @Input() public filterPlaceholder = 'Type here for filtering items...';
@@ -86,9 +88,7 @@ export class TreeSelectComponent implements ControlValueAccessor {
   }
 
   public get selection(): SelectableItem[] {
-    if (this.maxVisibleItemCount && ((this.svc.getInternalSelection().length - this.maxVisibleItemCount) > 0)) {
-      this.svc.setConfiguration(opt => opt.loadAllItems = true, false);
-    }
+    this.showMoreLink = (this.maxVisibleItemCount > 0 && ((this.svc.getInternalSelection().length - this.maxVisibleItemCount) > 0));
     return this.svc.getInternalSelection();
   }
 
@@ -177,8 +177,8 @@ export class TreeSelectComponent implements ControlValueAccessor {
 
   loadMore($event: any) {
     $event.stopPropagation();
-    this.svc.setConfiguration(opt => opt.loadAllItems = false, false);
-    this.svc.setConfiguration(opt => opt.maxVisibleItemCount = 0, false);
+    this.moreLoaded = !this.moreLoaded;
+    //this.svc.setConfiguration(opt => opt.maxVisibleItemCount = 0, false);
   }
 
   ProcessMatchFilterTreeItem(tree: SelectableItem, filter: string): boolean {
diff --git a/src/lib/src/module.ts b/src/lib/src/module.ts
index e809df3..371b790 100644
--- a/src/lib/src/module.ts
+++ b/src/lib/src/module.ts
@@ -7,7 +7,6 @@ import { TreeSelectComponent } from './component/tree-select.component';
 import { TreeSelectItemComponent } from './component/tree-select-item.component';
 import { OffClickDirective } from './directive/off-click.directive';
 import { ItemPipe } from './pipe/item.pipe';
-import { IsVisiblePipe } from './pipe/isVisible.pipe';
 
 @NgModule({
   imports: [
@@ -18,8 +17,7 @@ import { IsVisiblePipe } from './pipe/isVisible.pipe';
     TreeSelectComponent,
     TreeSelectItemComponent,
     OffClickDirective,
-    ItemPipe,
-    IsVisiblePipe
+    ItemPipe
   ],
   exports: [
     TreeSelectComponent
diff --git a/src/lib/src/pipe/isVisible.pipe.ts b/src/lib/src/pipe/isVisible.pipe.ts
deleted file mode 100644
index 6c08ef1..0000000
--- a/src/lib/src/pipe/isVisible.pipe.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import { SelectableItem } from '../model/selectable-item';
-
-@Pipe({ name: 'IsVisiblePipe' })
-export class IsVisiblePipe implements PipeTransform {
-  transform(value: SelectableItem[]) {
-    // ES6 array destructuring
-    return value.filter(item => { return item.isVisible; });
-  }
-}