@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

package/src/composables/useTableLayout.ts

@@ -0,0 +1,290 @@
+import { IIterable } from '@zeedhi/common';
+import { IDynamicFilterItem, IGroupedDataManager,
+	ITekGridLayout,
+	ITekGridLayoutColumn,
+	TekFilterHelper,
+	TekGridColumn,
+	TekRestDatasource, } from '@zeedhi/teknisa-components-common';
+import { IDictionary, Utils } from '@zeedhi/core';
+import cloneDeep from 'lodash.clonedeep';
+import { NotProvidedError } from '@zeedhi/vuetify';
+import { ComputedRef, UnwrapNestedRefs, computed, inject, nextTick, provide } from 'vue';
+
+export type DefaultLayout = {
+	originalDatasourceOrder: string[];
+	originalDatasourceFilter: IDictionary<any>;
+	originalColumnProps: ITekGridLayoutColumn[];
+	originalDatasourceDynamicFilter: IDictionary<IDynamicFilterItem[]>;
+};
+
+export type ApplyLayout = (params: {
+	layout?: ITekGridLayout;
+	defaultLayout: DefaultLayout;
+	changeLayoutCallback: (layout: ITekGridLayout) => void;
+}) => void;
+export type GetColumnElements = () => IDictionary<Element>;
+export type GetTableWidth = () => string;
+
+export function useTableLayout() {
+	const applyLayout = inject<ApplyLayout>('applyLayout');
+	const getColumnElements = inject<GetColumnElements>('getColumnElements');
+	const getTableWidth = inject<GetTableWidth>('getTableWidth');
+
+	if (!applyLayout) {
+		throw new NotProvidedError('applyLayout');
+	}
+
+	if (!getColumnElements) {
+		throw new NotProvidedError('getColumnElements');
+	}
+
+	if (!getTableWidth) {
+		throw new NotProvidedError('getTableWidth');
+	}
+
+	return { applyLayout, getColumnElements, getTableWidth };
+}
+
+export function provideTableLayout<T extends IIterable<TekGridColumn> & IGroupedDataManager>({
+	instance,
+	rootEl,
+}: {
+	instance: UnwrapNestedRefs<T>;
+	rootEl: ComputedRef<HTMLElement | undefined>;
+}) {
+	const tableElement = rootEl.value?.querySelector('table');
+
+	const columnDictionary = computed(() => getColumnDictionary(instance.columns));
+
+	const datasourceDynamicFilter = () => {
+		const datasource = instance.datasource;
+		if (datasource instanceof TekRestDatasource) return datasource.dynamicFilter;
+		return {};
+	};
+
+	const getColumnDictionary = (columns: UnwrapNestedRefs<TekGridColumn>[]) => {
+		const columnDictionary: IDictionary<UnwrapNestedRefs<TekGridColumn>> = {};
+		columns.forEach((column: UnwrapNestedRefs<TekGridColumn>) => {
+			columnDictionary[column.name] = column;
+		});
+		return columnDictionary;
+	};
+
+	const addMissingColumns = (layout: ITekGridLayout) => {
+		const layoutColumnNames: string[] = layout.columns?.map((column) => column.name) || [];
+		const columnNames: string[] = Object.keys(columnDictionary.value);
+		columnNames.forEach((columnName) => {
+			if (!layoutColumnNames.includes(columnName)) {
+				layout.columns?.push(columnDictionary.value[columnName]);
+			}
+		});
+	};
+
+	const setHelperValue = (column: any, value: string | IDictionary<any>) => {
+		if (column instanceof TekGridColumn) {
+			if (!Array.isArray(column.filterProps) && typeof value === 'string') {
+				column.filterProps.helperValue = value;
+			} else if (Array.isArray(column.filterProps) && Array.isArray(value)) {
+				column.filterProps.forEach((prop: any, index: number) => {
+					prop.value = value[index];
+				});
+			}
+		}
+	};
+
+	const getHelperValues = (dynamicFilter: IDictionary<IDynamicFilterItem[]>, columns: any[]) => {
+		const filter = cloneDeep(dynamicFilter);
+		Object.keys(filter).forEach((columnName) => {
+			const filterOptions = filter[columnName];
+			const column = columns[columns.findIndex((col) => col.name === columnName)];
+			const { filterHelperValue } = column;
+
+			filterOptions.forEach((item) => {
+				if (['IN', 'NOT_IN', 'BETWEEN'].includes(item.operation) && !Array.isArray(item.value)) {
+					item.value = item.value.split(';');
+				}
+
+				let helperValue = '';
+				if (!Array.isArray(filterHelperValue)) {
+					helperValue = filterHelperValue;
+				} else {
+					Object.keys(filterHelperValue).forEach((key: any) => {
+						const value = filterHelperValue[key] || '';
+						if (`${item.relation || 'AND'}-${item.operation || 'CONTAINS'}` === key) {
+							helperValue = value;
+						}
+					});
+				}
+
+				if (helperValue) {
+					const columnObj = instance.getColumn(column.name);
+					item.value = TekFilterHelper.getValue(helperValue, columnObj as any);
+				}
+			});
+		});
+
+		return filter;
+	};
+
+	/**
+	 * Applies the default grid layout
+	 * @returns a boolean to indicate whether the group parameters changed
+	 */
+	const applyDefaultLayout = (defaultLayout: DefaultLayout) => {
+		let groupParamsChanged = false;
+
+		instance.datasource.order = [...defaultLayout.originalDatasourceOrder];
+		instance.datasource.filter = { ...defaultLayout.originalDatasourceFilter };
+		if (instance.datasource instanceof TekRestDatasource) {
+			instance.datasource.dynamicFilter = getHelperValues(
+				defaultLayout.originalDatasourceDynamicFilter,
+				defaultLayout.originalColumnProps,
+			);
+		}
+		instance.columns = defaultLayout.originalColumnProps.map((defaultColumn) => {
+			const col = columnDictionary.value[defaultColumn.name];
+
+			groupParamsChanged =
+				groupParamsChanged ||
+				col.grouped !== defaultColumn.grouped ||
+				col.groupOpened !== defaultColumn.groupOpened ||
+				col.aggregation !== defaultColumn.aggregation;
+
+			col.isVisible = defaultColumn.isVisible ?? col.isVisible;
+			col.label = defaultColumn.label ?? col.label;
+			col.align = defaultColumn.align ?? col.align;
+			col.fixed = defaultColumn.fixed ?? col.fixed;
+			col.grouped = defaultColumn.grouped ?? col.grouped;
+			col.groupOpened = defaultColumn.groupOpened ?? col.groupOpened;
+			col.aggregation = defaultColumn.aggregation ?? col.aggregation;
+			col.minWidth = defaultColumn.minWidth ?? col.minWidth;
+			col.maxWidth = defaultColumn.maxWidth ?? col.maxWidth;
+			col.width = defaultColumn.width ?? col.width;
+
+			setHelperValue(col, defaultColumn.filterHelperValue || '');
+			return col;
+		});
+
+		if (tableElement) {
+			tableElement.style.width = '100%';
+			const columnElements = Array.from(tableElement.querySelectorAll('tr th:not(.selectable)'));
+			columnElements.forEach((item) => {
+				(item as HTMLElement).style.width = 'unset';
+			});
+		}
+
+		return groupParamsChanged;
+	};
+
+	const applyNewLayout = (layout: ITekGridLayout, changeLayoutCallback: (layout: ITekGridLayout) => void) => {
+		const gridColumnNames: string[] = Object.keys(columnDictionary.value);
+		let layoutChanged = false;
+
+		// removes columns that are in the layout but not in grid
+		layout.columns = layout.columns?.filter((column: any) => {
+			const isInGrid = gridColumnNames.includes(column.name);
+			if (!isInGrid) layoutChanged = true;
+
+			return isInGrid;
+		});
+
+		if (layoutChanged) {
+			changeLayoutCallback(layout);
+		}
+
+		if (tableElement) tableElement.style.width = layout.gridWidth || 'auto';
+
+		instance.datasource.order = layout.order !== undefined ? layout.order : instance.datasource.order;
+		instance.datasource.filter = layout.filter !== undefined ? layout.filter : instance.datasource.filter;
+		if (instance.datasource instanceof TekRestDatasource && layout.dynamicFilter !== undefined) {
+			instance.datasource.dynamicFilter = getHelperValues(layout.dynamicFilter, layout.columns || instance.columns);
+		}
+
+		if (layout.columns) {
+			instance.columns = layout.columns.map((column) => {
+				const col = columnDictionary.value[column.name];
+				col.label = column.label !== undefined ? column.label : col.label;
+				col.align = column.align !== undefined ? column.align : col.align;
+				col.isVisible = column.isVisible !== undefined ? column.isVisible : col.isVisible;
+				col.fixed = !!column.fixed;
+				col.grouped = !!column.grouped;
+				col.groupOpened = !!column.groupOpened;
+				col.aggregation = column.aggregation;
+				col.minWidth = column.minWidth || '';
+				col.maxWidth = column.maxWidth || '';
+				col.width = column.width;
+				setHelperValue(col, column.filterHelperValue || '');
+
+				return col;
+			});
+
+			// wait to change column orders
+			nextTick(() => {
+				gridColumnNames.forEach((_key, index) => {
+					const columnElement: HTMLElement | null | undefined = tableElement?.querySelector(
+						`tr th:not(.selectable)[index="${index}"]`,
+					);
+					if (columnElement) {
+						columnElement.style.width = layout.columns![index].width || 'unset';
+					}
+				});
+			});
+		}
+	};
+
+	const applyLayout: ApplyLayout = ({
+		layout,
+		defaultLayout,
+		changeLayoutCallback,
+	}: {
+		defaultLayout: DefaultLayout;
+		layout?: ITekGridLayout;
+		changeLayoutCallback: (layout: ITekGridLayout) => void;
+	}) => {
+		const oldOrder = instance.datasource.order;
+		const oldFilter = instance.datasource.filter;
+		const oldDynamicFilter = datasourceDynamicFilter();
+
+		let groupParamsChanged = false;
+
+		if (layout) {
+			addMissingColumns(layout);
+			applyNewLayout(layout, changeLayoutCallback);
+		} else {
+			groupParamsChanged = applyDefaultLayout(defaultLayout);
+		}
+
+		if (
+			(!Utils.isEqual(instance.datasource.order, oldOrder) ||
+				!Utils.isEqual(instance.datasource.filter, oldFilter) ||
+				!Utils.isEqual(datasourceDynamicFilter(), oldDynamicFilter)) &&
+			!groupParamsChanged
+		) {
+			// Se os parametros de agrupamento tiverem sido alterados um get é feito automaticamente
+			instance.loadAfterTasks();
+		}
+	};
+
+	const getColumnElements: GetColumnElements = () => {
+		const elementDict: IDictionary<Element> = {};
+
+		const columnElements = tableElement?.querySelectorAll('tr th:not(.selectable)[index]') || [];
+
+		columnElements.forEach((el) => {
+			const index = el.getAttribute('index');
+			if (index === null) return;
+
+			elementDict[index] = el;
+		});
+
+		return elementDict;
+	};
+
+	const getTableWidth: GetTableWidth = () => {
+		return tableElement ? window.getComputedStyle(tableElement).width : 'auto';
+	};
+
+	provide('applyLayout', applyLayout);
+	provide('getColumnElements', getColumnElements);
+	provide('getTableWidth', getTableWidth);
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+import type { App } from 'vue';
+import { Icons } from '@zeedhi/common';
+import ZdUserInfoComponent from '@zeedhi/zd-user-info-vue';
+import { components } from './components';
+
+Icons.addIcons({
+  add: 'mdi-plus-box',
+  delete: 'mdi-trash-can-outline',
+  refresh: 'mdi-refresh',
+  more: 'mdi-dots-vertical',
+  filter: 'mdi-filter',
+  confirmLayout: 'mdi-check',
+  updateLayout: 'mdi-square-edit-outline',
+  layout: 'mdi-table-star',
+});
+
+const TeknisaComponents = {
+  install(app: App): void {
+    Object.keys(components).forEach((id) => {
+      app.component(id, components[id]);
+    });
+
+    app.component('ZdUserInfo', ZdUserInfoComponent);
+  },
+};
+
+export default TeknisaComponents;
+export * from './components/public';

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+	const component: DefineComponent<object, object, any>;
+	export default component;
+}

