@zeedhi/teknisa-components-vuetify 3.0.0 → 3.0.1

package/src/components/tek-grid/column-filter/TekGridColumnFilter.ts

@@ -0,0 +1,244 @@
+import { Input, Radio, Select } from '@zeedhi/common';
+import { IDynamicFilterItem } from '@zeedhi/teknisa-components-common';
+import { Config, IEventParam, Metadata, Utils, dayjs } from '@zeedhi/core';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import { PropType, computed, defineComponent, reactive } from 'vue';
+import { isArrayOperation } from '../../../utils/isArrayOperation';
+
+export const TekGridColumnFilterProps = {
+	hasFilterData: {
+		type: Boolean,
+		default: false,
+	},
+	column: {
+		type: Object,
+		required: true,
+	},
+	modelValue: {
+		type: Array as PropType<IDynamicFilterItem[]>,
+		default: [],
+	},
+	instanceName: {
+		type: String,
+		required: true,
+	},
+	filterRelationsDatasource: {
+		type: [Object, null] as PropType<boolean | null>,
+		required: false,
+	},
+	filterOperationsDatasource: {
+		type: [Object, null] as PropType<boolean | null>,
+		required: false,
+	},
+	isHovering: {
+		type: Boolean,
+		default: false,
+	},
+	multiple: {
+		type: Boolean,
+		required: true,
+	},
+} as const;
+
+type InputType = Input | Select | Radio;
+
+const tekGridColumnFilter = defineComponent({
+	props: TekGridColumnFilterProps,
+	inheritAttrs: false,
+	emits: ['update:modelValue'],
+	setup(props, ctx) {
+		const getValueInputName = (index: number) => `${props.instanceName}-${props.column.name}-filter-value-${index}`;
+
+		const focusValueInput = (index: number) => {
+			const valueInputName = getValueInputName(index);
+			const input = Metadata.getInstance<Input>(valueInputName);
+
+			input.setFocus();
+		};
+
+		const createNewFilter = () => {
+			return reactive<IDynamicFilterItem>({
+				operation: 'CONTAINS',
+				relation: 'AND',
+				value: undefined,
+			});
+		};
+
+		let newFilter = createNewFilter();
+
+		const convertToDateFormat = (value: string, revert: boolean) => {
+			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: string | string[], 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<object, string>();
+		let idCounter = 0;
+
+		// retrieves a unique id for each item
+		const getId = (item: object) => {
+			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: IDynamicFilterItem[]) => {
+			if (Utils.isEqual(modelValue, props.modelValue)) return;
+			ctx.emit('update:modelValue', modelValue);
+			newFilter = createNewFilter();
+		}, 500);
+
+		const changeRelation = (index: number, { component }: IEventParam<InputType>) => {
+			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: number, { component }: IEventParam<InputType>) => {
+			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: IDynamicFilterItem, index: number, { component }: IEventParam<InputType>) => {
+			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: string) => {
+			return isArrayOperation(operation) ? 'ZdTextInput' : props.column.componentProps.component;
+		};
+
+		const getComponentHint = (operation: string) => {
+			return isArrayOperation(operation) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+		};
+
+		const getItemValue = (item: IDynamicFilterItem) => {
+			return isArrayOperation(item.operation) ? item.value.join(';') : item.value;
+		};
+
+		return {
+			changeValue,
+			changeRelation,
+			changeOperation,
+			getValueInputName,
+			newFilter,
+			getComponentType,
+			getComponentHint,
+			modelWithIds,
+			getItemValue,
+		};
+	},
+});
+
+export default tekGridColumnFilter;

