removed old crap from select.component + can now use select with prim…

…itive values

demo/app/entry-select/entry-select-demo.component.html

@@ -18,7 +18,7 @@ <h3>usage without form</h3>
 <pre>{{soloEntry.selection?.getValue()}}</pre>
 <h3>Usage with form</h3>
 <ec-entry-form model="field_test" #fieldTest>
-  <ec-entry-select *ngIf="fieldTest.group"
+  <ec-entry-select *ngIf="fieldTest.group" [solo]="true"
                    [formControl]="fieldTest.group?.get('entries')"
                    model="muffin"></ec-entry-select>
   <ec-input [field]="fieldTest.form?.getField('entries')" [group]="fieldTest.group"></ec-input>

demo/app/select/select-demo.component.html

@@ -1,9 +1,17 @@
 <h1>ec-select</h1>
 
 <h3>Default</h3>
-<ec-select [list]="products" [config]="products.config" #ecSelect></ec-select>
-<pre><code>{{ecSelect.selection.getValue() | json}}</code></pre>
+<ec-select [list]="products" [(ngModel)]="values"></ec-select>
+<pre><code>{{values | json}}</code></pre>
 
 <h3>Solo</h3>
-<ec-select [list]="products" [config]="products.config" [solo]="true" #ecSelectSolo></ec-select>
-<pre><code>{{ecSelectSolo.selection.getValue() | json}}</code></pre>
+<ec-select [list]="products" [solo]="true" #ecSelectSolo></ec-select>
+<pre><code>{{ecSelectSolo.selection.getValue() | json}}</code></pre>
+
+<h3>Primitive Solo</h3>
+<ec-select [values]="['one','two','three']" #primitiveSelectSolo [solo]="true"></ec-select>
+<pre><code>{{primitiveSelectSolo.selection.getValue() | json}}</code></pre>
+
+<h3>Primitive</h3>
+<ec-select [values]="['one','two','three']" #primitiveSelect></ec-select>
+<pre><code>{{primitiveSelect.selection.getValue() | json}}</code></pre>

demo/app/select/select-demo.component.ts

@@ -1,6 +1,4 @@
 import { Component } from '@angular/core';
