@zeedhi/teknisa-components-vuetify 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-vuetify",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Teknisa Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -19,7 +19,7 @@
     "watch": "rollup -cw"
   },
   "dependencies": {
-    "@zeedhi/teknisa-components-common": "^3.0.0",
+    "@zeedhi/teknisa-components-common": "^3.0.1",
     "@zeedhi/vuetify": "^3.0.0",
     "@zeedhi/zd-user-info-common": "^3.0.0",
     "@zeedhi/zd-user-info-vue": "^3.0.0",
@@ -42,7 +42,7 @@
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "26.5.*"
   },
-  "gitHead": "8f96c641dd2a27edfd63eadf165843c9499d32b0",
+  "gitHead": "1c6ee6c23a7e75036a459ada909c934d00f63373",
   "env": {
     "NODE_ENV": "production"
   }

package/src/components/index.ts

@@ -2,11 +2,33 @@ import type { App, DefineComponent } from 'vue';
 import type { IDictionary } from '@zeedhi/core';
 
 import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader.vue';
+import TekGrid from './tek-grid/TekGrid.vue';
+import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter.vue';
+import TekGridHeaderRow from './tek-grid/column-header/TekGridHeaderRow.vue';
+import TekGridColumnsButton from './tek-grid/columns-button/TekGridColumnsButton.vue';
+import TekGridFilterButton from './tek-grid/filter-button/TekGridFilterButton.vue';
+import TekGridIndentation from './tek-grid/indentation/TekGridIndentation.vue';
+import TekGridLayoutOptions from './tek-grid/layout-options/TekGridLayoutOptions.vue';
+import TekGridFooterRow from './tek-grid/row/TekGridFooterRow.vue';
+import TekGridGroupRow from './tek-grid/row/TekGridGroupRow.vue';
+import TekUserInfo from './tek-user-info/TekUserInfo.vue';
+import TekUserInfoList from './tek-user-info/TekUserInfoList.vue';
 
 export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
 
 export const components: IDictionary<DefineComponent<any, any, any>> = {
   TekBreadcrumbHeader,
+  TekGrid,
+  TekGridColumnFilter,
+  TekGridHeaderRow,
+  TekGridColumnsButton,
+  TekGridFilterButton,
+  TekGridIndentation,
+  TekGridLayoutOptions,
+  TekGridFooterRow,
+  TekGridGroupRow,
+  TekUserInfo,
+  TekUserInfoList,
 };
 
 export function RegisterComponents(app: App) {

package/src/components/public.ts

@@ -5,20 +5,18 @@ import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
 // import TekCrudDeleteButton from './crud/TekCrudDeleteButton';
 // import TekCrudForm from './crud/TekCrudForm';
 // import TekCrudSaveButton from './crud/TekCrudSaveButton';
-// import TekGrid from './tek-grid/TekGrid';
-// import TekGridCellIdentation from './tek-grid/subcomponents/TekGridCellIdentation';
-// import TekGridHeaderIndentation from './tek-grid/subcomponents/TekGridHeaderIndentation';
-// import TekGridColumnFilter from './tek-grid/subcomponents/TekGridColumnFilter';
+import TekGrid from './tek-grid/TekGrid';
+import TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter';
 // import TekDragGrid from './tek-drag-grid/TekDragGrid';
-// import TekGridColumnsButton from './tek-grid/TekGridColumnsButton';
-// import TekGridFilterButton from './tek-grid/TekGridFilterButton';
-// import TekGridLayoutOptions from './tek-grid/TekGridLayoutOptions';
+import TekGridColumnsButton from './tek-grid/columns-button/TekGridColumnsButton';
+import TekGridFilterButton from './tek-grid/filter-button/TekGridFilterButton';
+import TekGridLayoutOptions from './tek-grid/layout-options/TekGridLayoutOptions';
 // import TekImage from './tek-image/TekImage';
 // import TekIterableComponentRender from './tek-iterable-component-render/TekIterableComponentRender';
 // import TekProductCard from './tek-product-card/TekProductCard';
 // import TekTreeGrid from './tek-tree-grid/TekTreeGrid';
-// import TekUserInfo from './tek-user-info/TekUserInfo';
-// import TekUserInfoList from './tek-user-info/TekUserInfoList';
+import TekUserInfo from './tek-user-info/TekUserInfo';
+import TekUserInfoList from './tek-user-info/TekUserInfoList';
 
 export {
   TekBreadcrumbHeader,
@@ -28,18 +26,16 @@ export {
   // TekCrudDeleteButton,
   // TekCrudForm,
   // TekCrudSaveButton,
-  // TekGrid,
-  // TekGridCellIdentation,
-  // TekGridHeaderIndentation,
-  // TekGridColumnFilter,
+  TekGrid,
+  TekGridColumnFilter,
   // TekDragGrid,
-  // TekGridColumnsButton,
-  // TekGridFilterButton,
-  // TekGridLayoutOptions,
+  TekGridColumnsButton,
+  TekGridFilterButton,
+  TekGridLayoutOptions,
   // TekImage,
   // TekProductCard,
   // TekIterableComponentRender,
   // TekTreeGrid,
-  // TekUserInfo,
-  // TekUserInfoList,
+  TekUserInfo,
+  TekUserInfoList,
 };

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

@@ -0,0 +1,318 @@
+import {
+	IDynamicFilterItem,
+	ITekConfig,
+	ITekGridGroupFooter,
+	ITekGridGroupHeader,
+	TekGrid,
+	TekMemoryDatasource,
+	TekRestDatasource,
+} from '@zeedhi/teknisa-components-common';
+import { Config, IDictionary, Utils } from '@zeedhi/core';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import { ComponentPublicInstance, computed, defineComponent, nextTick } from 'vue';
+import { buildProps, useGridColumns, getRootElement, useCreateInstance, ZdGridEditableProps, useGridEditableInstance } from '@zeedhi/vuetify';
+import { provideTableLayout } from '../../composables/useTableLayout'
+
+export const TekGridProps = buildProps({
+	...ZdGridEditableProps,
+	toolbarSlot: {
+		type: Array,
+		default: undefined,
+	},
+	title: {
+		type: String,
+		default: '',
+	},
+	addButton: {
+		type: [Boolean, String],
+		default: false,
+	},
+	deleteButton: {
+		type: [String, Boolean],
+		default: 'none',
+	},
+	columnsButton: {
+		type: [Boolean, String],
+		default: false,
+	},
+	columnsButtonIgnore: {
+		type: [Array, String],
+		default: () => [],
+	},
+	showEditButtons: {
+		type: [Boolean, String],
+		default: true,
+	},
+	filterButton: {
+		type: [Boolean, String],
+		default: false,
+	},
+	modalFilterProps: {
+		type: Object,
+		default: () => ({}),
+	},
+	showSearch: {
+		type: [Boolean, String],
+		default: true,
+	},
+	columnFilterButton: {
+		type: [Boolean, String],
+		default: false,
+	},
+	hideActions: {
+		type: [Boolean, String],
+		default: false,
+	},
+	actions: {
+		type: Array,
+		default: () => [],
+	},
+	dragColumns: {
+		type: [Boolean, String],
+		default: true,
+	},
+	resizeColumns: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showLayoutOptions: {
+		type: [Boolean, String],
+		default: true,
+	},
+	showExport: {
+		type: [String, Boolean],
+		default: false,
+	},
+	showReload: {
+		type: [Boolean, String],
+		default: true,
+	},
+	exportConfig: {
+		type: Array,
+	},
+	exportActions: {
+		type: Array,
+	},
+	groupsOpened: {
+		type: [Boolean, String],
+		default: false,
+	},
+	showSummaryTotal: {
+		type: [Boolean, String],
+		default: true,
+	},
+	mainGrid: {
+		type: [Boolean, String],
+		default: true,
+	},
+	xlsDefaultType: {
+		type: String,
+		default: undefined,
+	},
+	showCheckboxAllFilter: {
+		type: [Boolean, String],
+		default: (Config as ITekConfig).gridShowCheckboxAllFilter,
+	},
+	toolbarOpened: {
+		type: [Boolean],
+		default: true,
+	},
+	defaultFilter: {
+		type: Object,
+	},
+	reportTitle: {
+		type: String,
+	},
+	editNewRowsOnly: {
+		type: [Boolean, String],
+		default: false,
+	},
+});
+
+const gridEditableComponent = defineComponent({
+	props: TekGridProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<TekGrid, ComponentPublicInstance>(props, ctx, TekGrid);
+
+		const renderedData = computed(() => {
+			if (instance.isGrouped()) {
+				return instance.getGroupedData();
+			}
+			return instance.getData();
+		});
+
+		const visibleData = computed(() => {
+			return renderedData.value.filter((row) => instance.isItemVisible(row));
+		});
+
+		const gridEditableScope = useGridEditableInstance({ instance, root, renderedData: visibleData });
+
+		const rootEl = getRootElement(root);
+		const { visibleColumns } = useGridColumns({
+			instance,
+			rootEl,
+			visibilityCondition: (column: any) => column.isVisible && !column.grouped,
+		});
+
+		provideTableLayout({ instance, rootEl });
+
+		const debouncedDatasourceGet = debounce((instance) => {
+			const event = new Event('change', { cancelable: true });
+			instance.callEvent('beforeApplyFilter', { component: instance, event });
+			if (event.defaultPrevented) return;
+
+			const { datasource } = instance;
+			if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+				datasource.updateDynamicFilter();
+			} else {
+				datasource.get();
+			}
+		}, 500);
+
+		const filter = computed<IDictionary<IDynamicFilterItem[]>>(() => {
+			if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+				return instance.datasource.dynamicFilter;
+			}
+
+			const datasourceFilter = instance.datasource.filter;
+			const simpleFilter: IDictionary<IDynamicFilterItem[]> = {};
+			Object.keys(datasourceFilter).forEach((key) => {
+				simpleFilter[key] = [{ relation: 'AND', operation: 'CONTAINS', value: datasourceFilter[key] }];
+			});
+			return simpleFilter;
+		});
+
+		const setFilter = (newFilter: IDictionary<IDynamicFilterItem[]>) => {
+			if (Utils.isEqual(filter, newFilter)) return;
+
+			if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+				instance.datasource.dynamicFilter = cloneDeep(newFilter);
+			} else {
+				const normalFilter: IDictionary<any> = {};
+				Object.keys(newFilter).forEach((key) => {
+					if (!newFilter[key][0].value) return;
+
+					normalFilter[key] = newFilter[key][0].value;
+				});
+				instance.datasource.filter = normalFilter;
+			}
+			debouncedDatasourceGet(instance);
+			instance.changeLayout();
+		};
+
+		const columnHasFilter = (columnName: string) => {
+			return instance.columnHasFilter(columnName);
+		};
+
+		const isRowVisible = (row: IDictionary<any>, index: number) => {
+			return instance.isItemVisible(row) && gridEditableScope.shouldRender(index);
+		};
+
+		const isCurrentRowGroup = (row: IDictionary<any>) => {
+			const { uniqueKey, currentRow } = instance.datasource;
+
+			return !!(
+				(row.group && row.groupValue === currentRow.groupValue) ||
+				(row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey])
+			);
+		};
+
+		const isGroupSelectIndeterminate = (item: ITekGridGroupHeader) => {
+			let hasSelected = false;
+			let hasNotSelected = false;
+			const { uniqueKey } = instance.datasource;
+			item.children.forEach((child) => {
+				const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+				hasSelected = hasSelected || idx !== -1;
+				hasNotSelected = hasNotSelected || idx === -1;
+			});
+			return hasSelected && hasNotSelected;
+		};
+
+		const isGroupSelected = (item: ITekGridGroupHeader) => {
+			return item.children.every((child) => {
+				const { uniqueKey } = instance.datasource;
+				const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+				return idx !== -1;
+			});
+		};
+
+		const selectGroupRowClick = (row: IDictionary<any>, isSelected: boolean, event: Event) => {
+			nextTick(() => {
+				const rootElement = getRootElement(root);
+				instance.selectGroupClick(row, isSelected, event, rootElement.value);
+			});
+		};
+
+		const selectGroup = (item: ITekGridGroupHeader, event: Event) => {
+			const { uniqueKey } = instance.datasource;
+			const isSelected = isGroupSelected(item);
+			if (!isSelected) {
+				// here we fetch the item from renderedData because vuetify isSelected checks for object reference
+				// so we need to find the item inside renderedData to call selectRow() with the correct reference
+				// https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/select.ts#L128
+				const items = item.children.map((child) => {
+					return renderedData.value.find((row) => child[uniqueKey] === row[uniqueKey]);
+				});
+
+				items.forEach((child) => {
+					if (!child) return;
+
+					const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+					if (idx === -1) {
+						instance.selectRow(child, true);
+					}
+				});
+			} else {
+				item.children.forEach((child) => {
+					const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+					if (idx !== -1) {
+						instance.selectRow(child, false);
+					}
+				});
+			}
+			selectGroupRowClick(item, !isSelected, event);
+		};
+
+		const openGroup = (item: ITekGridGroupHeader) => {
+			instance.openGroup(item);
+		};
+
+		const isGroup = (item: IDictionary<any>): item is ITekGridGroupHeader => {
+			return !!item.group;
+		};
+
+		const isFooter = (item: IDictionary<any>): item is ITekGridGroupFooter => {
+			return !!item.groupFooter;
+		};
+
+		const groupColumnNames = computed(() => {
+			return instance.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+		});
+
+		return {
+			...gridEditableScope,
+			instance,
+			root,
+			filter,
+			setFilter,
+			columnHasFilter,
+			visibleColumns,
+			isRowVisible,
+			isCurrentRowGroup,
+			isGroupSelectIndeterminate,
+			selectGroup,
+			isGroup,
+			openGroup,
+			renderedData,
+			isGroupSelected,
+			groupColumnNames,
+			isFooter,
+			visibleData,
+		};
+	},
+});
+
+export default gridEditableComponent;

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>