package/src/components/tek-grid/column-filter/TekGridColumnFilter.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-menu
+    offset-overflow
+    offset-y
+    transition="scale-transition"
+    content-class="tek-grid-column-filter__menu"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ props }">
+      <zd-grid-header-icon
+        v-bind="props"
+        :icon="$getIcon('filter')"
+        :hidden="!isHovering && !hasFilterData"
+        :color="hasFilterData ? 'primary' : ''"
+      ></zd-grid-header-icon>
+    </template>
+
+    <v-card
+      class="zd-pa-4 zd-pb-0"
+      :min-width="200"
+      :max-height="300"
+    >
+      <template
+        v-for="({ item, id }, filterIndex) in modelWithIds"
+        :key="id"
+      >
+        <!-- relation -->
+        <zd-radio
+          v-if="multiple && filterIndex > 0"
+          :name="`${instanceName}-${column.name}-filter-relation-${filterIndex}`"
+          v-bind="{
+            showLabel: false,
+            showHelper: false,
+            vertical: false,
+            cssClass: 'zd-mb-2',
+            datasource: filterRelationsDatasource,
+            dataValue: 'value',
+            dataLabel: 'text',
+            value: item.relation,
+            events: {
+              change: (params) => changeRelation(filterIndex, params),
+            },
+          }"
+        />
+
+        <!-- operation -->
+        <zd-select
+          v-if="multiple && item.operation"
+          :name="`${instanceName}-${column.name}-filter-operation-${filterIndex}`"
+          v-bind="{
+            autocomplete: false,
+            showLabel: false,
+            showHelper: false,
+            clearable: false,
+            cssClass: 'zd-mb-2',
+            datasource: filterOperationsDatasource,
+            dataValue: 'value',
+            dataText: 'text',
+            value: item.operation,
+            events: {
+              change: (params) => changeOperation(filterIndex, params),
+            },
+          }"
+        />
+
+        <!-- value -->
+        <component
+          :name="`${instanceName}-${column.name}-filter-value-${filterIndex}`"
+          :is="getComponentType(item.operation)"
+          v-bind="{
+            ...column.componentProps,
+            showLabel: false,
+            showHelper: true,
+            autofill: false,
+            cssClass: 'zd-mb-2',
+            value: getItemValue(item),
+            persistentHint: true,
+            hint: getComponentHint(item.operation),
+            events: {
+              input: (params) => changeValue(item, filterIndex, params),
+              change: (params) => changeValue(item, filterIndex, params),
+            },
+          }"
+        />
+      </template>
+    </v-card>
+  </v-menu>
+</template>
+
+<script lang="ts" src="./TekGridColumnFilter.ts"></script>
+
+<style lang="scss">
+</style>

package/src/components/tek-grid/column-header/TekGridHeaderRow.ts

@@ -0,0 +1,147 @@
+import { Column, GridColumn } from '@zeedhi/common';
+import { IDynamicFilterItem, TekGridColumn } from '@zeedhi/teknisa-components-common';
+import { IDictionary } from '@zeedhi/core';
+import { PropType, UnwrapRef, defineComponent, inject } from 'vue';
+import { ResizeParams, CalcWidth } from '@zeedhi/vuetify';
+
+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 as PropType<GridColumn[]>,
+			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 as PropType<any[]>,
+			default: () => [],
+		},
+		sortBy: {
+			type: Array as PropType<any[]>,
+			default: () => [],
+		},
+		disableCheckbox: {
+			type: Boolean,
+			default: false,
+		},
+		sortable: {
+			type: Boolean,
+			default: true,
+		},
+		name: {
+			type: String,
+			default: '',
+		},
+		modelValue: {
+			type: Object as PropType<IDictionary<IDynamicFilterItem[]>>,
+			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 as PropType<(columnName: string) => boolean>,
+			required: true,
+		},
+		level: {
+			type: Number,
+			default: 0,
+		},
+	},
+	emits: ['selectAllClick', 'resizeMousedown', 'resizeClick', 'update:modelValue'],
+	setup(props, { emit }) {
+		const calcWidth = inject<CalcWidth>('calcWidth');
+
+		if (!calcWidth) {
+			// TODO: use NotProvidedError
+			throw new Error('calcWidth');
+		}
+
+		const selectAllClick = (event: Event) => {
+			emit('selectAllClick', event);
+		};
+
+		const resizeMousedown = (column: GridColumn, event: ResizeParams) => {
+			emit('resizeMousedown', { event, column });
+		};
+
+		const resizeClick = (event: Event) => {
+			emit('resizeClick', { event });
+		};
+
+		const findOrderIndex = (sortBy: readonly any[], column: UnwrapRef<Column>) => {
+			return sortBy.findIndex((sort) => sort.key === column.name);
+		};
+
+		const updateModelValue = (columnName: string, value: IDynamicFilterItem[]) => {
+			const modelValue = { ...props.modelValue };
+			modelValue[columnName] = value;
+			emit('update:modelValue', modelValue);
+		};
+
+		const showFilterButton = (column: TekGridColumn) => {
+			return column.type !== 'action' && props.columnFilterButton && column.filterable;
+		};
+
+		return {
+			calcWidth,
+			resizeMousedown,
+			resizeClick,
+			findOrderIndex,
+			updateModelValue,
+			showFilterButton,
+			selectAllClick,
+		};
+	},
+});

