cosmoz-omnitable-column-behavior.html

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

<script>
	window.Cosmoz = window.Cosmoz || {};

	Cosmoz.OmnitableColumnStyleModules = [];

	const IS_V2 = Polymer.flush != null;

	/** @polymerBehavior */
	Cosmoz.OmnitableColumnBehavior = {
		properties: {

			title: {
				type: String,
				observer: '_titleChanged'
			},

			valuePath: {
				type: String,
				observer: 'valuePathChanged'
			},

			/**
			 * If the column should be disabled until enabled with enabledColumns
			 */
			disabled: {
				type: Boolean,
				value: false
			},

			/**
			 * If true, the column will be editable by using an input element for rendering.
			 */
			editable: {
				type: Boolean
			},

			/**
			 * Values to filter this column will be managed outside of omnitable
			 */
			externalValues: {
				type: Boolean,
				value: false
			},

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

			/**
			 * Indicates whether the user has engaged with the
			 * header/filter component of the column
			 */
			headerFocused: {
				type: Boolean,
				value: false,
				notify: true
			},

			/**
			 * Indicate that the column is loading/performing work
			 */
			loading: {
				type: Boolean,
				value: false
			},

			/**
			 * Whether the column wants a list of all distinct values for the column in `values`
			 */
			bindValues: {
				type: Boolean,
				readOnly: true,
				value: false
			},

			/**
			 * Column name for use with enabledColumns
			 */
			name: {
				type: String
			},

			/**
			 * All values for this column.
			 */
			values: {
				type: Array
			},

			sortOn: {
				type: String
			},

			groupOn: {
				type: String
			},

			/**
			 * Used to indicate that an element using this behavior is a column definition that can be used
			 * in cosmoz-omnitable
			 */
			isOmnitableColumn: {
				type: Boolean,
				value: true,
				readOnly: true
			},

			/**
			 * Base width of this column.
			 */
			width: {
				type: String,
				value: '75px'
			},

			/**
			 * Base width of this column when in edit mode.
			 */
			editWidth: {
				type: String,
				value: '75px'
			},

			/**
			 * The minimum width of this column.
			 */
			minWidth: {
				type: String,
				value: '40px'
			},

			/**
			 * The minimum width of this column in edit mode.
			 */
			editMinWidth: {
				type: String,
				value: '40px'
			},

			/**
			 * Width growing factor for this column.
			 */
			flex: {
				type: String,
				value: '1'
			},

			cellClass: {
				type: String,
				value: 'default-cell'
			},

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

			styleModule: {
				type: String
			},

			/**
			 * Allow column to overflow without triggering
			 * column folding (good for long descriptions)
			 */
			overflow: {
				type: Boolean,
				value: false
			},

			priority: {
				type: Number,
				value: 0
			},

			cellTemplate: {
				type: Object,
				observer: '_cellTemplateChanged'
			},

			hidden: {
				type: Boolean,
				reflectToAttribute: true,
				observer: '_hiddenChanged'
			},
			/**
			 * Index of this column in the list of displayed columns (excluding disabled/hidden columns).
			 */
			columnIndex: {
				type: Number
			},

			preferredDropdownHorizontalAlign: {
				type: String,
				computed: '_computePreferredDropdownHorizontalAlign(columnIndex)'
			},

			_dataTemplatizer: {
				type: Object,
				value: null
			},

			_headerTemplatizer: {
				type: Object,
				value: null
			},
		},

		StyleModules: [],

		observers: [
			'__filterChanged(filter.*)'
		],

		ready: function () {
			this._headerTemplatizer = this._createTemplatizer('template.header');
			this._itemCells = [];
		},

		_createTemplatizer: function (templateElementOrSelector) {
			var template,
				templateHost,
				templatizer,
				root;
			if (templateElementOrSelector instanceof HTMLTemplateElement) {
				template = templateElementOrSelector;
				templateHost = Polymer.dom(templateElementOrSelector).parentNode;
			} else {
				template = Polymer.dom(this).querySelector(templateElementOrSelector);
				if (template) {
					root = Polymer.dom(this).getOwnerRoot();
				} else {
					root = Polymer.dom(this.root).getOwnerRoot();
					template = Polymer.dom(this.root).querySelector(templateElementOrSelector);
				}
				if (root) {
					templateHost = root.host;
				}
			}

			templatizer = document.createElement('cosmoz-omnitable-templatizer');
			if (IS_V2) {
				this.appendChild(templatizer);
			}
			templatizer.init(template, templateHost);
			return templatizer;
		},

		_cellTemplateChanged: function (cellTemplate) {
			if (cellTemplate !== undefined && cellTemplate !== null) {
				this._dataTemplatizer = this._createTemplatizer(cellTemplate);
			}
		},


		get dataTemplatizer() {
			var selector;
			if (!this._dataTemplatizer) {
				if (this.editable) {
					selector = 'template.edit-cell';
				} else {
					selector = 'template.cell';
				}
				this._dataTemplatizer = this._createTemplatizer(selector);
			}
			return this._dataTemplatizer;
		},

		get headerTemplatizer() {
			return this._headerTemplatizer;
		},

		getHeaderTemplateInstance: function () {
			if (!this._headerTemplatizer || !this._headerTemplatizer.createInstance) {
				return;
			}
			return this._headerTemplatizer.createInstance();
		},

		releaseHeaderTemplateInstance: function (instance) {
			if (this._headerTemplatizer) {
				this._headerTemplatizer.releaseInstance(instance);
			}
		},

		/**
		 * Override this in column elements if you need a different default width
		 */

		_computePreferredDropdownHorizontalAlign: function (columnIndex) {
			return columnIndex === 0 ? 'left' : 'right';
		},

		getString: function (item, valuePath = this.valuePath) {
			if (valuePath === undefined) {
				console.error(this, 'has undefined valuePath arg', valuePath, 'for item', item);
				return;
			}
			return this.get(valuePath, item);
		},

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

		valuePathChanged: function (newPath, oldPath) {
			if (newPath === undefined || newPath === null) {
				return;
			}
			if (this.groupOn === oldPath || this.groupOn === undefined) {
				this.set('groupOn', newPath);
			}
			if (this.sortOn === oldPath || this.sortOn === undefined) {
				this.set('sortOn', newPath);
			}
		},

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

		_valueChanged: function (event) {
			var
				input = event.target,
				value = input.value,
				item = event.model.item,
				oldValue = this.get(this.valuePath, item);

			this.set(this.valuePath, value, item);
			this._fireItemChangeEvent(item, this.valuePath, oldValue);
		},

		_fireItemChangeEvent(item, valuePath, oldValue, formatFn) {
			var value = this.get(valuePath, item),
				change = {
					item: item,
					valuePath: this.valuePath,
					value: formatFn ? formatFn(value) : value,
					oldValue: formatFn ? formatFn(oldValue) : oldValue
				};
			this.fire('column-item-changed', change);
		},

		getFilterFn: function () {
			if (!this.filter) {
				return;
			}
			if (!Array.isArray(this.filter)) {
				return this._applySingleFilter.bind(this, this.filter.toString().toLowerCase());
			}
			if (this.filter.length === 0) {
				return;
			}
			return this._applyMultiFilter.bind(this, this.filter);
		},

		resetFilter: function () {
			this.filter = this._getDefaultFilter();
		},

		/**
		 * Returns whether `filter` is set to a usable value.
		 *
		 * @returns {Boolean}  True if filter is set
		 */
		hasFilter() {
			const filter = this.filter,
				isArray = Array.isArray(filter);

			if (filter == null || filter === ''
				|| isArray && filter.length === 0
				|| typeof filter === 'object' && !isArray && Object.keys(filter).filter(k => filter[k] != null).length === 0
			) {
				return false;
			}
			return true;
		},

		_getDefaultFilter: function () {
			const type = this.get('properties.filter.type');

			if (type === Array) {
				return [];
			}
			return null;
		},

		_applySingleFilter: function (filterString, item) {
			const value = this.get(this.valuePath, item);
			if (value == null) {
				return false;
			}
			return value.toString().toLowerCase().indexOf(filterString) > -1;
		},

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

			return filterArray.some(filter => value.indexOf(filter) >= 0);
		},

		_titleChanged: function () {
			this.fire('cosmoz-column-title-changed', { column: this });
		},

		_hiddenChanged: function () {
			this.fire('cosmoz-column-hidden-changed', { column: this });
		},

		__filterChanged: function () {
			this.fire('cosmoz-column-filter-changed', { column: this });
		},

		_serializeFilter: function (obj = this.filter) {
			const type = {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
			let value = obj;

			if (type === 'array' && !value.length) {
				value =  null;
			} else if (type === 'object') {
				const keys = Object.keys(obj).filter(k => obj[k] != null);
				if (keys.length > 0) {
					value = keys.reduce((acc, k) => {
						acc[k] = obj[k];
						return acc;
					}, {});
				} else {
					value =  null;
				}
			}
			return this.serialize(value);
		},

		_deserializeFilter: function (obj) {
			const type = this.filter && this.filter.constructor || Object;

			if (type === Object && obj == null) {
				return {};
			}
			if (type === Array && obj == null) {
				return [];
			}
			return this.deserialize(obj, type);
		},

	};

</script>