@zeedhi/vuetify 3.0.5 → 3.0.7

package/dist/components/tek-grid/column-filter/TekGridColumnFilter.js

@@ -0,0 +1,201 @@
+import { Config, Metadata, Utils, dayjs } from '@zeedhi/core';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import { computed, defineComponent, reactive } from 'vue';
+import { isArrayOperation } from '../../../utils';
+export const TekGridColumnFilterProps = {
+    hasFilterData: {
+        type: Boolean,
+        default: false,
+    },
+    column: {
+        type: Object,
+        required: true,
+    },
+    modelValue: {
+        type: Array,
+        default: [],
+    },
+    instanceName: {
+        type: String,
+        required: true,
+    },
+    filterRelationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    filterOperationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    isHovering: {
+        type: Boolean,
+        default: false,
+    },
+    multiple: {
+        type: Boolean,
+        required: true,
+    },
+};
+const tekGridColumnFilter = defineComponent({
+    props: TekGridColumnFilterProps,
+    inheritAttrs: false,
+    emits: ['update:modelValue'],
+    setup(props, ctx) {
+        const getValueInputName = (index) => `${props.instanceName}-${props.column.name}-filter-value-${index}`;
+        const focusValueInput = (index) => {
+            const valueInputName = getValueInputName(index);
+            const input = Metadata.getInstance(valueInputName);
+            input.setFocus();
+        };
+        const createNewFilter = () => {
+            return reactive({
+                operation: 'CONTAINS',
+                relation: 'AND',
+                value: undefined,
+            });
+        };
+        let newFilter = createNewFilter();
+        const convertToDateFormat = (value, revert) => {
+            const dateFormat = props.column.componentProps.dateFormat || Config.dateFormat;
+            const displayFormat = props.column.componentProps.displayFormat || Config.displayFormat;
+            if (revert) {
+                if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                    return value;
+                }
+                return dayjs(value, dateFormat).format(displayFormat);
+            }
+            if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+                return value;
+            }
+            return dayjs(value, displayFormat).format(dateFormat);
+        };
+        const checkDateValueFormat = (value, revert = false) => {
+            if (!['ZdDate', 'ZdDateRange'].includes(props.column.componentProps.component))
+                return value;
+            if (Array.isArray(value)) {
+                return value.map((item) => convertToDateFormat(item, revert));
+            }
+            return convertToDateFormat(value, revert);
+        };
+        // use WeakMap to avoid memory leaks
+        const idMap = new WeakMap();
+        let idCounter = 0;
+        // retrieves a unique id for each item
+        const getId = (item) => {
+            if (!idMap.has(item)) {
+                idMap.set(item, `__item__${idCounter++}`);
+            }
+            return idMap.get(item);
+        };
+        // use computed to generate unique ids for each filter item
+        // this is needed for the v-for :key updates
+        const modelWithIds = computed(() => {
+            if (!props.multiple) {
+                if (props.modelValue.length > 0) {
+                    return [{ id: getId(props.modelValue[0]), item: props.modelValue[0] }];
+                }
+                return [{ id: getId(newFilter), item: newFilter }];
+            }
+            return [...props.modelValue, newFilter].map((item) => ({
+                id: getId(item),
+                item,
+            }));
+        });
+        const debounceUpdateModel = debounce((modelValue) => {
+            if (Utils.isEqual(modelValue, props.modelValue))
+                return;
+            ctx.emit('update:modelValue', modelValue);
+            newFilter = createNewFilter();
+        }, 500);
+        const changeRelation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : modelValue[index];
+            const { value } = component;
+            focusValueInput(index);
+            // update item type value
+            filter.relation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeOperation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filterItem = modelValue[index];
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : filterItem;
+            const { value } = component;
+            focusValueInput(index);
+            // if operation is IN, NOT_IN or BETWEEN, value should be an array
+            if (isArrayOperation(value)) {
+                filter.value = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+            }
+            // update item type value
+            filter.operation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeValue = (item, index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filter = cloneDeep(item);
+            const { value } = component;
+            const isNewFilter = props.multiple && index === modelValue.length;
+            let formattedValue = value;
+            if (value && isArrayOperation(filter.operation)) {
+                formattedValue = value.split(';');
+            }
+            filter.value = checkDateValueFormat(formattedValue);
+            if (!props.multiple) {
+                debounceUpdateModel([filter]);
+                return;
+            }
+            if (isNewFilter) {
+                // only emit event when newFilter has value
+                if (!filter.value)
+                    return;
+                debounceUpdateModel([...modelValue, filter]);
+                return;
+            }
+            if (!filter.value) {
+                // when removing the last (not new) filter, should pass its operation and relation to the new filter
+                if (index === modelValue.length - 1) {
+                    newFilter.operation = filter.operation;
+                    newFilter.relation = filter.relation;
+                }
+                modelValue.splice(index, 1);
+                // if the removed filter was the first, should set the new first relation to AND
+                if (modelValue.length > 0 && index === 0) {
+                    modelValue[0].relation = 'AND';
+                }
+                // if the removed filter was the last, should set the newFilter relation to AND
+                if (modelValue.length === 0) {
+                    newFilter.relation = 'AND';
+                }
+            }
+            debounceUpdateModel(modelValue);
+        };
+        const getComponentType = (operation) => {
+            return isArrayOperation(operation) ? 'ZdTextInput' : props.column.componentProps.component;
+        };
+        const getComponentHint = (operation) => {
+            return isArrayOperation(operation) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+        };
+        const getItemValue = (item) => {
+            return isArrayOperation(item.operation) ? item.value.join(';') : item.value;
+        };
+        return {
+            changeValue,
+            changeRelation,
+            changeOperation,
+            getValueInputName,
+            newFilter,
+            getComponentType,
+            getComponentHint,
+            modelWithIds,
+            getItemValue,
+        };
+    },
+});
+export default tekGridColumnFilter;

