diff --git a/demo/app/entry-select/entry-select-demo.component.html b/demo/app/entry-select/entry-select-demo.component.html index 3ee4df44d..5a464c836 100644 --- a/demo/app/entry-select/entry-select-demo.component.html +++ b/demo/app/entry-select/entry-select-demo.component.html @@ -18,7 +18,7 @@

usage without form

{{soloEntry.selection?.getValue()}}

Usage with form

- diff --git a/demo/app/select/select-demo.component.html b/demo/app/select/select-demo.component.html index 3d665ff66..6b2d10fa4 100644 --- a/demo/app/select/select-demo.component.html +++ b/demo/app/select/select-demo.component.html @@ -1,9 +1,17 @@

ec-select

Default

- -
{{ecSelect.selection.getValue() | json}}
+ +
{{values | json}}

Solo

- -
{{ecSelectSolo.selection.getValue() | json}}
\ No newline at end of file + +
{{ecSelectSolo.selection.getValue() | json}}
+ +

Primitive Solo

+ +
{{primitiveSelectSolo.selection.getValue() | json}}
+ +

Primitive

+ +
{{primitiveSelect.selection.getValue() | json}}
diff --git a/demo/app/select/select-demo.component.ts b/demo/app/select/select-demo.component.ts index b0c56647f..55b0d2888 100644 --- a/demo/app/select/select-demo.component.ts +++ b/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() { diff --git a/packages/core/src/item/item-config.interface.ts b/packages/core/src/item/item-config.interface.ts index 636f99c69..c31045bf5 100644 --- a/packages/core/src/item/item-config.interface.ts +++ b/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 { + /** 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 */ diff --git a/packages/core/src/item/item.ts b/packages/core/src/item/item.ts index 917cc4f1d..60ba2dfbe 100644 --- a/packages/core/src/item/item.ts +++ b/packages/core/src/item/item.ts @@ -56,6 +56,9 @@ export class Item { /** Returns an Array of properties possessed by the body. */ getProperties(): Array { 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 { if (!this.hasBody()) { return; } + if (typeof this.body !== 'object') { + return this.body; + } if (!this.config) { return property ? this.body[property] : this.body; } diff --git a/packages/core/src/list/list-config.interface.ts b/packages/core/src/list/list-config.interface.ts index 106990032..ceca2e8c5 100644 --- a/packages/core/src/list/list-config.interface.ts +++ b/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 extends ItemConfig { + /** 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... */ diff --git a/packages/core/src/sorter/sorter.ts b/packages/core/src/sorter/sorter.ts index 5c1845c6e..fc602119e 100644 --- a/packages/core/src/sorter/sorter.ts +++ b/packages/core/src/sorter/sorter.ts @@ -36,7 +36,7 @@ export abstract class Sorter { } 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; diff --git a/packages/data/src/entry-select/entry-select.component.html b/packages/data/src/entry-select/entry-select.component.html index 8ddc4d935..23b0ebe22 100644 --- a/packages/data/src/entry-select/entry-select.component.html +++ b/packages/data/src/entry-select/entry-select.component.html @@ -3,11 +3,11 @@
  • {{selected.display()}} - × + ×
    • - + - Auswählen - diff --git a/packages/data/src/entry-select/entry-select.component.ts b/packages/data/src/entry-select/entry-select.component.ts index 56e394710..5c26dd8ff 100644 --- a/packages/data/src/entry-select/entry-select.component.ts +++ b/packages/data/src/entry-select/entry-select.component.ts @@ -83,19 +83,6 @@ export class EntrySelectComponent extends SelectComponent impleme }); } - select(item: Item) { - 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 diff --git a/packages/data/src/files/asset-select/asset-select.component.html b/packages/data/src/files/asset-select/asset-select.component.html index 469e3af3b..c71eac3b2 100644 --- a/packages/data/src/files/asset-select/asset-select.component.html +++ b/packages/data/src/files/asset-select/asset-select.component.html @@ -1,8 +1,9 @@ -
    +
    Datei hier ablegen Hochladen - oder Mediathek + oder Mediathek
      @@ -11,7 +12,7 @@
      diff --git a/packages/data/src/files/asset-select/asset-select.component.ts b/packages/data/src/files/asset-select/asset-select.component.ts index 25e810245..f118e0a07 100644 --- a/packages/data/src/files/asset-select/asset-select.component.ts +++ b/packages/data/src/files/asset-select/asset-select.component.ts @@ -67,14 +67,6 @@ export class AssetSelectComponent extends SelectComponent i }); } - select(item: Item) { - 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); diff --git a/packages/ui/src/list/list-header/list-header.component.html b/packages/ui/src/list/list-header/list-header.component.html index b97dcef33..72cb5bbd3 100644 --- a/packages/ui/src/list/list-header/list-header.component.html +++ b/packages/ui/src/list/list-header/list-header.component.html @@ -6,9 +6,12 @@ -
      +
      - + {{field.label || field.property}} @@ -16,7 +19,8 @@ - + × diff --git a/packages/ui/src/list/list-items/list-items.component.html b/packages/ui/src/list/list-items/list-items.component.html index 6c362fe0f..2f017c9a0 100644 --- a/packages/ui/src/list/list-items/list-items.component.html +++ b/packages/ui/src/list/list-items/list-items.component.html @@ -1,12 +1,14 @@
        -
      • +
      • + [class.hide]="field.hide" [class.ec-list-field_sortable]="field.sortable" + [class.ec-list-field_sortable_active]="list.config?.sortBy===field.property">
        diff --git a/packages/ui/src/list/list.component.html b/packages/ui/src/list/list.component.html index 95a2dc1d4..b67d1002e 100644 --- a/packages/ui/src/list/list.component.html +++ b/packages/ui/src/list/list.component.html @@ -1,18 +1,24 @@
        - +
        -
        -
        +
        +
        +
        {{group.value}}
        - +
        - \ No newline at end of file + \ No newline at end of file diff --git a/packages/ui/src/select/select.component.html b/packages/ui/src/select/select.component.html index 880e14177..f10657665 100644 --- a/packages/ui/src/select/select.component.html +++ b/packages/ui/src/select/select.component.html @@ -1,14 +1,14 @@
        - + - Auswählen --
      • - {{selected.display()}} × + {{selected.display()}} ×
      - +
      \ No newline at end of file diff --git a/packages/ui/src/select/select.component.ts b/packages/ui/src/select/select.component.ts index 9a82f2719..55d2ada3c 100644 --- a/packages/ui/src/select/select.component.ts +++ b/packages/ui/src/select/select.component.ts @@ -34,27 +34,22 @@ export class SelectComponent implements ControlValueAccessor, OnInit, OnChang /** Configuration Object for List */ @Input() config: ListConfig; /** The visible items */ - @Input() value: Array; + @Input() value: Array; /** The used selection */ @Input() selection: Selection; /** Event emitter on item selection */ @Output() change: EventEmitter> = new EventEmitter(); /** Event emitter on selected item click */ @Output() itemClick: EventEmitter> = new EventEmitter(); - /** Event that emits when the plus is clicked. */ - @Output('toggle') _toggle: EventEmitter> = new EventEmitter(); /** The Instance of the List */ @Input() list: List; - /** True if the selection is active */ - @Input() active: boolean; + /** Available Items */ + @Input() values: Array; /** 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 = new EventEmitter(); - ngOnInit() { this.initSelection(); } @@ -65,6 +60,12 @@ export class SelectComponent 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 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 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() {