@zeedhi/teknisa-components-common 3.0.0 → 3.0.2

package/src/components/tek-grid/tek-grid-toolbar-provider/tek-grid-toolbar-provider.ts

@@ -0,0 +1,365 @@
+import { IEventParam, Metadata } from '@zeedhi/core';
+import { TekGridDeleteRowsError } from '../../../error/tek-grid-delete-rows-error';
+import { IComponentRender, IGridEditable, Tag } from '@zeedhi/common';
+import {
+	IExportable,
+	ISupportsToolbar,
+	ITekGridAtoms,
+	ITekGridExportConfig,
+	ITekGridToolbarProvider,
+} from '../interfaces';
+import { ButtonOption, MultiOption } from './export-options';
+
+type GridEditableWithToolbar = IGridEditable & ISupportsToolbar & IExportable;
+
+export class TekGridToolbarProvider implements ITekGridToolbarProvider {
+	private grid: GridEditableWithToolbar;
+
+	private groupsVisibility: 'hide' | 'show';
+
+	constructor(grid: GridEditableWithToolbar, groupsVisibility: 'hide' | 'show') {
+		this.grid = grid;
+		this.groupsVisibility = groupsVisibility;
+	}
+
+	protected atoms: ITekGridAtoms = {
+		TITLE: '_gridTitle',
+		HIDE_BUTTON: '_hideButton',
+		ADD_BUTTON: '_addButton',
+		DELETE_BUTTON: '_deleteButton',
+		REFRESH_BUTTON: '_refreshButton',
+		COLUMNS_BUTTON: '_columnsButton',
+		LAYOUT_BUTTON: '_layout_options',
+		EXPORT_BUTTON: '_exportButton',
+		ACTIONS_BUTTON: '_actionsButton',
+		SAVE_BUTTON: '_saveButton',
+		CANCEL_BUTTON: '_cancelButton',
+		SEARCH: '_gridSearch',
+		FILTER_BUTTON: '_filterButton',
+		FILTER_MODAL: '-filter-modal',
+		FILTER_FORM: '-filter-form',
+		EXPORT_DROPDOWN: '_export_dropdown',
+		ACTIONS_DROPDOWN: '_actions_dropdown',
+		HIDE_TOOLTIP: '_hideTooltip',
+		TOOLBAR_DIV: '_toolbarDiv',
+		NOT_EDITING_SPAN: '_notEditingSpan',
+		ADD_TOOLTIP: '_add_tooltip',
+		DELETE_TOOLTIP: '_delete_tooltip',
+		DIVIDER1: '_divider1',
+		REFRESH_TOOLTIP: '_refresh_tooltip',
+		DIVIDER2: '_divider2',
+		COLUMNS_TOOLTIP: '_columns_button_tooltip',
+		DIVIDER_ACTIONS: '_dividerActions',
+		DIVIDER3: '_divider3',
+		FILTER_TOOLTIP: '_filter_tooltip',
+	} as const;
+
+	getAtomName(key: keyof ITekGridAtoms): string {
+		return `${this.grid.name}${this.atoms[key]}`;
+	}
+
+	getAtomInstance<T>(key: keyof ITekGridAtoms): T {
+		return Metadata.getInstance<T>(`${this.grid.name}${this.atoms[key]}`);
+	}
+
+	private getOption(config: ITekGridExportConfig) {
+		if (config.multiOption) return new MultiOption(config);
+
+		return new ButtonOption(config);
+	}
+
+	private getExportConfigButtons(): IComponentRender[] {
+		return this.grid.exportConfig.map((config) => {
+			const option = this.getOption(config);
+			return option.buildComponent(this.grid);
+		});
+	}
+
+	private hideButtonClick({ event }: IEventParam<any>) {
+		if (!event!.defaultPrevented) {
+			const instance = Metadata.getInstance<Tag>(`${this.grid.name}_toolbarDiv`);
+			if (instance) {
+				instance.isVisible = !instance.isVisible;
+			}
+		}
+	}
+
+	private cancelChanges({ event }: IEventParam<any>) {
+		this.grid.callEvent('beforeCancel', { component: this.grid, event });
+		if (!event!.defaultPrevented) {
+			const cancel = async () => {
+				await this.grid.cancelEditedRows();
+				this.grid.editingNewRows = false;
+			};
+			cancel();
+
+			this.grid.callEvent('afterCancel', { component: this.grid });
+		}
+	}
+
+	private saveChanges({ event }: IEventParam<any>) {
+		this.grid.callEvent('beforeSave', { component: this.grid, event });
+		if (!event!.defaultPrevented) {
+			const save = async () => {
+				await this.grid.saveEditedRows();
+				this.grid.editingNewRows = false;
+			};
+			save();
+			this.grid.callEvent('afterSave', { component: this.grid });
+		}
+	}
+
+	private addButtonClick({ event }: IEventParam<any>) {
+		if (this.grid.editNewRowsOnly) {
+			this.grid.editingNewRows = true;
+		}
+		this.grid.callEvent('addClick', { component: this.grid, event });
+	}
+
+	private deleteButtonClick({ event }: IEventParam<any>) {
+		this.grid.callEvent('beforeDelete', { component: this.grid, event });
+		if (!event!.defaultPrevented) {
+			if (this.grid.selectAllPages) {
+				throw new TekGridDeleteRowsError();
+			}
+
+			this.grid.deleteRows();
+
+			this.grid.callEvent('afterDelete', { component: this.grid });
+		}
+	}
+
+	public reloadGrid({ event }: IEventParam<any>) {
+		this.grid.callEvent('beforeReload', { component: this.grid, event });
+		if (event?.defaultPrevented) return;
+
+		this.grid.reload();
+	}
+
+	public getProperties(): IComponentRender[] {
+		const exportConfigButtons = this.getExportConfigButtons();
+
+		return [
+			{
+				name: this.getAtomName('TITLE'),
+				component: 'ZdText',
+				cssClass: 'toolbar-title',
+				tag: 'h2',
+				text: this.grid.title,
+				title: this.grid.title,
+			},
+			{
+				name: `${this.grid.name}_spacer`,
+				component: 'VSpacer',
+			},
+			{
+				name: this.getAtomName('HIDE_TOOLTIP'),
+				component: 'ZdTooltip',
+				label: `{{GridController_${this.grid.name}.tooltipName}}`,
+				bottom: true,
+				children: [
+					{
+						name: this.getAtomName('HIDE_BUTTON'),
+						component: 'ZdButton',
+						flat: true,
+						icon: true,
+						iconName: 'mdi-chevron-right',
+						color: 'grey',
+						isVisible: `{{GridController_${this.grid.name}.isNotEditing}}`,
+						cssClass: `{{GridController_${this.grid.name}.toolbarClass}}`,
+						events: {
+							click: this.hideButtonClick.bind(this),
+						},
+					},
+				],
+			},
+			{
+				name: this.getAtomName('TOOLBAR_DIV'),
+				component: 'ZdTag',
+				tag: 'div',
+				cssStyle: 'display: flex; align-items: center',
+				isVisible: `{{GridController_${this.grid.name}.showToolbar}}`,
+				children: [
+					{
+						name: this.getAtomName('NOT_EDITING_SPAN'),
+						component: 'ZdTag',
+						tag: 'span',
+						cssStyle: 'display: flex',
+						isVisible: `{{GridController_${this.grid.name}.isNotEditing}}`,
+						children: [
+							{
+								name: this.getAtomName('ADD_TOOLTIP'),
+								component: 'ZdTooltip',
+								label: 'TEKGRID_ADD',
+								bottom: true,
+								children: [
+									{
+										name: this.getAtomName('ADD_BUTTON'),
+										component: 'ZdButton',
+										icon: true,
+										iconName: 'mdi-plus-box',
+										isVisible: `{{GridController_${this.grid.name}.showAddButton}}`,
+										events: {
+											click: this.addButtonClick.bind(this),
+										},
+									},
+								],
+							},
+							{
+								name: this.getAtomName('DELETE_TOOLTIP'),
+								component: 'ZdTooltip',
+								label: 'TEKGRID_DELETE',
+								bottom: true,
+								children: [
+									{
+										name: this.getAtomName('DELETE_BUTTON'),
+										component: 'ZdButton',
+										icon: true,
+										iconName: 'mdi-trash-can-outline',
+										isVisible: `{{GridController_${this.grid.name}.showDeleteButton}}`,
+										disabled: `{{GridController_${this.grid.name}.disableDeleteButton}}`,
+										events: {
+											click: this.deleteButtonClick.bind(this),
+										},
+									},
+								],
+							},
+							{
+								name: this.getAtomName('DIVIDER1'),
+								component: 'ZdDivider',
+								cssClass: 'toolbar-divider',
+								vertical: true,
+								isVisible: `{{GridController_${this.grid.name}.showDivider1}}`,
+							},
+							{
+								name: this.getAtomName('REFRESH_TOOLTIP'),
+								component: 'ZdTooltip',
+								label: 'TEKGRID_REFRESH',
+								bottom: true,
+								children: [
+									{
+										name: this.getAtomName('REFRESH_BUTTON'),
+										component: 'ZdButton',
+										icon: true,
+										iconName: 'refresh',
+										isVisible: `{{GridController_${this.grid.name}.showReloadButton}}`,
+										events: {
+											click: this.reloadGrid.bind(this),
+										},
+									},
+								],
+							},
+							{
+								name: this.getAtomName('DIVIDER2'),
+								component: 'ZdDivider',
+								cssClass: 'toolbar-divider',
+								vertical: true,
+								isVisible: `{{GridController_${this.grid.name}.showDivider2}}`,
+							},
+							{
+								name: this.getAtomName('COLUMNS_BUTTON'),
+								component: 'TekGridColumnsButton',
+								isVisible: `{{GridController_${this.grid.name}.showColumnsButton}}`,
+								iterableComponentName: this.grid.name,
+								hideGroups: this.groupsVisibility === 'hide',
+								ignoreColumns: `{{GridController_${this.grid.name}.columnsButtonIgnore}}`,
+							},
+							{
+								name: this.getAtomName('LAYOUT_BUTTON'),
+								component: 'TekGridLayoutOptions',
+								isVisible: `{{GridController_${this.grid.name}.showLayoutOptionsButton}}`,
+							},
+							{
+								name: this.getAtomName('DIVIDER_ACTIONS'),
+								component: 'ZdDivider',
+								cssClass: 'toolbar-divider',
+								vertical: true,
+								isVisible: `{{GridController_${this.grid.name}.showActionAndExportButton}}`,
+							},
+							{
+								name: this.getAtomName('EXPORT_DROPDOWN'),
+								component: 'ZdDropdown',
+								cssClass: 'tekgrid-actions-dropdown',
+								offsetY: true,
+								activator: {
+									name: this.getAtomName('EXPORT_BUTTON'),
+									component: 'ZdButton',
+									icon: true,
+									iconName: 'mdi-file-download-outline',
+									isVisible: `{{GridController_${this.grid.name}.showExportButton}}`,
+								},
+								children: this.grid.exportActions || exportConfigButtons,
+							},
+							{
+								name: this.getAtomName('ACTIONS_DROPDOWN'),
+								component: 'ZdDropdown',
+								cssClass: 'tekgrid-actions-dropdown',
+								offsetY: true,
+								activator: {
+									name: this.getAtomName('ACTIONS_BUTTON'),
+									component: 'ZdButton',
+									icon: true,
+									iconName: 'mdi-dots-vertical',
+									isVisible: `{{GridController_${this.grid.name}.showActionsButton}}`,
+								},
+								children: this.grid.actions,
+							},
+							{
+								name: this.getAtomName('DIVIDER3'),
+								component: 'ZdDivider',
+								cssClass: 'toolbar-divider',
+								vertical: true,
+								isVisible: `{{GridController_${this.grid.name}.showDivider3}}`,
+							},
+						],
+					},
+					{
+						name: this.getAtomName('SAVE_BUTTON'),
+						component: 'ZdButton',
+						label: 'TEKGRID_SAVE',
+						isVisible: `{{GridController_${this.grid.name}.showEditButtons}}`,
+						small: true,
+						events: {
+							click: this.saveChanges.bind(this),
+						},
+					},
+					{
+						name: this.getAtomName('CANCEL_BUTTON'),
+						component: 'ZdButton',
+						label: 'TEKGRID_CANCEL',
+						outline: true,
+						cssClass: 'zd-mx-2',
+						isVisible: `{{GridController_${this.grid.name}.showEditButtons}}`,
+						small: true,
+						events: {
+							click: this.cancelChanges.bind(this),
+						},
+					},
+					{
+						name: this.getAtomName('SEARCH'),
+						component: 'ZdSearch',
+						cssClass: 'zd-grid-search',
+						iterableComponentName: `${this.grid.name}`,
+						isVisible: `{{GridController_${this.grid.name}.showSearchInput}}`,
+					},
+					{
+						name: this.getAtomName('FILTER_TOOLTIP'),
+						component: 'ZdTooltip',
+						label: 'TEKGRID_FILTER',
+						bottom: true,
+						children: [
+							{
+								name: this.getAtomName('FILTER_BUTTON'),
+								component: 'TekGridFilterButton',
+								grid: this.grid,
+								gridName: this.grid.name,
+								showCheckboxAll: this.grid.showCheckboxAllFilter,
+								isVisible: `{{GridController_${this.grid.name}.showFilterButton}}`,
+							},
+						],
+					},
+				],
+			},
+		];
+	}
+}