package/dist/components/tek-grid/column-header/TekGridHeaderRow.js

@@ -0,0 +1,134 @@
+import { defineComponent, inject } from 'vue';
+export default defineComponent({
+    props: {
+        selectable: {
+            type: Boolean,
+            default: false,
+        },
+        headerBackground: {
+            type: String,
+            default: '',
+        },
+        showSelectAll: {
+            type: Boolean,
+            default: false,
+        },
+        allselectedState: {
+            type: Number,
+            default: 0,
+        },
+        visibleColumns: {
+            type: Array,
+            default: () => [],
+        },
+        dragColumns: {
+            type: Boolean,
+            default: false,
+        },
+        headerCellTextColor: {
+            type: String,
+            default: '',
+        },
+        resizeColumns: {
+            type: Boolean,
+            default: false,
+        },
+        getSortIcon: {
+            type: Function,
+            default: () => { },
+        },
+        isSorted: {
+            type: Function,
+            default: () => { },
+        },
+        toggleSort: {
+            type: Function,
+            default: () => { },
+        },
+        tableColumns: {
+            type: Array,
+            default: () => [],
+        },
+        sortBy: {
+            type: Array,
+            default: () => [],
+        },
+        disableCheckbox: {
+            type: Boolean,
+            default: false,
+        },
+        sortable: {
+            type: Boolean,
+            default: true,
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: () => [],
+        },
+        instanceName: {
+            type: String,
+            required: true,
+        },
+        filterRelationsDatasource: {
+            type: [Object, null],
+            required: false,
+        },
+        filterOperationsDatasource: {
+            type: [Object, null],
+            required: false,
+        },
+        columnFilterButton: {
+            type: Boolean,
+            required: true,
+        },
+        columnHasFilter: {
+            type: Function,
+            required: true,
+        },
+        level: {
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['selectAllClick', 'resizeMousedown', 'resizeClick', 'update:modelValue'],
+    setup(props, { emit }) {
+        const calcWidth = inject('calcWidth');
+        if (!calcWidth) {
+            // TODO: use NotProvidedError
+            throw new Error('calcWidth');
+        }
+        const selectAllClick = (event) => {
+            emit('selectAllClick', event);
+        };
+        const resizeMousedown = (column, event) => {
+            emit('resizeMousedown', { event, column });
+        };
+        const resizeClick = (event) => {
+            emit('resizeClick', { event });
+        };
+        const findOrderIndex = (sortBy, column) => {
+            return sortBy.findIndex((sort) => sort.key === column.name);
+        };
+        const updateModelValue = (columnName, value) => {
+            const modelValue = { ...props.modelValue };
+            modelValue[columnName] = value;
+            emit('update:modelValue', modelValue);
+        };
+        const showFilterButton = (column) => {
+            return column.type !== 'action' && props.columnFilterButton && column.filterable;
+        };
+        return {
+            calcWidth,
+            resizeMousedown,
+            resizeClick,
+            findOrderIndex,
+            updateModelValue,
+            showFilterButton,
+            selectAllClick,
+        };
+    },
+});

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

@@ -0,0 +1,79 @@
+import { TekGridColumnsButton } from '@zeedhi/common';
+import sortable from 'sortablejs';
+import { computed, defineComponent, mergeProps, nextTick, ref, watch } from 'vue';
+import { useButtonInstance, useCreateInstance } from '../..';
+import { ZdIterableColumnsButtonProps } from '../../zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton';
+import optionsModal from './TekGridColumnsOptionsModal';
+export const TekGridColumnsButtonProps = {
+    ...ZdIterableColumnsButtonProps,
+    hideGroups: {
+        type: [Boolean, String],
+        default: false,
+    },
+};
+const tekGridColumnsButton = defineComponent({
+    props: TekGridColumnsButtonProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridColumnsButton);
+        const buttonScope = useButtonInstance({ instance, root });
+        const menuIsOpened = ref(false);
+        const sortableInitialized = ref(false);
+        const teste = (a) => {
+            console.warn(a);
+        };
+        watch(menuIsOpened, () => {
+            if (!menuIsOpened.value || sortableInitialized.value)
+                return;
+            sortableInitialized.value = true;
+            nextTick(() => {
+                const columnsTableBody = document.querySelector(`#${instance.name}_columns_table tbody`);
+                if (columnsTableBody) {
+                    sortable.create(columnsTableBody, {
+                        handle: '.sortHandle',
+                        dragClass: 'tek-grid-columns-button-sortable-drag',
+                        onEnd: sortEnd,
+                    });
+                }
+            });
+        });
+        const gridGroupColumnNames = computed(() => {
+            return instance.iterableComponent.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+        });
+        const sortEnd = (event) => {
+            const grid = instance.iterableComponent;
+            const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row) => row.getAttribute('name'));
+            const groupColumnNames = [];
+            const newColumns = newOrder.map((columnName) => {
+                const column = grid.getColumn(columnName);
+                if (column.grouped) {
+                    groupColumnNames.push(columnName);
+                }
+                return column;
+            });
+            const ignoredColumns = grid.columns.filter((column) => instance.ignoreColumns.indexOf(column.name) !== -1);
+            grid.columns = newColumns.concat(ignoredColumns);
+            if (grid.updateGrouping && JSON.stringify(groupColumnNames) !== JSON.stringify(gridGroupColumnNames)) {
+                grid.updateGrouping();
+            }
+            grid.changeLayout();
+        };
+        const moreOptions = () => {
+            optionsModal.show(instance);
+        };
+        const close = () => {
+            menuIsOpened.value = false;
+        };
+        return {
+            ...buttonScope,
+            instance,
+            root,
+            menuIsOpened,
+            moreOptions,
+            close,
+            teste,
+            mergeProps,
+        };
+    },
+});
+export default tekGridColumnsButton;