cosmoz-omnitable-column-boolean.html

<link rel="import" href="cosmoz-omnitable-column-behavior.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="../paper-listbox/paper-listbox.html"/>
<link rel="import" href="../paper-item/paper-item.html"/>

<dom-module id="cosmoz-omnitable-column-boolean">
	<template>

		<template class="cell">
			[[ getString(item, valuePath) ]]
		</template>

		<template class="edit-cell">
			<paper-dropdown-menu>
				<paper-listbox class="dropdown-content" slot="dropdown-content"
					attr-for-selected="value"
					fallback-selection="[[ _computeSelected(item, valuePath) ]]"
					on-selected-item-changed="_valueChanged">
					<paper-item value="true">[[ trueLabel ]]</paper-item>
					<paper-item value="false">[[ falseLabel ]]</paper-item>
				</paper-listbox>
			</paper-dropdown-menu>
		</template>

		<template class="header">
			<paper-dropdown-menu label="[[ title ]]"
					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
				<paper-listbox class="dropdown-content" slot="dropdown-content" attr-for-selected="value" selected="{{ _textFilter }}">
					<paper-item value=""></paper-item>
					<paper-item value="true">[[ trueLabel ]]</paper-item>
					<paper-item value="false">[[ falseLabel ]]</paper-item>
				</paper-listbox>
			</paper-dropdown-menu>
		</template>

	</template>
	<script>
		Polymer({
			is: 'cosmoz-omnitable-column-boolean',

			properties: {

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

				trueLabel: {
					type: String,
					value: 'True'
				},

				falseLabel: {
					type: String,
					value: 'False'
				},

				_textFilter: {
					type: String,
					observer: '_textFilterChanged'
				},

				_textValue: {

				},

				templatetemplateWidth: {
					type: String,
					value: '60px'
				},

				/**
				 * No need to grow, as the values in a boolean column should have known fixed width
				 * @returns {String} Default flex
				 */
				flex: {
					type: String,
					value: '0'
				}
			},

			behaviors: [
				Cosmoz.OmnitableColumnBehavior
			],

			observers: [
				'_filterChanged(filter)'
			],

			// TODO(pasleq): same questions as for cosmoz-omnitable-column-date

			_filterChangedFromInput: false,

			_filterChangedFromAbove: false,

			_textFilterChanged: function (textFilter) {
				if (this._filterChangedFromAbove) {
					this._filterChangedFromAbove = false;
					return;
				}
				var b = null;
				if (textFilter) {
					b = textFilter === 'true';
				}
				this._filterChangedFromInput = true;
				this.set('filter', b);
			},

			_filterChanged: function (filter) {
				if (this._filterChangedFromInput) {
					this._filterChangedFromInput = false;
					return;
				}

				this._filterChangedFromAbove = true;
				if (typeof filter === 'boolean') {
					this._textFilter = filter.toString();
				} else {
					this._textFilter = null;
				}

			},

			getString: function (item, valuePath) {
				var value = this.get(valuePath || this.valuePath, item);
				return value ? this.trueLabel : this.falseLabel;
			},

			getFilterFn: function () {
				if (this.filter != null) {
					return this._applySingleFilter.bind(this);
				}
			},

			_applySingleFilter: function (item) {
				var value = this.get(this.valuePath, item);
				return value === this.filter;
			},

			_computeSelected: function (item, valuePath) {
				var value = this.get(valuePath, item);
				if (value != null) {
					return value.toString();
				}
			},

			/** OVERRIDES */

			/** cosmoz-omnitable-column-behavior */

			_valueChanged(e) {
				var value = e.target.selected === 'true',
					item = e.model.item,
					oldValue = this.get(this.valuePath, item),
					formatFn = value => {
						return value ? this.trueLabel : this.falseLabel;
					};
				if (value === oldValue) {
					return;
				}
				this.set(this.valuePath, value, item);
				this._fireItemChangeEvent(item, this.valuePath, oldValue, formatFn.bind(this));
			}

		});

	</script>
</dom-module>