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

Added option for sorting in the properties panel.

Browse source
This commit is contained in:
devanshu052000 2025-02-19 01:34:30 +05:30
parent 87b9f28193
commit 1e1ebf6f01
7 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
View file

@ -32,6 +32,8 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
const isDynamicOptionsEnabled = getResolvedValue(component?.component?.definition?.properties?.advanced?.value);
const isSortingEnabled = componentMeta?.properties['sort'] ?? false;
const constructOptions = () => {
let optionsValue = component?.component?.definition?.properties?.options?.value;
if (!Array.isArray(optionsValue)) {
@ -512,6 +514,17 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
currentState,
allComponents
)}
{isSortingEnabled &&
renderElement(
component,
componentMeta,
paramUpdated,
dataQueries,
'sort',
'properties',
currentState,
allComponents
)}
</>
),
});

13
frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js
View file

@ -63,6 +63,18 @@ export const dropdownV2Config = {
},
accordian: 'Options',
},
sort: {
type: 'switch',
displayName: 'Sort options',
validation: { schema: { type: 'string' }, defaultValue: 'none' },
options: [
{ displayName: 'None', value: 'none' },
{ displayName: 'a-z', value: 'asc' },
{ displayName: 'z-a', value: 'desc' },
],
accordian: 'Options',
isFxNotRequired: true,
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -301,6 +313,7 @@ export const dropdownV2Config = {
label: { value: 'Select' },
value: { value: '{{"2"}}' },
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'none' },
placeholder: { value: 'Select an option' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },

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

@ -130,6 +130,18 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
sort: {
type: 'switch',
displayName: 'Sort options',
validation: { schema: { type: 'string' }, defaultValue: 'none' },
options: [
{ displayName: 'None', value: 'none' },
{ displayName: 'a-z', value: 'asc' },
{ displayName: 'z-a', value: 'desc' },
],
accordian: 'Options',
isFxNotRequired: true,
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -313,6 +325,7 @@ export const multiselectV2Config = {
advanced: { value: `{{false}}` },
showAllOption: { value: '{{false}}' },
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'none' },
placeholder: { value: 'Select the options' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },

13
frontend/src/Editor/WidgetManager/configs/dropdownV2.js
View file

@ -63,6 +63,18 @@ export const dropdownV2Config = {
},
accordian: 'Options',
},
sort: {
type: 'switch',
displayName: 'Sort options',
validation: { schema: { type: 'string' }, defaultValue: 'none' },
options: [
{ displayName: 'None', value: 'none' },
{ displayName: 'a-z', value: 'asc' },
{ displayName: 'z-a', value: 'desc' },
],
accordian: 'Options',
isFxNotRequired: true,
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -301,6 +313,7 @@ export const dropdownV2Config = {
label: { value: 'Select' },
value: { value: '{{"2"}}' },
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'none' },
placeholder: { value: 'Select an option' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },

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

@ -130,6 +130,18 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
sort: {
type: 'switch',
displayName: 'Sort options',
validation: { schema: { type: 'string' }, defaultValue: 'none' },
options: [
{ displayName: 'None', value: 'none' },
{ displayName: 'a-z', value: 'asc' },
{ displayName: 'z-a', value: 'desc' },
],
accordian: 'Options',
isFxNotRequired: true,
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -313,6 +325,7 @@ export const multiselectV2Config = {
advanced: { value: `{{false}}` },
showAllOption: { value: '{{false}}' },
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'none' },
placeholder: { value: 'Select the options' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },

13
server/src/modules/apps/services/widget-config/dropdownV2.js
View file

@ -63,6 +63,18 @@ export const dropdownV2Config = {
},
accordian: 'Options',
},
sort: {
type: 'switch',
displayName: 'Sort options',
validation: { schema: { type: 'string' }, defaultValue: 'none' },
options: [
{ displayName: 'None', value: 'none' },
{ displayName: 'a-z', value: 'asc' },
{ displayName: 'z-a', value: 'desc' },
],
accordian: 'Options',
isFxNotRequired: true,
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -301,6 +313,7 @@ export const dropdownV2Config = {
label: { value: 'Select' },
value: { value: '{{"2"}}' },
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'none' },
placeholder: { value: 'Select an option' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },

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

@ -130,6 +130,18 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
sort: {
type: 'switch',
displayName: 'Sort options',
validation: { schema: { type: 'string' }, defaultValue: 'none' },
options: [
{ displayName: 'None', value: 'none' },
{ displayName: 'a-z', value: 'asc' },
{ displayName: 'z-a', value: 'desc' },
],
accordian: 'Options',
isFxNotRequired: true,
},
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@ -313,6 +325,7 @@ export const multiselectV2Config = {
advanced: { value: `{{false}}` },
showAllOption: { value: '{{false}}' },
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'none' },
placeholder: { value: 'Select the options' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },