diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx index ff02e3158e..07430d48da 100644 --- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx +++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx @@ -83,76 +83,21 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) = } } - const RenderFilterFields = ({ column, operator, value, id }) => { - const displayColumns = columns.map(({ accessor }) => ({ - value: accessor, - label: accessor, - })); + const displayColumns = columns.map(({ accessor }) => ({ + value: accessor, + label: accessor, + })); - const handleColumnChange = (selectedOption) => { - updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ column: selectedOption } }); - }; + const handleColumnChange = (id, selectedOption) => { + updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ column: selectedOption } }); + }; - const handleOperatorChange = (selectedOption) => { - updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ operator: selectedOption } }); - }; + const handleOperatorChange = (id, selectedOption) => { + updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ operator: selectedOption } }); + }; - const handleValueChange = (newValue) => { - updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ value: newValue } }); - }; - - return ( -
-
-
- -
-
- handleValueChange(newValue)} - /> -
-
- removeFilterConditionPair(id)} - width="12" - height="14" - viewBox="0 0 12 14" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - - -
-
-
- ); + const handleValueChange = (id, newValue) => { + updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ value: newValue } }); }; return ( @@ -163,7 +108,62 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
{Object.values(deleteRowsOptions?.where_filters || {}).map((filter) => ( - +
+
+
+ handleOperatorChange(filter.id)} + /> +
+
+ handleValueChange(newValue, filter.id)} + /> +
+
+ removeFilterConditionPair(filter.id)} + width="12" + height="14" + viewBox="0 0 12 14" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + + +
+
+
))}
} } - const RenderFilterFields = ({ column, operator, value, id }) => { - const displayColumns = columns.map(({ accessor }) => ({ - value: accessor, - label: accessor, - })); - - const handleColumnChange = (selectedOption) => { - updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ column: selectedOption } }); - }; - - const handleOperatorChange = (selectedOption) => { - updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ operator: selectedOption } }); - }; - - const handleValueChange = (newValue) => { - updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ value: newValue } }); - }; - - return ( -
-
-
- -
-
- handleValueChange(newValue)} - /> -
-
- removeFilterConditionPair(id)} - width="12" - height="14" - viewBox="0 0 12 14" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - - -
-
-
- ); - }; - const RenderSortFields = ({ column, order, id }) => { const orders = [ { value: 'asc', label: 'Ascending' }, @@ -251,6 +179,22 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) => const updateLimitOptions = (limit) => { if (listRowsOptions?.limit ?? '' !== limit) setListRowsOptions({ ...listRowsOptions, ...{ limit } }); }; + const displayColumns = columns.map(({ accessor }) => ({ + value: accessor, + label: accessor, + })); + + const handleColumnChange = (id, selectedOption) => { + updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ column: selectedOption } }); + }; + + const handleOperatorChange = (id, selectedOption) => { + updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ operator: selectedOption } }); + }; + + const handleValueChange = (id, newValue) => { + updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ value: newValue } }); + }; return (
@@ -261,7 +205,62 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
{Object.values(listRowsOptions?.where_filters || {}).map((filter) => ( - +
+
+
+ handleOperatorChange(filter.id)} + /> +
+
+ handleValueChange(filter.id, newValue)} + /> +
+
+ removeFilterConditionPair(filter.id)} + width="12" + height="14" + viewBox="0 0 12 14" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + + +
+
+
))}
{ - const displayColumns = columns.map(({ accessor }) => ({ - value: accessor, - label: accessor, - })); - - const handleColumnChange = (selectedOption) => { - updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ column: selectedOption } }); - }; - - const handleOperatorChange = (selectedOption) => { - updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ operator: selectedOption } }); - }; - - const handleValueChange = (newValue) => { - updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ value: newValue } }); - }; - - return ( -
-
-
- -
-
- handleValueChange(newValue)} - /> -
-
- removeFilterConditionPair(id)} - width="12" - height="14" - viewBox="0 0 12 14" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - - -
-
-
- ); - }; - const RenderColumnOptions = ({ column, value, id }) => { const filteredColumns = columns.filter(({ isPrimaryKey }) => !isPrimaryKey); const displayColumns = filteredColumns.map(({ accessor }) => ({ @@ -262,6 +190,22 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
); }; + const displayColumns = columns.map(({ accessor }) => ({ + value: accessor, + label: accessor, + })); + + const handleColumnChange = (id, selectedOption) => { + updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ column: selectedOption } }); + }; + + const handleOperatorChange = (id, selectedOption) => { + updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ operator: selectedOption } }); + }; + + const handleValueChange = (id, newValue) => { + updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ value: newValue } }); + }; return (
@@ -271,7 +215,62 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
{Object.values(updateRowsOptions?.where_filters || {}).map((filter) => ( - +
+
+
+ handleOperatorChange(filter.id)} + /> +
+
+ handleValueChange(filter.id, newValue)} + /> +
+
+ removeFilterConditionPair(filter.id)} + width="12" + height="14" + viewBox="0 0 12 14" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + + +
+
+
))}