@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

package/src/components/tek-grid/TekGrid.vue

@@ -0,0 +1,235 @@
+<template>
+  <v-data-table
+    v-show="instance.isVisible"
+    ref="root"
+    :id="instance.name"
+    v-model="selectedRows"
+    :class="[
+      'zd-grid',
+      'tek-grid',
+      'zd-grid-editable',
+      instance.cssClass,
+      {
+        'zd-grid--loading': instance.datasource.loading,
+        'zd-grid--cell-selection': instance.cellSelection,
+      },
+    ]"
+    :style="[
+      cssColorVars,
+      {
+        height: $formatSize(instance.height),
+        width: $formatSize(instance.width),
+        maxHeight: $formatSize(instance.maxHeight),
+        minHeight: $formatSize(instance.minHeight),
+        maxWidth: $formatSize(instance.maxWidth),
+        minWidth: $formatSize(instance.minWidth),
+      },
+      $styleObject(instance.cssStyle),
+    ]"
+    :theme="instance.theme"
+    sort-asc-icon="$collapse"
+    sort-desc-icon="$expand"
+    fixed-header
+    multi-sort
+    hide-default-footer
+    :name="instance.name"
+    :headers="headers"
+    :items="renderedData"
+    :search="instance.datasource.search"
+    :density="instance.dense ? 'compact' : 'default'"
+    :loading="instance.datasource.loading"
+    :item-value="instance.datasource.uniqueKey"
+    :items-per-page="-1"
+    no-filter
+    :sort-by="sortBy"
+    disable-sort
+    return-object
+    tabindex="0"
+    @update:sort-by="updateSortBy($event)"
+  >
+    <template v-slot:top>
+      <zd-grid-toolbar v-if="!hasToolbarSlot"></zd-grid-toolbar>
+      <slot name="toolbarSlot"></slot>
+    </template>
+
+    <template
+      v-slot:headers="{ columns: tableColumns, isSorted, getSortIcon, toggleSort, sortBy }"
+    >
+      <tek-grid-header-row
+        v-if="instance.showHeader"
+        :name="instance.name"
+        :selectable="instance.selectable"
+        :headerBackground="instance.headerBackground"
+        :showSelectAll="instance.showSelectAll"
+        :allselectedState="allselectedState"
+        :visibleColumns="visibleColumns"
+        :dragColumns="instance.dragColumns"
+        :headerCellTextColor="instance.headerCellTextColor"
+        :resizeColumns="instance.resizeColumns"
+        :getSortIcon="getSortIcon"
+        :toggleSort="toggleSort"
+        :sortBy="sortBy"
+        :tableColumns="tableColumns"
+        :isSorted="isSorted"
+        :disableCheckbox="instance.editing"
+        :instanceName="instance.name"
+        :filterRelationsDatasource="instance.filterRelationsDatasource"
+        :filterOperationsDatasource="instance.filterOperationsDatasource"
+        :modelValue="filter"
+        :columnFilterButton="instance.columnFilterButton"
+        :columnHasFilter="columnHasFilter"
+        :level="groupColumnNames.length"
+        @update:modelValue="setFilter($event)"
+        @resizeMousedown="resizeMouseDownHandler($event.column, $event.event)"
+        @resizeClick="resizeClickHandler($event.event)"
+        @selectAllClick="selectAllClick($event)"
+      ></tek-grid-header-row>
+    </template>
+
+    <template
+      v-if="addTopPadding()"
+      v-slot:body.prepend="{ headers }"
+    >
+      <tr>
+        <td
+          :colspan="headers.length"
+          :style="`padding-top:${scrollData.startHeight}px`"
+        >
+        </td>
+      </tr>
+    </template>
+
+    <template
+      v-if="addBottomPadding()"
+      v-slot:body.append="{ headers }"
+    >
+      <tr>
+        <td
+          :colspan="headers.length"
+          :style="`padding-top:${scrollData.endHeight}px`"
+        >
+        </td>
+      </tr>
+    </template>
+
+    <template
+      v-if="instance.datasource.data.length"
+      v-slot:body="{ internalItems, isSelected }"
+    >
+      <template v-for="(item, i) in visibleData">
+        <template v-if="isRowVisible(item, i)">
+          <tek-grid-group-row
+            v-if="isGroup(item)"
+            :key="item.groupColumnName + item.groupValue"
+            :row="item"
+            :is-current-row="isCurrentRowGroup(item)"
+            :selectable="instance.selectable"
+            :selectionDisabled="instance.callDisableSelection(item)"
+            :cellSelection="instance.cellSelection"
+            :is-current="isCurrent"
+            :isSelected="isGroupSelected(item)"
+            :indeterminate="isGroupSelectIndeterminate(item)"
+            @click="rowClick(item, $event)"
+            @checkboxClick="selectGroup(item, $event)"
+            @focusin="cellFocusIn($event)"
+            @expandClick="openGroup(item)"
+          ></tek-grid-group-row>
+
+          <zd-grid-editable-row
+            v-else-if="!isFooter(item)"
+            :key="instance.getRowKey(item)"
+            :isSelected="isSelected(internalItems[i])"
+            :isCurrentRow="isCurrentRow(item)"
+            :selectable="instance.selectable"
+            :selectionDisabled="instance.callDisableSelection(item)"
+            :cellSelection="instance.cellSelection"
+            :isCurrent="isCurrent"
+            :columns="visibleColumns"
+            :row="item"
+            :fixedLeft="fixedLeft"
+            :fixedRight="fixedRight"
+            :isEditing="isEditing"
+            @cellFocus="cellFocus($event)"
+            @cellClick="cellClick($event)"
+            @click="rowClick(item, $event)"
+            @focusin="cellFocusIn($event)"
+            @checkboxClick="selectRowClick(item, !isSelected(internalItems[i]), $event)"
+            @cellEnterEdit="cellEnterEdit($event)"
+            @cellKeydown="cellKeydown($event)"
+          >
+            <template #cell-prepend="{ index }">
+              <tek-grid-indentation
+                v-if="index === 0 && groupColumnNames.length > 0"
+                :level="item.groupHeaders?.length"
+              ></tek-grid-indentation>
+            </template>
+          </zd-grid-editable-row>
+
+          <tek-grid-footer-row
+            v-else
+            :key="'footer' + item.groupColumnName + item.groupValue"
+            :isSelected="isSelected(internalItems[i])"
+            :selectable="instance.selectable"
+            :selectionDisabled="instance.callDisableSelection(item)"
+            :cellSelection="instance.cellSelection"
+            :isCurrent="isCurrent"
+            :columns="visibleColumns"
+            :row="item"
+            :fixedLeft="fixedLeft"
+            :fixedRight="fixedRight"
+            @cellFocus="cellFocus($event)"
+            @focusin="cellFocusIn($event)"
+          ></tek-grid-footer-row>
+        </template>
+      </template>
+    </template>
+
+    <template v-slot:no-data>
+      <zd-iterable-no-data>
+        <template v-slot:errorSlot>
+          <slot name="errorSlot"></slot>
+        </template>
+        <template v-slot:noResultSlot>
+          <slot name="noResultSlot"></slot>
+        </template>
+        <template v-slot:noDataSlot>
+          <slot name="noDataSlot"></slot>
+        </template>
+      </zd-iterable-no-data>
+    </template>
+
+    <template v-slot:bottom>
+      <zd-grid-footer v-if="instance.showFooter && !hasFooterSlot"></zd-grid-footer>
+      <slot name="footerSlot"></slot>
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts" src="./TekGrid.ts"></script>
+
+<style lang="scss">
+.tek-grid {
+  .zd-grid__row:not(.tek-grid-group-row) {
+    :nth-child(1 of td:not(.zd-grid__selectable-cell)) {
+      display: flex;
+    }
+  }
+
+  .is-rotated {
+    transform: rotate(180deg);
+    transition: transform 0.3s ease;
+  }
+
+  .zd-grid__toolbar {
+    height: 38px;
+
+    .toolbar-divider {
+      margin: 10px;
+    }
+
+    .zd-search {
+      width: 200px;
+    }
+  }
+}
+</style>

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>