NewTable styles

src/assets/delete_ico.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.3571 2.24695C31.9857 2.24695 32.5 2.69695 32.5 3.24695V5.24695C32.5 5.79695 31.9857 6.24695 31.3571 6.24695H1.64286C1.01429 6.24695 0.5 5.79695 0.5 5.24695V3.24695C0.5 2.69695 1.01429 2.24695 1.64286 2.24695H10.2143L10.8857 1.0782C11.1429 0.621948 11.8214 0.246948 12.4071 0.246948H12.4143H20.5786C21.1643 0.246948 21.85 0.621948 22.1143 1.0782L22.7857 2.24695H31.3571ZM4.3 29.4344L2.78571 8.24695H30.2143L28.7 29.4344C28.5857 30.9844 27.0571 32.2469 25.2786 32.2469H7.72143C5.94286 32.2469 4.41429 30.9844 4.3 29.4344Z" fill="#343434"/>
+</svg>

src/pages/NewTable/NewTable.js

@@ -1,82 +1,76 @@
 import React from 'react';
-import styled from 'styled-components';
+import { FlexRow, Svg } from '../../utils/containers';
-import { FlexRow } from '../../utils/containers';
 import theme from '../../utils/theme';
-// lista json elementów (headery to keys)
+import ColumnFilterIcon from '../../components/generic/ColumnFilterIcon';
-// lista keys w celu zachowania kolejności
+import pensilIco from '../../assets/pencil_ico.svg';
-
+import deleteIco from '../../assets/delete_ico.svg';
-const Table = styled.table`
+import NewTableStyle from './styles/NewTableStyle';
-  border-collapse: separate;
+import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
-  width: 100%;
+import SortButtonContainerStyle from './styles/SortButtonContainerStyle';
-`;
-
-const TrHeader = styled.tr`
-  height: 48px;
-  position: relative;
-`;
-
-const Tr = styled.tr`
-  position: relative;
-  height: 72px;
-  /* background-color: ${({ theme, backgroundColor }) =>
-    backgroundColor ? backgroundColor : theme.colors.white}; */
-`;
-
-const Td = styled.td`
-  padding: 0 0 32px 0;
-  /* background-color: ${({ theme, backgroundColor }) =>
-    backgroundColor ? backgroundColor : theme.colors.white}; */
-`;
-
-const TableLine = styled(FlexRow)`
-  position: absolute;
-  top: ${({ top }) => (top ? top : 'auto')};
-  bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
-  left: 0;
-  width: 100%;
-  background-color: ${({ theme }) => theme.colors.dark04};
-  height: ${({ height }) => (height ? height : '1px')};
-`;
 
 const NewTable = ({ items, orderedKeys }) => {
   return (
-    <Table>
+    <NewTableStyle>
-      <TrHeader>
+      <tr className="NewTableStyle__tr-header">
-        {orderedKeys.map((key) => {
+        {orderedKeys.map((keyValue, i) => {
-          return <th>{key}</th>;
-        })}
-        <TableLine height="2px" top="94%" as="td" shadow={theme.shadow} />
-      </TrHeader>
-      {items.map((item, i) => {
           return (
-          <Tr>
+            <th key={`table-header-${i}`} className="NewTableStyle__th">
-            {orderedKeys.map((key) => {
+              {keyValue}
-              return <Td>{item[key]}</Td>;
+              <SortButtonContainerStyle as="span" column={keyValue}>
-            })}
+                <ColumnFilterIcon index={1} active={2} rotateIcon={false} />
-            <FlexRow
+              </SortButtonContainerStyle>
-              width="100%"
+            </th>
-              alignmentX="space-between"
-              position="absolute"
-              top="55%"
-              left="0"
-            >
-              <FlexRow>tagi tagi tagi tagi</FlexRow>
-              <FlexRow>edytuj usuń</FlexRow>
-            </FlexRow>
-            <FlexRow
-              width="100%"
-              position="absolute"
-              top="0"
-              left="0"
-              height="100%"
-              backgroundColor={
-                i % 2 === 0 ? theme.colors.dark01 : 'transparent'
-              }
-            />
-          </Tr>
           );
         })}
-    </Table>
+        <FlexRow className="NewTableStyle__line" as="td" />
+      </tr>
+      {items.map((item, i) => {
+        return (
+          <tr className="NewTableStyle__tr">
+            {orderedKeys.map((keyValue, j) => {
+              return (
+                <td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
+                  {item[keyValue]}
+                </td>
+              );
+            })}
+            <FlexRow className="NewTableStyle__row-footer">
+              <FlexRow className="NewTableStyle__tags-container">
+                {item.tags.map((tag, j) => {
+                  return (
+                    <FlexRow
+                      className="NewTableStyle__tag"
+                      key={`submissionTag-${i}-${j}`}
+                    >
+                      {tag}
+                    </FlexRow>
+                  );
+                })}
+              </FlexRow>
+              <FlexRow gap="12px">
+                <Svg
+                  src={pensilIco}
+                  backgroundColor={theme.colors.dark}
+                  cursor="pointer"
+                  size="cover"
+                  width="16px"
+                  height="16px"
+                />
+                <Svg
+                  src={deleteIco}
+                  backgroundColor={theme.colors.dark}
+                  cursor="pointer"
+                  size="cover"
+                  width="16px"
+                  height="16px"
+                />
+              </FlexRow>
+            </FlexRow>
+            <RowsBackgroundStyle i={i} />
+          </tr>
+        );
+      })}
+    </NewTableStyle>
   );
 };
 

src/pages/NewTable/NewTablePageTest.js

@@ -29,6 +29,7 @@ const tableItems = [
     'Accuracy-test-A': '0.65503',
     'Likelihood-test-A': '0.00000',
     when: '2023-01-05 21:47',
+    tags: ['tag1', 'siema siema', 'dluuuuuggiiiiiiiiiiiiiii tag', 'eloelo'],
   },
   {
     id: '7371',
@@ -40,6 +41,7 @@ const tableItems = [
     'Accuracy-test-A': '0.67034',
     'Likelihood-test-A': '0.00000',
     when: '2023-01-05 21:47',
+    tags: ['tag2', 'siema2 siem2', 'looooooooooonggggg tag_tag', 'eloelo3'],
   },
 ];
 

src/pages/NewTable/styles/NewTableStyle.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+const NewTableStyle = styled.table`
+  border-collapse: separate;
+  width: 100%;
+
+  .NewTableStyle__th {
+    position: relative;
+    cursor: pointer;
+    * {
+      cursor: pointer;
+    }
+  }
+
+  .NewTableStyle__tr-header {
+    height: 48px;
+    position: relative;
+  }
+
+  .NewTableStyle__tr {
+    position: relative;
+    height: 72px;
+  }
+
+  .NewTableStyle__td {
+    padding: 0 0 32px 0;
+    margin: 0 0 0 2px;
+  }
+
+  .NewTableStyle__line {
+    position: absolute;
+    top: 94%;
+    bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
+    left: -6px;
+    width: calc(100% + 12px);
+    background-color: ${({ theme }) => theme.colors.dark04};
+    height: 3px;
+    box-shadow: ${({ theme }) => theme.shadow};
+  }
+
+  .NewTableStyle__tag {
+    color: ${({ theme }) => theme.colors.white};
+    background-color: ${({ theme }) => theme.colors.green08};
+    padding: 4px;
+    border-radius: 2px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .NewTableStyle__row-footer {
+    width: 100%;
+    justify-content: space-between;
+    position: absolute;
+    top: 55%;
+    left: 0;
+    z-index: 2;
+  }
+
+  .NewTableStyle__tags-container {
+    gap: 4px;
+    padding: 0 2px;
+  }
+`;
+
+export default NewTableStyle;

src/pages/NewTable/styles/RowsBackgroundStyle.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { FlexRow } from '../../../utils/containers';
+
+const RowsBackgroundStyle = styled(FlexRow)`
+  width: calc(100% + 12px);
+  position: absolute;
+  top: 0;
+  left: -6px;
+  height: 100%;
+  background-color: ${({ theme, i }) =>
+    i % 2 === 0 ? theme.colors.dark01 : 'transparent'};
+`;
+
+export default RowsBackgroundStyle;

src/pages/NewTable/styles/SortButtonContainerStyle.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { FlexRow } from '../../../utils/containers';
+
+const getRightAttribute = (column) => {
+  const staticColumns = ['id', 'when', 'submitter'];
+  if (staticColumns.includes(column)) return '32%';
+  return '16%';
+};
+
+const SortButtonContainerStyle = styled(FlexRow)`
+  position: absolute;
+  top: 15px;
+  right: ${({ column }) => getRightAttribute(column)};
+`;
+
+export default SortButtonContainerStyle;

src/utils/colors.js

@@ -4,6 +4,7 @@ const colors = {
   blue: '#4B8FF0',
   green03: 'rgba(27, 153, 139, 0.3)',
   green05: 'rgba(27, 153, 139, 0.5)',
+  green08: 'rgba(27, 153, 139, 0.8)',
   dark: '#343434',
   dark01: 'rgba(52, 52, 52, 0.1)',
   dark03: 'rgba(52, 52, 52, 0.3)',