@zeedhi/vuetify 3.0.9 → 3.0.10

package/dist/components/tek-grid/columns-button/TekGridColumnsOptionsController.js

@@ -0,0 +1,416 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Modal, TekGrid } from '@zeedhi/common';
+import { I18n, Metadata, Singleton, Utils } from '@zeedhi/core';
+import Sortable from 'sortablejs';
+let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
+    modal;
+    columnData = {};
+    fixedColumns = [];
+    visibleColumns = [];
+    groupedColumns = [];
+    otherColumns = [];
+    aggregationData = [];
+    selectedColumnNames = [];
+    searchValue = '';
+    showGroups = true;
+    selectedColumnsAlignment;
+    selectedColumnsAggregation;
+    iterableComponent;
+    instanceValue;
+    constructor(modal) {
+        this.modal = modal;
+    }
+    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) {
+        this.instanceValue = instance;
+        this.iterableComponent = instance.iterableComponent;
+        this.showGroups = instance.iterableComponent instanceof TekGrid;
+        this.aggregationData = instance.getAggregationSelectData();
+        this.columnData = {};
+        this.iterableComponent.columns.forEach((column) => {
+            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 = [];
+    }
+    getAggregationText(aggregation) {
+        let result = '';
+        if (aggregation) {
+            const idx = this.aggregationData.findIndex((item) => item.value === aggregation);
+            if (idx !== -1) {
+                result = ` (${this.aggregationData[idx].text})`;
+            }
+        }
+        return result;
+    }
+    columnInSearch(column) {
+        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) {
+        // do nothing
+    }
+    get visibleColumnData() {
+        return this.visibleColumns.filter(this.columnInSearch.bind(this));
+    }
+    set visibleColumnData(_data) {
+        // do nothing
+    }
+    get groupedColumnData() {
+        return this.groupedColumns.filter(this.columnInSearch.bind(this));
+    }
+    set groupedColumnData(_data) {
+        // do nothing
+    }
+    get otherColumnData() {
+        return this.otherColumns.filter(this.columnInSearch.bind(this));
+    }
+    set otherColumnData(_data) {
+        // do nothing
+    }
+    get hasSelectedColumn() {
+        return this.selectedColumnNames.length > 0;
+    }
+    get hasNoSelectedColumn() {
+        return !this.hasSelectedColumn;
+    }
+    get detailColumnName() {
+        const columnNames = this.selectedColumnNames.length
+            ? this.selectedColumnNames.join(', ')
+            : I18n.translate('TEKGRID_SELECT_COLUMN');
+        return `${I18n.translate('TEKGRID_DETAILS_FOR')} ${columnNames}`;
+    }
+    get hasNoFixedColumns() {
+        return this.fixedColumns.length === 0;
+    }
+    get hasNoVisibleColumns() {
+        return this.visibleColumns.length === 0;
+    }
+    get hasNoGroupedColumns() {
+        return this.groupedColumns.length === 0;
+    }
+    get hasNoOtherColumns() {
+        return this.otherColumns.length === 0;
+    }
+    get hasNoSingleSelection() {
+        return this.selectedColumnNames.length !== 1;
+    }
+    get selectedColumnLabel() {
+        return this.selectedColumnNames.length === 1 ? this.columnData[this.selectedColumnNames[0]].label : '';
+    }
+    set selectedColumnLabel(value) {
+        if (this.selectedColumnNames.length === 1) {
+            this.columnData[this.selectedColumnNames[0]].label = value;
+        }
+    }
+    getSameValue(propName) {
+        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;
+    }
+    setSameValue(propName, value) {
+        this.selectedColumnNames.forEach((name) => {
+            this.columnData[name][propName] = value;
+        });
+    }
+    get groupInSelection() {
+        return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => this.columnData[name].grouped);
+    }
+    get notGroupInSelection() {
+        return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => !this.columnData[name].grouped);
+    }
+    get selectedColumnGroupOpened() {
+        return this.getSameValue('groupOpened');
+    }
+    set selectedColumnGroupOpened(value) {
+        this.setSameValue('groupOpened', value);
+    }
+    selectMounted({ component }) {
+        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);
+    }
+    updatingSelect = false;
+    selectChange({ component }) {
+        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));
+        }
+    }
+    updateSelects() {
+        this.selectedColumnsAlignment = this.updateSelect('align');
+        this.selectedColumnsAggregation = this.updateSelect('aggregation');
+    }
+    updateSelect(propName) {
+        this.updatingSelect = true;
+        const propValue = this.getSameValue(propName);
+        const selectNames = {
+            align: 'tekGridColumnsOptionsColumnAlignment',
+            aggregation: 'tekGridColumnsOptionsColumnAggregation',
+        };
+        const instances = Metadata.getInstances(selectNames[propName]);
+        if (instances[0]) {
+            instances[0].value = propValue;
+        }
+        // prevent changing column value from here
+        setTimeout(() => {
+            this.updatingSelect = false;
+        }, 0);
+        return propValue;
+    }
+    columnRemoveClick(column) {
+        column.isVisible = false;
+        this.selectedColumnNames.splice(this.selectedColumnNames.indexOf(column.name), 1);
+        this.otherColumns.push(column);
+    }
+    columnFixedRemoveClick({ element }) {
+        const columnName = element?.getAttribute('columnname');
+        if (columnName) {
+            const column = this.columnData[columnName];
+            this.columnRemoveClick(column);
+            this.fixedColumns.splice(this.fixedColumns.indexOf(column), 1);
+        }
+    }
+    columnVisibleRemoveClick({ element }) {
+        const columnName = element?.getAttribute('columnname');
+        if (columnName) {
+            const column = this.columnData[columnName];
+            this.columnRemoveClick(column);
+            this.visibleColumns.splice(this.visibleColumns.indexOf(column), 1);
+        }
+    }
+    columnGroupedRemoveClick({ element }) {
+        const columnName = element?.getAttribute('columnname');
+        if (columnName) {
+            const column = this.columnData[columnName];
+            this.columnRemoveClick(column);
+            this.groupedColumns.splice(this.groupedColumns.indexOf(column), 1);
+        }
+    }
+    isMacPlatform() {
+        return /Mac/.test(navigator.platform);
+    }
+    isMobilePlatform() {
+        return /iPhone|iPad|Android/.test(navigator.platform);
+    }
+    columnClick({ element, event }) {
+        const columnName = element.getAttribute('columnname');
+        if (columnName) {
+            const mouseEvent = event;
+            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();
+        }
+    }
+    removeFromSourceList(columnName) {
+        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);
+                    }
+                }
+            }
+        }
+    }
+    onDragEnd(event) {
+        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);
+                }
+            }
+        });
+    }
+    columnContainerMounted({ element }) {
+        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),
+            });
+        }
+    }
+    selectAll({ component }) {
+        let list;
+        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;
+        });
+    }
+    cancelChanges() {
+        this.modal.hide();
+    }
+    applyChanges({ event, element }) {
+        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];
+                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();
+    }
+};
+TekGridColumnsOptionsController = __decorate([
+    Singleton,
+    __metadata("design:paramtypes", [Modal])
+], TekGridColumnsOptionsController);
+export default TekGridColumnsOptionsController;