From 2a59b60f72ef07c79ca8cd2464ff9ccac77526e5 Mon Sep 17 00:00:00 2001 From: Adriano Loschiavo Date: Mon, 11 Nov 2024 16:52:26 +0100 Subject: [PATCH 1/5] add dropdown button --- .../kup-input-panel-declarations.ts | 20 +++- .../kup-input-panel/kup-input-panel.tsx | 104 +++++++++++++----- 2 files changed, 92 insertions(+), 32 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index 03b4952c58..cc8d335716 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -19,11 +19,21 @@ export interface KupInputPanelData { rows?: KupInputPanelRow[]; actions?: KupInputPanelAction[]; setup?: { - commands?: Array<{ - cells: { - [key: string]: KupDataCell; - }; - }>; + commands?: Array; + }; +} + +export interface KupInputPanelDataCommand { + children?: Array; + cells?: { + [key: string]: KupDataCell; + }; + value: string; +} + +export interface KupInputPanelCommandChildrenData { + 'kup-list': { + data: Array; }; } diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 87f3373b21..c10ed08e8e 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -14,10 +14,13 @@ import { } from '@stencil/core'; import { KupAutocompleteEventPayload, + KupButtonListClickEventPayload, + KupButtonListNode, KupComboboxIconClickEventPayload, KupDataCell, KupDataTableDataset, KupDataTableRow, + KupDropdownButtonEventPayload, KupEditorEventPayload, KupTabBarEventPayload, KupTabBarNode, @@ -39,6 +42,7 @@ import { KupDom } from '../../managers/kup-manager/kup-manager-declarations'; import { GenericObject, KupComponent, + KupComponentSizing, KupEventPayload, } from '../../types/GenericTypes'; import { getProps, setProps } from '../../utils/utils'; @@ -52,7 +56,9 @@ import { InputPanelOptionsHandler, KupInputPanelCell, KupInputPanelColumn, + KupInputPanelCommandChildrenData, KupInputPanelData, + KupInputPanelDataCommand, KupInputPanelLayout, KupInputPanelLayoutField, KupInputPanelLayoutSection, @@ -75,6 +81,9 @@ import { RADAdapter, SWTAdapter, } from '../../utils/cell-utils'; +import { KupDropdownButton } from '../kup-dropdown-button/kup-dropdown-button'; +import { dA } from '@fullcalendar/core/internal-common'; +import { KupObj } from '../../managers/kup-objects/kup-objects-declarations'; const dom: KupDom = document.documentElement as KupDom; @Component({ @@ -160,6 +169,8 @@ export class KupInputPanel { */ @State() private inputPanelCommands: VNode[] = []; + @State() private inputPanelCommands2: VNode = null; + /** * Id of selected tab if exists * @default null @@ -397,6 +408,7 @@ export class KupInputPanel { > ) : null} {this.inputPanelCommands} + {this.inputPanelCommands2} ); @@ -452,6 +464,24 @@ export class KupInputPanel { ); } + #renderDropDownButton( + name: string, + data: KupInputPanelCommandChildrenData + ) { + return ( + + ) => { + this.#getFunctionOnClickBTN(e.detail.node, e.detail.value); + }} + > + ); + } + #renderEditor(cell: KupDataCell, cellId: string) { const event = 'kup-editor-save'; const handler = (e: CustomEvent) => { @@ -818,21 +848,24 @@ export class KupInputPanel { #mapCommands() { this.inputPanelCommands = this.data.setup.commands - .map((commandObj) => - Object.entries(commandObj?.cells).map(([id, cell]) => { - const buttonCell = { - ...cell, - data: this.#BTNAdapter( - null, - null, - cell.value, - cell, - id - ), + .map((commandObj) => { + if (commandObj?.children && commandObj?.children.length > 0) { + const data: KupInputPanelCommandChildrenData = { + 'kup-list': { + data: commandObj.children.map((c) => { + return this.#getKupDataCellByEntryMap( + Object.entries(c?.cells)[0] + ); + }), + }, }; - return this.#renderButton(buttonCell, id); - }) - ) + return this.#renderDropDownButton(commandObj.value, data); + } else if (commandObj?.cells) { + const firstBtn = Object.entries(commandObj?.cells)[0]; + const buttonCell = this.#getKupDataCellByEntryMap(firstBtn); + return this.#renderButton(buttonCell, firstBtn[0]); + } + }) .flat(); } @@ -1109,19 +1142,7 @@ export class KupInputPanel { cell.data = cell.data || {}; cell.data.onClick = () => { - cell.fun - ? this.customButtonClickHandler({ - fun: cell.fun, - cellId: id, - currentState: this.#reverseMapCells(), - }) - : this.submitCb({ - value: { - before: { ...this.#originalData }, - after: this.#reverseMapCells(), - }, - cell: id, - }); + this.#getFunctionOnClickBTN(cell, id); }; if (cell.data?.keyShortcut && !cell.data?.disabled) { @@ -1758,6 +1779,35 @@ export class KupInputPanel { ); } + #getFunctionOnClickBTN(cell: KupInputPanelCell, id: string) { + cell.fun + ? this.customButtonClickHandler({ + fun: cell.fun, + cellId: id, + currentState: this.#reverseMapCells(), + }) + : this.submitCb({ + value: { + before: { ...this.#originalData }, + after: this.#reverseMapCells(), + }, + cell: id, + }); + } + + #getKupDataCellByEntryMap( + entryCell: Array, + id: string = undefined + ): KupDataCell { + id = id ?? entryCell[0]; + const cell = entryCell[1]; + const buttonCell = { + ...cell, + data: this.#BTNAdapter(null, null, cell.value, cell, id), + }; + return buttonCell; + } + //#endregion //#region LIFECYCLE HOOKS From 17c42934bc610f3ae83525f70d0db9f48b86e433 Mon Sep 17 00:00:00 2001 From: Adriano Loschiavo Date: Mon, 11 Nov 2024 17:27:36 +0100 Subject: [PATCH 2/5] fix cell key --- .../src/components/kup-input-panel/kup-input-panel.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index c10ed08e8e..30ddfa068d 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -476,7 +476,10 @@ export class KupInputPanel { onkup-dropdownbutton-itemclick={( e: CustomEvent ) => { - this.#getFunctionOnClickBTN(e.detail.node, e.detail.value); + this.#getFunctionOnClickBTN( + e.detail.node, + e.detail.node.data.key + ); }} > ); @@ -1803,7 +1806,10 @@ export class KupInputPanel { const cell = entryCell[1]; const buttonCell = { ...cell, - data: this.#BTNAdapter(null, null, cell.value, cell, id), + data: { + ...this.#BTNAdapter(null, null, cell.value, cell, id), + key: id, + }, }; return buttonCell; } From 904d2bb791ebf4256fa611280db6a231be5187f3 Mon Sep 17 00:00:00 2001 From: Adriano Loschiavo Date: Tue, 12 Nov 2024 15:37:22 +0100 Subject: [PATCH 3/5] improve logic --- .../kup-input-panel-declarations.ts | 6 -- .../kup-input-panel/kup-input-panel.tsx | 72 ++++++++----------- 2 files changed, 31 insertions(+), 47 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index cc8d335716..9e124dc0d9 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -31,12 +31,6 @@ export interface KupInputPanelDataCommand { value: string; } -export interface KupInputPanelCommandChildrenData { - 'kup-list': { - data: Array; - }; -} - export interface KupInputPanelAction { type?: string; fun?: string; diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 30ddfa068d..0fcdd570d4 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -14,8 +14,6 @@ import { } from '@stencil/core'; import { KupAutocompleteEventPayload, - KupButtonListClickEventPayload, - KupButtonListNode, KupComboboxIconClickEventPayload, KupDataCell, KupDataTableDataset, @@ -33,6 +31,7 @@ import { FCellTypes, } from '../../f-components/f-cell/f-cell-declarations'; import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc'; +import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations'; import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations'; import { KupManager, @@ -45,6 +44,13 @@ import { KupComponentSizing, KupEventPayload, } from '../../types/GenericTypes'; +import { + CHIAdapter, + CHKAdapter, + CMBandACPAdapter, + RADAdapter, + SWTAdapter, +} from '../../utils/cell-utils'; import { getProps, setProps } from '../../utils/utils'; import { componentWrapperId } from '../../variables/GenericVariables'; import { @@ -56,9 +62,7 @@ import { InputPanelOptionsHandler, KupInputPanelCell, KupInputPanelColumn, - KupInputPanelCommandChildrenData, KupInputPanelData, - KupInputPanelDataCommand, KupInputPanelLayout, KupInputPanelLayoutField, KupInputPanelLayoutSection, @@ -67,23 +71,12 @@ import { KupInputPanelRow, KupInputPanelSubmit, } from './kup-input-panel-declarations'; -import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations'; import { getAbsoluteHeight, getAbsoluteLeft, getAbsoluteTop, getAbsoluteWidth, } from './kup-input-panel-utils'; -import { - CHIAdapter, - CHKAdapter, - CMBandACPAdapter, - RADAdapter, - SWTAdapter, -} from '../../utils/cell-utils'; -import { KupDropdownButton } from '../kup-dropdown-button/kup-dropdown-button'; -import { dA } from '@fullcalendar/core/internal-common'; -import { KupObj } from '../../managers/kup-objects/kup-objects-declarations'; const dom: KupDom = document.documentElement as KupDom; @Component({ @@ -464,21 +457,19 @@ export class KupInputPanel { ); } - #renderDropDownButton( - name: string, - data: KupInputPanelCommandChildrenData - ) { + #renderDropDownButton(cell: KupDataCell, data: GenericObject) { return ( ) => { this.#getFunctionOnClickBTN( e.detail.node, - e.detail.node.data.key + e.detail.node.id ); }} > @@ -853,19 +844,20 @@ export class KupInputPanel { this.inputPanelCommands = this.data.setup.commands .map((commandObj) => { if (commandObj?.children && commandObj?.children.length > 0) { - const data: KupInputPanelCommandChildrenData = { + const data = { 'kup-list': { + showIcons: true, data: commandObj.children.map((c) => { - return this.#getKupDataCellByEntryMap( + return this.#commandAdapter( Object.entries(c?.cells)[0] ); }), }, }; - return this.#renderDropDownButton(commandObj.value, data); + return this.#renderDropDownButton(commandObj, data); } else if (commandObj?.cells) { const firstBtn = Object.entries(commandObj?.cells)[0]; - const buttonCell = this.#getKupDataCellByEntryMap(firstBtn); + const buttonCell = this.#commandAdapter(firstBtn); return this.#renderButton(buttonCell, firstBtn[0]); } }) @@ -1602,6 +1594,20 @@ export class KupInputPanel { }); } + #commandAdapter( + entryCell: Array, + id: string = undefined + ): KupDataCell { + id = id ?? entryCell[0]; + const cell = entryCell[1]; + const buttonCell = { + ...cell, + data: this.#BTNAdapter(null, null, cell.value, cell, id), + id, + }; + return buttonCell; + } + #getAutocompleteEventCallback( detail: KupAutocompleteEventPayload | KupComboboxIconClickEventPayload, fun: string, @@ -1798,22 +1804,6 @@ export class KupInputPanel { }); } - #getKupDataCellByEntryMap( - entryCell: Array, - id: string = undefined - ): KupDataCell { - id = id ?? entryCell[0]; - const cell = entryCell[1]; - const buttonCell = { - ...cell, - data: { - ...this.#BTNAdapter(null, null, cell.value, cell, id), - key: id, - }, - }; - return buttonCell; - } - //#endregion //#region LIFECYCLE HOOKS From 1d853b7673083ebc0a65211454f1d17b2a359447 Mon Sep 17 00:00:00 2001 From: Adriano Loschiavo Date: Tue, 12 Nov 2024 17:26:04 +0100 Subject: [PATCH 4/5] fix command structure --- .../kup-input-panel-declarations.ts | 2 +- .../kup-input-panel/kup-input-panel.tsx | 29 ++++++------------- 2 files changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index 9e124dc0d9..8868591cef 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -23,7 +23,7 @@ export interface KupInputPanelData { }; } -export interface KupInputPanelDataCommand { +export interface KupInputPanelDataCommand extends KupDataCell { children?: Array; cells?: { [key: string]: KupDataCell; diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 0fcdd570d4..c201474217 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -162,8 +162,6 @@ export class KupInputPanel { */ @State() private inputPanelCommands: VNode[] = []; - @State() private inputPanelCommands2: VNode = null; - /** * Id of selected tab if exists * @default null @@ -401,7 +399,6 @@ export class KupInputPanel { > ) : null} {this.inputPanelCommands} - {this.inputPanelCommands2} ); @@ -847,18 +844,15 @@ export class KupInputPanel { const data = { 'kup-list': { showIcons: true, - data: commandObj.children.map((c) => { - return this.#commandAdapter( - Object.entries(c?.cells)[0] - ); - }), + data: commandObj.children.map((c) => + this.#commandAdapter(c) + ), }, }; return this.#renderDropDownButton(commandObj, data); - } else if (commandObj?.cells) { - const firstBtn = Object.entries(commandObj?.cells)[0]; - const buttonCell = this.#commandAdapter(firstBtn); - return this.#renderButton(buttonCell, firstBtn[0]); + } else { + const buttonCell = this.#commandAdapter(commandObj); + return this.#renderButton(buttonCell, commandObj.value); } }) .flat(); @@ -1594,16 +1588,11 @@ export class KupInputPanel { }); } - #commandAdapter( - entryCell: Array, - id: string = undefined - ): KupDataCell { - id = id ?? entryCell[0]; - const cell = entryCell[1]; + #commandAdapter(cell: KupDataCell): KupDataCell { const buttonCell = { ...cell, - data: this.#BTNAdapter(null, null, cell.value, cell, id), - id, + data: this.#BTNAdapter(null, null, cell.value, cell, cell.obj.k), + id: cell.obj.k, }; return buttonCell; } From e50d6f775048bd5969871553c0fa15ac0bb55f96 Mon Sep 17 00:00:00 2001 From: Adriano Loschiavo Date: Wed, 13 Nov 2024 12:43:01 +0100 Subject: [PATCH 5/5] improve input-panel commands test e2e --- .../kup-input-panel/kup-input-panel.e2e.ts | 85 +++++++++++++++++-- 1 file changed, 77 insertions(+), 8 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts index 12a1208d6d..93c1ef7a91 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts @@ -1862,7 +1862,7 @@ describe('kup-input-panel', () => { expect(classKupDanger).not.toBeNull(); }); - it('render inputpanel with commands', async () => { + it('render inputpanel with commands buttons', async () => { const page = await newE2EPage(); await page.setContent(''); @@ -1881,14 +1881,13 @@ describe('kup-input-panel', () => { commands: [ { children: [], + value: 'Clear (F5)', + icon: 'close', + data: { + keyShortcut: 'f5', + }, + obj: { t: 'J1', p: 'KEY', k: 'CLEAR' }, cells: { - CLEAR: { - value: 'Clear (F5)', - icon: 'close', - data: { - keyShortcut: 'f5', - }, - }, TST: { value: 'TST', icon: 'save', @@ -1896,6 +1895,13 @@ describe('kup-input-panel', () => { }, forcedLeaf: false, }, + { + children: [], + value: 'TST', + obj: { t: 'J1', p: 'KEY', k: 'TST' }, + cells: {}, + forcedLeaf: false, + }, ], }, }; @@ -1915,4 +1921,67 @@ describe('kup-input-panel', () => { const buttons = await commands.findAll('div.f-button.form__submit'); expect(buttons.length).toBe(2 + 1); }); + + it('render inputpanel with commands dropdown-button', async () => { + const page = await newE2EPage(); + + await page.setContent(''); + const inputPanel = await page.find('kup-input-panel'); + + const data = { + type: 'SmeupDataTable', + columns: [], + rows: [ + { + cells: {}, + }, + ], + setup: { + components: {}, + commands: [ + { + children: [ + { + children: [], + value: 'CLEAR', + obj: { t: 'J1', p: 'KEY', k: 'CLEAR' }, + cells: {}, + data: { + keyShortcut: 'f5', + }, + forcedLeaf: false, + }, + { + children: [], + value: 'TST', + obj: { t: 'J1', p: 'KEY', k: 'TST' }, + cell: {}, + forcedLeaf: false, + }, + ], + value: 'DDB', + data: { + icon: 'save', + }, + forcedLeaf: false, + }, + ], + }, + }; + + inputPanel.setProperty('data', data); + + await page.waitForChanges(); + + const form = await page.find( + 'kup-input-panel >>> form.input-panel-form' + ); + expect(form).not.toBeNull(); + + const commands = await form.find('div.input-panel__commands'); + expect(commands).not.toBeNull(); + + const buttons = await commands.findAll('kup-dropdown-button'); + expect(buttons.length).toBe(1); + }); });