diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js index bfdc90753a..458ffd66f6 100644 --- a/packages/ketchup/src/assets/input-panel.js +++ b/packages/ketchup/src/assets/input-panel.js @@ -108,13 +108,9 @@ const data = { }, CHK: { value: 'on', - obj: { - t: 'V2', - p: 'SI/NO', - k: '', - }, editable: true, mandatory: true, + shape: 'CHK', }, RAD: { value: '1', diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 0329934853..3e801ced76 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -2470,6 +2470,10 @@ export namespace Components { * @default false */ "hiddenSubmitButton": boolean; + /** + * This method is used to trigger a new render of the component. + */ + "refresh": () => Promise; /** * Sets the callback function on submit form * @default null 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 118070316e..72785cc95c 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 @@ -62,3 +62,15 @@ export type DataAdapterFn = ( fieldLabel: string, currentValue: string ) => Object; + +export type InputPanelCells = { + cells: { cell: KupDataCell; column: KupDataColumn }[]; + row?: KupInputPanelRow; +}; + +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', +} 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 39ed5bbb11..e407b41532 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 @@ -320,6 +320,11 @@ describe('kup-input-panel', () => { const value = await input.getProperty('value'); expect(value).toBe('off'); + + await input.click(); + + const updatedValue = await input.getProperty('value'); + expect(updatedValue).toBe('on'); }); it('renders radio buttons', async () => { @@ -378,10 +383,24 @@ describe('kup-input-panel', () => { const value = await input.getProperty('value'); expect(value).toBe(radioOptions[i]); - if (data.rows[0].cells.RAD.value === radioOptions[i]) { + if (data.rows[0].cells.RAD.value === value) { const radioButtonCircle = await radioButton.find('div.radio'); expect(radioButtonCircle).toHaveClass('radio--checked'); } } + + const newRadioButtonChecked = await radioButtons[2].find('div.radio'); + + await newRadioButtonChecked.click(); + + await page.waitForChanges(); + + const updatedRadioButtons = await radioButtonsCell.findAll( + 'div.form-field' + ); + const updateRadioButtonChecked = await updatedRadioButtons[2].find( + 'div.radio ' + ); + expect(updateRadioButtonChecked).toHaveClass('radio--checked'); }); }); 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 09330cf442..3e5355b893 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 @@ -4,23 +4,32 @@ import { Event, EventEmitter, Host, + Method, Prop, + State, VNode, Watch, + forceUpdate, h, } from '@stencil/core'; import { DataAdapterFn, + InputPanelCells, KupInputPanelCell, KupInputPanelColumn, KupInputPanelData, + KupInputPanelProps, KupInputPanelRow, } from './kup-input-panel-declarations'; import { KupManager, kupManagerInstance, } from '../../managers/kup-manager/kup-manager'; -import { KupComponent, KupEventPayload } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponent, + KupEventPayload, +} from '../../types/GenericTypes'; import { componentWrapperId } from '../../variables/GenericVariables'; import { FButton } from '../../f-components/f-button/f-button'; import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations'; @@ -31,7 +40,8 @@ import { import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc'; import { FCell } from '../../f-components/f-cell/f-cell'; import { KupDom } from '../../managers/kup-manager/kup-manager-declarations'; -import { FRadioData } from '../../components'; +import { KupDataCell } from '../../components'; +import { getProps, setProps } from '../../utils/utils'; const dom: KupDom = document.documentElement as KupDom; @Component({ @@ -76,6 +86,18 @@ export class KupInputPanel { @Prop() submitCb: (e: SubmitEvent) => unknown = null; //#endregion + //#region STATES + /*-------------------------------------------------*/ + /* S t a t e s */ + /*-------------------------------------------------*/ + + /** + * Values to send as props to FCell + * @default [] + */ + @State() private inputPanelCells: InputPanelCells[] = []; + //#endregion + //#region VARIABLES /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -91,8 +113,7 @@ export class KupInputPanel { @Watch('data') onDataChanged() { - // console.log('data changed', this.data); - // this.render(); + this.#mapCells(this.data); } //#endregion @@ -101,7 +122,30 @@ export class KupInputPanel { /* P u b l i c M e t h o d s */ /*-------------------------------------------------*/ - // TODO ADD METHODS HERE + /** + * Used to retrieve component's props values. + * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description. + * @returns {Promise} List of props as object, each key will be a prop. + */ + @Method() + async getProps(descriptions?: boolean): Promise { + return getProps(this, KupInputPanelProps, descriptions); + } + /** + * This method is used to trigger a new render of the component. + */ + @Method() + async refresh(): Promise { + forceUpdate(this); + } + /** + * Sets the props to the component. + * @param {GenericObject} props - Object containing props that will be set to the component. + */ + @Method() + async setProps(props: GenericObject): Promise { + setProps(this, KupInputPanelProps, props); + } //#endregion //#region EVENTS @@ -126,24 +170,13 @@ export class KupInputPanel { /* P r i v a t e M e t h o d s */ /*-------------------------------------------------*/ - #renderRow(row: KupInputPanelRow) { + #renderRow(inputPanelCell: InputPanelCells) { // todo layout - const horizontal = row.layout?.horizontal || false; - - const rowContent: VNode[] = this.data.columns - .filter((col) => col.visible) - .map((col) => { - const cell = row.cells[col.name]; + const horizontal = inputPanelCell.row.layout?.horizontal || false; - const mappedCell = { - ...cell, - data: this.#mapData(cell, col), - slotData: this.#slotData(cell, col), - isEditable: cell.editable, - }; - - return this.#renderCell(mappedCell, row, col); - }); + const rowContent: VNode[] = inputPanelCell.cells.map((cell) => + this.#renderCell(cell.cell, inputPanelCell.row, cell.column) + ); const classObj = { form: true, @@ -172,7 +205,7 @@ export class KupInputPanel { } #renderCell( - cell: KupInputPanelCell, + cell: KupDataCell, row: KupInputPanelRow, column: KupInputPanelColumn ) { @@ -181,21 +214,37 @@ export class KupInputPanel { column, row, component: this, - editable: cell.editable, + editable: cell.isEditable, renderKup: true, setSizes: true, }; - // if ( - // dom.ketchup.data.cell.getType(cell, cell.shape) === FCellTypes.RADIO - // ) { - // // console.log('cell.data', cell.data); - // return ; - // } - return ; } + #mapCells(data: KupInputPanelData) { + const inpuPanelCells = data?.rows?.length + ? data.rows.reduce((inpuPanelCells, row) => { + const cells = data.columns + .filter((column) => column.visible) + .map((column) => { + const cell = row.cells[column.name]; + const mappedCell = { + ...cell, + data: this.#mapData(cell, column), + slotData: this.#slotData(cell, column), + isEditable: cell.editable, + }; + + return { column, cell: mappedCell }; + }); + return [...inpuPanelCells, { cells, row }]; + }, []) + : []; + + this.inputPanelCells = inpuPanelCells; + } + #mapData(cell: KupInputPanelCell, col: KupInputPanelColumn) { const options = cell.options; const fieldLabel = col.title; @@ -329,29 +378,12 @@ export class KupInputPanel { } #RADAdapter(options: string[], _fieldLabel: string, currentValue: string) { - // const onChange = (i) => { - // this.data = { - // ...this.data, - // rows: this.data.rows.map((row) => ({ - // ...row, - // cells: { - // ...row.cells, - // RAD: { - // ...row.cells['RAD'], - // value: options[i], - // }, - // }, - // })), - // }; - // }; - return { data: options.map((option) => ({ value: option, label: option, checked: option === currentValue, })), - // onChange, }; } @@ -391,7 +423,7 @@ export class KupInputPanel { } render() { - const isEmptyData = Boolean(!this.data?.rows?.length); + const isEmptyData = Boolean(!this.inputPanelCells.length); const inputPanelContent: VNode[] = isEmptyData ? [ @@ -401,7 +433,9 @@ export class KupInputPanel { )}

, ] - : this.data.rows.map((row) => this.#renderRow(row)); + : this.inputPanelCells.map((inputPanelCell) => + this.#renderRow(inputPanelCell) + ); return ( diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx index 276ed39cd4..fab603adc8 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx +++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx @@ -49,6 +49,7 @@ import { FRadio } from '../f-radio/f-radio'; import { FRating } from '../f-rating/f-rating'; import type { KupDataTable } from '../../components/kup-data-table/kup-data-table'; import { FRadioProps } from '../f-radio/f-radio-declarations'; +import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations'; const dom: KupDom = document.documentElement as KupDom; @@ -854,7 +855,13 @@ function cellEvent( if (cellEventName === FCellEvents.UPDATE) { try { (comp as KupComponent).refresh(); - } catch (error) {} + } catch (error) { + dom.ketchup.debug.logMessage( + comp, + error, + KupDebugCategory.ERROR + ); + } } } }