Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: input panel added prop optionHandler #1860

Merged
merged 7 commits into from
Apr 12, 2024
Merged

feat: input panel added prop optionHandler #1860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
857de78
fix: update e2e
p-bemportato Apr 11, 2024
b4cf8ff
wip options handler
p-bemportato Apr 11, 2024
452f3a4
fix: options handler impl
Apr 11, 2024
afdbe8e
chore: max-old-space setted in Dockerfile
Apr 11, 2024
58d8430
chore: pre-push hook
Apr 11, 2024
0802f2d
chore: typo on pre-push
Apr 11, 2024
0ff9519
Merge branch 'develop' into inputpanel
p-bemportato Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .devcontainer/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \

# Define env vars
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
ENV NODE_OPTIONS=--max-old-space-size=8192

# [Optional] Uncomment if you want to install an additional version of node using nvm
ARG EXTRA_NODE_VERSION="lts/hydrogen"
Expand Down
4 changes: 4 additions & 0 deletions .devcontainer/scripts/git/pre-push
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/bin/sh

yarn run k:build
yarn run k:test:all
5 changes: 5 additions & 0 deletions .devcontainer/scripts/postCreateCommand.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,10 @@
echo "Set permissions"
sudo chown -R node:node node_modules

echo "Set Git hooks"
echo "Set pre-push hook"
cp .devcontainer/scripts/git/pre-push .git/hooks
chmod +x .git/hooks/pre-push

echo "Installing Deps"
yarn install
25 changes: 25 additions & 0 deletions packages/ketchup/src/assets/input-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ let data = {
},
],
},
fun: 'FUN ',
shape: 'ACP',
},
LIS: {
Expand Down Expand Up @@ -451,5 +452,29 @@ const inputPanelCallback = [
},
];

const optionsHandlerCallback = () => {
return Promise.resolve({
type: 'SmeupTree',
messages: [],
children: [
{
content: {
codice: 'ROM',
testo: 'Rome',
},
children: [],
},
{
content: {
codice: 'TAR',
testo: 'Taranto',
},
children: [],
},
],
});
};

inputPanel.valueChangeCb = inputPanelCallback;
inputPanel.optionsHandler = optionsHandlerCallback;
inputPanel.submitCb = (e) => console.log(e);
24 changes: 12 additions & 12 deletions packages/ketchup/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { InputPanelEventsCallback, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations";
import { InputPanelOptionsHandler, KupInputPanelData, KupInputPanelSubmit } 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";
Expand Down Expand Up @@ -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 { InputPanelEventsCallback, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations";
export { InputPanelOptionsHandler, KupInputPanelData, KupInputPanelSubmit } 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";
Expand Down Expand Up @@ -2483,16 +2483,16 @@ export namespace Components {
* @returns List of props as object, each key will be a prop.
*/
"getProps": (descriptions?: boolean) => Promise<GenericObject>;
/**
* Sets the callbacks functions on ketchup events
* @default []
*/
"handleEventsCallbacks": InputPanelEventsCallback[];
/**
* Creates a hidden submit button in order to submit the form with enter.
* @default false
*/
"hiddenSubmitButton": boolean;
/**
* Sets the callback function on loading options via FUN
* @default []
*/
"optionsHandler": InputPanelOptionsHandler;
/**
* This method is used to trigger a new render of the component.
*/
Expand Down Expand Up @@ -7216,11 +7216,6 @@ declare namespace LocalJSX {
* @default null
*/
"data"?: KupInputPanelData;
/**
* Sets the callbacks functions on ketchup events
* @default []
*/
"handleEventsCallbacks"?: InputPanelEventsCallback[];
/**
* Creates a hidden submit button in order to submit the form with enter.
* @default false
Expand All @@ -7230,6 +7225,11 @@ declare namespace LocalJSX {
* When component load is complete
*/
"onKup-input-panel-ready"?: (event: KupInputPanelCustomEvent<KupEventPayload>) => void;
/**
* Sets the callback function on loading options via FUN
* @default []
*/
"optionsHandler"?: InputPanelOptionsHandler;
/**
* Sets the callback function on submit form
* @default null
Expand Down
2 changes: 1 addition & 1 deletion packages/ketchup/src/components/kup-image-list/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

| Property | Attribute | Description | Type | Default |
| -------------- | -------------- | ---------------------------------------------------------------- | ------------------------ | ----------- |
| `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `4` |
| `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `null` |
| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
| `data` | -- | Actual data of the component. | `KupImageListDataNode[]` | `[]` |
| `ripple` | `ripple` | When enabled displays Material's ripple effect on clicked items. | `boolean` | `true` |
Expand Down
10 changes: 4 additions & 6 deletions packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ export interface KupInputPanelLayoutField {
export type DataAdapterFn = (
options: GenericObject,
fieldLabel: string,
currentValue: string
currentValue: string,
fun?: string
) => Object;

export type InputPanelCells = {
Expand All @@ -89,15 +90,12 @@ export type InputPanelEvent = {
};
};

export type InputPanelEventsCallback = {
eventName: string;
eventCallback: (e: InputPanelEvent) => unknown;
};
export type InputPanelOptionsHandler = (fun: string) => Promise<GenericObject>;

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',
handleEventsCallbacks = 'Sets the callback function on value change event',
optionsHandler = 'Sets the callback function to recieve options',
}
97 changes: 69 additions & 28 deletions packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,24 +110,30 @@ describe('kup-input-panel', () => {
editable: true,
mandatory: true,
options: [
'Florence',
'Venice',
'Rome',
'Madrid',
'Barcelona',
'Seville',
'Berlin',
'Munich',
'Hamburg',
'Paris',
'Marseille',
'Lyon',
'Lisbon',
'Porto',
'Faro',
'London',
'Manchester',
'Liverpool',
{
id: 'FLO',
label: 'Florence',
},
{
id: 'VEN',
label: 'Venice',
},
{
id: 'ROM',
label: 'Rome',
},
{
id: 'MAD',
label: 'Madrid',
},
{
id: 'BAR',
label: 'Barcelona',
},
{
id: 'SEV',
label: 'Seville',
},
],
shape: 'ACP',
},
Expand Down Expand Up @@ -176,7 +182,7 @@ describe('kup-input-panel', () => {

const listOptions = await page.findAll('kup-list >>> ul.list li');
expect(listOptions).not.toBeNull();
expect(listOptions).toHaveLength(2);
expect(listOptions).toHaveLength(1);

const firstOptionValue = await listOptions[0].find('span');
expect(firstOptionValue).toEqualText('Rome');
Expand Down Expand Up @@ -207,12 +213,30 @@ describe('kup-input-panel', () => {
NAT: {
value: '',
options: [
'Italy',
'Spain',
'Germany',
'France',
'Portugal',
'England',
{
id: 'ITA',
label: 'Italy',
},
{
id: 'SPA',
label: 'Spain',
},
{
id: 'GER',
label: 'Germany',
},
{
id: 'FRA',
label: 'France',
},
{
id: 'POR',
label: 'Portugal',
},
{
id: 'ENG',
label: 'England',
},
],
editable: true,
shape: 'CMB',
Expand Down Expand Up @@ -345,7 +369,24 @@ describe('kup-input-panel', () => {
cells: {
RAD: {
value: '1',
options: ['1', '2', '3', '4'],
options: [
{
id: '1',
label: 'One',
},
{
id: '2',
label: 'Two',
},
{
id: '3',
label: 'Three',
},
{
id: '4',
label: 'Four',
},
],
editable: true,
shape: 'RAD',
},
Expand Down Expand Up @@ -375,13 +416,13 @@ describe('kup-input-panel', () => {
for (const [i, radioButton] of radioButtons.entries()) {
const label = await radioButton.find('label');
expect(label).not.toBeNull();
expect(label).toEqualText(radioOptions[i]);
expect(label).toEqualText(radioOptions[i].label);

const input = await radioButton.find('input');
expect(input).not.toBeNull();

const value = await input.getProperty('value');
expect(value).toBe(radioOptions[i]);
expect(value).toBe(radioOptions[i].id);

if (data.rows[0].cells.RAD.value === value) {
const radioButtonCircle = await radioButton.find('div.radio');
Expand Down
Loading