diff --git a/src/assets/delete_ico.svg b/src/assets/delete_ico.svg
new file mode 100644
index 0000000..c3ec67d
--- /dev/null
+++ b/src/assets/delete_ico.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/NewTable/NewTable.js b/src/pages/NewTable/NewTable.js
index b3144ed..cca00ae 100644
--- a/src/pages/NewTable/NewTable.js
+++ b/src/pages/NewTable/NewTable.js
@@ -1,82 +1,76 @@
import React from 'react';
-import styled from 'styled-components';
-import { FlexRow } from '../../utils/containers';
+import { FlexRow, Svg } from '../../utils/containers';
import theme from '../../utils/theme';
-// lista json elementów (headery to keys)
-// lista keys w celu zachowania kolejności
-
-const Table = styled.table`
- border-collapse: separate;
- width: 100%;
-`;
-
-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')};
-`;
+import ColumnFilterIcon from '../../components/generic/ColumnFilterIcon';
+import pensilIco from '../../assets/pencil_ico.svg';
+import deleteIco from '../../assets/delete_ico.svg';
+import NewTableStyle from './styles/NewTableStyle';
+import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
+import SortButtonContainerStyle from './styles/SortButtonContainerStyle';
const NewTable = ({ items, orderedKeys }) => {
return (
-
-
- {orderedKeys.map((key) => {
- return | {key} | ;
+
+
+ {orderedKeys.map((keyValue, i) => {
+ return (
+ |
+ {keyValue}
+
+
+
+ |
+ );
})}
-
-
+
+
{items.map((item, i) => {
return (
-
- {orderedKeys.map((key) => {
- return | {item[key]} | ;
+
+ {orderedKeys.map((keyValue, j) => {
+ return (
+ |
+ {item[keyValue]}
+ |
+ );
})}
-
- tagi tagi tagi tagi
- edytuj usuń
+
+
+ {item.tags.map((tag, j) => {
+ return (
+
+ {tag}
+
+ );
+ })}
+
+
+
+
+
-
-
+
+
);
})}
-
+
);
};
diff --git a/src/pages/NewTable/NewTablePageTest.js b/src/pages/NewTable/NewTablePageTest.js
index 68a154a..2ca2e8f 100644
--- a/src/pages/NewTable/NewTablePageTest.js
+++ b/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'],
},
];
diff --git a/src/pages/NewTable/styles/NewTableStyle.js b/src/pages/NewTable/styles/NewTableStyle.js
new file mode 100644
index 0000000..76802e6
--- /dev/null
+++ b/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;
diff --git a/src/pages/NewTable/styles/RowsBackgroundStyle.js b/src/pages/NewTable/styles/RowsBackgroundStyle.js
new file mode 100644
index 0000000..d44690a
--- /dev/null
+++ b/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;
diff --git a/src/pages/NewTable/styles/SortButtonContainerStyle.js b/src/pages/NewTable/styles/SortButtonContainerStyle.js
new file mode 100644
index 0000000..91940bb
--- /dev/null
+++ b/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;
diff --git a/src/utils/colors.js b/src/utils/colors.js
index 841cb3f..a98a3aa 100644
--- a/src/utils/colors.js
+++ b/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)',