cosmoz-omnitable-column-mixin.js

import { get } from '@polymer/polymer/lib/utils/path';

export const getString = ({ valuePath }, item) => get(item, valuePath),
	toXlsxValue = getString,
	getComparableValue = getString,
	applySingleFilter =
		({ valuePath }, filter) =>
		(item) => {
			const value = get(item, valuePath);
			if (value == null) {
				return false;
			}
			return value
				.toString()
				.toLowerCase()
				.trim()
				.includes(filter.toLowerCase().trim());
		},
	serializeFilter = (column, filter) =>
		filter === '' || filter == null ? null : filter,
	// eslint-disable-next-line max-lines-per-function
	columnMixin = (base) =>
		class extends base {
			static get properties() {
				return {
					/**
					 * 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 },
					title: { type: String },
					valuePath: { type: String, notify: true },
					values: { type: Array, notify: true },
					filter: { type: Object },
					noLocalFilter: { type: Boolean },
					/**
					 * If the column should be disabled until enabled with enabledColumns
					 */
					disabled: { type: Boolean, value: false, notify: true },
					/**
					 * If true, the column will be editable by using an input element for rendering.
					 */
					editable: { type: Boolean, notify: true },
					/**
					 * Indicate that the column is loading/performing work
					 */
					loading: { type: Boolean, value: false, notify: true },
					externalValues: { type: Boolean, value: false, notify: true },
					/**
					 * Column name for use with enabledColumns
					 */
					name: { type: String },
					sortOn: { type: String },
					groupOn: { type: String },
					width: { type: String, value: '75px' },
					minWidth: { type: String, value: '40px' },
					flex: { type: String, value: '1' },
					cellClass: { type: String, value: 'default-cell' },
					headerCellClass: { type: String, value: 'default-header-cell' },
					priority: { type: Number, value: 0 },
					hidden: { type: Boolean, notify: true },
					preferredDropdownHorizontalAlign: { type: String, value: 'right' },
					renderHeader: { type: Function },
					renderCell: { type: Function },
					renderEditCell: { type: Function },
					renderGroup: { type: Function },

					/**
					 * The priority of the column in the mini mode. If missing the column is disabled in the mini mode.
					 */
					mini: { type: Number, value: null },
					/**
					 * An alternative render to use in mini mode. Takes the same params as `renderCell`.
					 */
					renderMini: { type: Function },
				};
			}

			static get observers() {
				return ['notifyFilterChange(filter)'];
			}

			notifyFilterChange(filter) {
				if (this.__ownChange) {
					return;
				}
				this.dispatchEvent(
					new CustomEvent('legacy-filter-changed', {
						detail: {
							name: this.name,
							state: this.legacyFilterToState(filter),
						},
						bubbles: true,
					}),
				);
			}

			legacyFilterToState(filter) {
				return { filter };
			}

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

			// eslint-disable-next-line no-empty-function
			getFilterFn() {}

			getString(column, item) {
				return getString(column, item);
			}

			toXlsxValue(column, item) {
				return toXlsxValue(column, item);
			}

			cellTitleFn(column, item) {
				return getString(column, item);
			}

			serializeFilter(column, filter) {
				return serializeFilter(column, filter);
			}

			deserializeFilter(column, filter) {
				if (filter == null) {
					return null;
				}

				if (typeof filter === 'string') {
					return window.decodeURIComponent(filter);
				}
				return filter;
			}

			getComparableValue(column, item) {
				return getComparableValue(column, item);
			}

			computeSource(column, data) {
				return data;
			}

			_propertiesChanged(currentProps, changedProps, oldProps) {
				super._propertiesChanged(currentProps, changedProps, oldProps);
				this.dispatchEvent(
					new CustomEvent('cosmoz-column-prop-changed', { bubbles: true }),
				);
			}
		};