s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ColumnFilterButton correction and table DOM structure correction

Browse Source
This commit is contained in:
Mateusz Tylka 2023-08-11 13:10:56 +02:00
parent 6c4da8c181
commit 836ec0aef2
5 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/generic/Table/components/DesktopTable/DesktopTable.js
View File

@ -8,32 +8,38 @@ import RowsBackgroundStyle from '../../styles/RowsBackgroundStyle';
const DesktopTable = (props) => { const DesktopTable = (props) => {
return ( return (
<TableStyle rowFooter={props.rowFooter}> <TableStyle rowFooter={props.rowFooter}>
<TableHeader <tbody>
orderedKeys={props.orderedKeys} <TableHeader
sortByUpdate={props.sortByUpdate} orderedKeys={props.orderedKeys}
tableUpdate={props.tableUpdate} sortByUpdate={props.sortByUpdate}
/> tableUpdate={props.tableUpdate}
{props.elements.map((item, i) => { />
return ( {props.elements.map((item, i) => {
<tr key={`table-row-${i}`} className="TableStyle__tr"> return (
<TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} /> <tr key={`table-row-${i}`} className="TableStyle__tr">
<TableRowFooter <TableRowItems
deleteItem={() => { orderedKeys={props.orderedKeys}
props.setItemToHandle(item); item={item}
props.setDeletePopUp(true); i={i}
}} />
editItem={() => { <TableRowFooter
props.setItemToHandle(item); deleteItem={() => {
props.setEditPopUp(true); props.setItemToHandle(item);
}} props.setDeletePopUp(true);
rowFooter={props.rowFooter} }}
item={item} editItem={() => {
i={i} props.setItemToHandle(item);
/> props.setEditPopUp(true);
<RowsBackgroundStyle i={i} /> }}
</tr> rowFooter={props.rowFooter}
); item={item}
})} i={i}
/>
<RowsBackgroundStyle i={i} as="td" />
</tr>
);
})}
</tbody>
</TableStyle> </TableStyle>
); );
}; };

24
src/components/generic/Table/components/TableHeader/TableHeader.js
View File

@ -25,17 +25,19 @@ const TableHeader = (props) => {
props.tableUpdate(); props.tableUpdate();
}} }}
> >
{keyValue} <FlexRow as="span" alignmentX="flex-start" gap="8px" width="100%">
<FlexRow {keyValue}
as="span" <FlexRow
className="TableStyle__sort-button" as="span"
column={keyValue} className="TableStyle__sort-button"
> column={keyValue}
<ColumnFilterIcon >
index={i} <ColumnFilterIcon
active={activeIcon} index={i}
rotateIcon={rotateActiveIcon} active={activeIcon}
/> rotateIcon={rotateActiveIcon}
/>
</FlexRow>
</FlexRow> </FlexRow>
</th> </th>
); );

4
src/components/generic/Table/components/TableRowItems/TableRowItems.js
View File

@ -21,7 +21,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
return ( return (
<td key={`table-item-${i}-${j}`} className="TableStyle__td"> <td key={`table-item-${i}-${j}`} className="TableStyle__td">
{IS_MOBILE() && ( {IS_MOBILE() && (
<Container className="mobile-table-header">{keyValue}</Container> <Container as="span" className="mobile-table-header">
{keyValue}
</Container>
)} )}
{renderValue(keyValue)} {renderValue(keyValue)}
{keyValue === '#' && i + 1} {keyValue === '#' && i + 1}

2
src/components/generic/Table/components/TableRowTags/TableRowTags.js
View File

@ -3,7 +3,7 @@ import { FlexRow } from '../../../../../utils/containers';
const TableRowTags = ({ item, i }) => { const TableRowTags = ({ item, i }) => {
return ( return (
<FlexRow className="TableStyle__tags-container"> <FlexRow as="span" className="TableStyle__tags-container">
{renderTags(item.tags)} {renderTags(item.tags)}
</FlexRow> </FlexRow>
); );

7
src/components/generic/Table/styles/TableStyle.js
View File

@ -6,7 +6,6 @@ const TableStyle = styled.table`
width: 100%; width: 100%;
.TableStyle__th { .TableStyle__th {
position: relative;
cursor: pointer; cursor: pointer;
* { * {
cursor: pointer; cursor: pointer;
@ -62,12 +61,6 @@ const TableStyle = styled.table`
gap: 4px; gap: 4px;
padding: 0 2px; padding: 0 2px;
} }
.TableStyle__sort-button {
position: absolute;
top: 15px;
right: 16%;
}
`; `;
export default TableStyle; export default TableStyle;