Skip to content

Commit

Permalink
Merge pull request smeup#2098 from apuliasoft/feat/cell-actions
Browse files Browse the repository at this point in the history 
feat: cell actions
  • Loading branch information
@lucafoscili
lucafoscili authored Oct 4, 2024
2 parents ec2ed50 + e529b73 commit 9fdb50e
Show file tree
Hide file tree
Showing 13 changed files with 627 additions and 229 deletions.
10 changes: 10 additions & 0 deletions packages/ketchup/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4988,6 +4988,7 @@ declare global {
"kup-datatable-rowselected": KupDatatableRowSelectedEventPayload;
"kup-datatable-click": KupDatatableClickEventPayload;
"kup-datatable-contextmenu": KupDatatableClickEventPayload;
"kup-datatable-cell-actions-menu": KupDatatableClickEventPayload;
"kup-datatable-dblclick": KupDatatableClickEventPayload;
"kup-datatable-columnmenu": KupDatatableColumnMenuEventPayload;
"kup-datatable-loadmoreclick": KupDatatableLoadMoreClickEventPayload;
Expand All @@ -4998,6 +4999,7 @@ declare global {
"kup-datatable-insert-row": KupDatatableInsertRowEventPayload;
"kup-datatable-history": KupDatatableHistoryEventPayload;
"kup-datatable-rowaction-item-click": KupDatatableRowActionItemClickEventPayload;
"kup-datatable-cell-action-icon-click": KupDatatableClickEventPayload;
"kup-datatable-update": KupDatatableUpdatePayload;
}
interface HTMLKupDataTableElement extends Components.KupDataTable, HTMLStencilElement {
Expand Down Expand Up @@ -7044,6 +7046,14 @@ declare namespace LocalJSX {
* @see loadMoreLimit
*/
"loadMoreStep"?: number;
/**
* Event fired when the cell action icon is pressed
*/
"onKup-datatable-cell-action-icon-click"?: (event: KupDataTableCustomEvent<KupDatatableClickEventPayload>) => void;
/**
* Generic right click event on a cell in data table.
*/
"onKup-datatable-cell-actions-menu"?: (event: KupDataTableCustomEvent<KupDatatableClickEventPayload>) => void;
/**
* Generic click event on data table.
*/
Expand Down
9 changes: 7 additions & 2 deletions packages/ketchup/src/components/kup-data-table/kup-data-table-declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,12 @@ export enum VoCodVerRowEnum {
T = 'VO',
}

export enum DataTableAreasEnum {
HEADER = 'header',
BODY = 'body',
FOOTER = 'footer',
}

export type KupDataTableInsertMode = 'form' | 'row' | '';

export interface TotalsMap {
Expand Down Expand Up @@ -302,8 +308,7 @@ export interface KupDatatableRowActionItemClickEventPayload
type:
| DropDownAction.CODVER
| DropDownAction.ROWACTION
| DropDownAction.CODVERWITHCOMMANDS
| DropDownAction.COMMANDWITHEMPTYOBJ;
| DropDownAction.COMMAND;
obj?: KupObj;
column?: KupDataColumn;
cell?: KupDataCell;
Expand Down
108 changes: 81 additions & 27 deletions packages/ketchup/src/components/kup-data-table/kup-data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import type {
DropEvent,
InteractEvent,
PointerEvent,
PointerEventType,
} from '@interactjs/types/index';
import type { ResizeEvent } from '@interactjs/actions/resize/plugin';
import type { KupComboboxEventPayload } from '../kup-combobox/kup-combobox-declarations';
Expand All @@ -41,7 +42,6 @@ import {
KupDatatableRowSelectedEventPayload,
KupDatatableClickEventPayload,
KupDatatableColumnMenuEventPayload,
KupDatatableRowActionClickEventPayload,
KupDatatableLoadMoreClickEventPayload,
KupDatatableColumnRemoveEventPayload,
KupDatatableColumnMoveEventPayload,
Expand All @@ -54,8 +54,8 @@ import {
KupDataTableInsertMode,
KupDatatableHistoryEventPayload,
KupDatatableRowActionItemClickEventPayload,
KupDataTableRowGroup,
KupDatatableUpdatePayload,
DataTableAreasEnum,
} from './kup-data-table-declarations';
import { getColumnByName } from '../../utils/cell-utils';
import {
Expand Down Expand Up @@ -159,21 +159,18 @@ import {
rowsPerPageChange,
} from '../../f-components/f-paginator/f-paginator-utils';
import {
DropDownAction,
KupCommand,
KupDataColumn,
KupDataDataset,
KupDataNewColumnOptions,
KupDataNewColumnTypes,
KupDataNode,
KupDataRow,
KupDataRowAction,
KupDataRowCells,
} from '../../managers/kup-data/kup-data-declarations';
import { FButton } from '../../f-components/f-button/f-button';
import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
import { KupFormRow } from '../kup-form/kup-form-declarations';
import { KupDatesFormats } from '../../managers/kup-dates/kup-dates-declarations';
import { KupColumnMenuIds } from '../../utils/kup-column-menu/kup-column-menu-declarations';
import { KupList } from '../kup-list/kup-list';
@Component({
Expand Down Expand Up @@ -1050,6 +1047,16 @@ export class KupDataTable {
bubbles: true,
})
kupDataTableContextMenu: EventEmitter<KupDatatableClickEventPayload>;
/**
* Generic right click event on a cell in data table.
*/
@Event({
eventName: 'kup-datatable-cell-actions-menu',
composed: true,
cancelable: false,
bubbles: true,
})
kupDataTableCellActionsMenu: EventEmitter<KupDatatableClickEventPayload>;
/**
* Generic double click event on data table.
*/
Expand Down Expand Up @@ -1151,6 +1158,17 @@ export class KupDataTable {
})
kupRowActionItemClick: EventEmitter<KupDatatableRowActionItemClickEventPayload>;

/**
* Event fired when the cell action icon is pressed
*/
@Event({
eventName: 'kup-datatable-cell-action-icon-click',
composed: true,
cancelable: false,
bubbles: true,
})
kupCellActionIconClick: EventEmitter<KupDatatableClickEventPayload>;

/**
* Event fired when the user click on update button,
* update button is visible when the props updatableData is true
Expand Down Expand Up @@ -2002,6 +2020,14 @@ export class KupDataTable {
switch (e.button) {
// left click
case 0:
// in case cell action icon is clicked
if (
(e.target as HTMLElement).classList.contains(
'f-image__icon'
)
) {
break;
}
// Note: event must be cloned
// otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
const clone: GenericObject = {};
Expand Down Expand Up @@ -2829,22 +2855,19 @@ export class KupDataTable {
);
break;
case 'kup-list-click':
const selectedElObj =
e.detail.event.detail.selected.obj;
const cell = e.detail.event.detail.selected.cell;
const index = e.detail.event.detail.selected.index;
const type = e.detail.event.detail.selected.type;
const column = e.detail.event.detail.selected.column;
const selectedObjectIndex = e.detail.event.detail.index;
const selectedObject =
dropDownActions[selectedObjectIndex];

this.kupRowActionItemClick.emit({
comp: this,
id: this.rootElement.id,
row: row,
obj: selectedElObj,
cell: cell,
type: type,
index: index,
column: column,
obj: selectedObject.obj,
cell: selectedObject.cell,
type: selectedObject.type,
index: selectedObject.index,
column: selectedObject.column,
});
setTimeout(() => {
this.#closeRowActionsCard();
Expand Down Expand Up @@ -3263,17 +3286,34 @@ export class KupDataTable {
return details;
}

#cellActionsMenuHandler(e: PointerEvent): KupDatatableEventHandlerDetails {
e.stopPropagation();
const details: KupDatatableEventHandlerDetails = this.#getEventDetails(
this.#kupManager.getEventPath(e.target, this.rootElement),
e
);
if (details.cell) {
const cellActions = this.#kupManager.data.cell.buildCellActions(
details.row,
details.column,
this.commands ?? []
);
this.#onRowActionExpanderClick(e, details.row, cellActions);
}
return details;
}

#contextMenuHandler(e: PointerEvent): KupDatatableEventHandlerDetails {
const details: KupDatatableEventHandlerDetails = this.#getEventDetails(
this.#kupManager.getEventPath(e.target, this.rootElement),
e
);
if (details.area === 'header') {
if (details.area === DataTableAreasEnum.HEADER) {
if (details.th && details.column) {
this.openColumnMenu(details.column.name);
return details;
}
} else if (details.area === 'footer') {
} else if (details.area === DataTableAreasEnum.FOOTER) {
if (details.td && details.column) {
this.#totalMenuCoords = { x: e.clientX, y: e.clientY };
this.#onTotalMenuOpen(details.column);
Expand Down Expand Up @@ -3825,7 +3865,7 @@ export class KupDataTable {
}

#onRowActionExpanderClick(
e: MouseEvent,
e: MouseEvent | PointerEvent,
row: KupDataTableRow,
dropDownActions: KupDataRowAction[]
) {
Expand Down Expand Up @@ -5195,10 +5235,12 @@ export class KupDataTable {
return null;
}
}

const cellProps: FCellProps = {
cell: cell,
column: currentColumn,
const fcell = {
...this.#kupManager.data.cell.buildFCell(
cell,
currentColumn,
row
),
component: this,
density: this.density,
editable: this.editableData || this.updatableData,
Expand All @@ -5208,10 +5250,23 @@ export class KupDataTable {
? previousRow.cells[name].value
: undefined,
renderKup: this.lazyLoadCells,
row: row,
setSizes: true,
cellActionIcon: this.#kupManager.data.cell.hasActionCell(
cell,
this.commands ?? []
)
? {
onClick: (e: PointerEvent) => {
this.kupCellActionIconClick.emit({
comp: this,
id: this.rootElement.id,
details: this.#cellActionsMenuHandler(e),
});
},
}
: null,
};
const jsxCell = <FCell {...cellProps}></FCell>;

const jsxCell = <FCell {...fcell}></FCell>;

// Classes which will be set onto the single data-table cell;

Expand Down Expand Up @@ -5288,7 +5343,6 @@ export class KupDataTable {
</td>
);
});

// adding row to rendered rows
this.#renderedRows.push(row);

Expand Down
40 changes: 21 additions & 19 deletions packages/ketchup/src/components/kup-data-table/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,25 +98,27 @@ If the `sticky` element would be hidden by the scroll, after having specified a

## Events

| Event | Description | Type |
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| `kup-datatable-click` | Generic click event on data table. | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-columnmenu` | Emitted by the column menu card when opened/closed or when a kup-card-event is fired. | `CustomEvent<KupDatatableColumnMenuEventPayload>` |
| `kup-datatable-columnmove` | Event fired when columns are moved (sorted). | `CustomEvent<KupDatatableColumnMoveEventPayload>` |
| `kup-datatable-columnremove` | Event fired when columns are removed (set to hidden). | `CustomEvent<KupDatatableColumnRemoveEventPayload>` |
| `kup-datatable-contextmenu` | Generic right click event on data table. | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-dblclick` | Generic double click event on data table. | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-delete-row` | Event fired when the delete row button is pressed. | `CustomEvent<KupDatatableDeleteRowEventPayload>` |
| `kup-datatable-didload` | When component load is complete | `CustomEvent<KupEventPayload>` |
| `kup-datatable-didunload` | When component unload is complete | `CustomEvent<KupEventPayload>` |
| `kup-datatable-history` | Event fired when the history confirm button is pressed. | `CustomEvent<KupDatatableHistoryEventPayload>` |
| `kup-datatable-insert-row` | Event fired when the insert row confirm button is pressed. | `CustomEvent<KupDatatableInsertRowEventPayload>` |
| `kup-datatable-loadmoreclick` | | `CustomEvent<KupDatatableLoadMoreClickEventPayload>` |
| `kup-datatable-resetselectedrows` | When rows selections reset | `CustomEvent<KupEventPayload>` |
| `kup-datatable-rowaction-item-click` | Event fired when the history confirm button is pressed. | `CustomEvent<KupDatatableRowActionItemClickEventPayload>` |
| `kup-datatable-rowselected` | When a row is selected | `CustomEvent<KupDatatableRowSelectedEventPayload>` |
| `kup-datatable-save` | Event fired when the save button is pressed. | `CustomEvent<KupDatatableInsertRowEventPayload>` |
| `kup-datatable-update` | Event fired when the user click on update button, update button is visible when the props updatableData is true | `CustomEvent<KupDatatableUpdatePayload>` |
| Event | Description | Type |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| `kup-datatable-cell-action-icon-click` | Event fired when the cell action icon is pressed | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-cell-actions-menu` | Generic right click event on a cell in data table. | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-click` | Generic click event on data table. | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-columnmenu` | Emitted by the column menu card when opened/closed or when a kup-card-event is fired. | `CustomEvent<KupDatatableColumnMenuEventPayload>` |
| `kup-datatable-columnmove` | Event fired when columns are moved (sorted). | `CustomEvent<KupDatatableColumnMoveEventPayload>` |
| `kup-datatable-columnremove` | Event fired when columns are removed (set to hidden). | `CustomEvent<KupDatatableColumnRemoveEventPayload>` |
| `kup-datatable-contextmenu` | Generic right click event on data table. | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-dblclick` | Generic double click event on data table. | `CustomEvent<KupDatatableClickEventPayload>` |
| `kup-datatable-delete-row` | Event fired when the delete row button is pressed. | `CustomEvent<KupDatatableDeleteRowEventPayload>` |
| `kup-datatable-didload` | When component load is complete | `CustomEvent<KupEventPayload>` |
| `kup-datatable-didunload` | When component unload is complete | `CustomEvent<KupEventPayload>` |
| `kup-datatable-history` | Event fired when the history confirm button is pressed. | `CustomEvent<KupDatatableHistoryEventPayload>` |
| `kup-datatable-insert-row` | Event fired when the insert row confirm button is pressed. | `CustomEvent<KupDatatableInsertRowEventPayload>` |
| `kup-datatable-loadmoreclick` | | `CustomEvent<KupDatatableLoadMoreClickEventPayload>` |
| `kup-datatable-resetselectedrows` | When rows selections reset | `CustomEvent<KupEventPayload>` |
| `kup-datatable-rowaction-item-click` | Event fired when the history confirm button is pressed. | `CustomEvent<KupDatatableRowActionItemClickEventPayload>` |
| `kup-datatable-rowselected` | When a row is selected | `CustomEvent<KupDatatableRowSelectedEventPayload>` |
| `kup-datatable-save` | Event fired when the save button is pressed. | `CustomEvent<KupDatatableInsertRowEventPayload>` |
| `kup-datatable-update` | Event fired when the user click on update button, update button is visible when the props updatableData is true | `CustomEvent<KupDatatableUpdatePayload>` |


## Methods
Expand Down
1 change: 1 addition & 0 deletions packages/ketchup/src/components/kup-list/kup-list-declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,5 @@ export enum ItemsDisplayMode {
}
export interface KupListEventPayload extends KupEventPayload {
selected: KupListNode;
index?: number;
}
Loading

0 comments on commit 9fdb50e

Please sign in to comment.