cosmoz-omnitable-column-autocomplete.html

<link rel="import" href="../paper-spinner/paper-spinner-lite.html">
<link rel="import" href="../paper-autocomplete-chips/paper-autocomplete-chips.html">

<link rel="import" href="cosmoz-omnitable-column-behavior.html">

<dom-module id="cosmoz-omnitable-column-autocomplete">
	<template>
		<template class="cell">
			<span class="default-column">[[ getString(item, valuePath) ]]</span>
		</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
				text="{{ query }}"
				source="[[ _unique(values, valueProperty) ]]"
				label="[[ title ]]"
				selected-items="{{ filter }}"
				text-property="[[ textProperty ]]"
				value-property="[[ valueProperty ]]"
				show-results-on-focus>
				<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active="[[ loading ]]" hidden="[[ !loading ]]"></paper-spinner-lite>
			</paper-autocomplete-chips>
		</template>
	</template>

	<script>
		Polymer({
			is: 'cosmoz-omnitable-column-autocomplete',

			behaviors: [
				Cosmoz.OmnitableColumnBehavior
			],

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

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

				query: {
					type: String,
					notify: true
				},

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

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

				headerCellClass: {
					type: String,
					value: 'autocomplete-header-cell'
				},

				minWidth: {
					type: String,
					value: '55px'
				},

				editMinWidth: {
					type: String,
					value: '55px'
				}
			},

			getComparableValue: function (item, valuePath = this.valuePath) {
				return this.getString(item, valuePath);
			},

			getString(item, valuePath = this.valuePath) {
				if (valuePath === undefined) {
					console.error(this, 'has undefined valuePath', valuePath, 'for item', item);
					return;
				}
				const itemValue = this.get(valuePath, item),
					textProp = this.textProperty;
				if (Array.isArray(itemValue)) {
					return itemValue.join(', ');
				}
				if (textProp && typeof itemValue === 'object') {
					return this.get(textProp, itemValue);
				}
				return itemValue;
			},

			toXlsxValue: function (item, valuePath = this.valuePath) {
				if (!valuePath) {
					return '';
				}
				return this.getString(item, valuePath);
			},

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

			_applyMultiFilter(filter, item) {
				// check if the item does not have a value for the filtered property
				let value = this.get(this.valuePath, item);
				if (value === undefined || value === null) {
					return false;
				}

				const filterArray = filter.map(element => {
					let val = element;
					if (this.valueProperty) {
						val = element[this.valueProperty];
					}
					return val.toString().toLowerCase();
				});


				if (this.valueProperty) {
					value = value[this.valueProperty];
				}
				value = value.toString().toLowerCase();

				return filterArray.indexOf(value) !== -1;
			},

			_unique(values, valueProperty) {
				if (!Array.isArray(values)) {
					return;
				}
				const used = [];
				return values.filter((item, index, array) => {
					if (array.indexOf(item) !== index) {
						return false;
					}
					if (valueProperty) {
						let value = this.get(valueProperty, item);
						if (used.indexOf(value) !== -1) {
							return false;
						}
						used.push(value);
					}
					return true;
				});
			}
		});
	</script>
</dom-module>