@zeedhi/teknisa-components-common 3.1.0 → 3.3.0

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

@@ -1,365 +0,0 @@
-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}}`,
-							},
-						],
-					},
-				],
-			},
-		];
-	}
-}