cosmoz-omnitable-column-list-horizontal.html

<link rel="import" href="../shadycss/apply-shim.html">
<link rel="import" href="../polymer/polymer-element.html"/>
<link rel="import" href="../polymer/lib/legacy/class.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-mixin.html">
<link rel="import" href="cosmoz-omnitable-column-list-mixin.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">
		window.Cosmoz = window.Cosmoz || {};

		/**
		 * @polymer
		 * @customElement
		 * @appliesMixin Cosmoz.OmnitableColumnMixin
		 * @appliesMixin Cosmoz.ListColumnMixin
		 */
		class OmnitableColumnListHorizontal extends	Cosmoz.OmnitableColumnMixin(Cosmoz.ListColumnMixin(
			Polymer.mixinBehaviors([Cosmoz.TranslatableBehavior], Polymer.Element)
		)) {
			static get is() {
				return 'cosmoz-omnitable-column-list-horizontal';
			}

			static get properties() {
				return {
					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();
						}
					}
				};
			}

			_computeAutocompleteItems(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(value) {
				if (value == null) {
					return null;
				}
				return value.toString();
			}

			_applySingleFilter(filterString, item) {
				const value = this.get(this.valuePath, item);
				if (value == null) {
					return false;
				}
				return value.toString().toLowerCase() === filterString;
			}

			_applyMultiFilter(filter, item) {
				const valueFilter = element => {
						const value = this.valueProperty ? this.get(this.valueProperty, element) : element;
						return value ? value.toString().toLowerCase() : null;
					},
					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);
			}

			_getDefaultFilter() {
				return [];
			}

			getString() {
				const value = super.getString.apply(this, arguments);
				if (!Array.isArray(value) || value.length === 0) {
					return '';
				}

				return value.join(', ');
			}
		}

		customElements.define(
			OmnitableColumnListHorizontal.is,
			OmnitableColumnListHorizontal
		);

		Cosmoz.OmnitableColumnListHorizontal = OmnitableColumnListHorizontal;
	</script>
</dom-module>