From 0989e00beef205ec313315c4c7d0d00bc49973a3 Mon Sep 17 00:00:00 2001 From: Martin Shumankov Date: Fri, 9 Dec 2022 20:03:11 +0200 Subject: [PATCH 1/6] feat: dropdown parent property to accept array UTCORE-265 --- src/components/Card/input.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Card/input.tsx b/src/components/Card/input.tsx index 06150c5d..8e973dce 100644 --- a/src/components/Card/input.tsx +++ b/src/components/Card/input.tsx @@ -99,9 +99,16 @@ function input( if (loading === 'loading' && ['button', 'submit'].includes(widgetType)) return ; if (loading === 'loading') return <>{label}
; } - props.disabled ??= schema?.readOnly || (parentField && !parentValue); + props.disabled ??= schema?.readOnly || (parentField && !parentValue || (Array.isArray(parentValue) && (parentValue.includes(undefined) || parentValue.includes(null)))); if (loading) props.disabled = true; - const filterBy = item => (!parentField && !optionsFilter) || Object.entries({...optionsFilter, parent: parentValue}).every(([name, value]) => String(item[name]) === String(value)); + const filterBy = item => (!parentField && !optionsFilter) || Object.entries({...optionsFilter, parent: parentValue}).every( ([name, value]) => { + if (Array.isArray(item[name])) { + return item[name].every((parent, index) => { + return String(parent) === String(value[index]) + }); + } + return String(item[name]) === String(value) + }); switch (widgetType) { case 'button': return Date: Fri, 9 Dec 2022 20:03:11 +0200 Subject: [PATCH 2/6] feat: dropdown parent property to accept array UTCORE-265 --- src/components/Card/input.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Card/input.tsx b/src/components/Card/input.tsx index 06150c5d..8e973dce 100644 --- a/src/components/Card/input.tsx +++ b/src/components/Card/input.tsx @@ -99,9 +99,16 @@ function input( if (loading === 'loading' && ['button', 'submit'].includes(widgetType)) return ; if (loading === 'loading') return <>{label}
; } - props.disabled ??= schema?.readOnly || (parentField && !parentValue); + props.disabled ??= schema?.readOnly || (parentField && !parentValue || (Array.isArray(parentValue) && (parentValue.includes(undefined) || parentValue.includes(null)))); if (loading) props.disabled = true; - const filterBy = item => (!parentField && !optionsFilter) || Object.entries({...optionsFilter, parent: parentValue}).every(([name, value]) => String(item[name]) === String(value)); + const filterBy = item => (!parentField && !optionsFilter) || Object.entries({...optionsFilter, parent: parentValue}).every( ([name, value]) => { + if (Array.isArray(item[name])) { + return item[name].every((parent, index) => { + return String(parent) === String(value[index]) + }); + } + return String(item[name]) === String(value) + }); switch (widgetType) { case 'button': return Date: Mon, 12 Dec 2022 12:22:26 +0200 Subject: [PATCH 3/6] chore: lint UTCORE-265 --- src/components/Card/input.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Card/input.tsx b/src/components/Card/input.tsx index 8e973dce..049a476d 100644 --- a/src/components/Card/input.tsx +++ b/src/components/Card/input.tsx @@ -99,15 +99,15 @@ function input( if (loading === 'loading' && ['button', 'submit'].includes(widgetType)) return ; if (loading === 'loading') return <>{label}
; } - props.disabled ??= schema?.readOnly || (parentField && !parentValue || (Array.isArray(parentValue) && (parentValue.includes(undefined) || parentValue.includes(null)))); + props.disabled ??= schema?.readOnly || (parentField && !parentValue) || (Array.isArray(parentValue) && (parentValue.includes(undefined) || parentValue.includes(null))); if (loading) props.disabled = true; - const filterBy = item => (!parentField && !optionsFilter) || Object.entries({...optionsFilter, parent: parentValue}).every( ([name, value]) => { + const filterBy = item => (!parentField && !optionsFilter) || Object.entries({...optionsFilter, parent: parentValue}).every(([name, value]) => { if (Array.isArray(item[name])) { return item[name].every((parent, index) => { - return String(parent) === String(value[index]) + return String(parent) === String(value[index]); }); } - return String(item[name]) === String(value) + return String(item[name]) === String(value); }); switch (widgetType) { case 'button': return Date: Fri, 13 Jan 2023 16:27:02 +0200 Subject: [PATCH 4/6] chore: build UTCORE-265 --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 99de3f1e..7b20a34c 100644 --- a/README.md +++ b/README.md @@ -109,3 +109,5 @@ the project links below. "@testing-library/react@^12.1.5", "@testing-library/user-event@^14.2.6" ``` + +--- From 178fb9454a739a65e805ded9b03cc7cbd11a0dbe Mon Sep 17 00:00:00 2001 From: Martin Shumankov Date: Mon, 23 Jan 2023 17:12:32 +0200 Subject: [PATCH 5/6] chore: build UTCORE-265 --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 7b20a34c..99de3f1e 100644 --- a/README.md +++ b/README.md @@ -109,5 +109,3 @@ the project links below. "@testing-library/react@^12.1.5", "@testing-library/user-event@^14.2.6" ``` - ---- From 5b4ea6bd447f52942a0eed6365acb8a3683add8c Mon Sep 17 00:00:00 2001 From: Martin Shumankov Date: Tue, 24 Jan 2023 15:10:34 +0200 Subject: [PATCH 6/6] feat: added story in cascaded dropdowns UTCORE-265 --- .../stories/CascadedDropdowns.stories.tsx | 54 ++++++++++++++++++- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/src/components/Editor/stories/CascadedDropdowns.stories.tsx b/src/components/Editor/stories/CascadedDropdowns.stories.tsx index 7d687c8c..71b3b438 100644 --- a/src/components/Editor/stories/CascadedDropdowns.stories.tsx +++ b/src/components/Editor/stories/CascadedDropdowns.stories.tsx @@ -10,13 +10,21 @@ export const CascadedDropdowns = () => properties: { continent: {widget: {type: 'dropdown', dropdown: 'continent'}}, country: {widget: { type: 'dropdown', dropdown: 'country', parent: 'continent'}}, - city: {widget: { type: 'dropdown', dropdown: 'city', parent: 'country'}} + city: {widget: { type: 'dropdown', dropdown: 'city', parent: 'country'}}, + continentSecond: {widget: { title: 'Continent', type: 'dropdown', dropdown: 'continentSecond'}}, + countrySecond: {widget: { title: 'Country', type: 'dropdown', dropdown: 'countrySecond', parent: 'continentSecond'}}, + currency: {widget: { type: 'dropdown', dropdown: 'currency'}}, + citySecond: {widget: { title: 'City', type: 'dropdown', dropdown: 'city', parent: ['countrySecond', 'currency']}} } }} cards={{ edit: { className: 'xl:col-3', widgets: ['continent', 'country', 'city'] + }, + editSecond: { + className: 'xl:col-3', + widgets: ['continentSecond', 'countrySecond', 'currency', 'citySecond'] } }} onDropdown={() => Promise.resolve({ @@ -51,9 +59,51 @@ export const CascadedDropdowns = () => {value: 8, label: 'Paris', parent: 12}, {value: 9, label: 'Berlin', parent: 13}, {value: 10, label: 'Rome', parent: 14} + ], + currency: [ + {value: 10, label: 'EUR'}, + {value: 11, label: 'USD'}, + {value: 12, label: 'KES'}, + {value: 13, label: 'UGX'}, + {value: 14, label: 'TZS'}, + {value: 15, label: 'MXN'}, + {value: 16, label: 'AUD'}, + {value: 17, label: 'NZD'} + ], + citySecond: [ + {value: 1, label: 'Nairobi', parent: [1, 12]}, + {value: 2, label: 'Kampala', parent: [2, 13]}, + {value: 3, label: 'Dar es Salaam', parent: [3, 14]}, + {value: 4, label: 'New York', parent: [7, 11]}, + {value: 6, label: 'Mexico City', parent: [9, 15]}, + {value: 7, label: 'Canberra', parent: [10, 16]}, + {value: 8, label: 'Paris', parent: [12, 10]}, + {value: 9, label: 'Berlin', parent: [13, 10]}, + {value: 10, label: 'Rome', parent: [14, 10]} + ], + continentSecond: [ + {value: 1, label: 'Africa'}, + {value: 2, label: 'Asia'}, + {value: 3, label: 'Europe'}, + {value: 4, label: 'North America'}, + {value: 5, label: 'Oceania'}, + {value: 6, label: 'South America'} + ], + countrySecond: [ + {value: 1, label: 'Kenya', parent: 1}, + {value: 2, label: 'Uganda', parent: 1}, + {value: 3, label: 'Tanzania', parent: 1}, + {value: 7, label: 'United States', parent: 4}, + {value: 9, label: 'Mexico', parent: 4}, + {value: 10, label: 'Australia', parent: 5}, + {value: 11, label: 'New Zealand', parent: 5}, + {value: 12, label: 'France', parent: 3}, + {value: 13, label: 'Germany', parent: 3}, + {value: 14, label: 'Italy', parent: 3}, + {value: 15, label: 'Spain', parent: 3} ] })} - layouts={{edit: ['edit']}} + layouts={{edit: ['edit', 'editSecond']}} toolbar />;