Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added toggle for showing 'All options selected' label in multiselect

Browse source
This commit is contained in:
devanshu052000 2025-04-22 22:49:09 +05:30
parent d12143d2b9
commit 30593d1f05
5 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
View file

@ -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}}' },

2
frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
View file

@ -36,7 +36,7 @@ const CustomValueContainer = ({ children, ...props }) => {
</Placeholder>
) : (
<span className="text-truncate" {...props} id="options" style={{ maxWidth: valueContainerWidth }}>
{isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
{selectProps?.showAllSelectedLabel && isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
</span>
)}
{/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus

2
frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
View file

@ -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);

7
frontend/src/Editor/WidgetManager/configs/multiselectV2.js
View file

@ -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}}' },

7
server/src/modules/apps/services/widget-config/multiselectV2.js
View file

@ -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}}' },