From 30593d1f0599a8b019b895d73bf91979b68b1b0b Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Tue, 22 Apr 2025 22:49:09 +0530 Subject: [PATCH 1/3] Added toggle for showing 'All options selected' label in multiselect --- .../src/AppBuilder/WidgetManager/widgets/multiselectV2.js | 7 +++++++ .../Components/MultiselectV2/CustomValueContainer.jsx | 2 +- .../src/Editor/Components/MultiselectV2/MultiselectV2.jsx | 2 ++ frontend/src/Editor/WidgetManager/configs/multiselectV2.js | 7 +++++++ .../modules/apps/services/widget-config/multiselectV2.js | 7 +++++++ 5 files changed, 24 insertions(+), 1 deletion(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js index 4ab4af57ce..6ad8e6f7b5 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js @@ -142,6 +142,12 @@ export const multiselectV2Config = { accordian: 'Options', isFxNotRequired: true, }, + showAllSelectedLabel: { + type: 'toggle', + displayName: 'Show all options selected label', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -327,6 +333,7 @@ export const multiselectV2Config = { optionsLoadingState: { value: '{{false}}' }, sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, + showAllSelectedLabel: { value: '{{true}}' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, loadingState: { value: '{{false}}' }, diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx index 2901abc106..b648684fc2 100644 --- a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx @@ -36,7 +36,7 @@ const CustomValueContainer = ({ children, ...props }) => { ) : ( - {isAllOptionsSelected ? 'All items are selected.' : values.join(', ')} + {selectProps?.showAllSelectedLabel && isAllOptionsSelected ? 'All items are selected.' : values.join(', ')} )} {/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index 7d5109edee..1d9ab6bdc9 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -38,6 +38,7 @@ export const MultiselectV2 = ({ loadingState: multiSelectLoadingState, optionsLoadingState, sort, + showAllSelectedLabel, } = properties; const { selectedTextColor, @@ -521,6 +522,7 @@ export const MultiselectV2 = ({ doShowIcon={iconVisibility} containerRef={valueContainerRef} showAllOption={showAllOption} + showAllSelectedLabel={showAllSelectedLabel} isSelectAllSelected={isSelectAllSelected} setIsSelectAllSelected={(value) => { setIsSelectAllSelected(value); diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js index b603db9c4a..5bff71c29a 100644 --- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js +++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js @@ -142,6 +142,12 @@ export const multiselectV2Config = { accordian: 'Options', isFxNotRequired: true, }, + showAllSelectedLabel: { + type: 'toggle', + displayName: 'Show all options selected label', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -327,6 +333,7 @@ export const multiselectV2Config = { optionsLoadingState: { value: '{{false}}' }, sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, + showAllSelectedLabel: { value: '{{true}}' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, loadingState: { value: '{{false}}' }, diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js index 4ab4af57ce..6ad8e6f7b5 100644 --- a/server/src/modules/apps/services/widget-config/multiselectV2.js +++ b/server/src/modules/apps/services/widget-config/multiselectV2.js @@ -142,6 +142,12 @@ export const multiselectV2Config = { accordian: 'Options', isFxNotRequired: true, }, + showAllSelectedLabel: { + type: 'toggle', + displayName: 'Show all options selected label', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -327,6 +333,7 @@ export const multiselectV2Config = { optionsLoadingState: { value: '{{false}}' }, sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, + showAllSelectedLabel: { value: '{{true}}' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, loadingState: { value: '{{false}}' }, From c9a4dfb8a3ed0398d208dea57754b85a9af06a4d Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 23 Apr 2025 22:01:00 +0530 Subject: [PATCH 2/3] Fixed position and label of toggle --- .../RightSideBar/Inspector/Components/Select.jsx | 11 +++++++++++ .../WidgetManager/widgets/multiselectV2.js | 12 ++++++------ .../Editor/WidgetManager/configs/multiselectV2.js | 12 ++++++------ .../apps/services/widget-config/multiselectV2.js | 12 ++++++------ 4 files changed, 29 insertions(+), 18 deletions(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx index d250a4342e..71d8f9ead8 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx @@ -539,6 +539,17 @@ export function Select({ componentMeta, darkMode, ...restProps }) { currentState, allComponents )} + {isMultiSelect && + renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + 'showAllSelectedLabel', + 'properties', + currentState, + allComponents + )} {isSortingEnabled && renderElement( component, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js index 6ad8e6f7b5..0f130aa130 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js @@ -121,6 +121,12 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + showAllSelectedLabel: { + type: 'toggle', + displayName: "Show 'All items are selected.'", + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'Options', + }, optionsLoadingState: { type: 'toggle', displayName: 'Options loading state', @@ -142,12 +148,6 @@ export const multiselectV2Config = { accordian: 'Options', isFxNotRequired: true, }, - showAllSelectedLabel: { - type: 'toggle', - displayName: 'Show all options selected label', - validation: { schema: { type: 'boolean' }, defaultValue: true }, - section: 'additionalActions', - }, loadingState: { type: 'toggle', displayName: 'Loading state', diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js index 5bff71c29a..c811bc7c65 100644 --- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js +++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js @@ -121,6 +121,12 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + showAllSelectedLabel: { + type: 'toggle', + displayName: "Show 'All items are selected.'", + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'Options', + }, optionsLoadingState: { type: 'toggle', displayName: 'Options loading state', @@ -142,12 +148,6 @@ export const multiselectV2Config = { accordian: 'Options', isFxNotRequired: true, }, - showAllSelectedLabel: { - type: 'toggle', - displayName: 'Show all options selected label', - validation: { schema: { type: 'boolean' }, defaultValue: true }, - section: 'additionalActions', - }, loadingState: { type: 'toggle', displayName: 'Loading state', diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js index 6ad8e6f7b5..0f130aa130 100644 --- a/server/src/modules/apps/services/widget-config/multiselectV2.js +++ b/server/src/modules/apps/services/widget-config/multiselectV2.js @@ -121,6 +121,12 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + showAllSelectedLabel: { + type: 'toggle', + displayName: "Show 'All items are selected.'", + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'Options', + }, optionsLoadingState: { type: 'toggle', displayName: 'Options loading state', @@ -142,12 +148,6 @@ export const multiselectV2Config = { accordian: 'Options', isFxNotRequired: true, }, - showAllSelectedLabel: { - type: 'toggle', - displayName: 'Show all options selected label', - validation: { schema: { type: 'boolean' }, defaultValue: true }, - section: 'additionalActions', - }, loadingState: { type: 'toggle', displayName: 'Loading state', From 8beb841f950b9c3e4fb5eb722b077aa789e44546 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 23 Apr 2025 22:04:54 +0530 Subject: [PATCH 3/3] Changed toggle label --- frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js | 2 +- frontend/src/Editor/WidgetManager/configs/multiselectV2.js | 2 +- server/src/modules/apps/services/widget-config/multiselectV2.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js index 0f130aa130..ae962309e6 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js @@ -123,7 +123,7 @@ export const multiselectV2Config = { }, showAllSelectedLabel: { type: 'toggle', - displayName: "Show 'All items are selected.'", + displayName: 'Show "All items are selected"', validation: { schema: { type: 'boolean' }, defaultValue: true }, accordian: 'Options', }, diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js index c811bc7c65..08b90a71f1 100644 --- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js +++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js @@ -123,7 +123,7 @@ export const multiselectV2Config = { }, showAllSelectedLabel: { type: 'toggle', - displayName: "Show 'All items are selected.'", + displayName: 'Show "All items are selected"', validation: { schema: { type: 'boolean' }, defaultValue: true }, accordian: 'Options', }, diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js index 0f130aa130..ae962309e6 100644 --- a/server/src/modules/apps/services/widget-config/multiselectV2.js +++ b/server/src/modules/apps/services/widget-config/multiselectV2.js @@ -123,7 +123,7 @@ export const multiselectV2Config = { }, showAllSelectedLabel: { type: 'toggle', - displayName: "Show 'All items are selected.'", + displayName: 'Show "All items are selected"', validation: { schema: { type: 'boolean' }, defaultValue: true }, accordian: 'Options', },