@zeedhi/teknisa-components-common 1.117.1 → 3.0.1

package/package.json

@@ -1,36 +1,44 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.117.1",
+  "version": "3.0.1",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
-  "main": "dist/tek-components-common.umd.js",
-  "module": "dist/tek-components-common.esm.js",
-  "typings": "types/index.d.ts",
+  "main": "src/index.ts",
+  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "module": "dist/teknisa-components-common.js",
+  "packageManager": "npm@8.19.2",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "rollup -c",
-    "docs": "typedoc --out docs src/",
-    "lint": "eslint . --fix --ext .ts",
-    "test": "node --expose-gc ./../../node_modules/jest/bin/jest.js",
-    "watch": "npm run build -- -w"
+    "clean": "rm -rf ./dist",
+    "test": "jest --verbose=false",
+    "watch": "rollup -cw"
   },
   "dependencies": {
-    "@zeedhi/zd-drag-grid-common": "<=1.0.6",
-    "@zeedhi/zd-user-info-common": "^1.3.2",
-    "lodash.debounce": "4.0.*",
-    "lodash.get": "4.4.*",
-    "lodash.merge": "4.6.*"
+    "lodash.debounce": "^4.0.8",
+    "lodash.get": "^4.4.2",
+    "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
-    "@types/lodash.debounce": "4.0.*",
-    "@types/lodash.get": "4.4.*",
-    "@types/lodash.merge": "4.6.*"
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.get": "^4.4.7",
+    "@types/lodash.merge": "^4.6.7",
+    "@zeedhi/common": "^3.0.0",
+    "@zeedhi/core": "^3.0.0"
   },
   "peerDependencies": {
-    "@zeedhi/core": "^1.97.0"
+    "@zeedhi/common": "^3.0.0",
+    "@zeedhi/core": "^3.0.0"
   },
-  "gitHead": "af96b05ecd9d257920b9244fdd82f9502e70722c"
+  "env": {
+    "NODE_ENV": "production"
+  },
+  "gitHead": "1c6ee6c23a7e75036a459ada909c934d00f63373"
 }

package/src/components/index.ts

