mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-06 06:48:21 +00:00
Revert "Bugfix :: Popover gets removed when cursor goes to canvas (#5… (#5271)
* Revert "Bugfix :: Popover gets removed when cursor goes to canvas (#5246)"
This reverts commit 313d3bbd83.
* hinter closes on on mouse entering canvas
This commit is contained in:
Arpit
GitHub
parent
56f7bca20e
commit
6131c25bea
4 changed files with 222 additions and 220 deletions
|
|
@ -7,7 +7,7 @@ import Select from '@/_ui/Select';
|
|||
import { uniqueId } from 'lodash';
|
||||
import { useMounted } from '@/_hooks/use-mount';
|
||||
|
||||
export const CreateRow = ({ currentState, optionchanged, options, darkMode }) => {
|
||||
export const CreateRow = React.memo(({ currentState, optionchanged, options, darkMode }) => {
|
||||
const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
|
||||
const [columnOptions, setColumnOptions] = useState(options['create_row'] || {});
|
||||
|
||||
|
|
@ -178,4 +178,4 @@ export const CreateRow = ({ currentState, optionchanged, options, darkMode }) =>
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Select from '@/_ui/Select';
|
|||
import { operators } from '@/TooljetDatabase/constants';
|
||||
import { useMounted } from '@/_hooks/use-mount';
|
||||
|
||||
export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) => {
|
||||
export const DeleteRows = React.memo(({ currentState, optionchanged, options, darkMode }) => {
|
||||
const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
|
||||
const [deleteRowsOptions, setDeleteRowsOptions] = useState(options['delete_rows'] || {});
|
||||
|
||||
|
|
@ -83,21 +83,76 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
}
|
||||
}
|
||||
|
||||
const displayColumns = columns.map(({ accessor }) => ({
|
||||
value: accessor,
|
||||
label: accessor,
|
||||
}));
|
||||
const RenderFilterFields = ({ column, operator, value, id }) => {
|
||||
const displayColumns = columns.map(({ accessor }) => ({
|
||||
value: accessor,
|
||||
label: accessor,
|
||||
}));
|
||||
|
||||
const handleColumnChange = (id, selectedOption) => {
|
||||
updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ column: selectedOption } });
|
||||
};
|
||||
const handleColumnChange = (selectedOption) => {
|
||||
updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ column: selectedOption } });
|
||||
};
|
||||
|
||||
const handleOperatorChange = (id, selectedOption) => {
|
||||
updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
|
||||
};
|
||||
const handleOperatorChange = (selectedOption) => {
|
||||
updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
|
||||
};
|
||||
|
||||
const handleValueChange = (id, newValue) => {
|
||||
updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ value: newValue } });
|
||||
const handleValueChange = (newValue) => {
|
||||
updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ value: newValue } });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-1 row-container">
|
||||
<div className="d-flex fields-container">
|
||||
<div className="field col">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select column"
|
||||
value={column}
|
||||
options={displayColumns}
|
||||
onChange={handleColumnChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col mx-1">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select operation"
|
||||
value={operator}
|
||||
options={operators}
|
||||
onChange={handleOperatorChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col-4">
|
||||
<CodeHinter
|
||||
currentState={currentState}
|
||||
initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
|
||||
className="codehinter-plugins"
|
||||
theme={darkMode ? 'monokai' : 'default'}
|
||||
height={'32px'}
|
||||
placeholder="key"
|
||||
onChange={(newValue) => handleValueChange(newValue)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-1 cursor-pointer m-1 mr-2">
|
||||
<svg
|
||||
onClick={() => removeFilterConditionPair(id)}
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 12 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
|
||||
fill="#E54D2E"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -108,62 +163,7 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
|
||||
<div className="field-container">
|
||||
{Object.values(deleteRowsOptions?.where_filters || {}).map((filter) => (
|
||||
<div className="mt-1 row-container" key={filter.id}>
|
||||
<div className="d-flex fields-container">
|
||||
<div className="field col">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select column"
|
||||
value={filter.column}
|
||||
options={displayColumns}
|
||||
onChange={() => handleColumnChange(filter.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col mx-1">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select operation"
|
||||
value={filter.operator}
|
||||
options={operators}
|
||||
onChange={() => handleOperatorChange(filter.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col-4">
|
||||
<CodeHinter
|
||||
currentState={currentState}
|
||||
initialValue={
|
||||
filter.value
|
||||
? typeof filter.value === 'string'
|
||||
? filter.value
|
||||
: JSON.stringify(filter.value)
|
||||
: filter.value
|
||||
}
|
||||
className="codehinter-plugins"
|
||||
theme={darkMode ? 'monokai' : 'default'}
|
||||
height={'32px'}
|
||||
placeholder="key"
|
||||
onChange={(newValue) => handleValueChange(newValue, filter.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-1 cursor-pointer m-1 mr-2">
|
||||
<svg
|
||||
onClick={() => removeFilterConditionPair(filter.id)}
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 12 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
|
||||
fill="#E54D2E"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RenderFilterFields key={filter.id} {...filter} />
|
||||
))}
|
||||
|
||||
<div
|
||||
|
|
@ -199,4 +199,4 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Select from '@/_ui/Select';
|
|||
import { operators } from '@/TooljetDatabase/constants';
|
||||
import { useMounted } from '@/_hooks/use-mount';
|
||||
|
||||
export const ListRows = ({ currentState, optionchanged, options, darkMode }) => {
|
||||
export const ListRows = React.memo(({ currentState, optionchanged, options, darkMode }) => {
|
||||
const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
|
||||
const [listRowsOptions, setListRowsOptions] = useState(() => options['list_rows'] || {});
|
||||
|
||||
|
|
@ -115,6 +115,78 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
|
|||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="mt-1 row-container">
|
||||
<div className="d-flex fields-container">
|
||||
<div className="field col">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select column"
|
||||
value={column}
|
||||
options={displayColumns}
|
||||
onChange={handleColumnChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col mx-1">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select operation"
|
||||
value={operator}
|
||||
options={operators}
|
||||
onChange={handleOperatorChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col-4">
|
||||
<CodeHinter
|
||||
currentState={currentState}
|
||||
initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
|
||||
className="codehinter-plugins"
|
||||
theme={darkMode ? 'monokai' : 'default'}
|
||||
height={'32px'}
|
||||
placeholder="key"
|
||||
onChange={(newValue) => handleValueChange(newValue)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-1 cursor-pointer m-1 mr-2">
|
||||
<svg
|
||||
onClick={() => removeFilterConditionPair(id)}
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 12 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
|
||||
fill="#E54D2E"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderSortFields = ({ column, order, id }) => {
|
||||
const orders = [
|
||||
{ value: 'asc', label: 'Ascending' },
|
||||
|
|
@ -179,22 +251,6 @@ 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 (
|
||||
<div>
|
||||
|
|
@ -205,62 +261,7 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
|
|||
</label>
|
||||
<div className="field-container">
|
||||
{Object.values(listRowsOptions?.where_filters || {}).map((filter) => (
|
||||
<div className="mt-1 row-container" key={filter.id}>
|
||||
<div className="d-flex fields-container">
|
||||
<div className="field col">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select column"
|
||||
value={filter.column}
|
||||
options={displayColumns}
|
||||
onChange={() => handleColumnChange(filter.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col mx-1">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select operation"
|
||||
value={filter.operator}
|
||||
options={operators}
|
||||
onChange={() => handleOperatorChange(filter.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col-4">
|
||||
<CodeHinter
|
||||
currentState={currentState}
|
||||
initialValue={
|
||||
filter.value
|
||||
? typeof filter.value === 'string'
|
||||
? filter.value
|
||||
: JSON.stringify(filter.value)
|
||||
: filter.value
|
||||
}
|
||||
className="codehinter-plugins"
|
||||
theme={darkMode ? 'monokai' : 'default'}
|
||||
height={'32px'}
|
||||
placeholder="key"
|
||||
onChange={(newValue) => handleValueChange(filter.id, newValue)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-1 cursor-pointer m-1 mr-2">
|
||||
<svg
|
||||
onClick={() => removeFilterConditionPair(filter.id)}
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 12 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
|
||||
fill="#E54D2E"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RenderFilterFields key={filter.id} {...filter} />
|
||||
))}
|
||||
|
||||
<div
|
||||
|
|
@ -326,4 +327,4 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { operators } from '@/TooljetDatabase/constants';
|
|||
import { uniqueId } from 'lodash';
|
||||
import { useMounted } from '@/_hooks/use-mount';
|
||||
|
||||
export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) => {
|
||||
export const UpdateRows = React.memo(({ currentState, optionchanged, options, darkMode }) => {
|
||||
const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
|
||||
const [updateRowsOptions, setUpdateRowsOptions] = useState(
|
||||
options['update_rows'] || { columns: {}, where_filters: {} }
|
||||
|
|
@ -111,6 +111,78 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
handleWhereFiltersChange(updatedFiltersObject);
|
||||
}
|
||||
|
||||
const RenderFilterFields = ({ column, operator, value, id }) => {
|
||||
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 (
|
||||
<div className="mt-1 row-container">
|
||||
<div className="d-flex fields-container">
|
||||
<div className="field col">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select column"
|
||||
value={column}
|
||||
options={displayColumns}
|
||||
onChange={handleColumnChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col mx-1">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select operation"
|
||||
value={operator}
|
||||
options={operators}
|
||||
onChange={handleOperatorChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col-4">
|
||||
<CodeHinter
|
||||
currentState={currentState}
|
||||
initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
|
||||
className="codehinter-plugins"
|
||||
theme={darkMode ? 'monokai' : 'default'}
|
||||
height={'32px'}
|
||||
placeholder="key"
|
||||
onChange={(newValue) => handleValueChange(newValue)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-1 cursor-pointer m-1 mr-2">
|
||||
<svg
|
||||
onClick={() => removeFilterConditionPair(id)}
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 12 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
|
||||
fill="#E54D2E"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderColumnOptions = ({ column, value, id }) => {
|
||||
const filteredColumns = columns.filter(({ isPrimaryKey }) => !isPrimaryKey);
|
||||
const displayColumns = filteredColumns.map(({ accessor }) => ({
|
||||
|
|
@ -190,22 +262,6 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
</div>
|
||||
);
|
||||
};
|
||||
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 (
|
||||
<div className="tab-content-wrapper tj-db-field-wrapper">
|
||||
|
|
@ -215,62 +271,7 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
|
||||
<div className="field-container">
|
||||
{Object.values(updateRowsOptions?.where_filters || {}).map((filter) => (
|
||||
<div className="mt-1 row-container" key={filter.id}>
|
||||
<div className="d-flex fields-container">
|
||||
<div className="field col">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select column"
|
||||
value={filter.column}
|
||||
options={displayColumns}
|
||||
onChange={() => handleColumnChange(filter.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col mx-1">
|
||||
<Select
|
||||
useMenuPortal={true}
|
||||
placeholder="Select operation"
|
||||
value={filter.operator}
|
||||
options={operators}
|
||||
onChange={() => handleOperatorChange(filter.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="field col-4">
|
||||
<CodeHinter
|
||||
currentState={currentState}
|
||||
initialValue={
|
||||
filter.value
|
||||
? typeof filter.value === 'string'
|
||||
? filter.value
|
||||
: JSON.stringify(filter.value)
|
||||
: filter.value
|
||||
}
|
||||
className="codehinter-plugins"
|
||||
theme={darkMode ? 'monokai' : 'default'}
|
||||
height={'32px'}
|
||||
placeholder="key"
|
||||
onChange={(newValue) => handleValueChange(filter.id, newValue)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-1 cursor-pointer m-1 mr-2">
|
||||
<svg
|
||||
onClick={() => removeFilterConditionPair(filter.id)}
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 12 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
|
||||
fill="#E54D2E"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RenderFilterFields key={filter.id} {...filter} />
|
||||
))}
|
||||
|
||||
<div
|
||||
|
|
@ -313,4 +314,4 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue