cosmoz-omnitable-column-list.html

<link rel="import" href="../paper-autocomplete-chips/paper-autocomplete-chips.html">
<link rel="import" href="../cosmoz-i18next/cosmoz-i18next.html">
<link rel="import" href="cosmoz-omnitable-column-behavior.html">
<link rel="import" href="cosmoz-omnitable-column-list-data.html">

<dom-module id="cosmoz-omnitable-column-list">
	<template>
		<template class="cell">
			<cosmoz-omnitable-column-list-data items="[[ get(valuePath, item) ]]">
			</cosmoz-omnitable-column-list-data>
		</template>

		<template class="edit-cell">
			<paper-input no-label-float type="text" on-change="_valueChanged" value="[[ getString(item, valuePath) ]]"></paper-input>
		</template>

		<template class="header">
			<paper-autocomplete-chips
				source="[[ autocompleteItems ]]"
				label="[[ title ]]"
				selected-items="{{ autocompleteSelectedItems }}"
				text-property="label"
				value-property="value"
				show-results-on-focus>
			</paper-autocomplete-chips>
		</template>
	</template>

	<script type="text/javascript">
		Polymer({
			is: 'cosmoz-omnitable-column-list',

			behaviors: [
				Cosmoz.OmnitableColumnBehavior,
				Cosmoz.TranslatableBehavior
			],

			properties: {
				autocompleteItems: {
					type: Array,
					notify: true,
					computed: '_computeAutocompleteItems(values.length)'
				},

				autocompleteSelectedItems: {
					type: Array
				},

				/**
				 * Ask for a list of values
				 */
				bindValues: {
					type: Boolean,
					readOnly: true,
					value: true
				},

				filter: {
					type: Array,
					notify: true,
					value() {
						return this._getDefaultFilter();
					}
				},
			},

			observers: [
				'_autocompleteSelectedItemsChanged(autocompleteSelectedItems.length)',
				'_filterChanged(filter, autocompleteItems)'
			],

			_computeAutocompleteItems: function () {
				return this.values
					.reduce((acc, val) => acc.concat(val), [])
					// Make the item list unique
					.filter((value, index, array) => array.indexOf(value) === index)
					.sort()
					.map(value => {
						return {
							value: value,
							label: this._getLabelForValue(value)
						};
					});
			},

			_getLabelForValue: function (value) {
				return value.toString();
			},

			_applySingleFilter: function (filterString, item) {
				const value = this.get(this.valuePath, item).toString().toLowerCase();
				return value === filterString;
			},

			_applyMultiFilter: function (filter, item) {
				const filterArray = filter.map(element => element.toString().toLowerCase()),
					listValue = this.get(this.valuePath, item);

				return listValue.some(val =>
					filterArray.indexOf(val.toString().toLowerCase()) >= 0
				);
			},

			_autocompleteSelectedItemsChanged: function () {
				const filter = this.filter,
					items = this.autocompleteSelectedItems;
				if (Array.isArray(filter) && items.length === this.filter.length &&  items.every((item, i) => item.value === filter[i])) {
					return;
				}
				this.filter = this.autocompleteSelectedItems.map(item => item.value);
			},

			_filterChanged(filter, autoItems) {
				const items = this.autocompleteSelectedItems;
				if (!Array.isArray(autoItems) || Array.isArray(items) && items.length === this.filter.length && filter.every((f, i) => items[i] && f === items[i].value)) {
					return;
				}
				this.autocompleteSelectedItems = this.filter.map(f => {
					return autoItems.find(a => a.value === f);
				});
			}
		});
	</script>
</dom-module>