-
{'Logged in as: ' + kcToken.idir_username + ' |'}
+
+ {"Logged in as: " + kcToken.idir_username + " |"}
- )
+ );
}
- return null
-}
+ return null;
+};
-export default Logout
+export default Logout;
diff --git a/frontend/src/app/components/ReactTable.js b/frontend/src/app/components/ReactTable.js
index 4b01c049..dec5cf63 100644
--- a/frontend/src/app/components/ReactTable.js
+++ b/frontend/src/app/components/ReactTable.js
@@ -1,84 +1,84 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
import {
useAsyncDebounce,
useFilters,
usePagination,
useSortBy,
useTable,
-} from 'react-table';
+} from "react-table";
// material-ui core components
-import CircularProgress from '@mui/material/CircularProgress';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import Popover from '@mui/material/Popover';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import TextField from '@mui/material/TextField';
-import Tooltip from '@mui/material/Tooltip';
-import { makeStyles } from '@mui/styles';
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import Popover from "@mui/material/Popover";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TablePagination from "@mui/material/TablePagination";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import { makeStyles } from "@mui/styles";
// material-ui icons
-import FilterListIcon from '@mui/icons-material/FilterList';
-import MoreVert from '@mui/icons-material/MoreVert';
+import FilterListIcon from "@mui/icons-material/FilterList";
+import MoreVert from "@mui/icons-material/MoreVert";
// components
-import ReactTablePagination from './ReactTablePagination';
+import ReactTablePagination from "./ReactTablePagination";
const useStyles = makeStyles(() => ({
moreOptions: {
- alignItems: 'center',
- display: 'inline-flex',
- height: '100%',
- position: 'absolute',
+ alignItems: "center",
+ display: "inline-flex",
+ height: "100%",
+ position: "absolute",
right: 0,
top: 0,
- zIndex: '999',
- '&.active': {
- opacity: '1 !important',
+ zIndex: "999",
+ "&.active": {
+ opacity: "1 !important",
},
},
cellMoreOptions: {
- '& $moreOptions': {
+ "& $moreOptions": {
opacity: 0,
},
- '&:hover $moreOptions': {
+ "&:hover $moreOptions": {
opacity: 0.5,
},
},
popoverContainer: {
- padding: '0.75rem',
+ padding: "0.75rem",
},
popoverInputFilter: {
- '& input': {
- padding: '0.75rem',
+ "& input": {
+ padding: "0.75rem",
},
},
reactTable: {
- position: 'relative',
- '& caption': {
- backgroundColor: 'rgba(255, 255, 255, 0.7)',
+ position: "relative",
+ "& caption": {
+ backgroundColor: "rgba(255, 255, 255, 0.7)",
bottom: 0,
left: 0,
padding: 0,
- position: 'absolute',
+ position: "absolute",
right: 0,
top: 0,
zIndex: 999,
},
- '& caption > div': {
- alignItems: 'center',
- display: 'flex',
- height: '100%',
- justifyContent: 'center',
- width: '100%',
+ "& caption > div": {
+ alignItems: "center",
+ display: "flex",
+ height: "100%",
+ justifyContent: "center",
+ width: "100%",
},
},
}));
@@ -111,26 +111,27 @@ const ReactTable = (props) => {
page,
prepareRow,
setPageSize,
- state: {
- pageIndex,
- pageSize,
- sortBy,
- },
- } = useTable({
- columns,
- data,
- disableSortBy: !sortable,
- disableSortRemove: true,
- initialState: {
- filters: [],
- pageIndex: 0,
- sortBy: defaultSortBy,
+ state: { pageIndex, pageSize, sortBy },
+ } = useTable(
+ {
+ columns,
+ data,
+ disableSortBy: !sortable,
+ disableSortRemove: true,
+ initialState: {
+ filters: [],
+ pageIndex: 0,
+ sortBy: defaultSortBy,
+ },
+ manualFilters: true,
+ manualPagination: true,
+ manualSortBy: true,
+ pageCount: controlledPageCount,
},
- manualFilters: true,
- manualPagination: true,
- manualSortBy: true,
- pageCount: controlledPageCount,
- }, useFilters, useSortBy, usePagination);
+ useFilters,
+ useSortBy,
+ usePagination,
+ );
const handleFilterColumn = useAsyncDebounce((event) => {
const { value } = event.target;
@@ -140,7 +141,7 @@ const ReactTable = (props) => {
filterBy = filterColumn.id;
}
- const foundIndex = filters.findIndex((filter) => (filter.id === filterBy));
+ const foundIndex = filters.findIndex((filter) => filter.id === filterBy);
if (foundIndex >= 0) {
filters[foundIndex].value = value;
@@ -156,20 +157,24 @@ const ReactTable = (props) => {
const handleOpenMoreOptions = (event) => {
event.stopPropagation();
- event.currentTarget.parentNode.classList.add('active');
+ event.currentTarget.parentNode.classList.add("active");
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
- anchorEl.parentNode.classList.remove('active');
+ anchorEl.parentNode.classList.remove("active");
setAnchorEl(null);
};
useEffect(() => {
onFetchData({
- columns, pageIndex, pageSize, sortBy, filters,
+ columns,
+ pageIndex,
+ pageSize,
+ sortBy,
+ filters,
});
}, [onFetchData, pageIndex, pageSize, sortBy, filters]);
@@ -178,7 +183,12 @@ const ReactTable = (props) => {
return (
<>
-
+
{loading && (
@@ -192,15 +202,17 @@ const ReactTable = (props) => {
{headerGroup.headers.map((column) => (
- {column.render('Header')}
+ {column.render("Header")}
{filterable && column.filterable !== false && (
@@ -226,23 +238,24 @@ const ReactTable = (props) => {
- {page && page.map((row) => {
- prepareRow(row);
+ {page &&
+ page.map((row) => {
+ prepareRow(row);
- return (
-
- {row.cells.map((cell) => (
-
- {cell.render('Cell')}
-
- ))}
-
- );
- })}
+ return (
+
+ {row.cells.map((cell) => (
+
+ {cell.render("Cell")}
+
+ ))}
+
+ );
+ })}
@@ -265,23 +278,32 @@ const ReactTable = (props) => {
filter.id === filterColumn.filterBy || filter.id === filterColumn.id,
- ) ? filters.find((filter) => filter.id === filterColumn.filterBy || filter.id === filterColumn.id).value : ''
+ filterColumn &&
+ filters.find(
+ (filter) =>
+ filter.id === filterColumn.filterBy ||
+ filter.id === filterColumn.id,
+ )
+ ? filters.find(
+ (filter) =>
+ filter.id === filterColumn.filterBy ||
+ filter.id === filterColumn.id,
+ ).value
+ : ""
}
InputLabelProps={{
shrink: true,
@@ -294,7 +316,7 @@ const ReactTable = (props) => {
),
}}
label={`Filter by ${filterColumn && filterColumn.Header}`}
- onChange={(event) => (handleFilterColumn(event))}
+ onChange={(event) => handleFilterColumn(event)}
placeholder={filterColumn && filterColumn.Header}
type="text"
variant="outlined"
@@ -308,7 +330,7 @@ const ReactTable = (props) => {
ReactTable.defaultProps = {
defaultSortBy: [],
filterable: true,
- size: 'small',
+ size: "small",
sortable: true,
};
diff --git a/frontend/src/app/components/ReactTablePagination.js b/frontend/src/app/components/ReactTablePagination.js
index 3a5246fb..665e372b 100644
--- a/frontend/src/app/components/ReactTablePagination.js
+++ b/frontend/src/app/components/ReactTablePagination.js
@@ -1,31 +1,26 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import IconButton from '@mui/material/IconButton';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import { makeStyles } from '@mui/styles';
+import PropTypes from "prop-types";
+import React from "react";
+import IconButton from "@mui/material/IconButton";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import { makeStyles } from "@mui/styles";
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
const useStyles = makeStyles(() => ({
pagination: {
flexShrink: 0,
- '& .MuiSelect-select': {
- paddingBottom: '0.5rem',
- paddingTop: '0.5rem',
+ "& .MuiSelect-select": {
+ paddingBottom: "0.5rem",
+ paddingTop: "0.5rem",
},
},
}));
const ReactTablePagination = (props) => {
const classes = useStyles();
- const {
- count,
- onPageChange,
- page,
- rowsPerPage,
- } = props;
+ const { count, onPageChange, page, rowsPerPage } = props;
const pagesCount = Math.ceil(count / rowsPerPage);
@@ -53,7 +48,9 @@ const ReactTablePagination = (props) => {
value={page}
>
{Array.from(Array(pagesCount).keys()).map((value) => (
-
+
))}
diff --git a/frontend/src/app/styles/App.scss b/frontend/src/app/styles/App.scss
index ed163a71..86664c1e 100644
--- a/frontend/src/app/styles/App.scss
+++ b/frontend/src/app/styles/App.scss
@@ -2,16 +2,16 @@
Base styling for "App"
ie General Container
*/
-$bg-alt-black: #1E1F21;
+$bg-alt-black: #1e1f21;
$bg-primary: #244074;
$bg-black: #000;
-$bg-white: #FFF;
+$bg-white: #fff;
$default-text-color: #000;
$default-table-border-color: rgba(249, 249, 249, 0.2);
-$default-table-color: #F9F9F9;
-$highlight: #0078FD;
-$default-link-blue: #568DBA;
-$default-background-grey: #F2F2F2;
+$default-table-color: #f9f9f9;
+$highlight: #0078fd;
+$default-link-blue: #568dba;
+$default-background-grey: #f2f2f2;
$md: 991px;
$button-background-blue: #003366;
@@ -38,7 +38,7 @@ $button-background-blue: #003366;
}
.logo {
- background: url('../static/logo.png') center center no-repeat;
+ background: url("../static/logo.png") center center no-repeat;
background-size: 100% auto;
height: 100px;
width: 200px;
@@ -50,18 +50,19 @@ $button-background-blue: #003366;
}
}
-
body {
background-color: $bg-white;
color: $default-text-color;
- font-family: 'Roboto', 'Open Sans', sans-serif;
+ font-family: "Roboto", "Open Sans", sans-serif;
font-weight: 400;
height: 100%;
margin: 0;
}
-h2, h3, h4 {
- font-family: 'Roboto', 'Open Sans', sans-serif;
+h2,
+h3,
+h4 {
+ font-family: "Roboto", "Open Sans", sans-serif;
color: #003366;
font-weight: 500;
}
@@ -87,7 +88,6 @@ h4 {
&:disabled {
background-color: white !important;
-
}
}
diff --git a/frontend/src/app/styles/FileUpload.scss b/frontend/src/app/styles/FileUpload.scss
index 29c37000..ee6608c5 100644
--- a/frontend/src/app/styles/FileUpload.scss
+++ b/frontend/src/app/styles/FileUpload.scss
@@ -2,7 +2,7 @@
background-color: $default-background-grey;
}
.bordered {
- border: 1px solid #E0E0E0;
+ border: 1px solid #e0e0e0;
padding: 0.5rem;
}
#dataset-select {
@@ -10,19 +10,17 @@
margin-top: 1rem;
padding: 1rem;
background-color: $default-background-grey;
-
}
#trash-button {
height: 15px;
}
.upload-list {
font-weight: normal;
-
}
.upload-row {
background-color: $default-background-grey;
- padding: .5rem;
- margin: .5rem;
+ padding: 0.5rem;
+ margin: 0.5rem;
}
.file-upload {
border: 1px dashed $button-background-blue;
@@ -30,7 +28,6 @@
padding: 1rem;
text-align: center;
flex-direction: column;
-
}
.upload-bar {
diff --git a/frontend/src/app/styles/Footer.scss b/frontend/src/app/styles/Footer.scss
index 80595d1a..9065df47 100644
--- a/frontend/src/app/styles/Footer.scss
+++ b/frontend/src/app/styles/Footer.scss
@@ -1,66 +1,71 @@
footer {
- position: relative;
- width: 100%;
- bottom: 0;
- background-color: #036;
- border-top: 2px solid #fcba19;
+ position: relative;
+ width: 100%;
+ bottom: 0;
+ background-color: #036;
+ border-top: 2px solid #fcba19;
+ color: #fff;
+ font-family:
+ ‘BCSans’,
+ ‘Noto Sans’,
+ Verdana,
+ Arial,
+ sans-serif;
+ .container {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+ height: 46px;
+ }
+ ul {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: 0;
color: #fff;
- font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
- .container {
- display: flex;
- justify-content: center;
- flex-direction: column;
- text-align: center;
- height: 46px;
+ list-style: none;
+ align-items: center;
+ height: 100%;
+ li a {
+ font-size: 0.813em;
+ font-weight: normal; /* 400 */
+ color: #fff;
+ border-right: 1px solid #4b5e7e;
+ padding-left: 5px;
+ padding-right: 5px;
+ text-decoration: none;
}
- ul {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin: 0;
+ a:hover {
color: #fff;
- list-style: none;
- align-items: center;
- height: 100%;
- li a {
- font-size: 0.813em;
- font-weight: normal; /* 400 */
- color: #fff;
- border-right: 1px solid #4b5e7e;
- padding-left: 5px;
- padding-right: 5px;
- text-decoration: none;
- }
- a:hover {
- color: #fff;
- text-decoration: underline;
- }
- a:focus {
- outline: 4px solid #3b99fc;
- outline-offset: 1px;
- }
+ text-decoration: underline;
}
- }
- @media (max-width: 600px) {
- .footer {
- .container {
- ul li a {
- font-size: 0.8rem;
- line-height: 0.9rem;
- }
- }
+ a:focus {
+ outline: 4px solid #3b99fc;
+ outline-offset: 1px;
}
}
- @media (max-width: 485px) {
- .footer {
- height: 3.5rem;
- .container {
- justify-content: space-evenly;
+}
+@media (max-width: 600px) {
+ .footer {
+ .container {
+ ul li a {
+ font-size: 0.8rem;
+ line-height: 0.9rem;
}
}
}
- @media (max-width: 282px) {
- .footer {
- height: 6rem;
+}
+@media (max-width: 485px) {
+ .footer {
+ height: 3.5rem;
+ .container {
+ justify-content: space-evenly;
}
- }
\ No newline at end of file
+ }
+}
+@media (max-width: 282px) {
+ .footer {
+ height: 6rem;
+ }
+}
diff --git a/frontend/src/app/styles/Header.scss b/frontend/src/app/styles/Header.scss
index d287abc6..64efbb0b 100644
--- a/frontend/src/app/styles/Header.scss
+++ b/frontend/src/app/styles/Header.scss
@@ -1,108 +1,108 @@
.cthub-banner {
- background-color: $banner-blue;
- display: flex;
- border-bottom: 3px solid $border-orange;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- padding-left: 6rem;
- padding-right: 6rem;
+ background-color: $banner-blue;
+ display: flex;
+ border-bottom: 3px solid $border-orange;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding-left: 6rem;
+ padding-right: 6rem;
+}
+
+.cthub-banner .left,
+.cthub-banner .right {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-size: 1.25rem;
+ a {
+ color: $white;
+ text-decoration: none;
+ font-weight: bold;
}
-
- .cthub-banner .left,
- .cthub-banner .right {
- display: flex;
- flex-direction: row;
- align-items: center;
- font-size: 1.25rem;
- a {
+ img {
+ height: 4.5rem;
+ width: auto;
+ }
+ .logout {
+ color: $white;
+ font-size: 1rem;
+ .logoutButton {
+ cursor: pointer;
+ border: none;
+ background: none;
+ font: inherit;
+ color: inherit;
+ }
+ }
+}
+
+.page-header {
+ background-color: $banner-blue;
+ width: 100%;
+ //height: 191px;
+
+ .title {
+ padding-left: 6rem;
+ h1 {
color: $white;
- text-decoration: none;
- font-weight: bold;
}
+ }
+}
+
+@media (max-width: 992px) {
+ .cthub-banner {
+ font-weight: normal;
+ flex-direction: column;
img {
- height: 4.5rem;
- width: auto;
+ margin-left: 1rem;
+ height: 3rem;
}
.logout {
- color: $white;
- font-size: 1rem;
- .logoutButton {
- cursor: pointer;
- border: none;
- background: none;
- font: inherit;
- color: inherit;
- }
+ font-size: 0.75rem;
}
}
-
.page-header {
- background-color: $banner-blue;
width: 100%;
- //height: 191px;
-
+ position: relative;
+ margin: 0;
+ height: 180px;
.title {
- padding-left: 6rem;
+ margin: 5px 0 0 1rem;
+ padding-left: 0;
h1 {
- color: $white;
+ font-size: 2rem;
}
}
}
-
- @media (max-width: 992px) {
- .cthub-banner {
- font-weight: normal;
- flex-direction: column;
- img {
- margin-left: 1rem;
- height: 3rem;
- }
- .logout {
- font-size: 0.75rem;
- }
- }
- .page-header {
- width: 100%;
- position: relative;
- margin: 0;
- height: 180px;
- .title {
- margin: 5px 0 0 1rem;
- padding-left: 0;
- h1 {
- font-size: 2rem;
- }
+}
+@media (max-width: 688px) {
+ .page-header {
+ .title {
+ h1 {
+ font-size: 1.75rem;
}
}
}
- @media (max-width: 688px) {
- .page-header {
- .title {
- h1 {
- font-size: 1.75rem;
- }
- }
+}
+@media (max-width: 380px) {
+ .page-header {
+ a {
+ font-size: 10pt;
}
- }
- @media (max-width: 380px) {
- .page-header {
- a {
- font-size: 10pt;
- }
- .title {
- h1 {
- font-size: 1.5rem;
- }
+ .title {
+ h1 {
+ font-size: 1.5rem;
}
}
}
- @media (max-width: 330px) {
- .page-header {
- .title {
- h1 {
- font-size: 1.2rem;
- }
+}
+@media (max-width: 330px) {
+ .page-header {
+ .title {
+ h1 {
+ font-size: 1.2rem;
}
}
- }
\ No newline at end of file
+ }
+}
diff --git a/frontend/src/app/styles/Login.scss b/frontend/src/app/styles/Login.scss
index 42b414ba..aec718fa 100644
--- a/frontend/src/app/styles/Login.scss
+++ b/frontend/src/app/styles/Login.scss
@@ -1,5 +1,5 @@
#login-page {
- background-image: url('./images/tof.jpg');
+ background-image: url("./images/tof.jpg");
background-position-x: center;
background-position-y: top;
background-repeat: no-repeat;
@@ -17,7 +17,7 @@
padding: 0 5rem;
position: fixed;
width: 100%;
-
+
.text {
color: $bg-primary;
font-size: 2.5rem;
@@ -50,7 +50,7 @@
}
.brand-logo {
- background-image: url('./images/BCID_H_rgb_pos.png');
+ background-image: url("./images/BCID_H_rgb_pos.png");
background-position: left;
background-repeat: no-repeat;
background-size: contain;
@@ -79,7 +79,6 @@
text-decoration: none;
width: 100%;
}
-
}
.flex-container {
@@ -100,9 +99,9 @@
#main-content {
width: 30rem;
- }
+ }
}
-
+
@media (max-width: $md) {
#header {
background-color: $bg-white;
@@ -113,7 +112,7 @@
padding: 1rem;
position: relative;
z-index: 999;
-
+
.text {
align-self: center;
font-size: 4vw;
@@ -128,9 +127,9 @@
}
.display-name {
- height: 100%;
- min-width: 5rem;
- width: 10vw;
+ height: 100%;
+ min-width: 5rem;
+ width: 10vw;
}
#main-content {
@@ -150,7 +149,7 @@
.brand-logo {
align-self: center;
- background-image: url('./images/BCID_V_rgb_pos.png');
+ background-image: url("./images/BCID_V_rgb_pos.png");
background-position: center;
background-size: contain;
height: 20vh;
@@ -160,4 +159,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/styles/ReactTable.scss b/frontend/src/app/styles/ReactTable.scss
index 1ff731ca..0c7e532d 100644
--- a/frontend/src/app/styles/ReactTable.scss
+++ b/frontend/src/app/styles/ReactTable.scss
@@ -16,7 +16,7 @@ Base styling for any React Table
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
-
+
&:not([disabled]):hover {
opacity: 0.65;
}
@@ -49,7 +49,7 @@ Base styling for any React Table
&.-sort-desc {
box-shadow: inset 0 -3px 0 0 $highlight !important;
}
- }
+ }
}
.rt-tr-group {
@@ -66,4 +66,4 @@ Base styling for any React Table
padding: 1rem 0.5rem;
}
}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/styles/Roboto.scss b/frontend/src/app/styles/Roboto.scss
index c675214e..53159c92 100644
--- a/frontend/src/app/styles/Roboto.scss
+++ b/frontend/src/app/styles/Roboto.scss
@@ -3,19 +3,19 @@ Roboto Webfont
*/
@font-face {
- font-family: 'Roboto';
- src: url('./fonts/Roboto-Regular.ttf') format('ttf');
+ font-family: "Roboto";
+ src: url("./fonts/Roboto-Regular.ttf") format("ttf");
}
@font-face {
- font-family: 'Roboto';
+ font-family: "Roboto";
font-weight: bold;
- src: url('./fonts/Roboto-Bold.ttf') format('ttf');
+ src: url("./fonts/Roboto-Bold.ttf") format("ttf");
}
@font-face {
- font-family: 'Roboto';
+ font-family: "Roboto";
font-style: italic;
font-weight: bold;
- src: url('./fonts/Roboto-BoldItalic.ttf') format('woff');
-}
\ No newline at end of file
+ src: url("./fonts/Roboto-BoldItalic.ttf") format("woff");
+}
diff --git a/frontend/src/app/styles/Users.scss b/frontend/src/app/styles/Users.scss
index 20bd7092..c5c574b0 100644
--- a/frontend/src/app/styles/Users.scss
+++ b/frontend/src/app/styles/Users.scss
@@ -7,25 +7,23 @@
background-color: $default-background-grey;
align-content: space-around;
width: 10%;
- .checkbox {
+ .checkbox {
width: 40%;
}
- @media (max-width:991px) {
+ @media (max-width: 991px) {
width: 20%;
-}
- @media (max-width:599px) {
+ }
+ @media (max-width: 599px) {
width: 40%;
-}
-
+ }
}
.user-input {
- margin-left: 10px;
- margin-right: 10px;
- background-color: white;
+ margin-left: 10px;
+ margin-right: 10px;
+ background-color: white;
}
.button-dark-blue {
background-color: #003366 !important;
}
-
diff --git a/frontend/src/app/styles/index.scss b/frontend/src/app/styles/index.scss
index 5845cf87..a5b22410 100644
--- a/frontend/src/app/styles/index.scss
+++ b/frontend/src/app/styles/index.scss
@@ -1,9 +1,9 @@
-@import 'variables.scss';
-@import 'App.scss';
-@import 'Login.scss';
-@import 'ReactTable.scss';
-@import 'FileUpload.scss';
-@import 'Roboto.scss';
-@import 'Users.scss';
-@import 'Header.scss';
-@import 'Footer.scss';
+@import "variables.scss";
+@import "App.scss";
+@import "Login.scss";
+@import "ReactTable.scss";
+@import "FileUpload.scss";
+@import "Roboto.scss";
+@import "Users.scss";
+@import "Header.scss";
+@import "Footer.scss";
diff --git a/frontend/src/app/styles/variables.scss b/frontend/src/app/styles/variables.scss
index 3d386ad6..af1bdba0 100644
--- a/frontend/src/app/styles/variables.scss
+++ b/frontend/src/app/styles/variables.scss
@@ -17,4 +17,4 @@ $default-background-grey: #f2f2f2;
$background-light-blue: #e7f4f7;
-$table-border: rgba(49, 49, 50, 0.33);
\ No newline at end of file
+$table-border: rgba(49, 49, 50, 0.33);
diff --git a/frontend/src/app/utilities/getFileSize.js b/frontend/src/app/utilities/getFileSize.js
index 5dcfefd2..9d899322 100644
--- a/frontend/src/app/utilities/getFileSize.js
+++ b/frontend/src/app/utilities/getFileSize.js
@@ -1,13 +1,14 @@
const getFileSize = (bytes) => {
if (bytes === 0) {
- return '0 bytes';
+ return "0 bytes";
}
const k = 1000;
- const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+ const sizes = ["bytes", "KB", "MB", "GB", "TB"];
let i = Math.floor(Math.log(bytes) / Math.log(k));
- if (i > 4) { // nothing bigger than a terrabyte
+ if (i > 4) {
+ // nothing bigger than a terrabyte
i = 4;
}
diff --git a/frontend/src/app/utilities/props.js b/frontend/src/app/utilities/props.js
index ab5157ea..5f87dffe 100644
--- a/frontend/src/app/utilities/props.js
+++ b/frontend/src/app/utilities/props.js
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
const CustomPropTypes = {
keycloak: PropTypes.shape({
diff --git a/frontend/src/app/utilities/reactTable.js b/frontend/src/app/utilities/reactTable.js
index 074b8ad6..4569ab0c 100644
--- a/frontend/src/app/utilities/reactTable.js
+++ b/frontend/src/app/utilities/reactTable.js
@@ -4,13 +4,13 @@ const findSortBy = (columns, id) => {
for (let i = 0; i < columns.length; i += 1) {
const column = columns[i];
- if ('columns' in column) {
+ if ("columns" in column) {
value = findSortBy(column.columns, id);
if (value !== id) {
return value;
}
- } else if (column.id === id && 'sortBy' in column) {
+ } else if (column.id === id && "sortBy" in column) {
return column.sortBy;
}
}
@@ -39,13 +39,11 @@ const getOrderBy = (state) => {
}
sortByFields.forEach((value) => {
- orderBy.push(`${arr.desc ? '-' : ''}${value}`);
+ orderBy.push(`${arr.desc ? "-" : ""}${value}`);
});
});
- return orderBy.join(',');
+ return orderBy.join(",");
};
-export {
- findSortBy, getFilters, getOrderBy,
-};
+export { findSortBy, getFilters, getOrderBy };
diff --git a/frontend/src/app/utilities/useAxios.js b/frontend/src/app/utilities/useAxios.js
index 1b932994..5de66a49 100644
--- a/frontend/src/app/utilities/useAxios.js
+++ b/frontend/src/app/utilities/useAxios.js
@@ -1,30 +1,30 @@
-import axios from 'axios'
-import useKeycloak from './useKeycloak'
-import { API_BASE } from '../../config';
+import axios from "axios";
+import useKeycloak from "./useKeycloak";
+import { API_BASE } from "../../config";
const useAxios = (useDefault = false, opts = {}) => {
- const keycloak = useKeycloak()
+ const keycloak = useKeycloak();
if (useDefault) {
- return axios.create(opts)
+ return axios.create(opts);
}
const instance = axios.create({
baseURL: API_BASE,
...opts,
- })
+ });
instance.interceptors.request.use(async (config) => {
if (keycloak.authenticated) {
try {
- await keycloak.updateToken(30)
- config.headers = {
- 'Authorization': `Bearer ${keycloak.token}`,
- }
- } catch(error) {
+ await keycloak.updateToken(30);
+ config.headers = {
+ Authorization: `Bearer ${keycloak.token}`,
+ };
+ } catch (error) {
// do something here?
}
}
- return config
- })
- return instance
-}
+ return config;
+ });
+ return instance;
+};
-export default useAxios
\ No newline at end of file
+export default useAxios;
diff --git a/frontend/src/app/utilities/useKeycloak.js b/frontend/src/app/utilities/useKeycloak.js
index f56bdf77..bb306cba 100644
--- a/frontend/src/app/utilities/useKeycloak.js
+++ b/frontend/src/app/utilities/useKeycloak.js
@@ -1,9 +1,9 @@
-import { useContext } from 'react'
-import { KeycloakContext } from '../../contexts'
+import { useContext } from "react";
+import { KeycloakContext } from "../../contexts";
const useKeycloak = () => {
- const keycloak = useContext(KeycloakContext)
- return keycloak
-}
+ const keycloak = useContext(KeycloakContext);
+ return keycloak;
+};
-export default useKeycloak
\ No newline at end of file
+export default useKeycloak;
diff --git a/frontend/src/contexts.js b/frontend/src/contexts.js
index 2b7751c7..42218924 100644
--- a/frontend/src/contexts.js
+++ b/frontend/src/contexts.js
@@ -1,3 +1,3 @@
-import { createContext } from 'react'
+import { createContext } from "react";
-export const KeycloakContext = createContext({})
\ No newline at end of file
+export const KeycloakContext = createContext({});
diff --git a/frontend/src/dashboard/DashboardContainer.js b/frontend/src/dashboard/DashboardContainer.js
index f49ec102..3f7da555 100644
--- a/frontend/src/dashboard/DashboardContainer.js
+++ b/frontend/src/dashboard/DashboardContainer.js
@@ -1,9 +1,9 @@
-import { withRouter, useHistory } from 'react-router-dom';
+import { withRouter, useHistory } from "react-router-dom";
const DashboardContainer = () => {
const history = useHistory();
- history.push('/upload');
+ history.push("/upload");
return null;
};
diff --git a/frontend/src/dashboard/router.js b/frontend/src/dashboard/router.js
index 7d740664..01f50893 100644
--- a/frontend/src/dashboard/router.js
+++ b/frontend/src/dashboard/router.js
@@ -1,14 +1,11 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
+import React from "react";
+import { Route } from "react-router-dom";
-import DashboardContainer from './DashboardContainer';
+import DashboardContainer from "./DashboardContainer";
const Router = () => (
<>
-
+
);
diff --git a/frontend/src/icbc_data/IcbcDataContainer.js b/frontend/src/icbc_data/IcbcDataContainer.js
index a7e26afc..8a666f5d 100644
--- a/frontend/src/icbc_data/IcbcDataContainer.js
+++ b/frontend/src/icbc_data/IcbcDataContainer.js
@@ -1,10 +1,10 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import React, { useCallback, useRef, useState } from "react";
+import { withRouter } from "react-router-dom";
-import { getFilters, getOrderBy } from '../app/utilities/reactTable';
-import IcbcDataTable from './components/IcbcDataTable';
-import ROUTES from './routes';
-import useAxios from '../app/utilities/useAxios';
+import { getFilters, getOrderBy } from "../app/utilities/reactTable";
+import IcbcDataTable from "./components/IcbcDataTable";
+import ROUTES from "./routes";
+import useAxios from "../app/utilities/useAxios";
const IcbcDataContainer = () => {
const [data, setData] = useState([]);
@@ -12,7 +12,7 @@ const IcbcDataContainer = () => {
const [pageCount, setPageCount] = useState(-1);
const [totalRowsCount, setTotalRowsCount] = useState(0);
const fetchIdRef = useRef(0);
- const axios = useAxios()
+ const axios = useAxios();
const onFetchData = useCallback((state) => {
setLoading(true);
diff --git a/frontend/src/icbc_data/components/IcbcDataTable.js b/frontend/src/icbc_data/components/IcbcDataTable.js
index a4bb67fa..c6e5e19e 100644
--- a/frontend/src/icbc_data/components/IcbcDataTable.js
+++ b/frontend/src/icbc_data/components/IcbcDataTable.js
@@ -1,49 +1,52 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import PropTypes from "prop-types";
+import React from "react";
-import ReactTable from '../../app/components/ReactTable';
+import ReactTable from "../../app/components/ReactTable";
const IcbcDataTable = (props) => {
- const columns = [{
- accessor: 'icbc_vehicle.model_year',
- align: 'center',
- filterBy: 'icbc_vehicle__model_year__name',
- Header: 'Year',
- id: 'year',
- sortBy: 'icbc_vehicle__model_year__name',
- width: 50,
- }, {
- accessor: 'icbc_vehicle.make',
- filterBy: 'icbc_vehicle__make',
- Header: 'Make',
- headerAlign: 'left',
- id: 'make',
- sortBy: 'icbc_vehicle__make',
- width: 100,
- }, {
- accessor: 'icbc_vehicle.model_name',
- filterBy: 'icbc_vehicle__model_name',
- Header: 'Model',
- headerAlign: 'left',
- id: 'Model',
- sortBy: 'icbc_vehicle__model_name',
- width: 100,
- }, {
- accessor: 'vin',
- Header: 'VIN',
- headerAlign: 'left',
- id: 'vin',
- }];
+ const columns = [
+ {
+ accessor: "icbc_vehicle.model_year",
+ align: "center",
+ filterBy: "icbc_vehicle__model_year__name",
+ Header: "Year",
+ id: "year",
+ sortBy: "icbc_vehicle__model_year__name",
+ width: 50,
+ },
+ {
+ accessor: "icbc_vehicle.make",
+ filterBy: "icbc_vehicle__make",
+ Header: "Make",
+ headerAlign: "left",
+ id: "make",
+ sortBy: "icbc_vehicle__make",
+ width: 100,
+ },
+ {
+ accessor: "icbc_vehicle.model_name",
+ filterBy: "icbc_vehicle__model_name",
+ Header: "Model",
+ headerAlign: "left",
+ id: "Model",
+ sortBy: "icbc_vehicle__model_name",
+ width: 100,
+ },
+ {
+ accessor: "vin",
+ Header: "VIN",
+ headerAlign: "left",
+ id: "vin",
+ },
+ ];
- const {
- data, loading, onFetchData, pageCount, totalRowsCount,
- } = props;
+ const { data, loading, onFetchData, pageCount, totalRowsCount } = props;
return (
([
-
+const Router = () => [
+
,
-]);
+];
export default Router;
diff --git a/frontend/src/icbc_data/routes.js b/frontend/src/icbc_data/routes.js
index 5433c012..fdce9647 100644
--- a/frontend/src/icbc_data/routes.js
+++ b/frontend/src/icbc_data/routes.js
@@ -1,5 +1,5 @@
const ROUTES = {
- LIST: '/api/icbc-data',
+ LIST: "/api/icbc-data",
};
export default ROUTES;
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 667ea39e..420c26eb 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,23 +1,23 @@
-import React from 'react';
-import ReactDOM from 'react-dom'
-import Keycloak from 'keycloak-js';
+import React from "react";
+import ReactDOM from "react-dom";
+import Keycloak from "keycloak-js";
-import KeycloakProvider from './app/components/KeycloakProvider';
-import App from './app/components/App';
-import Loading from './app/components/Loading';
-import { KEYCLOAK_CLIENT_ID, KEYCLOAK_REALM, KEYCLOAK_URL } from './config';
+import KeycloakProvider from "./app/components/KeycloakProvider";
+import App from "./app/components/App";
+import Loading from "./app/components/Loading";
+import { KEYCLOAK_CLIENT_ID, KEYCLOAK_REALM, KEYCLOAK_URL } from "./config";
-import './app/styles/index.scss';
+import "./app/styles/index.scss";
const keycloak = new Keycloak({
clientId: KEYCLOAK_CLIENT_ID,
realm: KEYCLOAK_REALM,
- url: KEYCLOAK_URL
-})
+ url: KEYCLOAK_URL,
+});
const keycloakInitOptions = {
- onLoad: 'check-sso',
- pkceMethod: 'S256'
-}
+ onLoad: "check-sso",
+ pkceMethod: "S256",
+};
ReactDOM.render(
,
- document.getElementById('root')
-)
+ document.getElementById("root"),
+);
diff --git a/frontend/src/uploads/UploadContainer.js b/frontend/src/uploads/UploadContainer.js
index 44532f6a..315400aa 100644
--- a/frontend/src/uploads/UploadContainer.js
+++ b/frontend/src/uploads/UploadContainer.js
@@ -1,27 +1,25 @@
-import { withRouter } from 'react-router-dom';
-import React, { useState, useEffect } from 'react';
-import {
- Paper, Alert, Stack,
-} from '@mui/material';
-import ROUTES_UPLOAD from './routes';
-import ROUTES_USERS from '../users/routes';
-import UploadPage from './components/UploadPage';
-import AlertDialog from '../app/components/AlertDialog';
-import UsersContainer from '../users/UsersContainer';
-import Loading from '../app/components/Loading';
-import useAxios from '../app/utilities/useAxios';
+import { withRouter } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { Paper, Alert, Stack } from "@mui/material";
+import ROUTES_UPLOAD from "./routes";
+import ROUTES_USERS from "../users/routes";
+import UploadPage from "./components/UploadPage";
+import AlertDialog from "../app/components/AlertDialog";
+import UsersContainer from "../users/UsersContainer";
+import Loading from "../app/components/Loading";
+import useAxios from "../app/utilities/useAxios";
const UploadContainer = () => {
const [uploadFiles, setUploadFiles] = useState([]); // array of objects for files to be uploaded
const [datasetList, setDatasetList] = useState([{}]); // holds the array of names of datasets
const [loading, setLoading] = useState(false);
const [refresh, setRefresh] = useState(false); // Used for page refresh instead of loading progress
- const [datasetSelected, setDatasetSelected] = useState(''); // string identifying which dataset is being uploaded
+ const [datasetSelected, setDatasetSelected] = useState(""); // string identifying which dataset is being uploaded
const [replaceData, setReplaceData] = useState(false); // if true, we will replace all
const [alertContent, setAlertContent] = useState();
const [alert, setAlert] = useState(false);
- const [currentUser, setCurrentUser] = useState('');
- const [alertSeverity, setAlertSeverity] = useState('');
+ const [currentUser, setCurrentUser] = useState("");
+ const [alertSeverity, setAlertSeverity] = useState("");
const [openDialog, setOpenDialog] = useState(false);
const [adminUser, setAdminUser] = useState(false);
const axios = useAxios();
@@ -33,7 +31,11 @@ const UploadContainer = () => {
setDatasetList(response.data);
setRefresh(false);
axios.get(ROUTES_USERS.CURRENT).then((currentUserResp) => {
- if (currentUserResp.data && currentUserResp.data.user_permissions && currentUserResp.data.user_permissions.admin === true) {
+ if (
+ currentUserResp.data &&
+ currentUserResp.data.user_permissions &&
+ currentUserResp.data.user_permissions.admin === true
+ ) {
setAdminUser(true);
setCurrentUser(currentUserResp.data.idir);
}
@@ -43,75 +45,88 @@ const UploadContainer = () => {
const showError = (error) => {
const { response: errorResponse } = error;
- setAlertContent(`${errorResponse.data.message}\n${errorResponse.data.errors ? 'Errors: ' + errorResponse.data.errors.join('\n') : ''}`);
- setAlertSeverity('error');
+ setAlertContent(
+ `${errorResponse.data.message}\n${errorResponse.data.errors ? "Errors: " + errorResponse.data.errors.join("\n") : ""}`,
+ );
+ setAlertSeverity("error");
setAlert(true);
};
- const doUpload = () => uploadFiles.forEach((file) => {
- setLoading(true)
- const uploadPromises = uploadFiles.map((file) => {
- return axios.get(ROUTES_UPLOAD.MINIO_URL).then((response) => {
- const { url: uploadUrl, minio_object_name: filename } = response.data;
- return axiosDefault.put(uploadUrl, file).then(() => {
- let replace = false;
- if (replaceData === true) {
- replace = true;
- }
- return axios.post(ROUTES_UPLOAD.UPLOAD, {
- filename,
- datasetSelected,
- replace,
+ const doUpload = () =>
+ uploadFiles.forEach((file) => {
+ setLoading(true);
+ const uploadPromises = uploadFiles.map((file) => {
+ return axios.get(ROUTES_UPLOAD.MINIO_URL).then((response) => {
+ const { url: uploadUrl, minio_object_name: filename } = response.data;
+ return axiosDefault.put(uploadUrl, file).then(() => {
+ let replace = false;
+ if (replaceData === true) {
+ replace = true;
+ }
+ return axios.post(ROUTES_UPLOAD.UPLOAD, {
+ filename,
+ datasetSelected,
+ replace,
+ });
});
});
});
- });
-
- Promise.all(uploadPromises).then((responses) => {
-
- const errorCheck = responses.some(response => response.data.success)
-
- setAlertSeverity(errorCheck ? 'success' : 'error')
- const message = responses.map(response =>
- `${response.data.message}${response.data.errors ? '\nErrors: ' + response.data.errors.join('\n') : ''}`
- ).join('\n');
-
- setAlertContent(message);
- setAlert(true);
- setUploadFiles([]);
- }).catch((error) => {
- showError(error);
- }).finally(() => {
- setLoading(false);
+ Promise.all(uploadPromises)
+ .then((responses) => {
+ const errorCheck = responses.some(
+ (response) => response.data.success,
+ );
+
+ setAlertSeverity(errorCheck ? "success" : "error");
+
+ const message = responses
+ .map(
+ (response) =>
+ `${response.data.message}${response.data.errors ? "\nErrors: " + response.data.errors.join("\n") : ""}`,
+ )
+ .join("\n");
+
+ setAlertContent(message);
+ setAlert(true);
+ setUploadFiles([]);
+ })
+ .catch((error) => {
+ showError(error);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
});
- });
const downloadSpreadsheet = () => {
- axios.get(ROUTES_UPLOAD.DOWNLOAD_SPREADSHEET, {
- params: {
- datasetSelected,
- },
- responseType: 'blob',
- }).then((response) => {
- const url = window.URL.createObjectURL(new Blob([response.data]));
- const link = document.createElement('a');
-
- link.href = url;
- link.setAttribute('download', `${datasetSelected}.xlsx`);
- document.body.appendChild(link);
- link.click();
-
- link.parentNode.removeChild(link);
- window.URL.revokeObjectURL(url);
- }).catch((error) => {
- showError(error);
- });
+ axios
+ .get(ROUTES_UPLOAD.DOWNLOAD_SPREADSHEET, {
+ params: {
+ datasetSelected,
+ },
+ responseType: "blob",
+ })
+ .then((response) => {
+ const url = window.URL.createObjectURL(new Blob([response.data]));
+ const link = document.createElement("a");
+
+ link.href = url;
+ link.setAttribute("download", `${datasetSelected}.xlsx`);
+ document.body.appendChild(link);
+ link.click();
+
+ link.parentNode.removeChild(link);
+ window.URL.revokeObjectURL(url);
+ })
+ .catch((error) => {
+ showError(error);
+ });
};
const handleRadioChange = (event) => {
const choice = event.target.value;
- if (choice === 'replace') {
+ if (choice === "replace") {
setOpenDialog(true);
} else {
setReplaceData(false);
@@ -119,13 +134,13 @@ const UploadContainer = () => {
};
const handleReplaceDataConfirm = () => {
- setReplaceData(true)
- setOpenDialog(false)
- }
+ setReplaceData(true);
+ setOpenDialog(false);
+ };
const handleReplaceDataCancel = () => {
- setOpenDialog(false)
- }
+ setOpenDialog(false);
+ };
useEffect(() => {
refreshList(true);
@@ -135,13 +150,17 @@ const UploadContainer = () => {
return ;
}
- const alertElement = alert && alertContent && alertSeverity ?
- {alertContent.split('\n').map((line, index) => (
-
- {line}
-
-
- ))} : null
+ const alertElement =
+ alert && alertContent && alertSeverity ? (
+
+ {alertContent.split("\n").map((line, index) => (
+
+ {line}
+
+
+ ))}
+
+ ) : null;
return (
@@ -149,11 +168,13 @@ const UploadContainer = () => {
<>
@@ -184,5 +205,5 @@ const UploadContainer = () => {
);
-}
+};
export default withRouter(UploadContainer);
diff --git a/frontend/src/uploads/components/FileDrop.js b/frontend/src/uploads/components/FileDrop.js
index 7780eba4..31650e1d 100644
--- a/frontend/src/uploads/components/FileDrop.js
+++ b/frontend/src/uploads/components/FileDrop.js
@@ -1,38 +1,32 @@
-import PropTypes from 'prop-types';
-import React, { useCallback, useState } from 'react';
-import { Box, Button } from '@mui/material';
-import UploadIcon from '@mui/icons-material/Upload';
-import { useDropzone } from 'react-dropzone';
+import PropTypes from "prop-types";
+import React, { useCallback, useState } from "react";
+import { Box, Button } from "@mui/material";
+import UploadIcon from "@mui/icons-material/Upload";
+import { useDropzone } from "react-dropzone";
const FileDrop = (props) => {
- const {
- disabled,
- setFiles,
- setAlert,
- } = props;
- const [dropMessage, setDropMessage] = useState('');
+ const { disabled, setFiles, setAlert } = props;
+ const [dropMessage, setDropMessage] = useState("");
const onDrop = useCallback((files) => {
- setAlert(false)
- setDropMessage('');
+ setAlert(false);
+ setDropMessage("");
setFiles(files);
}, []);
const { getRootProps, getInputProps } = useDropzone({ onDrop });
- const uploadBoxClassNames = disabled ? "file-upload disabled" : "file-upload"
+ const uploadBoxClassNames = disabled ? "file-upload disabled" : "file-upload";
return (
- Drag and Drop files here or
- {' '}
-
+ Drag and Drop files here or
-
+
- {dropMessage && (
-
{dropMessage}
- )}
+ {dropMessage &&
{dropMessage}
}
);
diff --git a/frontend/src/uploads/components/FileDropArea.js b/frontend/src/uploads/components/FileDropArea.js
index 680a088f..97dd05e0 100644
--- a/frontend/src/uploads/components/FileDropArea.js
+++ b/frontend/src/uploads/components/FileDropArea.js
@@ -1,20 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box, Button, Grid } from '@mui/material';
-import ClearIcon from '@mui/icons-material/Clear';
-import FileDrop from './FileDrop';
-import getFileSize from '../../app/utilities/getFileSize';
+import React from "react";
+import PropTypes from "prop-types";
+import { Box, Button, Grid } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import FileDrop from "./FileDrop";
+import getFileSize from "../../app/utilities/getFileSize";
const FileDropArea = (props) => {
- const {
- disabled,
- setUploadFiles,
- uploadFiles,
- setAlert,
- } = props;
+ const { disabled, setUploadFiles, uploadFiles, setAlert } = props;
const removeFile = (removedFile) => {
- const found = uploadFiles.findIndex((file) => (file === removedFile));
+ const found = uploadFiles.findIndex((file) => file === removedFile);
uploadFiles.splice(found, 1);
setUploadFiles([...uploadFiles]);
};
@@ -38,7 +33,7 @@ const FileDropArea = (props) => {
type="button"
id="trash-button"
>
-
+
@@ -57,20 +52,18 @@ const FileDropArea = (props) => {
{uploadFiles.length > 0 && (
-
-
-
- Filename
+
+
+
+ Filename
+
+
+ Size
+
+
+ {uploadFiles.map((file) => FormRow(file))}
-
- Size
-
-
- {uploadFiles.map((file) => (
- FormRow(file)
- ))}
-
-
+
)}
diff --git a/frontend/src/uploads/components/UploadPage.js b/frontend/src/uploads/components/UploadPage.js
index 330ff4a4..6228e42b 100644
--- a/frontend/src/uploads/components/UploadPage.js
+++ b/frontend/src/uploads/components/UploadPage.js
@@ -1,11 +1,18 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import PropTypes from "prop-types";
+import React from "react";
import {
- Box, Button, MenuItem, Select, Radio, RadioGroup, FormControlLabel, FormControl,
-} from '@mui/material';
-import UploadIcon from '@mui/icons-material/Upload';
-import FileDropArea from './FileDropArea';
-import Loading from '../../app/components/Loading';
+ Box,
+ Button,
+ MenuItem,
+ Select,
+ Radio,
+ RadioGroup,
+ FormControlLabel,
+ FormControl,
+} from "@mui/material";
+import UploadIcon from "@mui/icons-material/Upload";
+import FileDropArea from "./FileDropArea";
+import Loading from "../../app/components/Loading";
const UploadPage = (props) => {
const {
@@ -34,19 +41,23 @@ const UploadPage = (props) => {
{alertElement}
-
- Select Program
-
+ Select Program
- {datasetSelected && }
-
+ {datasetSelected && (
+
+ )}
@@ -58,13 +69,13 @@ const UploadPage = (props) => {
defaultValue="add"
>
}
label="Add to existing data (default)"
/>
}
label="Replace existing data (data cannot be restored, proceed only if you are certain that the new file contains all required data)."
@@ -74,13 +85,20 @@ const UploadPage = (props) => {
-
+
{loading ? (
) : (
@@ -112,10 +130,8 @@ UploadPage.propTypes = {
setUploadFiles: PropTypes.func.isRequired,
doUpload: PropTypes.func.isRequired,
setDatasetSelected: PropTypes.func.isRequired,
- replaceData: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- ]).isRequired,
+ replaceData: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+ .isRequired,
handleRadioChange: PropTypes.func.isRequired,
downloadSpreadsheet: PropTypes.func.isRequired,
setAlert: PropTypes.func.isRequired,
diff --git a/frontend/src/uploads/router.js b/frontend/src/uploads/router.js
index 3575a73d..19d0271d 100644
--- a/frontend/src/uploads/router.js
+++ b/frontend/src/uploads/router.js
@@ -1,16 +1,12 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
+import React from "react";
+import { Route } from "react-router-dom";
-import UploadContainer from './UploadContainer';
+import UploadContainer from "./UploadContainer";
-const Router = () => ([
-
+const Router = () => [
+
,
-]);
+];
export default Router;
diff --git a/frontend/src/uploads/routes.js b/frontend/src/uploads/routes.js
index 6d3299f5..3a41f837 100644
--- a/frontend/src/uploads/routes.js
+++ b/frontend/src/uploads/routes.js
@@ -1,10 +1,10 @@
-const API_BASE_PATH = '/api/uploads';
+const API_BASE_PATH = "/api/uploads";
const UPLOAD = {
- MINIO_URL: '/api/minio/put',
+ MINIO_URL: "/api/minio/put",
UPLOAD: `${API_BASE_PATH}/import_data`,
LIST: `${API_BASE_PATH}/datasets_list`, // backend route for retrieving list of datasets (eg ldv_rebates)
- DOWNLOAD_SPREADSHEET: `${API_BASE_PATH}/download_dataset`
+ DOWNLOAD_SPREADSHEET: `${API_BASE_PATH}/download_dataset`,
};
export default UPLOAD;
diff --git a/frontend/src/users/UsersContainer.js b/frontend/src/users/UsersContainer.js
index 5f0381bc..38711305 100644
--- a/frontend/src/users/UsersContainer.js
+++ b/frontend/src/users/UsersContainer.js
@@ -1,50 +1,52 @@
-import { withRouter } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { Alert } from '@mui/material';
-import React, { useState, useEffect, useCallback } from 'react';
-import { produce } from 'immer';
-import ROUTES_USERS from './routes';
-import UsersPage from './components/UsersPage';
-import useAxios from '../app/utilities/useAxios';
-import AlertDialog from '../app/components/AlertDialog';
-import Loading from '../app/components/Loading';
+import { withRouter } from "react-router-dom";
+import PropTypes from "prop-types";
+import { Alert } from "@mui/material";
+import React, { useState, useEffect, useCallback } from "react";
+import { produce } from "immer";
+import ROUTES_USERS from "./routes";
+import UsersPage from "./components/UsersPage";
+import useAxios from "../app/utilities/useAxios";
+import AlertDialog from "../app/components/AlertDialog";
+import Loading from "../app/components/Loading";
const UsersContainer = (props) => {
- const {
- currentUser,
- } = props;
+ const { currentUser } = props;
const [loading, setLoading] = useState(false);
const [users, setUsers] = useState([]);
- const [newUser, setNewUser] = useState('');
- const [message, setMessage] = useState('');
- const [messageSeverity, setMessageSeverity] = useState('');
- const [userToDelete, setUserToDelete] = useState('');
+ const [newUser, setNewUser] = useState("");
+ const [message, setMessage] = useState("");
+ const [messageSeverity, setMessageSeverity] = useState("");
+ const [userToDelete, setUserToDelete] = useState("");
const [openDialog, setOpenDialog] = useState(false);
const axios = useAxios();
const handleAddNewUser = () => {
- axios.post(ROUTES_USERS.CREATE, { idir: newUser })
+ axios
+ .post(ROUTES_USERS.CREATE, { idir: newUser })
.then((response) => {
const userAdded = response.data.idir;
- setMessageSeverity('success');
+ setMessageSeverity("success");
setMessage(`${userAdded} was added to the user list`);
- const userObject = { idir: userAdded, user_permissions: { admin: false, uploader: false } };
+ const userObject = {
+ idir: userAdded,
+ user_permissions: { admin: false, uploader: false },
+ };
setUsers(
produce((draft) => {
draft.push(userObject);
draft.sort((a, b) => a.idir.localeCompare(b.idir));
}),
);
- setNewUser('')
+ setNewUser("");
})
.catch((error) => {
- setMessageSeverity('error');
- setMessage('new user could not be added, sorry!');
+ setMessageSeverity("error");
+ setMessage("new user could not be added, sorry!");
});
};
const handleCheckboxChange = useCallback((event) => {
- setMessage('');
+ setMessage("");
const idir = event.target.name;
const permissionType = event.target.id;
const { checked } = event.target;
@@ -59,43 +61,47 @@ const UsersContainer = (props) => {
const handleDeleteUserClick = (idir) => {
setUserToDelete(idir);
setOpenDialog(true);
- }
+ };
const handleDeleteUser = () => {
- axios.delete(ROUTES_USERS.DETAILS.replace(/:id/g, userToDelete))
+ axios
+ .delete(ROUTES_USERS.DETAILS.replace(/:id/g, userToDelete))
.then((response) => {
- setMessageSeverity('success');
+ setMessageSeverity("success");
setMessage(`${userToDelete} was deleted from the user table`);
setUsers(
produce((draft) => {
- const indexOfUserToRemove = draft.findIndex((user) => user.idir === userToDelete);
+ const indexOfUserToRemove = draft.findIndex(
+ (user) => user.idir === userToDelete,
+ );
draft.splice(indexOfUserToRemove, 1);
}),
);
})
.catch((error) => {
- setMessageSeverity('error');
- setMessage('something went wrong when deleting the user, sorry!');
+ setMessageSeverity("error");
+ setMessage("something went wrong when deleting the user, sorry!");
})
.finally(() => {
- setUserToDelete('');
- setOpenDialog(false)
+ setUserToDelete("");
+ setOpenDialog(false);
});
- }
+ };
const handleDeleteUserCancel = () => {
- setUserToDelete('');
+ setUserToDelete("");
setOpenDialog(false);
- }
+ };
const handleSubmitUserUpdates = () => {
- axios.put(ROUTES_USERS.UPDATE, users)
+ axios
+ .put(ROUTES_USERS.UPDATE, users)
.then((response) => {
- setMessageSeverity('success');
+ setMessageSeverity("success");
setMessage(response.data);
})
.catch((error) => {
- setMessageSeverity('error');
+ setMessageSeverity("error");
setMessage(error.data);
});
};
@@ -109,20 +115,20 @@ const UsersContainer = (props) => {
}, []);
if (loading) {
- return
+ return ;
}
return (
{message &&
{message}}
-
+
{
const {
@@ -24,10 +30,32 @@ const UsersPage = (props) => {
return (
- { handleCheckboxChange(event); }} />
-
+ {
+ handleCheckboxChange(event);
+ }}
+ />
+
- { handleCheckboxChange(event); }} />
+ {
+ handleCheckboxChange(event);
+ }}
+ />
@@ -35,14 +63,22 @@ const UsersPage = (props) => {
{user.idir}
-
+
{ handleXClick(user.idir); }}
+ onClick={() => {
+ handleXClick(user.idir);
+ }}
>
-
+
@@ -58,20 +94,47 @@ const UsersPage = (props) => {
Admin
- IDIR Username
-
+ IDIR Username
- { setNewUser(event.target.value); setMessage(''); }} />
+ {
+ setNewUser(event.target.value);
+ setMessage("");
+ }}
+ />
-
+
-
@@ -81,7 +144,13 @@ const UsersPage = (props) => {
-
+
Upload
@@ -89,11 +158,20 @@ const UsersPage = (props) => {
Admin
- {users.map((user) => (
- userRow(user)
- ))}
-
- } onClick={handleSubmitUserUpdates}>
+ {users.map((user) => userRow(user))}
+
+ }
+ onClick={handleSubmitUserUpdates}
+ >
Save
@@ -103,7 +181,7 @@ const UsersPage = (props) => {
);
};
UsersPage.defaultProps = {
- newUser: '',
+ newUser: "",
};
UsersPage.propTypes = {
diff --git a/frontend/src/users/routes.js b/frontend/src/users/routes.js
index 6cb6c026..8d6d7793 100644
--- a/frontend/src/users/routes.js
+++ b/frontend/src/users/routes.js
@@ -1,4 +1,4 @@
-const API_BASE_PATH = '/api/users';
+const API_BASE_PATH = "/api/users";
const USERS = {
LIST: API_BASE_PATH,