Revert "Feat table resize and reorder (#2641)" on screen QueryParams

This partially reverts commit 2191550061.
This commit is contained in:
busy-panda 2024-09-10 10:37:50 +02:00
parent 53d404f649
commit f80d7ff224
2 changed files with 73 additions and 73 deletions

View File

@ -22,12 +22,14 @@ const Wrapper = styled.div`
} }
td { td {
padding: 6px 10px; padding: 6px 10px;
}
&:nth-child(1) {
width: 30%;
} }
td { &:nth-child(3) {
&:nth-child(1) { width: 70px;
padding: 0 0 0 8px; }
} }
} }

View File

@ -7,17 +7,14 @@ import { useDispatch } from 'react-redux';
import { useTheme } from 'providers/Theme'; import { useTheme } from 'providers/Theme';
import { import {
addQueryParam, addQueryParam,
updateQueryParam,
deleteQueryParam, deleteQueryParam,
moveQueryParam, updatePathParam,
updatePathParam updateQueryParam
} from 'providers/ReduxStore/slices/collections'; } from 'providers/ReduxStore/slices/collections';
import SingleLineEditor from 'components/SingleLineEditor'; import SingleLineEditor from 'components/SingleLineEditor';
import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions'; import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
import Table from 'components/Table/index';
import ReorderTable from 'components/ReorderTable';
const QueryParams = ({ item, collection }) => { const QueryParams = ({ item, collection }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -103,33 +100,24 @@ const QueryParams = ({ item, collection }) => {
); );
}; };
const handleParamDrag = ({ updateReorderedItem }) => {
dispatch(
moveQueryParam({
collectionUid: collection.uid,
itemUid: item.uid,
updateReorderedItem
})
);
};
return ( return (
<StyledWrapper className="w-full flex flex-col absolute"> <StyledWrapper className="w-full flex flex-col">
<div className="flex-1 mt-2"> <div className="flex-1 mt-2">
<div className="mb-1 title text-xs">Query</div> <div className="mb-2 title text-xs">Query</div>
<table>
<Table <thead>
headers={[ <tr>
{ name: 'Name', accessor: 'name', width: '31%' }, <td>Name</td>
{ name: 'Path', accessor: 'path', width: '56%' }, <td>Value</td>
{ name: '', accessor: '', width: '13%' } <td></td>
]} </tr>
> </thead>
<ReorderTable updateReorderedItem={handleParamDrag}> <tbody>
{queryParams && queryParams.length {queryParams && queryParams.length
? queryParams.map((param, index) => ( ? queryParams.map((param, index) => {
<tr key={param.uid} data-uid={param.uid}> return (
<td className="flex relative"> <tr key={param.uid}>
<td>
<input <input
type="text" type="text"
autoComplete="off" autoComplete="off"
@ -146,10 +134,20 @@ const QueryParams = ({ item, collection }) => {
value={param.value} value={param.value}
theme={storedTheme} theme={storedTheme}
onSave={onSave} onSave={onSave}
onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'value')} onChange={(newValue) =>
handleQueryParamChange(
{
target: {
value: newValue
}
},
param,
'value'
)
}
onRun={handleRun} onRun={handleRun}
collection={collection} collection={collection}
variablesAutocomplete={true} item={item}
/> />
</td> </td>
<td> <td>
@ -167,11 +165,11 @@ const QueryParams = ({ item, collection }) => {
</div> </div>
</td> </td>
</tr> </tr>
)) );
})
: null} : null}
</ReorderTable> </tbody>
</Table> </table>
<button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddQueryParam}> <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddQueryParam}>
+&nbsp;<span>Add Param</span> +&nbsp;<span>Add Param</span>
</button> </button>