-
-import { songs } from '../../assets/songs';
 import { mocked } from '../../../mocks/data';
 
 @Component({
@@ -9,7 +7,7 @@ import { mocked } from '../../../mocks/data';
 })
 export class SelectDemoComponent {
 
-  songs = songs.songs;
+  values = [];
   products = mocked.lists.products;
 
   constructor() {

packages/core/src/item/item-config.interface.ts

@@ -4,6 +4,8 @@ import { FieldConfig } from '../config/field-config.interface';
 
 /** An ItemConfig describes an abstract entity with certain properties.*/
 export interface ItemConfig<T> {
+  /** For primitive values only: the title for the item */
+  title?: string;
   /** The Property that is used to identify items from another (e.g. in a selection). */
   identifier?: string;
   /** The Property that is used to display the item for humans */

packages/core/src/item/item.ts

@@ -56,6 +56,9 @@ export class Item<T> {
   /** Returns an Array of properties possessed by the body. */
   getProperties(): Array<string> {
     if (!this.body || typeof this.body !== 'object') {
+      if (typeof this.body !== 'object') {
+        return [this.config.title || ''];
+      }
       return [];
     }
     return Object.keys(this.body);
@@ -75,6 +78,9 @@ export class Item<T> {
     if (!this.hasBody()) {
       return;
     }
+    if (typeof this.body !== 'object') {
+      return this.body;
+    }
     if (!this.config) {
       return property ? this.body[property] : this.body;
     }

packages/core/src/list/list-config.interface.ts

@@ -4,6 +4,8 @@ import { ItemConfig } from '../item/item-config.interface';
  *  Configuration for List Classes.
  * */
 export interface ListConfig<T> extends ItemConfig<T> {
+  /** For lists with primitive values only: the title of the list header */
+  title?: string;
   /** The property name that is sorted after */
   sortBy?: string;
   /** Array of properties that is sorted after, experimental... */

packages/core/src/sorter/sorter.ts

@@ -36,7 +36,7 @@ export abstract class Sorter<T> {
     }
     const types = items
     .map(item => typeof item.sort(property))
-    .filter((item, index, items) => items.indexOf(item) === index);
+    .filter((item, index, _items) => _items.indexOf(item) === index);
     if (types.length > 1) {
       console.warn('cannot sort items because they contain multiple types:', types);
       return;

packages/data/src/entry-select/entry-select.component.html

@@ -3,11 +3,11 @@
     <li *ngFor="let selected of selection?.items">
       <span class="pill removeable" (click)="editItem(selected)">
         {{selected.display()}}
-        <a (click)="removeItem(selected)" class="pill_remove">&times;</a>
+        <a (click)="selection.remove(selected)" class="pill_remove">&times;</a>
       </span>
     </li>
   </ul>
-  <a (click)="toggle(!active,true)" class="ec-entry-select__placeholder">
+  <a (click)="pop.toggle()" class="ec-entry-select__placeholder">
     - Auswählen -
   </a>
   <span class="caret"></span>

packages/data/src/entry-select/entry-select.component.ts

@@ -83,19 +83,6 @@ export class EntrySelectComponent extends SelectComponent<EntryResource> impleme
     });
   }
 
-  select(item: Item<EntryResource>) {
-    this.selection.toggle(item);
-    if (this.config.solo) {
-      this.pop.toggle(false);
-      this.active = false;
-    }
-  }
-
-  toggle(active: boolean = !this.active, emit: boolean = false) {
-    super.toggle(active, emit);
-    this.pop.toggle();
-  }
-
   /** Is called when a selected item has been clicked. */
   editItem(item) {
     // if (!item.getBody().save) { //TODO find out if LiteEntryResource or not

packages/data/src/files/asset-select/asset-select.component.html

@@ -1,8 +1,9 @@
-<div *ngIf="selection" class="ec-asset-select" [class.ec-asset-select_solo]="solo" [class.empty]="!selection.items.length">
+<div *ngIf="selection" class="ec-asset-select" [class.ec-asset-select_solo]="solo"
+     [class.empty]="!selection.items.length">
   <div class="ec-asset-select-upload" *ngIf="!selection.items.length || !solo">
     Datei hier ablegen
     <a href="">Hochladen</a>
-    <span> oder <a (click)="toggle(!active,true)">Mediathek</a></span>
+    <span> oder <a (click)="pop.toggle()">Mediathek</a></span>
   </div>
   <div *ngIf="selection.items.length" class="ec-asset-selected">
     <ul class="ec-asset-selected__items" data-flex="grid">
@@ -11,7 +12,7 @@
         <div class="ec-asset-card">
           <img [src]="selected.resolve('thumb')">
           <nav class="ec-asset-card-controls">
-            <a (click)="removeItem(selected)" class="ec-asset-card-controls__remove">&times;</a>
+            <a (click)="selection.remove(selected)" class="ec-asset-card-controls__remove">&times;</a>
           </nav>
         </div>
       </li>

packages/data/src/files/asset-select/asset-select.component.ts

@@ -67,14 +67,6 @@ export class AssetSelectComponent extends SelectComponent<PublicAssetResource> i
     });
   }
 
-  select(item: Item<any>) {
-    this.selection.toggle(item);
-    if (this.config.solo) {
-      this.pop.toggle(false);
-      this.active = false;
-    }
-  }
-
   selectUpload(upload: Upload) {
     if (this.solo) {
       this.selection.select(upload.item);

packages/ui/src/list/list-header/list-header.component.html

@@ -6,17 +6,21 @@
 
   <ec-form [config]="list?.config" [empty]="true" #filterForm></ec-form>
 
-  <div class="ec-list__cell" *ngFor="let field of list?.fields" [class.hidden]="field.hidden" [ngClass]="'ec-list-field_' + field.view" [class.ec-list-field_sortable]="field.sortable" [class.ec-list-field_sortable_active]="list.config?.sortBy===field.property" [class.ec-list-field_filterable]="field.filterable">
+  <div class="ec-list__cell" *ngFor="let field of list?.fields" [class.hidden]="field.hidden"
+       [ngClass]="'ec-list-field_' + field.view" [class.ec-list-field_sortable]="field.sortable"
+       [class.ec-list-field_sortable_active]="list.config?.sortBy===field.property"
+       [class.ec-list-field_filterable]="field.filterable">
 
-    <span class="ec-list-field__title" (click)="field.sortable&&list.toggleSort(field.property)" >
+    <span class="ec-list-field__title" (click)="field.sortable&&list.toggleSort(field.property)">
       {{field.label || field.property}}
     </span>
 
     <ec-pop #filterPop class="ec-list-field__filter-pop" [ngClass]="field.filterPopClass">
       <ec-input [field]="field" [group]="filterForm?.group" [debounce]="200"
                 *ngIf="filterForm?.group.get(field?.property)"
                 (changed)="applyFilter(field.property, $event)"></ec-input>
-      <a (click)="removeFilter(field.property, filterForm.group.get(field.property));filterPop.hide()" class="btn">
+      <a (click)="removeFilter(field.property, filterForm.group.get(field.property));filterPop.hide()"
+         class="btn">
         &times;
       </a>
     </ec-pop>

packages/ui/src/list/list-items/list-items.component.html

@@ -1,12 +1,14 @@
 <ul class="ec-list-items">
-  <li *ngFor="let item of items;trackBy:list?.trackItem" (click)="columnClick(item)" class="ec-list__row">
+  <li *ngFor="let item of items;trackBy:list?.trackItem" (click)="columnClick(item)"
+      class="ec-list__row">
     <div class="ec-list-item" [class._selected]="selection?.has(item)">
       <div class="ec-list__cell ec-list__select" *ngIf="selection">
         <input type="checkbox" [checked]="selection?.has(item)">
       </div>
       <div *ngFor="let field of list?.fields" class="ec-list__cell"
            [ngClass]="'ec-list-field_' + field.view" [ngSwitch]="field.view"
-           [class.hide]="field.hide"  [class.ec-list-field_sortable]="field.sortable" [class.ec-list-field_sortable_active]="list.config?.sortBy===field.property" >
+           [class.hide]="field.hide" [class.ec-list-field_sortable]="field.sortable"
+           [class.ec-list-field_sortable_active]="list.config?.sortBy===field.property">
         <ec-output [field]="field" [item]="item"></ec-output>
       </div>
     </div>

packages/ui/src/list/list.component.html

@@ -1,18 +1,24 @@
 <ec-pagination [pagination]="list?.pagination"
                *ngIf="list?.pagination?.getPages()>1"></ec-pagination>
 <div class="ec-list">
-  <ec-list-header [list]="list" [selection]="selection"></ec-list-header>
+  <ec-list-header [list]="list" [selection]="selection"
+                  *ngIf="list?.fields.length||list?.config.title"></ec-list-header>
 
   <div class="ec-list-body">
     <div class="ec-list-group" *ngFor="let group of list?.groups">
-      <div class="ec-list-group-header ec-list__row" *ngIf="group.value" (click)="selection?.toggleAll(listItems?.items)">
-        <div class="ec-list__cell ec-list__select" *ngIf="selection"><input type="checkbox" [checked]="selection?.hasAll(listItems?.items)"></div>
+      <div class="ec-list-group-header ec-list__row" *ngIf="group.value"
+           (click)="selection?.toggleAll(listItems?.items)">
+        <div class="ec-list__cell ec-list__select" *ngIf="selection"><input type="checkbox"
+                                                                            [checked]="selection?.hasAll(listItems?.items)">
+        </div>
         <div class="ec-list__cell">
           <span class="ec-list-group-header__title">{{group.value}}</span>
         </div>
       </div>
-      <ec-list-items [host]="this" #listItems [items]="list?.page | group: group.property: group.value"></ec-list-items>
+      <ec-list-items [host]="this" #listItems
+                     [items]="list?.page | group: group.property: group.value"></ec-list-items>
     </div>
   </div>
 </div>
-<ec-pagination [pagination]="list?.pagination" *ngIf="list?.pagination?.getPages()>1"></ec-pagination>
+<ec-pagination [pagination]="list?.pagination"
+               *ngIf="list?.pagination?.getPages()>1"></ec-pagination>

packages/ui/src/select/select.component.html

@@ -1,14 +1,14 @@
 <div class="ec-select" *ngIf="selection&&list">
-  <a (click)="toggle(!active,true)" class="ec-select__placeholder">
+  <a (click)="pop.toggle()" class="ec-select__placeholder">
     - Auswählen --
   </a>
   <div class="ec-select-selected">
     <li *ngFor="let selected of selection.items" class="pill" (click)="clickItem(selected)">
-      {{selected.display()}} <a (click)="removeItem(selected)">&times;</a>
+      {{selected.display()}} <a (click)="selection.remove(selected)">&times;</a>
     </li>
   </div>
   <span class="caret"></span>
   <ec-pop>
-    <ec-list [list]="list" [selection]="selection"></ec-list>
+    <ec-list [list]="list" (select)="select($event)" [selection]="selection"></ec-list>
   </ec-pop>
 </div>

packages/ui/src/select/select.component.ts

@@ -34,27 +34,22 @@ export class SelectComponent<T> implements ControlValueAccessor, OnInit, OnChang
   /** Configuration Object for List */
   @Input() config: ListConfig<T>;
   /** The visible items */
-  @Input() value: Array<any>;
+  @Input() value: Array<T>;
   /** The used selection */
   @Input() selection: Selection<T>;
   /** Event emitter on item selection */
   @Output() change: EventEmitter<Selection<T>> = new EventEmitter();
   /** Event emitter on selected item click */
   @Output() itemClick: EventEmitter<Item<T>> = new EventEmitter();
-  /** Event that emits when the plus is clicked. */
-  @Output('toggle') _toggle: EventEmitter<Selection<T>> = new EventEmitter();
   /** The Instance of the List */
   @Input() list: List<T>;
-  /** True if the selection is active */
-  @Input() active: boolean;
+  /** Available Items */
+  @Input() values: Array<T>;
   /** Wether or not the selection should be solo */
   @Input() solo: boolean;
   /** The selection pop */
   @ViewChild(PopComponent) pop: PopComponent;
 
-  /** is emitted when a new value has been written from the outside */
-  // written: EventEmitter<any> = new EventEmitter();
-
   ngOnInit() {
     this.initSelection();
   }
@@ -65,6 +60,12 @@ export class SelectComponent<T> implements ControlValueAccessor, OnInit, OnChang
 
   /** creates the collection from the config */
   initSelection() {
+    if (this.values) {
+      if (this.list) {
+        console.warn('ec-select: list is overwritten by values', this.list);
+      }
+      this.list = new List(this.values, this.config);
+    }
     if (this.list && !this.config) {
       this.config = this.list.config;
     }
@@ -82,10 +83,10 @@ export class SelectComponent<T> implements ControlValueAccessor, OnInit, OnChang
   writeValue(value: any) {
     this.value = Array.isArray(value) ? value : (value ? [value] : []);
     Object.assign(this.config || {}, { solo: this.solo });
-    this.list = new List(this.value, this.config);
     if (this.selection && this.value && this.value.length) {
       Object.assign(this.config, { selection: this.selection });
-      this.selection.replaceWith(this.list.items);
+      const list = new List(this.value, this.config);
+      this.selection.replaceWith(list.items);
     }
   }
 
@@ -96,33 +97,24 @@ export class SelectComponent<T> implements ControlValueAccessor, OnInit, OnChang
     this.writeValue(this.value);
   }
 
-  /** Called when clicking the toggle button. emits toggle event with current selection. */
-  toggle(active: boolean = !this.active, emit: boolean = false) {
-    this.active = active;
-    this.pop.toggle();
-    this._toggle.emit(this.selection);
-  }
-
   /** Is called when a selected item is clicked*/
   private clickItem(item) {
     this.itemClick.emit(item);
   }
 
-  /** Column click handler. Triggers onSelect.emit(item) with fallback to selection.toggle*/
+  /** Column click handler. Toggles selection. */
   columnClick(item) {
     if (this.selection) {
       this.selection.toggle(item);
     }
+    // TODO emit event?
   }
 
-  private addItem(item) {
+  public select(item) {
     this.selection.toggle(item);
-    this.changed();
-  }
-
-  private removeItem(item) {
-    this.selection.remove(item);
-    this.changed();
+    if (this.config.solo) {
+      this.pop.hide();
+    }
   }
 
   changed() {