mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-06 06:48:21 +00:00
Bugfix :: Popover gets removed when cursor goes to canvas (#5246)
* fix :: popover removal issue fix in tooljet db query manager * cleanup * cleanup
This commit is contained in:
Kiran Ashok
GitHub
parent
2986f014d2
commit
313d3bbd83
3 changed files with 212 additions and 214 deletions
|
|
@ -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 (
|
||||
<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 handleValueChange = (id, newValue) => {
|
||||
updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ value: newValue } });
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -163,7 +108,62 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
|
||||
<div className="field-container">
|
||||
{Object.values(deleteRowsOptions?.where_filters || {}).map((filter) => (
|
||||
<RenderFilterFields key={filter.id} {...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>
|
||||
))}
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -115,78 +115,6 @@ 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' },
|
||||
|
|
@ -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 (
|
||||
<div>
|
||||
|
|
@ -261,7 +205,62 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
|
|||
</label>
|
||||
<div className="field-container">
|
||||
{Object.values(listRowsOptions?.where_filters || {}).map((filter) => (
|
||||
<RenderFilterFields key={filter.id} {...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>
|
||||
))}
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -111,78 +111,6 @@ 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 }) => ({
|
||||
|
|
@ -262,6 +190,22 @@ 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">
|
||||
|
|
@ -271,7 +215,62 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
|
|||
|
||||
<div className="field-container">
|
||||
{Object.values(updateRowsOptions?.where_filters || {}).map((filter) => (
|
||||
<RenderFilterFields key={filter.id} {...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>
|
||||
))}
|
||||
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in a new issue