package/src/utils/isArrayOperation.ts

@@ -0,0 +1,5 @@
+const isArrayOperation = (operation: string) => {
+	return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
+};
+
+export { isArrayOperation };

package/types/components/index.d.ts

@@ -1,3 +1,5 @@
-import { VueConstructor } from 'vue';
-import { IDictionary } from '@zeedhi/core';
-export declare const components: IDictionary<VueConstructor>;
+import type { App, DefineComponent } from 'vue';
+import type { IDictionary } from '@zeedhi/core';
+export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
+export declare const components: IDictionary<DefineComponent<any, any, any>>;
+export declare function RegisterComponents(app: App): void;

package/types/components/public.d.ts

@@ -1,22 +1,9 @@
 import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
-import TekCardTitle from './tek-card-title/TekCardTitle';
-import TekCrudAddButton from './crud/TekCrudAddButton';
-import TekCrudCancelButton from './crud/TekCrudCancelButton';
-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 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 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 TekGridColumnFilter from './tek-grid/column-filter/TekGridColumnFilter';
+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 TekUserInfo from './tek-user-info/TekUserInfo';
 import TekUserInfoList from './tek-user-info/TekUserInfoList';
-export { TekBreadcrumbHeader, TekCardTitle, TekCrudAddButton, TekCrudCancelButton, TekCrudDeleteButton, TekCrudForm, TekCrudSaveButton, TekGrid, TekGridCellIdentation, TekGridHeaderIndentation, TekGridColumnFilter, TekDragGrid, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekImage, TekProductCard, TekIterableComponentRender, TekTreeGrid, TekUserInfo, TekUserInfoList, };
+export { TekBreadcrumbHeader, TekGrid, TekGridColumnFilter, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekUserInfo, TekUserInfoList, };