diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js index 458ffd66f6..a8e4bcc6a9 100644 --- a/packages/ketchup/src/assets/input-panel.js +++ b/packages/ketchup/src/assets/input-panel.js @@ -1,4 +1,4 @@ -const data = { +let data = { columns: [ { name: 'NAM', @@ -127,3 +127,34 @@ const data = { const inputPanel = document.getElementById('input-panel'); inputPanel.data = data; + +const inputPanelCallback = [ + { + eventName: 'kup-autocomplete-input', + eventCallback: (e) => { + const newdata = { + ...data, + rows: data.rows.map((row) => { + const keys = Object.keys(row.cells); + const updatedCells = keys.reduce((acc, key) => { + let updatedValue = e.state.find( + (state) => state.column.name === key + ).cell.value; + return { + ...acc, + [key]: { + ...row.cells[key], + value: updatedValue, + }, + }; + }, {}); + return { ...row, cells: updatedCells }; + }), + }; + const inputPanel = document.getElementById('input-panel'); + inputPanel.data = newdata; + }, + }, +]; + +inputPanel.valueChangeCb = inputPanelCallback; diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 661a905889..8ca0c6e427 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -43,7 +43,7 @@ import { FImageData } from "./f-components/f-image/f-image-declarations"; import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations"; import { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations"; -import { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations"; +import { InputPanelEventsCallback, KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations"; import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations"; import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations"; import { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations"; @@ -94,7 +94,7 @@ export { FImageData } from "./f-components/f-image/f-image-declarations"; export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations"; export { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations"; -export { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations"; +export { InputPanelEventsCallback, KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations"; export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations"; export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations"; export { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations"; @@ -2587,6 +2587,12 @@ export namespace Components { * @default null */ "data": KupInputPanelData; + /** + * Used to retrieve component's props values. + * @param descriptions - When provided and true, the result will be the list of props with their description. + * @returns List of props as object, each key will be a prop. + */ + "getProps": (descriptions?: boolean) => Promise; /** * Creates a hidden submit button in order to submit the form with enter. * @default false @@ -2596,11 +2602,21 @@ export namespace Components { * This method is used to trigger a new render of the component. */ "refresh": () => Promise; + /** + * Sets the props to the component. + * @param props - Object containing props that will be set to the component. + */ + "setProps": (props: GenericObject) => Promise; /** * Sets the callback function on submit form * @default null */ "submitCb": (e: SubmitEvent) => unknown; + /** + * Sets the callback function on value change event + * @default null + */ + "valueChangeCb": InputPanelEventsCallback[]; } interface KupLazy { /** @@ -7394,6 +7410,11 @@ declare namespace LocalJSX { * @default null */ "submitCb"?: (e: SubmitEvent) => unknown; + /** + * Sets the callback function on value change event + * @default null + */ + "valueChangeCb"?: InputPanelEventsCallback[]; } interface KupLazy { /** 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 72785cc95c..4c905d6ae2 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 @@ -68,9 +68,23 @@ export type InputPanelCells = { row?: KupInputPanelRow; }; +export type InputPanelEvent = { + state: { cell: KupDataCell; column: KupDataColumn }[]; + data: { + field: string; + value: number | string | object; + }; +}; + +export type InputPanelEventsCallback = { + eventName: string; + eventCallback: (e: InputPanelEvent) => unknown; +}; + export enum KupInputPanelProps { customStyle = 'Custom style of the component.', data = 'Actual data of the input panel.', hiddenSubmitButton = 'Creates a hidden submit button in order to submit the form with enter.', submitCb = 'Sets the callback function on submit form', + valueChangeCb = 'Sets the callback function on value change event', } 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 3e5355b893..e734ad5b85 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 @@ -15,6 +15,8 @@ import { import { DataAdapterFn, InputPanelCells, + InputPanelEvent, + InputPanelEventsCallback, KupInputPanelCell, KupInputPanelColumn, KupInputPanelData, @@ -84,6 +86,12 @@ export class KupInputPanel { * @default null */ @Prop() submitCb: (e: SubmitEvent) => unknown = null; + + /** + * Sets the callback function on value change event + * @default null + */ + @Prop() valueChangeCb: InputPanelEventsCallback[] = []; //#endregion //#region STATES @@ -184,6 +192,7 @@ export class KupInputPanel { 'form--column': !horizontal, }; + // We create a form for each row in data return (
{ + this.rootElement.addEventListener(cbData.eventName, (e: any) => { + const inputPanelEvent: InputPanelEvent = { + state: this.inputPanelCells.find((data) => + data.cells.find( + (cell) => cell.column.name === e.detail.id + ) + ).cells, + data: { + field: e.detail.id, + value: e.detail.inputValue || e.detail.value, + }, + }; + + cbData.eventCallback(inputPanelEvent); + }); + }); } componentWillRender() { diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md index 021f336990..22b4a5584c 100644 --- a/packages/ketchup/src/components/kup-input-panel/readme.md +++ b/packages/ketchup/src/components/kup-input-panel/readme.md @@ -22,6 +22,51 @@ | `kup-input-panel-ready` | When component load is complete | `CustomEvent` | +## Methods + +### `getProps(descriptions?: boolean) => Promise` + +Used to retrieve component's props values. + +#### Parameters + +| Name | Type | Description | +| -------------- | --------- | -------------------------------------------------------------------------------------- | +| `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. | + +#### Returns + +Type: `Promise` + +List of props as object, each key will be a prop. + +### `refresh() => Promise` + +This method is used to trigger a new render of the component. + +#### Returns + +Type: `Promise` + + + +### `setProps(props: GenericObject) => Promise` + +Sets the props to the component. + +#### Parameters + +| Name | Type | Description | +| ------- | --------------- | ------------------------------------------------------------ | +| `props` | `GenericObject` | - Object containing props that will be set to the component. | + +#### Returns + +Type: `Promise` + + + + ## Dependencies ### Depends on