@@ -0,0 +1,101 @@
+import { Messages } from '@zeedhi/core';
+
+Messages.add({
+  'pt-BR': {
+    translation: {
+      NO_NOTIFICATIONS: 'Nenhuma Notificação',
+      MARK_ALL_AS_READ: 'Marcar todas como lidas',
+      NOTIFICATIONS: 'Notificações',
+      SEE_ALL_NOTIFICATIONS: 'Ver todas notificações',
+      UNAVAILABLE_IMAGE: 'Imagem indisponível',
+      REFRESH: 'Atualizar',
+      ACTIONS: 'Ações',
+      FILTER: 'Filtro',
+      LAYOUT: 'Layout: ',
+      NEW_LAYOUT: 'Novo layout',
+      DEFAULT_LAYOUT: 'Padrão',
+      LAYOUT_MODIFIED: 'O layout atual foi modificado. Crie um novo layout, sobrescreva um existente ou descarte as alterações', // eslint-disable-line
+      LAYOUT_NOT_MODIFIED: 'Crie um novo layout ou aplique um dos layouts já existentes',
+      LAYOUT_DISCART_CHANGES: 'Descartar alterações',
+    },
+  },
+  'en-US': {
+    translation: {
+      NO_NOTIFICATIONS: 'No Notifications',
+      MARK_ALL_AS_READ: 'Mark all as read',
+      NOTIFICATIONS: 'Notifications',
+      SEE_ALL_NOTIFICATIONS: 'See all notifications',
+      UNAVAILABLE_IMAGE: 'Unavailable image',
+      REFRESH: 'Refresh',
+      ACTIONS: 'Actions',
+      FILTER: 'Filter',
+      LAYOUT: 'Layout: ',
+      NEW_LAYOUT: 'New layout',
+      DEFAULT_LAYOUT: 'Default',
+      LAYOUT_MODIFIED: 'The current layout has been modified. Create a new layout, overwrite an existing one or discard changes', // eslint-disable-line
+      LAYOUT_NOT_MODIFIED: 'Create a new layout or apply one of the existing layouts',
+      LAYOUT_DISCART_CHANGES: 'Discard changes',
+    },
+  },
+  'es-CL': {
+    translation: {
+      NO_NOTIFICATIONS: 'Sin Notificación',
+      MARK_ALL_AS_READ: 'Marcar todo como leído',
+      NOTIFICATIONS: 'Notificaciones',
+      SEE_ALL_NOTIFICATIONS: 'Ver todas las notificaciones',
+      UNAVAILABLE_IMAGE: 'Imagen no disponible',
+      REFRESH: 'Actualizar',
+      ACTIONS: 'Acciones',
+      FILTER: 'Filtro',
+      LAYOUT: 'Disposición: ',
+      NEW_LAYOUT: 'Nueva disposición',
+      DEFAULT_LAYOUT: 'Default',
+      LAYOUT_MODIFIED: 'La disposición actual ha sido modificada. Cree una nueva disposición, sobrescriba una existente o descarte los cambios', // eslint-disable-line
+      LAYOUT_NOT_MODIFIED: 'Cree una nueva disposición o aplique una de las disposiciones existentes',
+      LAYOUT_DISCART_CHANGES: 'Descartar los cambios',
+    },
+  },
+});
+
+// export * from './crud/crud-form';
+// export * from './crud/crud-button';
+// export * from './crud/crud-add-button';
+// export * from './crud/crud-cancel-button';
+// export * from './crud/crud-delete-button';
+// export * from './crud/crud-save-button';
+// export * from './crud/interfaces';
+
+export * from './tek-breadcrumb-header/breadcrumb-header';
+export * from './tek-breadcrumb-header/interfaces';
+
+// export * from './tek-card-title/card-title';
+// export * from './tek-card-title/interfaces';
+
+// export * from './tek-image/image';
+// export * from './tek-image/interfaces';
+
+// export * from './tek-product-card/product-card';
+// export * from './tek-product-card/interfaces';
+
+// export * from './tek-iterable-component-render/iterable-component-render';
+// export * from './tek-iterable-component-render/interfaces';
+
+// export * from './tek-iterable-carousel/iterable-carousel';
+// export * from './tek-iterable-carousel/interfaces';
+
+// export * from './tek-loading/loading';
+// export * from './tek-loading/interfaces';
+
+// export * from './tek-notifications/notifications';
+// export * from './tek-notifications/interfaces';
+
+export * from './tek-grid';
+
+export * from './tek-datasource';
+
+// export * from './tek-tree-grid/interfaces';
+// export * from './tek-tree-grid/tree-grid';
+
+export * from './tek-user-info/interfaces';
+export * from './tek-user-info/tek-user-info';
+export * from './tek-user-info/tek-user-info-list';

package/src/components/tek-breadcrumb-header/breadcrumb-header.ts

@@ -0,0 +1,29 @@
+import { type IBreadcrumbs, ComponentRender, type IComponentRender } from '@zeedhi/common';
+import type { IBreadcrumbHeader } from './interfaces';
+
+/**
+ * BreadcrumbHeader join breadcrumb and title
+ */
+export class BreadcrumbHeader extends ComponentRender implements IBreadcrumbHeader {
+	public breadcrumb: IBreadcrumbs;
+
+	public title = '';
+
+	public rightSlot: IComponentRender[] = [];
+
+	public constructor(props: IBreadcrumbHeader) {
+		super(props);
+		this.breadcrumb = this.getBreadcrumbProperties(props.breadcrumb);
+		this.title = this.getInitValue('title', props.title, this.title);
+		this.rightSlot = props.rightSlot || this.rightSlot;
+	}
+
+	private getBreadcrumbProperties(breadcrumb: any): IBreadcrumbs {
+		return {
+			...breadcrumb,
+			name: breadcrumb.name,
+			component: 'ZdBreadcrumb',
+			divider: '>',
+		};
+	}
+}

