@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

package/src/components/tek-grid/columns-button/TekGridColumnsOptionsController.ts

@@ -0,0 +1,470 @@
+import { Iterable, Modal, Select } from '@zeedhi/common';
+import { TekGrid, TekGridColumnsButton } from '@zeedhi/teknisa-components-common';
+import { I18n, IDictionary, IEventParam, Metadata, Singleton, Utils } from '@zeedhi/core';
+import Sortable from 'sortablejs';
+
+@Singleton
+export default class TekGridColumnsOptionsController {
+	public modal: Modal;
+
+	public columnData: IDictionary<any> = {};
+
+	public fixedColumns: IDictionary<any>[] = [];
+
+	public visibleColumns: IDictionary<any>[] = [];
+
+	public groupedColumns: IDictionary<any>[] = [];
+
+	public otherColumns: IDictionary<any>[] = [];
+
+	public aggregationData: IDictionary<any>[] = [];
+
+	public selectedColumnNames: string[] = [];
+
+	public searchValue = '';
+
+	public showGroups = true;
+
+	private selectedColumnsAlignment?: string;
+
+	private selectedColumnsAggregation?: string;
+
+	private iterableComponent!: Iterable;
+
+	private instanceValue!: TekGridColumnsButton;
+
+	constructor(modal: Modal) {
+		this.modal = modal;
+	}
+
+	private updateArrays() {
+		this.fixedColumns = [];
+		this.visibleColumns = [];
+		this.groupedColumns = [];
+		this.otherColumns = [];
+
+		Object.keys(this.columnData).forEach((name) => {
+			const column = this.columnData[name];
+
+			if (this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) === -1) {
+				if (column.grouped) {
+					this.groupedColumns.push(column);
+				} else if (column.fixed) {
+					this.fixedColumns.push(column);
+				} else if (column.isVisible) {
+					this.visibleColumns.push(column);
+				} else {
+					this.otherColumns.push(column);
+				}
+			}
+		});
+	}
+
+	set instance(instance: TekGridColumnsButton) {
+		this.instanceValue = instance;
+		this.iterableComponent = instance.iterableComponent;
+		this.showGroups = instance.iterableComponent instanceof TekGrid;
+		this.aggregationData = instance.getAggregationSelectData();
+		this.columnData = {};
+
+		this.iterableComponent.columns.forEach((column: any) => {
+			this.columnData[column.name] = {
+				name: column.name,
+				label: column.label,
+				fixed: column.fixed,
+				isVisible: column.isVisible,
+				align: column.align,
+				grouped: column.grouped || false,
+				groupOpened: column.groupOpened || false,
+				aggregation: column.aggregation,
+				aggregationText: this.getAggregationText(column.aggregation),
+				selected: false,
+			};
+		});
+
+		this.updateArrays();
+
+		this.selectedColumnNames = [];
+	}
+
+	private getAggregationText(aggregation?: string) {
+		let result = '';
+		if (aggregation) {
+			const idx = this.aggregationData.findIndex((item) => item.value === aggregation);
+			if (idx !== -1) {
+				result = ` (${this.aggregationData[idx].text})`;
+			}
+		}
+		return result;
+	}
+
+	private columnInSearch(column: any) {
+		return !this.searchValue || Utils.normalize(column.label).indexOf(Utils.normalize(this.searchValue)) !== -1;
+	}
+
+	get fixedColumnData() {
+		return this.fixedColumns.filter(this.columnInSearch.bind(this));
+	}
+
+	set fixedColumnData(_data: any) {
+		// do nothing
+	}
+
+	get visibleColumnData() {
+		return this.visibleColumns.filter(this.columnInSearch.bind(this));
+	}
+
+	set visibleColumnData(_data: any) {
+		// do nothing
+	}
+
+	get groupedColumnData() {
+		return this.groupedColumns.filter(this.columnInSearch.bind(this));
+	}
+
+	set groupedColumnData(_data: any) {
+		// do nothing
+	}
+
+	get otherColumnData() {
+		return this.otherColumns.filter(this.columnInSearch.bind(this));
+	}
+
+	set otherColumnData(_data: any) {
+		// do nothing
+	}
+
+	get hasSelectedColumn(): boolean {
+		return this.selectedColumnNames.length > 0;
+	}
+
+	get hasNoSelectedColumn(): boolean {
+		return !this.hasSelectedColumn;
+	}
+
+	get detailColumnName(): string {
+		const columnNames = this.selectedColumnNames.length
+			? this.selectedColumnNames.join(', ')
+			: I18n.translate('TEKGRID_SELECT_COLUMN');
+
+		return `${I18n.translate('TEKGRID_DETAILS_FOR')} ${columnNames}`;
+	}
+
+	get hasNoFixedColumns(): boolean {
+		return this.fixedColumns.length === 0;
+	}
+
+	get hasNoVisibleColumns(): boolean {
+		return this.visibleColumns.length === 0;
+	}
+
+	get hasNoGroupedColumns(): boolean {
+		return this.groupedColumns.length === 0;
+	}
+
+	get hasNoOtherColumns(): boolean {
+		return this.otherColumns.length === 0;
+	}
+
+	get hasNoSingleSelection(): boolean {
+		return this.selectedColumnNames.length !== 1;
+	}
+
+	get selectedColumnLabel() {
+		return this.selectedColumnNames.length === 1 ? this.columnData[this.selectedColumnNames[0]].label : '';
+	}
+
+	set selectedColumnLabel(value: string) {
+		if (this.selectedColumnNames.length === 1) {
+			this.columnData[this.selectedColumnNames[0]].label = value;
+		}
+	}
+
+	private getSameValue(propName: string) {
+		const isEqual =
+			this.selectedColumnNames.length > 0 &&
+			this.selectedColumnNames.every(
+				(name) => this.columnData[name][propName] === this.columnData[this.selectedColumnNames[0]][propName],
+			);
+		return isEqual ? this.columnData[this.selectedColumnNames[0]][propName] : undefined;
+	}
+
+	private setSameValue(propName: string, value: any) {
+		this.selectedColumnNames.forEach((name) => {
+			this.columnData[name][propName] = value;
+		});
+	}
+
+	get groupInSelection(): boolean {
+		return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => this.columnData[name].grouped);
+	}
+
+	get notGroupInSelection(): boolean {
+		return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => !this.columnData[name].grouped);
+	}
+
+	get selectedColumnGroupOpened(): any {
+		return this.getSameValue('groupOpened');
+	}
+
+	set selectedColumnGroupOpened(value: any) {
+		this.setSameValue('groupOpened', value);
+	}
+
+	public selectMounted({ component }: IEventParam<Select>) {
+		this.updatingSelect = true;
+		if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
+			component.value = this.selectedColumnsAlignment;
+		} else if (component.name === 'tekGridColumnsOptionsColumnAggregation') {
+			component.value = this.selectedColumnsAggregation;
+		}
+
+		// prevent changing column value from here
+		setTimeout(() => {
+			this.updatingSelect = false;
+		}, 0);
+	}
+
+	private updatingSelect = false;
+
+	public selectChange({ component }: IEventParam<Select>) {
+		if (this.updatingSelect) return;
+
+		if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
+			this.setSameValue('align', component.value);
+		} else {
+			this.setSameValue('aggregation', component.value);
+			this.setSameValue('aggregationText', this.getAggregationText(component.value));
+		}
+	}
+
+	private updateSelects() {
+		this.selectedColumnsAlignment = this.updateSelect('align');
+		this.selectedColumnsAggregation = this.updateSelect('aggregation');
+	}
+
+	private updateSelect(propName: string) {
+		this.updatingSelect = true;
+		const propValue = this.getSameValue(propName);
+		const selectNames: IDictionary<any> = {
+			align: 'tekGridColumnsOptionsColumnAlignment',
+			aggregation: 'tekGridColumnsOptionsColumnAggregation',
+		};
+
+		const instances = Metadata.getInstances(selectNames[propName]);
+		if (instances[0]) {
+			(instances[0] as Select).value = propValue;
+		}
+
+		// prevent changing column value from here
+		setTimeout(() => {
+			this.updatingSelect = false;
+		}, 0);
+		return propValue;
+	}
+
+	private columnRemoveClick(column: IDictionary) {
+		column.isVisible = false;
+		this.selectedColumnNames.splice(this.selectedColumnNames.indexOf(column.name), 1);
+		this.otherColumns.push(column);
+	}
+
+	public columnFixedRemoveClick({ element }: IEventParam<any>) {
+		const columnName = element?.getAttribute('columnname');
+		if (columnName) {
+			const column = this.columnData[columnName];
+			this.columnRemoveClick(column);
+			this.fixedColumns.splice(this.fixedColumns.indexOf(column), 1);
+		}
+	}
+
+	public columnVisibleRemoveClick({ element }: IEventParam<any>) {
+		const columnName = element?.getAttribute('columnname');
+		if (columnName) {
+			const column = this.columnData[columnName];
+			this.columnRemoveClick(column);
+			this.visibleColumns.splice(this.visibleColumns.indexOf(column), 1);
+		}
+	}
+
+	public columnGroupedRemoveClick({ element }: IEventParam<any>) {
+		const columnName = element?.getAttribute('columnname');
+		if (columnName) {
+			const column = this.columnData[columnName];
+			this.columnRemoveClick(column);
+			this.groupedColumns.splice(this.groupedColumns.indexOf(column), 1);
+		}
+	}
+
+	private isMacPlatform() {
+		return /Mac/.test(navigator.platform);
+	}
+
+	private isMobilePlatform() {
+		return /iPhone|iPad|Android/.test(navigator.platform);
+	}
+
+	public columnClick({ element, event }: IEventParam<any>) {
+		const columnName = element!.getAttribute('columnname');
+		if (columnName) {
+			const mouseEvent = event as MouseEvent;
+			const multiple = (this.isMacPlatform() && mouseEvent.metaKey) || mouseEvent.ctrlKey || this.isMobilePlatform();
+			if (!multiple) {
+				Object.keys(this.columnData).forEach((name) => {
+					const column = this.columnData[name];
+					column.selected = column.name === columnName;
+				});
+			} else {
+				this.columnData[columnName].selected = !this.columnData[columnName].selected;
+			}
+
+			const orderedColumns = this.fixedColumns
+				.concat(this.visibleColumns)
+				.concat(this.groupedColumns)
+				.concat(this.otherColumns);
+			this.selectedColumnNames = orderedColumns.filter((column) => column.selected).map((column) => column.name);
+			this.updateSelects();
+		}
+	}
+
+	private removeFromSourceList(columnName: string) {
+		const column = this.columnData[columnName];
+		const fixedIdx = this.fixedColumns.indexOf(column);
+		if (fixedIdx !== -1) {
+			this.fixedColumns.splice(fixedIdx, 1);
+		} else {
+			const visibleIdx = this.visibleColumns.indexOf(column);
+			if (visibleIdx !== -1) {
+				this.visibleColumns.splice(visibleIdx, 1);
+			} else {
+				const groupedIdx = this.groupedColumns.indexOf(column);
+				if (groupedIdx !== -1) {
+					this.groupedColumns.splice(groupedIdx, 1);
+				} else {
+					const otherIdx = this.otherColumns.indexOf(column);
+					if (otherIdx !== -1) {
+						this.otherColumns.splice(otherIdx, 1);
+					}
+				}
+			}
+		}
+	}
+
+	private onDragEnd(event: any) {
+		const columnName = event.item.getAttribute('columnname');
+		if (this.selectedColumnNames.indexOf(columnName) === -1) {
+			this.selectedColumnNames = [columnName];
+			this.updateSelects();
+
+			setTimeout(() => {
+				Object.keys(this.columnData).forEach((name) => {
+					const column = this.columnData[name];
+					column.selected = column.name === columnName;
+				});
+			});
+		}
+
+		this.selectedColumnNames.forEach((name, index) => {
+			const newIndex = event.newIndex + index;
+			if (name) {
+				this.removeFromSourceList(name);
+				const column = this.columnData[name];
+				if (event.to.id === 'tekGridColumnsOptionsFixedColumns') {
+					column.fixed = true;
+					column.isVisible = true;
+					column.grouped = false;
+					column.groupOpened = false;
+					this.fixedColumns.splice(newIndex, 0, column);
+				} else if (event.to.id === 'tekGridColumnsOptionsVisibleColumns') {
+					column.fixed = false;
+					column.isVisible = true;
+					column.grouped = false;
+					column.groupOpened = false;
+					this.visibleColumns.splice(newIndex, 0, column);
+				} else if (event.to.id === 'tekGridColumnsOptionsOtherColumns') {
+					column.fixed = false;
+					column.isVisible = false;
+					column.grouped = false;
+					column.groupOpened = false;
+					this.otherColumns.splice(newIndex, 0, column);
+				} else if (event.to.id === 'tekGridColumnsOptionsGroupedColumns') {
+					column.fixed = false;
+					column.isVisible = true;
+					column.grouped = true;
+					column.aggregation = undefined;
+					column.aggregationText = '';
+					this.groupedColumns.splice(newIndex, 0, column);
+				}
+			}
+		});
+	}
+
+	public columnContainerMounted({ element }: IEventParam<Modal>) {
+		if (element) {
+			Sortable.create(element, {
+				handle: '.tek-grid-column-option-box',
+				group: 'column-container',
+				filter: '.no-data, .tek-grid-column-option-grouped-true',
+				onEnd: this.onDragEnd.bind(this),
+			} as any);
+		}
+	}
+
+	public selectAll({ component }: IEventParam<any>) {
+		let list: IDictionary<any>[];
+		if (component.name === 'tekGridColumnsOptionsFixedSelectAll') {
+			list = this.fixedColumns;
+		} else if (component.name === 'tekGridColumnsOptionsVisibleSelectAll') {
+			list = this.visibleColumns;
+		} else if (component.name === 'tekGridColumnsOptionsOtherSelectAll') {
+			list = this.otherColumns;
+		} else {
+			list = this.groupedColumns;
+		}
+
+		this.selectedColumnNames = list.map((column) => column.name);
+		Object.keys(this.columnData).forEach((columnName) => {
+			const column = this.columnData[columnName];
+			column.selected = this.selectedColumnNames.indexOf(column.name) !== -1;
+		});
+	}
+
+	public cancelChanges() {
+		this.modal.hide();
+	}
+
+	public applyChanges({ event, element }: IEventParam<any>) {
+		const ignoredColumns = this.iterableComponent.columns.filter(
+			(column) => this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) !== -1,
+		);
+		const orderedColumns = this.groupedColumns
+			.concat(this.fixedColumns)
+			.concat(this.visibleColumns)
+			.concat(this.otherColumns)
+			.concat(ignoredColumns);
+		if (this.iterableComponent) {
+			this.iterableComponent.columns = orderedColumns.map((orderColumn) => {
+				const columnIdx = this.iterableComponent.columns.findIndex((column) => column.name === orderColumn.name);
+				const iterableColumn = this.iterableComponent.columns[columnIdx] as any;
+				iterableColumn.fixed = orderColumn.fixed;
+				iterableColumn.isVisible = orderColumn.isVisible;
+				iterableColumn.grouped = orderColumn.grouped;
+				iterableColumn.groupOpened = orderColumn.groupOpened;
+				iterableColumn.label = orderColumn.label;
+				iterableColumn.align = orderColumn.align;
+				iterableColumn.aggregation = orderColumn.aggregation;
+				return iterableColumn;
+			});
+
+			const { datasource } = this.iterableComponent;
+			const order = datasource.order.filter((item) => {
+				const columnName = item.split('.')[0];
+				return this.groupedColumns.findIndex((column) => column.name === columnName) === -1;
+			});
+			datasource.order = this.groupedColumns.map((column) => `${column.name}.asc`).concat(order);
+
+			this.iterableComponent.changeLayout(event, element);
+		}
+		this.modal.hide();
+	}
+}