feat: handle events with callback

smeup · Apr 2, 2024 · 74e9b49 · 74e9b49
1 parent 4b5919a
commit 74e9b49
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 13 deletions.
diff --git 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
@@ -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";
@@ -93,7 +93,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";
@@ -2465,6 +2465,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<GenericObject>;
         /**
           * Creates a hidden submit button in order to submit the form with enter.
           * @default false
@@ -2474,11 +2480,21 @@ export namespace Components {
           * This method is used to trigger a new render of the component.
          */
         "refresh": () => Promise<void>;
+        /**
+          * Sets the props to the component.
+          * @param props - Object containing props that will be set to the component.
+         */
+        "setProps": (props: GenericObject) => Promise<void>;
         /**
           * 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 {
         /**
@@ -7105,6 +7121,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
@@ -68,6 +68,19 @@ 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.',

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
@@ -15,6 +15,8 @@ import {
 import {
     DataAdapterFn,
     InputPanelCells,
+    InputPanelEvent,
+    InputPanelEventsCallback,
     KupInputPanelCell,
     KupInputPanelColumn,
     KupInputPanelData,
@@ -43,14 +45,6 @@ import { KupDom } from '../../managers/kup-manager/kup-manager-declarations';
 import { KupDataCell } from '../../components';
 import { getProps, setProps } from '../../utils/utils';
 
-interface ValueChangeEvent {
-    data: {
-        [key: string]: number | string | object;
-        // field: string;
-        // value: number | string | object;
-    };
-}
-
 const dom: KupDom = document.documentElement as KupDom;
 @Component({
     tag: 'kup-input-panel',
@@ -97,7 +91,7 @@ export class KupInputPanel {
      * Sets the callback function on value change event
      * @default null
      */
-    @Prop() valueChangeCb: (e: ValueChangeEvent) => unknown = null;
+    @Prop() valueChangeCb: InputPanelEventsCallback[] = [];
     //#endregion
 
     //#region STATES
@@ -198,6 +192,7 @@ export class KupInputPanel {
             'form--column': !horizontal,
         };
 
+        // We create a form for each row in data
         return (
             <form
                 class={classObj}
@@ -245,7 +240,10 @@ export class KupInputPanel {
                           const cell = row.cells[column.name];
                           const mappedCell = {
                               ...cell,
-                              data: this.#mapData(cell, column),
+                              data: {
+                                  ...this.#mapData(cell, column),
+                                  id: column.name,
+                              },
                               slotData: this.#slotData(cell, column),
                               isEditable: cell.editable,
                           };
@@ -418,6 +416,24 @@ export class KupInputPanel {
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
         this.#kupManager.debug.logLoad(this, true);
+
+        this.valueChangeCb.map((cbData) => {
+            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
@@ -22,6 +22,51 @@
 | `kup-input-panel-ready` | When component load is complete | `CustomEvent<KupEventPayload>` |
 
 
+## Methods
+
+### `getProps(descriptions?: boolean) => Promise<GenericObject>`
+
+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<GenericObject>`
+
+List of props as object, each key will be a prop.
+
+### `refresh() => Promise<void>`
+
+This method is used to trigger a new render of the component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `setProps(props: GenericObject) => Promise<void>`
+
+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<void>`
+
+
+
+
 ## Dependencies
 
 ### Depends on