@zeedhi/teknisa-components-vuetify 3.0.4 → 3.2.0

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

@@ -1,470 +0,0 @@
-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();
-	}
-}