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

TJDB row edit drawer fix after click on expand (#10161)

Browse source 
Co-authored-by: blank0537 <anishsingh0537@gmail.com>
This commit is contained in:
Akshay 2024-06-24 20:10:49 +05:30 committed by GitHub
parent 2238b01cf7
commit faeb8f108c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 61 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/TooljetDatabase/Drawers/EditRowDrawer/index.jsx
View file

@ -13,6 +13,7 @@ const EditRowDrawer = ({
setIsEditRowDrawerOpen, setIsEditRowDrawerOpen,
selectedRowIds, selectedRowIds,
rows, rows,
isDirectRowExpand,
referencedColumnDetails, referencedColumnDetails,
setReferencedColumnDetails, setReferencedColumnDetails,
}) => { }) => {
@ -37,6 +38,7 @@ const EditRowDrawer = ({
return ( return (
<> <>
{!isDirectRowExpand && (
<ButtonSolid <ButtonSolid
variant="tertiary" variant="tertiary"
size="sm" size="sm"
@ -69,6 +71,7 @@ const EditRowDrawer = ({
Edit row Edit row
</span> </span>
</ButtonSolid> </ButtonSolid>
)}
<Drawer <Drawer
isOpen={isEditRowDrawerOpen} isOpen={isEditRowDrawerOpen}
onClose={() => setIsEditRowDrawerOpen(false)} onClose={() => setIsEditRowDrawerOpen(false)}

6
frontend/src/TooljetDatabase/Table/Header.jsx
View file

@ -29,6 +29,7 @@ const Header = ({
setIsEditRowDrawerOpen, setIsEditRowDrawerOpen,
setFilterEnable, setFilterEnable,
filterEnable, filterEnable,
isDirectRowExpand,
referencedColumnDetails, referencedColumnDetails,
setReferencedColumnDetails, setReferencedColumnDetails,
}) => { }) => {
@ -149,7 +150,7 @@ const Header = ({
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-8 align-items-center p-3 gap-1"> <div className="col-8 align-items-center p-3 gap-1">
<> <>
{Object.keys(selectedRowIds).length === 0 && ( {(isDirectRowExpand || Object.keys(selectedRowIds).length === 0) && (
<> <>
<AddNewDataPopOver <AddNewDataPopOver
disabled={false} disabled={false}
@ -199,11 +200,12 @@ const Header = ({
setIsEditRowDrawerOpen={setIsEditRowDrawerOpen} setIsEditRowDrawerOpen={setIsEditRowDrawerOpen}
selectedRowIds={selectedRowIds} selectedRowIds={selectedRowIds}
rows={rows} rows={rows}
isDirectRowExpand={isDirectRowExpand}
referencedColumnDetails={referencedColumnDetails} referencedColumnDetails={referencedColumnDetails}
setReferencedColumnDetails={setReferencedColumnDetails} setReferencedColumnDetails={setReferencedColumnDetails}
/> />
) : null} ) : null}
{Object.keys(selectedRowIds).length > 0 && ( {!isDirectRowExpand && Object.keys(selectedRowIds).length > 0 && (
<div> <div>
<ButtonSolid <ButtonSolid
variant="dangerTertiary" variant="dangerTertiary"

27
frontend/src/TooljetDatabase/Table/index.jsx
View file

@ -87,6 +87,7 @@ const Table = ({ collapseSidebar }) => {
const [nullValue, setNullValue] = useState(false); const [nullValue, setNullValue] = useState(false);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [isCellUpdateInProgress, setIsCellUpdateInProgress] = useState(false); const [isCellUpdateInProgress, setIsCellUpdateInProgress] = useState(false);
const [isDirectRowExpand, setIsDirectRowExpand] = useState(false);
const [referencedColumnDetails, setReferencedColumnDetails] = useState([]); const [referencedColumnDetails, setReferencedColumnDetails] = useState([]);
const [cachedOptions, setCahedOptions] = useState({}); const [cachedOptions, setCahedOptions] = useState({});
@ -225,6 +226,7 @@ const Table = ({ collapseSidebar }) => {
const newSelectedIdRef = {}; const newSelectedIdRef = {};
if (rowIdSelected) newSelectedIdRef[`${rowIdSelected}`] = true; if (rowIdSelected) newSelectedIdRef[`${rowIdSelected}`] = true;
setSelectedRowIds(newSelectedIdRef); setSelectedRowIds(newSelectedIdRef);
setIsDirectRowExpand(true);
return; return;
}; };
@ -401,6 +403,14 @@ const Table = ({ collapseSidebar }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedTable]); }, [selectedTable]);
useEffect(() => {
if (!isEditRowDrawerOpen && isDirectRowExpand) {
setSelectedRowIds({});
setIsDirectRowExpand(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isEditRowDrawerOpen]);
const tableData = React.useMemo( const tableData = React.useMemo(
() => (loading ? Array(10).fill({}) : selectedTableData), () => (loading ? Array(10).fill({}) : selectedTableData),
[loading, selectedTableData] [loading, selectedTableData]
@ -1083,6 +1093,8 @@ const Table = ({ collapseSidebar }) => {
setIsEditRowDrawerOpen={setIsEditRowDrawerOpen} setIsEditRowDrawerOpen={setIsEditRowDrawerOpen}
setFilterEnable={setFilterEnable} setFilterEnable={setFilterEnable}
filterEnable={filterEnable} filterEnable={filterEnable}
isDirectRowExpand={isDirectRowExpand}
setIsDirectRowExpand={setIsDirectRowExpand}
referencedColumnDetails={referencedColumnDetails} referencedColumnDetails={referencedColumnDetails}
setReferencedColumnDetails={setReferencedColumnDetails} setReferencedColumnDetails={setReferencedColumnDetails}
// getForeignKeyDetails={getForeignKeyDetails} // getForeignKeyDetails={getForeignKeyDetails}
@ -1156,15 +1168,20 @@ const Table = ({ collapseSidebar }) => {
<div> <div>
<IndeterminateCheckbox <IndeterminateCheckbox
indeterminate={ indeterminate={
Object.keys(selectedRowIds).length > 0 && Object.keys(selectedRowIds).length < rows.length isDirectRowExpand
? false
: Object.keys(selectedRowIds).length > 0 && Object.keys(selectedRowIds).length < rows.length
}
checked={
isDirectRowExpand ? false : Object.keys(selectedRowIds).length === rows.length && rows.length
} }
checked={Object.keys(selectedRowIds).length === rows.length && rows.length}
onChange={() => toggleSelectOrDeSelectAllRows(rows.length)} onChange={() => toggleSelectOrDeSelectAllRows(rows.length)}
style={{ style={{
backgroundColor: `${ backgroundColor: `${
(Object.keys(selectedRowIds).length > 0 && (!isDirectRowExpand &&
Object.keys(selectedRowIds).length > 0 &&
Object.keys(selectedRowIds).length < rows.length) || Object.keys(selectedRowIds).length < rows.length) ||
(Object.keys(selectedRowIds).length === rows.length && rows.length) (!isDirectRowExpand && Object.keys(selectedRowIds).length === rows.length && rows.length)
? '#3E63DD' ? '#3E63DD'
: 'var(--base)' : 'var(--base)'
}`, }`,
@ -1263,7 +1280,7 @@ const Table = ({ collapseSidebar }) => {
}} }}
> >
<IndeterminateCheckbox <IndeterminateCheckbox
checked={selectedRowIds[row.id] ?? false} checked={!isDirectRowExpand ? selectedRowIds[row.id] ?? false : false}
onChange={() => toggleRowSelection(row.id)} onChange={() => toggleRowSelection(row.id)}
/> />