cosmoz-omnitable-column-list-horizontal.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">

<dom-module id="cosmoz-omnitable-column-list-horizontal">
	<template>
		<template class="cell">
			<style>
				ul {
					display: inline;
					list-style: none;
				}
				ul li {
					display: inline;
				}
				ul li:after {
					content: ", ";
				}
				ul li:last-child:after {
					content: "";
				}
			</style>
			<ul>
			<template is="dom-repeat" items="[[ get(valuePath, item) ]]" as="listitem">
				<li>[[ listitem ]]</li>
			</template>
			</ul>
		</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="[[ _computeAutocompleteItems(values) ]]"
				label="[[ title ]]"
				selected-items="{{ filter }}"
				text-property="[[ textProperty ]]"
				value-property="[[ valueProperty ]]"
				show-results-on-focus>
			</paper-autocomplete-chips>
		</template>
	</template>

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

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

			properties: {
				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();
					}
				},

				textProperty: {
					type: String,
					value: 'label'
				},

				valueProperty: {
					type: String,
					value: 'value'
				}
			},

			_computeAutocompleteItems: function (values = this.values) {
				const unique = [];
				return values
					.reduce((acc, val) => acc.concat(val), [])
					// Make the item list unique
					.filter((value, index, array) => {
						if (array.indexOf(value) !== index) {
							return false;
						}
						const val = this.valueProperty ? this.get(this.valueProperty, value) : value,
							hasVal = unique.indexOf(val) !== -1;
		
						if (hasVal) {
							return false;
						}
						unique.push(val);
						return true;
					})
					.sort();
			},

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

			getString(item, valuePath = this.valuePath) {
				const values = this.get(valuePath, item);

				if (values == null) {
					return '';
				}

				return values
					.map(value => this.textProperty ? this.get(this.textProperty, value) : value)
					.filter((value, index, array) => array.indexOf(value) === index)
					.join(', ');
			},

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

			_applyMultiFilter: function (filter, item) {
				const valueFilter = element => {
						const value = this.valueProperty ? this.get(this.valueProperty, element) : element;
						return value.toString().toLowerCase();
					},
					filterArray = filter.map(valueFilter),
					listValue = this.get(this.valuePath, item);

				if (listValue == null) {
					return filter.length === 0;
				}

				return listValue
					.map(valueFilter)
					.some(val => filterArray.indexOf(val) >= 0);
			}
		});
	</script>
</dom-module>