-
-
Täyttöhistoria
-
-
Täyttöjen hinta yhteensä
-
- {formatEurCentsToEur(
- fillEvents.reduce((acc, fillEvent) => acc + fillEvent.price, 0)
- )}{' '}
- €
-
-
+
+
Täyttöhistoria
+
+ Täyttöjen hinta yhteensä:{' '}
+ {formatEurCentsToEur(
+ fillEvents?.reduce((acc, fillEvent) => acc + fillEvent.price, 0) ??
+ 0
+ )}{' '}
+ €
+
-
-
-
- | Päivämäärä |
- pullosetti |
- kaasuseos |
- lisätiedot |
- hinta (€) |
-
-
-
- {fillEvents.map((fillEvent, index) => (
-
- ))}
-
-
+
);
};
diff --git a/src/components/common/Table.tsx b/src/components/common/Table.tsx
deleted file mode 100644
index 0381913..0000000
--- a/src/components/common/Table.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useCallback } from 'react';
-import { BsPencil, BsTrash } from 'react-icons/bs';
-import '../../styles/commonTable/commonTable.css';
-import { IconButton, IconButtonProps } from './Buttons';
-
-type Row = Array
;
-
-export type TableColumn = {
- title: string;
-};
-
-export type TableRow = {
- id: string;
- mainRow: Row;
- childRows?: Row[];
-};
-
-type CommonTableProps = {
- columns: TableColumn[];
- rows: TableRow[];
- includeRowNumber?: boolean;
- includeEditButton?: boolean;
- includeDeleteButton?: boolean;
- onRowDelete?: (id: string) => void;
-};
-
-const IconButtonCell: React.FC = ({
- onClick,
- icon,
-}): JSX.Element => {
- return (
-
-
- |
- );
-};
-
-/**
- * Common table element which can be used in a number of situations.
- * HOX Row length MUST ALWAYS match the length of columns! Otherwise,
- * the styling will break! Empty values can be indicated by using null
- */
-export const CommonTable: React.FC = ({
- columns,
- rows,
- includeDeleteButton = false,
- includeEditButton = false,
- includeRowNumber = false,
- onRowDelete,
-}): JSX.Element => {
- const handleEditButtonClick = useCallback(() => {
- // TODO
- }, []);
-
- const handleDeleteButtonClick = useCallback(
- (id: string) => {
- onRowDelete?.(id);
- },
- [onRowDelete]
- );
-
- return (
-
-
-
- {includeRowNumber ? (
- |
- #
- |
- ) : null}
- {columns.map((column) => (
-
- {column.title}
- |
- ))}
- {includeEditButton ? (
-
- Muokkaa
- |
- ) : null}
- {includeDeleteButton ? (
-
- Poista
- |
- ) : null}
-
-
-
- {rows.map((row, index) => (
-
-
- {includeRowNumber ? (
- |
- {index + 1}
- |
- ) : null}
-
- {row.mainRow.map((value, valueIndex) => (
-
- {value}
- |
- ))}
-
- {includeEditButton ? (
- }
- onClick={handleEditButtonClick}
- />
- ) : null}
- {includeDeleteButton ? (
- }
- onClick={() => handleDeleteButtonClick(row.id)}
- />
- ) : null}
-
- {/* Does the row have "child" rows */}
- {row.childRows?.map((childRow, childRowIndex) => (
-
- {includeRowNumber ? (
- |
- {index + 1}.{childRowIndex + 1}
- |
- ) : null}
- {childRow.map((value, valueIndex) => (
-
- {value}
- |
- ))}
- {includeEditButton ? (
- |
- ) : null}
- {includeDeleteButton ? (
- |
- ) : null}
-
- ))}
-
- ))}
-
-
- );
-};
diff --git a/src/components/common/Table/CommonTable.module.scss b/src/components/common/Table/CommonTable.module.scss
new file mode 100644
index 0000000..b96bcd8
--- /dev/null
+++ b/src/components/common/Table/CommonTable.module.scss
@@ -0,0 +1,80 @@
+@import '../../../variables.scss';
+
+.noBackground:not(:hover) {
+ background-color: rgba(0, 0, 0, 0) !important;
+ border-color: rgba(0, 0, 0, 0) !important;
+}
+
+.content {
+ box-sizing: border-box;
+ background: $white;
+ border-radius: 8px;
+ box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.1);
+ display: flex;
+ overflow: auto;
+ width: 100%;
+}
+
+table {
+ width: 100%;
+
+ thead {
+ background-color: $timberwolf;
+ }
+
+ .evenRow {
+ background-color: $ghost-white;
+ }
+
+ .oddRow {
+ background-color: $white;
+ }
+
+ tr {
+ box-sizing: border-box;
+ }
+
+ th {
+ padding: 0.5rem 1rem;
+
+ span {
+ &:first-child {
+ display: inline;
+ }
+ &:last-child {
+ display: none;
+ }
+ }
+ }
+
+ td {
+ border: 1px solid $timberwolf;
+ padding: 0 1rem;
+ }
+}
+
+@media (max-width: 780px) {
+ h1 {
+ font-size: 1.5rem;
+ width: 50%;
+ }
+ h2 {
+ font-size: 1.25rem;
+ width: 50%;
+ }
+
+ table {
+ th {
+ padding: 0.25rem 0.5rem;
+
+ span {
+ &:first-child {
+ display: none;
+ }
+ &:last-child {
+ display: inline;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/common/Table/CommonTable.tsx b/src/components/common/Table/CommonTable.tsx
new file mode 100644
index 0000000..8e71c5b
--- /dev/null
+++ b/src/components/common/Table/CommonTable.tsx
@@ -0,0 +1,176 @@
+import React, { useCallback } from 'react';
+import { BsPencil, BsTrash } from 'react-icons/bs';
+import { IconButton, IconButtonProps } from '../Buttons';
+import styles from './CommonTable.module.scss';
+
+type Row = Array;
+
+export type TableColumn = {
+ title: string;
+ shortTitle: string;
+};
+
+export type TableRow = {
+ id: string;
+ mainRow: Row;
+ childRows?: Row[];
+ formatter?: () => string;
+};
+
+type CommonTableProps = {
+ columns: TableColumn[];
+ rows: TableRow[];
+ includeRowNumber?: boolean;
+ includeEditButton?: boolean;
+ includeDeleteButton?: boolean;
+ onRowDelete?: (id: string) => void;
+};
+
+const IconButtonCell: React.FC = ({
+ onClick,
+ icon,
+}): JSX.Element => {
+ return (
+
+
+ |
+ );
+};
+
+/**
+ * Common table element which can be used in a number of situations.
+ * HOX Row length MUST ALWAYS match the length of columns! Otherwise,
+ * the styling will break! Empty values can be indicated by using null
+ */
+export const CommonTable: React.FC = ({
+ columns,
+ rows,
+ includeDeleteButton = false,
+ includeEditButton = false,
+ includeRowNumber = false,
+ onRowDelete,
+}): JSX.Element => {
+ const handleEditButtonClick = useCallback(() => {
+ // TODO
+ }, []);
+
+ const handleDeleteButtonClick = useCallback(
+ (id: string) => {
+ onRowDelete?.(id);
+ },
+ [onRowDelete]
+ );
+
+ return (
+ // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+
+
+
+
+ {includeRowNumber ? (
+ |
+ #
+ |
+ ) : null}
+ {columns.map((column) => (
+
+ {column.title}
+ {column.shortTitle}
+ |
+ ))}
+ {includeEditButton ? (
+
+ Muokkaa
+ |
+ ) : null}
+ {includeDeleteButton ? (
+
+ Poista
+ |
+ ) : null}
+
+
+
+ {rows.map((row, index) => (
+
+
+ {includeRowNumber ? (
+ |
+ {index + 1}
+ |
+ ) : null}
+
+ {row.mainRow.map((value, valueIndex) => (
+
+ {value}
+ |
+ ))}
+
+ {includeEditButton ? (
+ }
+ onClick={handleEditButtonClick}
+ />
+ ) : null}
+ {includeDeleteButton ? (
+ }
+ onClick={() => handleDeleteButtonClick(row.id)}
+ />
+ ) : null}
+
+ {/* Does the row have "child" rows */}
+ {row.childRows?.map((childRow, childRowIndex) => (
+
+ {includeRowNumber ? (
+ |
+ {index + 1}.{childRowIndex + 1}
+ |
+ ) : null}
+ {childRow.map((value, valueIndex) => (
+
+ {value}
+ |
+ ))}
+ {includeEditButton ? (
+ |
+ ) : null}
+ {includeDeleteButton ? (
+ |
+ ) : null}
+
+ ))}
+
+ ))}
+
+
+