package/src/components/tek-grid/column-header/TekGridHeaderRow.vue

@@ -0,0 +1,78 @@
+<template>
+  <zd-grid-header-row
+    :name="name"
+    :selectable="selectable"
+    :headerBackground="headerBackground"
+    :showSelectAll="showSelectAll"
+    :allselectedState="allselectedState"
+    :visibleColumns="visibleColumns"
+    :dragColumns="dragColumns"
+    :headerCellTextColor="headerCellTextColor"
+    :resizeColumns="resizeColumns"
+    :getSortIcon="getSortIcon"
+    :toggleSort="toggleSort"
+    :sortBy="sortBy"
+    :tableColumns="tableColumns"
+    :isSorted="isSorted"
+    :disableCheckbox="disableCheckbox"
+    @selectAllClick="selectAllClick"
+  >
+    <template #default="{ column, index, isHovering }">
+      <zd-grid-column-header
+        :cssStyle="{
+          'color': headerCellTextColor,
+          width: calcWidth(column),
+        }"
+        :action="column.type === 'action'"
+        :overflow="column.overflow"
+        :helperText="column.helperText"
+        :label="column.label"
+        :columnAlign="column.align"
+        :orderIndex="findOrderIndex(sortBy, column)"
+        :isSortable="sortable && column.sortable"
+        :resizeColumns="resizeColumns"
+        :sortIcon="getSortIcon(tableColumns[index])"
+        :isSorted="isSorted(tableColumns[index])"
+        :isHovering="isHovering"
+        @click="toggleSort(tableColumns[index])"
+        @resizeMousedown="resizeMousedown(column, $event)"
+        @resizeClick="resizeClick($event)"
+      >
+        <template #prepend v-if="index === 0">
+          <tek-grid-indentation
+            :level="level"
+            :show-divider="false"
+          ></tek-grid-indentation>
+        </template>
+        <template #label>
+          <span
+            v-if="column.aggregation"
+            class="tek-grid-column-aggregation"
+          >({{ $t(`TEKGRID_AGGREGATION_${column.aggregation}`) }})
+          </span>
+        </template>
+
+        <template
+          #append="{ isHovering }"
+          v-if="showFilterButton(column)"
+        >
+          <tek-grid-column-filter
+            :modelValue="modelValue[column.name]"
+            :hasFilterData="columnHasFilter(column.name)"
+            :column="column"
+            :instanceName="instanceName"
+            :filterRelationsDatasource="filterRelationsDatasource"
+            :filterOperationsDatasource="filterOperationsDatasource"
+            :isHovering="isHovering"
+            :multiple="!!filterRelationsDatasource && !!filterOperationsDatasource"
+            @update:modelValue="updateModelValue(column.name, $event)"
+          ></tek-grid-column-filter>
+        </template>
+      </zd-grid-column-header>
+    </template>
+  </zd-grid-header-row>
+</template>
+
+<script lang="ts" src="./TekGridHeaderRow.ts"></script>
+
+<style lang="scss"></style>

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

@@ -0,0 +1,96 @@
+import { TekGrid, TekGridColumnsButton } from '@zeedhi/teknisa-components-common';
+import sortable from 'sortablejs';
+import { ComponentPublicInstance, computed, defineComponent, mergeProps, nextTick, ref, watch } from 'vue';
+import { ZdIterableColumnsButtonProps, useButtonInstance, useCreateInstance } from '@zeedhi/vuetify';
+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<TekGridColumnsButton, ComponentPublicInstance>(
+			props,
+			ctx,
+			TekGridColumnsButton,
+		);
+		const buttonScope = useButtonInstance({ instance, root });
+
+		const menuIsOpened = ref(false);
+
+		const sortableInitialized = ref(false);
+
+		const teste = (a: any) => {
+			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 as HTMLElement, {
+						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: any) => {
+			const grid: TekGrid = instance.iterableComponent as any;
+			const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row: any) => row.getAttribute('name'));
+			const groupColumnNames: string[] = [];
+			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;