From 9dbccb96ac04fa8a3f25b2f8071658ec5cc1e607 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 11 Sep 2024 19:28:35 +0530 Subject: [PATCH 1/7] 2437 - table update edit mode init --- .../modus-table-cell-main.tsx | 22 ++++++++++++++++++- .../table-cell-navigation.utility.tsx | 18 ++++++++++++++- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index c86e090b2..00773bc9c 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -7,7 +7,7 @@ import { Component, Prop, Method, - h,// eslint-disable-line @typescript-eslint/no-unused-vars + h, // eslint-disable-line @typescript-eslint/no-unused-vars Event, EventEmitter, } from '@stencil/core'; @@ -24,6 +24,7 @@ import { KEYBOARD_ENTER, KEYBOARD_ESCAPE, COLUMN_DEF_DATATYPE_BADGE, + KEYBOARD_TAB, } from '../../../modus-table.constants'; import NavigateTableCells from '../../../utilities/table-cell-navigation.utility'; import { CellFormatter } from '../../../utilities/table-cell-formatter.utility'; @@ -214,6 +215,25 @@ export class ModusTableCellMain { this.editMode = false; this.cellEl.focus(); this.destroyErrorTooltip(); + } else if (key === KEYBOARD_TAB) { + NavigateTableCells({ + eventKey: KEYBOARD_TAB, + cellElement: this.cellEl, + onNavigateComplete: (cellElement) => { + // Focus on the next cell and enable edit mode + if (cellElement) { + cellElement.focus(); + const cellComponent = cellElement; + if (cellComponent) { + (cellComponent as any).componentOnReady().then((componentInstance) => { + const nextRowIndex = componentInstance.cell.row.index.toString(); + const nextColumnId = componentInstance.cell.column.id; + componentInstance.handleCellEdit(nextRowIndex, nextColumnId); + }); + } + } + }, + }); } else return; event.stopPropagation(); diff --git a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx index 2a161a6b4..7eb90ee36 100644 --- a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx +++ b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx @@ -4,15 +4,17 @@ import { KEYBOARD_ESCAPE, KEYBOARD_LEFT, KEYBOARD_RIGHT, + KEYBOARD_TAB, KEYBOARD_UP, } from '../modus-table.constants'; interface NavigateTableCellsProps { eventKey: string; cellElement: HTMLElement; + onNavigateComplete?: (nextCell) => void; } export default function NavigateTableCells(props: NavigateTableCellsProps) { - const { eventKey: key, cellElement: cell } = props; + const { eventKey: key, cellElement: cell, onNavigateComplete } = props; let nextCell: HTMLElement; const row = cell.closest('tr') as HTMLTableRowElement; @@ -28,6 +30,20 @@ export default function NavigateTableCells(props: NavigateTableCellsProps) { case KEYBOARD_ESCAPE: // Pressing Escape does nothing but to retain the focus cell.focus(); break; + case KEYBOARD_TAB: + nextCell = (cell.nextSibling as HTMLElement)?.children[0] as HTMLElement; + if (nextCell) { + onNavigateComplete(nextCell); + } else { + const nextRow = row.nextSibling as HTMLElement; + if (nextRow) { + const modusTableCell = nextRow?.querySelector('modus-table-cell-main') as HTMLElement; + if (modusTableCell) { + onNavigateComplete(modusTableCell); + } + } + } + break; case KEYBOARD_RIGHT: // Moves to right cell nextCell = cell.nextSibling as HTMLElement; nextCell?.focus(); From 30400b1d1658dc9c0bc5a5adf0f2a5fbf4f91c73 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Mon, 16 Sep 2024 13:42:14 +0530 Subject: [PATCH 2/7] 2437 - Table update cell edit mode --- .../modus-table-cell-main.tsx | 37 ++++++++----------- .../table-cell-navigation.utility.tsx | 19 +++++----- 2 files changed, 26 insertions(+), 30 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 00773bc9c..cdcf257f4 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -173,12 +173,26 @@ export class ModusTableCellMain { if (isCellEditable && !this.editMode && key === KEYBOARD_ENTER) { this.editMode = true; event.stopPropagation(); - } else { + } else if (isCellEditable && this.editMode && key === KEYBOARD_TAB) { + event.stopPropagation(); NavigateTableCells({ eventKey: event.key, cellElement: this.cellEl, + onNavigateComplete: (cellElement) => { + if (cellElement) { + cellElement.focus(); + const cellComponent = cellElement; + if (cellComponent) { + (cellComponent as any).componentOnReady().then((componentInstance) => { + const nextRowIndex = componentInstance.cell.row.index.toString(); + const nextColumnId = componentInstance.cell.column.id; + componentInstance.handleCellEdit(nextRowIndex, nextColumnId); + }); + } + } + }, }); - } + } else return; }; handleCellEditorValueChange(newValue: string, oldValue: string) { @@ -215,25 +229,6 @@ export class ModusTableCellMain { this.editMode = false; this.cellEl.focus(); this.destroyErrorTooltip(); - } else if (key === KEYBOARD_TAB) { - NavigateTableCells({ - eventKey: KEYBOARD_TAB, - cellElement: this.cellEl, - onNavigateComplete: (cellElement) => { - // Focus on the next cell and enable edit mode - if (cellElement) { - cellElement.focus(); - const cellComponent = cellElement; - if (cellComponent) { - (cellComponent as any).componentOnReady().then((componentInstance) => { - const nextRowIndex = componentInstance.cell.row.index.toString(); - const nextColumnId = componentInstance.cell.column.id; - componentInstance.handleCellEdit(nextRowIndex, nextColumnId); - }); - } - } - }, - }); } else return; event.stopPropagation(); diff --git a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx index 7eb90ee36..221e0e6d2 100644 --- a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx +++ b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx @@ -11,11 +11,12 @@ import { interface NavigateTableCellsProps { eventKey: string; cellElement: HTMLElement; - onNavigateComplete?: (nextCell) => void; + onNavigateComplete?: (cell: HTMLElement) => void; } export default function NavigateTableCells(props: NavigateTableCellsProps) { const { eventKey: key, cellElement: cell, onNavigateComplete } = props; let nextCell: HTMLElement; + let nextRowCell: HTMLElement; const row = cell.closest('tr') as HTMLTableRowElement; const index = Array.prototype.indexOf.call(row.children, cell); @@ -31,17 +32,17 @@ export default function NavigateTableCells(props: NavigateTableCellsProps) { cell.focus(); break; case KEYBOARD_TAB: - nextCell = (cell.nextSibling as HTMLElement)?.children[0] as HTMLElement; + nextCell = (cell.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; + nextRowCell = (row.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; + if (nextCell) { onNavigateComplete(nextCell); + } else if (nextRowCell) { + // onNavigateComplete(nextRowCell); + // nextRowCell.focus(); + return; } else { - const nextRow = row.nextSibling as HTMLElement; - if (nextRow) { - const modusTableCell = nextRow?.querySelector('modus-table-cell-main') as HTMLElement; - if (modusTableCell) { - onNavigateComplete(modusTableCell); - } - } + return; } break; case KEYBOARD_RIGHT: // Moves to right cell From 38eebc0459adc2da99d3f01bb16ded98d04aa2b7 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Mon, 16 Sep 2024 15:23:10 +0530 Subject: [PATCH 3/7] 2437 - shift tab to edit previous cell --- .../modus-table-cell-main.tsx | 5 ++--- .../table-cell-navigation.utility.tsx | 20 ++++++++++++------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index cdcf257f4..633ec34fb 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -169,14 +169,13 @@ export class ModusTableCellMain { const key = event.key?.toLowerCase(); const isCellEditable = this.cell.column.columnDef[this.cellEditableKey]; - if (isCellEditable && !this.editMode && key === KEYBOARD_ENTER) { this.editMode = true; event.stopPropagation(); } else if (isCellEditable && this.editMode && key === KEYBOARD_TAB) { - event.stopPropagation(); + const isShiftPressed = event.shiftKey; NavigateTableCells({ - eventKey: event.key, + eventKey: isShiftPressed ? 'shift+tab' : event.key, cellElement: this.cellEl, onNavigateComplete: (cellElement) => { if (cellElement) { diff --git a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx index 221e0e6d2..e6a0c0161 100644 --- a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx +++ b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx @@ -15,9 +15,7 @@ interface NavigateTableCellsProps { } export default function NavigateTableCells(props: NavigateTableCellsProps) { const { eventKey: key, cellElement: cell, onNavigateComplete } = props; - let nextCell: HTMLElement; - let nextRowCell: HTMLElement; - + let nextCell, prevCell, nextRowCell, prevRowCell: HTMLElement; const row = cell.closest('tr') as HTMLTableRowElement; const index = Array.prototype.indexOf.call(row.children, cell); @@ -31,6 +29,17 @@ export default function NavigateTableCells(props: NavigateTableCellsProps) { case KEYBOARD_ESCAPE: // Pressing Escape does nothing but to retain the focus cell.focus(); break; + case 'shift+tab': + prevCell = (cell.previousSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; + prevRowCell = (row.previousSibling?.lastChild as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; + + if (prevCell) { + onNavigateComplete(prevCell); + } else if (prevRowCell) { + onNavigateComplete(prevRowCell); + return; + } + break; case KEYBOARD_TAB: nextCell = (cell.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; nextRowCell = (row.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; @@ -38,10 +47,7 @@ export default function NavigateTableCells(props: NavigateTableCellsProps) { if (nextCell) { onNavigateComplete(nextCell); } else if (nextRowCell) { - // onNavigateComplete(nextRowCell); - // nextRowCell.focus(); - return; - } else { + onNavigateComplete(nextRowCell); return; } break; From cd480a673ba733146e5213c9027a2243d99b1cc0 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:51:57 +0530 Subject: [PATCH 4/7] 2437 - revert else part --- .../cell/modus-table-cell-main/modus-table-cell-main.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 633ec34fb..04991355b 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -191,7 +191,12 @@ export class ModusTableCellMain { } }, }); - } else return; + } else { + NavigateTableCells({ + eventKey: event.key, + cellElement: this.cellEl, + }); + } }; handleCellEditorValueChange(newValue: string, oldValue: string) { From e4c20ced99d00ec39c53a43c5c701180bdca8b86 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Tue, 17 Sep 2024 15:05:06 +0530 Subject: [PATCH 5/7] 2437 - code optimization --- .../table-cell-navigation.utility.tsx | 26 +++++++------------ 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx index e6a0c0161..3b42c1863 100644 --- a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx +++ b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx @@ -15,7 +15,7 @@ interface NavigateTableCellsProps { } export default function NavigateTableCells(props: NavigateTableCellsProps) { const { eventKey: key, cellElement: cell, onNavigateComplete } = props; - let nextCell, prevCell, nextRowCell, prevRowCell: HTMLElement; + let nextCell, prevCell: HTMLElement; const row = cell.closest('tr') as HTMLTableRowElement; const index = Array.prototype.indexOf.call(row.children, cell); @@ -30,26 +30,18 @@ export default function NavigateTableCells(props: NavigateTableCellsProps) { cell.focus(); break; case 'shift+tab': - prevCell = (cell.previousSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; - prevRowCell = (row.previousSibling?.lastChild as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; + prevCell = + ((cell.previousSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement) || + ((row.previousSibling?.lastChild as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement); - if (prevCell) { - onNavigateComplete(prevCell); - } else if (prevRowCell) { - onNavigateComplete(prevRowCell); - return; - } + if (prevCell) onNavigateComplete(prevCell); break; case KEYBOARD_TAB: - nextCell = (cell.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; - nextRowCell = (row.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement; + nextCell = + ((cell.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement) || + ((row.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement); - if (nextCell) { - onNavigateComplete(nextCell); - } else if (nextRowCell) { - onNavigateComplete(nextRowCell); - return; - } + if (nextCell) onNavigateComplete(nextCell); break; case KEYBOARD_RIGHT: // Moves to right cell nextCell = cell.nextSibling as HTMLElement; From d4c29d14a5dc3968d157dc2ebd311679032153d7 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Mon, 7 Oct 2024 15:47:04 +0530 Subject: [PATCH 6/7] 2437 - date input handle blur and cell navigation for non edit mode fix --- .../modus-table-cell-editor/modus-table-cell-editor.tsx | 1 + .../cell/modus-table-cell-main/modus-table-cell-main.tsx | 1 + .../utilities/table-cell-navigation.utility.tsx | 7 ++++--- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 46f502954..2d3f16c30 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -163,6 +163,7 @@ export class ModusTableCellEditor { size="large" show-calendar-icon="true" value={this.value as string} + onDateInputBlur={this.handleBlur} onValueChange={(e: CustomEvent) => { this.editedValue = e.detail[valueKey]; }}> diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 04991355b..4ff597375 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -177,6 +177,7 @@ export class ModusTableCellMain { NavigateTableCells({ eventKey: isShiftPressed ? 'shift+tab' : event.key, cellElement: this.cellEl, + isCellEditable: isCellEditable, onNavigateComplete: (cellElement) => { if (cellElement) { cellElement.focus(); diff --git a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx index 3b42c1863..c1f00d26f 100644 --- a/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx +++ b/stencil-workspace/src/components/modus-table/utilities/table-cell-navigation.utility.tsx @@ -11,10 +11,11 @@ import { interface NavigateTableCellsProps { eventKey: string; cellElement: HTMLElement; + isCellEditable?: boolean; onNavigateComplete?: (cell: HTMLElement) => void; } export default function NavigateTableCells(props: NavigateTableCellsProps) { - const { eventKey: key, cellElement: cell, onNavigateComplete } = props; + const { eventKey: key, cellElement: cell, onNavigateComplete, isCellEditable } = props; let nextCell, prevCell: HTMLElement; const row = cell.closest('tr') as HTMLTableRowElement; const index = Array.prototype.indexOf.call(row.children, cell); @@ -34,14 +35,14 @@ export default function NavigateTableCells(props: NavigateTableCellsProps) { ((cell.previousSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement) || ((row.previousSibling?.lastChild as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement); - if (prevCell) onNavigateComplete(prevCell); + if (prevCell && isCellEditable) onNavigateComplete(prevCell); break; case KEYBOARD_TAB: nextCell = ((cell.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement) || ((row.nextSibling as HTMLElement)?.querySelector('modus-table-cell-main') as HTMLElement); - if (nextCell) onNavigateComplete(nextCell); + if (nextCell && isCellEditable) onNavigateComplete(nextCell); break; case KEYBOARD_RIGHT: // Moves to right cell nextCell = cell.nextSibling as HTMLElement; From 5b5561678ffe91dccfbbd698bbc07d8325a0eb4e Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Tue, 3 Dec 2024 18:21:55 +0530 Subject: [PATCH 7/7] 2437 - handle blur for Table edit date input --- .../cell/modus-table-cell-editor/modus-table-cell-editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 2d3f16c30..c41592b0e 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -163,7 +163,7 @@ export class ModusTableCellEditor { size="large" show-calendar-icon="true" value={this.value as string} - onDateInputBlur={this.handleBlur} + onBlur={this.handleBlur} onValueChange={(e: CustomEvent) => { this.editedValue = e.detail[valueKey]; }}>