package/src/components/tek-breadcrumb-header/interfaces.ts

@@ -0,0 +1,7 @@
+import type { IBreadcrumbs, IComponentRender } from '@zeedhi/common';
+
+export interface IBreadcrumbHeader extends IComponentRender {
+	breadcrumb: IBreadcrumbs;
+	title: string;
+	rightSlot?: IComponentRender[];
+}

package/src/components/tek-datasource/index.ts

@@ -0,0 +1,3 @@
+export * from './interfaces';
+export * from './tek-memory-datasource';
+export * from './tek-rest-datasource';

package/src/components/tek-datasource/interfaces.ts

@@ -0,0 +1,36 @@
+import { IDictionary, IMemoryDatasource, IRestDatasource } from '@zeedhi/core';
+
+export interface ITekMemoryDatasource extends IMemoryDatasource {
+	dynamicFilter?: IDictionary<any>;
+	searchJoin?: IDictionary<Array<string | number>>;
+}
+
+export interface ITekRestDatasource extends IRestDatasource {
+	dynamicFilter?: IDictionary<any>;
+	searchJoin?: IDictionary<Array<string | number>>;
+}
+
+export interface IDynamicFilterItem {
+	relation: string;
+	operation: string;
+	value: any;
+}
+
+export const DynamicFilterOperations: IDictionary<boolean> = {
+	CONTAINS: true,
+	NOT_CONTAINS: true,
+	EQUALS: true,
+	NOT_EQUALS: true,
+	GREATER_THAN: true,
+	LESS_THAN: true,
+	GREATER_THAN_EQUALS: true,
+	LESS_THAN_EQUALS: true,
+	IN: true,
+	NOT_IN: true,
+	BETWEEN: true,
+};
+
+export const DynamicFilterRelations: IDictionary<boolean> = {
+	AND: true,
+	OR: true,
+};

package/src/components/tek-datasource/tek-memory-datasource.ts

