Skip to content

Commit

Permalink
Merge pull request smeup#2179 from apuliasoft/feat/kup-input-panel/dr…
Browse files Browse the repository at this point in the history 
…opdown-button
  • Loading branch information
@lucafoscili
lucafoscili authored Nov 13, 2024
2 parents 7b8c958 + 5d91cab commit b5487a8
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 48 deletions.
14 changes: 9 additions & 5 deletions packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,18 @@ export interface KupInputPanelData {
rows?: KupInputPanelRow[];
actions?: KupInputPanelAction[];
setup?: {
commands?: Array<{
cells: {
[key: string]: KupDataCell;
};
}>;
commands?: Array<KupInputPanelDataCommand>;
};
}

export interface KupInputPanelDataCommand extends KupDataCell {
children?: Array<KupInputPanelDataCommand>;
cells?: {
[key: string]: KupDataCell;
};
value: string;
}

export interface KupInputPanelAction {
type?: string;
fun?: string;
Expand Down
85 changes: 77 additions & 8 deletions packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('<kup-input-panel></kup-input-panel>');
Expand All @@ -1881,21 +1881,27 @@ 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',
},
},
forcedLeaf: false,
},
{
children: [],
value: 'TST',
obj: { t: 'J1', p: 'KEY', k: 'TST' },
cells: {},
forcedLeaf: false,
},
],
},
};
Expand All @@ -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('<kup-input-panel></kup-input-panel>');
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);
});
});
105 changes: 70 additions & 35 deletions packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
KupDataCell,
KupDataTableDataset,
KupDataTableRow,
KupDropdownButtonEventPayload,
KupEditorEventPayload,
KupTabBarEventPayload,
KupTabBarNode,
Expand All @@ -30,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,
Expand All @@ -39,8 +41,16 @@ import { KupDom } from '../../managers/kup-manager/kup-manager-declarations';
import {
GenericObject,
KupComponent,
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 {
Expand All @@ -61,20 +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';

const dom: KupDom = document.documentElement as KupDom;
@Component({
Expand Down Expand Up @@ -452,6 +454,25 @@ export class KupInputPanel {
);
}

#renderDropDownButton(cell: KupDataCell, data: GenericObject) {
return (
<kup-dropdown-button
{...cell.data}
sizing={KupComponentSizing.MEDIUM}
label={cell.value}
data={data}
onkup-dropdownbutton-itemclick={(
e: CustomEvent<KupDropdownButtonEventPayload>
) => {
this.#getFunctionOnClickBTN(
e.detail.node,
e.detail.node.id
);
}}
></kup-dropdown-button>
);
}

#renderEditor(cell: KupDataCell, cellId: string) {
const event = 'kup-editor-save';
const handler = (e: CustomEvent<KupEditorEventPayload>) => {
Expand Down Expand Up @@ -818,21 +839,22 @@ 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 = {
'kup-list': {
showIcons: true,
data: commandObj.children.map((c) =>
this.#commandAdapter(c)
),
},
};
return this.#renderButton(buttonCell, id);
})
)
return this.#renderDropDownButton(commandObj, data);
} else {
const buttonCell = this.#commandAdapter(commandObj);
return this.#renderButton(buttonCell, commandObj.value);
}
})
.flat();
}

Expand Down Expand Up @@ -1109,19 +1131,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) {
Expand Down Expand Up @@ -1578,6 +1588,15 @@ export class KupInputPanel {
});
}

#commandAdapter(cell: KupDataCell): KupDataCell {
const buttonCell = {
...cell,
data: this.#BTNAdapter(null, null, cell.value, cell, cell.obj.k),
id: cell.obj.k,
};
return buttonCell;
}

#getAutocompleteEventCallback(
detail: KupAutocompleteEventPayload | KupComboboxIconClickEventPayload,
fun: string,
Expand Down Expand Up @@ -1758,6 +1777,22 @@ 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,
});
}

//#endregion

//#region LIFECYCLE HOOKS
Expand Down

0 comments on commit b5487a8

Please sign in to comment.