@@ -0,0 +1,314 @@
+import { DatasourceFactory, IDatasource, IDictionary, MemoryDatasource, URL, Utils } from '@zeedhi/core';
+import {
+	DynamicFilterOperations,
+	DynamicFilterRelations,
+	IDynamicFilterItem,
+	ITekMemoryDatasource,
+} from './interfaces';
+
+export class TekMemoryDatasource extends MemoryDatasource implements ITekMemoryDatasource {
+	/** Dynamic filter data */
+	public dynamicFilter!: IDictionary<IDynamicFilterItem[]>;
+
+	/** Search Join data */
+	public searchJoin!: IDictionary<Array<string | number>>;
+
+	/**
+	 * Dynamic Filter Operations
+	 */
+	public dynamicFilterOperations = DynamicFilterOperations;
+
+	/**
+	 * Dynamic Filter Relations
+	 */
+	public dynamicFilterRelations = DynamicFilterRelations;
+
+	/**
+	 * Dynamic Filter applied flag
+	 */
+	protected dynamicFilterApplied = '';
+
+	/**
+	 * Create new datasource
+	 * @param props Datasource properties
+	 */
+	constructor(props: ITekMemoryDatasource) {
+		super(props);
+
+		if (!this.watchUrl) {
+			this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
+			this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
+		}
+
+		this.createAccessors();
+		this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+		this.createObjAccessors(this.searchJoin, 'searchJoin');
+	}
+
+	protected updateReservedKeys() {
+		this.reservedKeys.dynamic_filter = true;
+		this.reservedKeys.search_join = true;
+	}
+
+	protected updateInternalProperties(datasource: IDatasource = {}) {
+		if (!this.watchUrl) return;
+		this.updateReservedKeys();
+		super.updateInternalProperties(datasource);
+		const queryString = URL.getParsedQueryStringFromUrl();
+		this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
+		this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
+	}
+
+	protected getEncodedParam(urlParam: string, datasourceParam: IDictionary<any> = {}): IDictionary<any> {
+		return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
+	}
+
+	protected getQueryStringValues(): IDictionary<any> {
+		const values = super.getQueryStringValues();
+		if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+			values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
+		}
+		if (this.searchJoin && Object.keys(this.searchJoin).length) {
+			values.search_join = btoa(JSON.stringify(this.searchJoin));
+		}
+		return values;
+	}
+
+	protected getUrlQueryString() {
+		const superQueryString = super.getUrlQueryString();
+		const query = URL.getParsedQueryStringFromUrl();
+
+		let dynamicFilterQuerystring = '';
+		if (query.dynamic_filter) {
+			dynamicFilterQuerystring = `&${URL.getFormattedQueryString({
+				dynamic_filter: query.dynamic_filter,
+			})}`;
+		}
+
+		let searchJoinQuerystring = '';
+		if (query.search_join) {
+			searchJoinQuerystring = `&${URL.getFormattedQueryString({
+				search_join: query.search_join,
+			})}`;
+		}
+		return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
+	}
+
+	/**
+	 * Adds a new dynamic filter position or replace if exists
+	 * @param column Dynamic Filter column name
+	 * @param value Dynamic Filter value
+	 * @returns Promise with data collection
+	 */
+	public addDynamicFilter(column: string, value: any) {
+		if (this.isValidDynamicFilterValue(column, value)) {
+			this.dynamicFilter[column] = value;
+			return this.updateDynamicFilter();
+		}
+		return this.removeDynamicFilter(column);
+	}
+
+	/**
+	 * Removes a dynamic filter position
+	 * @param column Dynamic Filter column name
+	 * @returns Promise with data collection
+	 */
+	public removeDynamicFilter(column: string) {
+		delete this.dynamicFilter[column];
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Sets new dynamic filter value
+	 * @param filter Dynamic Filter value
+	 * @returns Promise with data collection
+	 */
+	public setDynamicFilter(filter: IDictionary<any>) {
+		this.dynamicFilter = {};
+		Object.keys(filter).forEach((column: string) => {
+			if (this.isValidDynamicFilterValue(column, filter[column])) {
+				this.dynamicFilter[column] = filter[column];
+			} else {
+				delete this.dynamicFilter[column];
+			}
+		});
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Clears Dynamic filter value
+	 * @returns Promise with data collection
+	 */
+	public clearDynamicFilter() {
+		this.dynamicFilter = {};
+		return this.updateDynamicFilter();
+	}
+
+	/**
+	 * Resets page and selected rows and tries to update the url
+	 * @returns Promise with data collection
+	 */
+	public async updateDynamicFilter() {
+		this.page = this.firstPage;
+		this.selectedRows = [];
+		this.visibleSelectedRows = [];
+		if (this.watchUrl) {
+			if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+				URL.updateQueryString({
+					dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
+				});
+			} else {
+				URL.updateQueryString({
+					dynamic_filter: undefined,
+				});
+			}
+		}
+		return this.get();
+	}
+
+	/**
+	 * Checks if a filter value is valid
+	 * @param value Filter value
+	 * @returns Is valid filter value
+	 */
+	protected isValidDynamicFilterValue(column: string, value?: IDictionary<any>[]) {
+		return (
+			!this.reservedKeys[column] &&
+			value &&
+			value.length > 0 &&
+			value.every(
+				(filterValue) =>
+					this.dynamicFilterOperations[filterValue.operation] &&
+					this.dynamicFilterRelations[filterValue.relation] &&
+					filterValue.value !== '' &&
+					filterValue.value !== null,
+			)
+		);
+	}
+
+	public clone() {
+		return {
+			...super.clone(),
+			dynamicFilter: this.dynamicFilter,
+			searchJoin: this.searchJoin,
+			type: 'tek-memory',
+		};
+	}
+
+	/**
+	 * Updates filtered data
+	 */
+	protected updateFilteredData() {
+		// first apply filters (simple and dynamic)
+		this.filteredData = Object.keys(this.filter).length
+			? this.allData.filter((row) => this.getRowByFilter(row))
+			: Array.from(this.allData);
+
+		if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+			this.filteredData = this.filteredData.filter((row) => this.getRowByDynamicFilter(row));
+		}
+
+		const searchWithoutSearchJoin = (row: IDictionary<any>) => {
+			const searchRow = { ...row };
+			if (this.searchJoin) {
+				// do not search on columns with searchJoin
+				Object.keys(this.searchJoin).forEach((key) => delete searchRow[key]);
+			}
+			return this.getRowBySearch(searchRow);
+		};
+
+		// only after do the search
+		const searchData = this.search ? this.filteredData.filter(searchWithoutSearchJoin) : this.filteredData;
+
+		let searchIds = searchData.map((row) => row[this.uniqueKey]);
+
+		if (this.searchJoin && Object.keys(this.searchJoin).length) {
+			const searchJoinData = this.filteredData.filter((row) => this.getRowBySearchJoin(row));
+
+			// get the ids from search and searchJoin
+			searchIds = searchIds.concat(searchJoinData.map((row) => row[this.uniqueKey])).sort();
+		}
+
+		// filter filteredData using searchIds
+		this.filteredData = this.allData.filter((row) => searchIds.indexOf(row[this.uniqueKey]) !== -1);
+	}
+
+	protected getRowByDynamicFilter(row: IDictionary<any>) {
+		let filtered: any;
+		try {
+			Object.keys(this.dynamicFilter).forEach((key) => {
+				const filterItems = this.dynamicFilter[key];
+				filterItems.forEach((item) => {
+					if (filtered === false && item.relation === 'AND') return;
+					if (filtered === true && item.relation === 'OR') return;
+
+					const columnValue = Utils.normalize(row[key].toString());
+					let value: string | string[] = '';
+					if (Array.isArray(item.value)) {
+						value = item.value.map((val: string) => Utils.normalize(val.toString()));
+
+						switch (item.operation) {
+							case 'IN':
+								filtered = value.includes(columnValue);
+								break;
+							case 'NOT_IN':
+								filtered = !value.includes(columnValue);
+								break;
+							case 'BETWEEN':
+								filtered =
+									(Number(columnValue) || columnValue) >= (Number(value[0]) || value[0]) &&
+									(Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
+								break;
+							default:
+								break;
+						}
+					} else {
+						value = Utils.normalize(item.value.toString());
+
+						switch (item.operation) {
+							case 'CONTAINS':
+								filtered = columnValue.indexOf(value) !== -1;
+								break;
+							case 'NOT_CONTAINS':
+								filtered = columnValue.indexOf(value) === -1;
+								break;
+							case 'EQUALS':
+								filtered = columnValue === value;
+								break;
+							case 'NOT_EQUALS':
+								filtered = columnValue !== value;
+								break;
+							case 'GREATER_THAN':
+								filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
+								break;
+							case 'LESS_THAN':
+								filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
+								break;
+							case 'GREATER_THAN_EQUALS':
+								filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
+								break;
+							case 'LESS_THAN_EQUALS':
+								filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
+								break;
+							default:
+								break;
+						}
+					}
+				});
+			});
+		} catch {
+			// do nothing
+		}
+		return filtered;
+	}
+
+	protected getRowBySearchJoin(row: IDictionary<any>) {
+		return Object.keys(this.searchJoin).some((key) => this.searchJoin[key].includes(row[key]));
+	}
+
+	public hasFilter(columnName: string): boolean {
+		return this.dynamicFilter[columnName] && this.dynamicFilter[columnName].length > 0;
+	}
+}
+
+DatasourceFactory.register('tek-memory', TekMemoryDatasource);