SPF-18: components that needs using for the watchlist

carrawao · Mar 30, 2022 · b1d3943 · b1d3943
1 parent 0c74e5f
commit b1d3943
Show file tree

Hide file tree

Showing 7 changed files with 523 additions and 1 deletion.
diff --git a/Frontend/src/components/common/CustomModal.jsx b/Frontend/src/components/common/CustomModal.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box,
+  Modal,
+  Container,
+  Typography, IconButton
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+/**
+ * Drawer navigation menu throughout the app
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CustomModal = (props) => {
+  return (
+    <Modal
+      open={props.open}
+      onClose={() => props.handleClose()}
+      aria-labelledby={props.labelledby}
+    >
+      <Box sx={{...style}}>
+        <Container
+          className='d-flex justify-content-between px-0 align-self-center'
+        >
+          <Typography id={props.labelledby} variant='h6' component='h2' className='pb-3 mb-2'>
+            {props.modalTitle}
+          </Typography>
+          <IconButton
+            onClick={() => props.handleClose()}
+            className='px-0 py-1 align-self-start'
+          >
+            <CloseIcon style={{color: '#493f35'}}/>
+          </IconButton>
+        </Container>
+
+        {props.modalBody ? props.modalBody() : null}
+        {props.modalButton()}
+      </Box>
+    </Modal>
+  );
+}
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: {
+    xs: '70vw',
+    sm: '55vw',
+    md: '40vw',
+    lg: '30vw'
+  },
+  minHeight: '10vh',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  backgroundColor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  padding: '1.5rem'
+};
+
+CustomModal.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+  labelledby: PropTypes.string,
+  modalTitle: PropTypes.string,
+  modalBody: PropTypes.func,
+  modalButton: PropTypes.func,
+};
+
+export default CustomModal;
diff --git a/Frontend/src/components/common/CustomTable.jsx b/Frontend/src/components/common/CustomTable.jsx
@@ -0,0 +1,131 @@
+import React, {useState} from 'react';
+import {
+  TableContainer,
+  Paper,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  Avatar,
+  Typography
+} from '@mui/material';
+import PropTypes from 'prop-types';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DropdownMenu from "../screens/WatchLists/DropdownMenu";
+
+
+/**
+ * Table to show the different assets in watchlist
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CustomTable = (props) => {
+  const [listDropdownIndex, setListDropdownIndex] = useState(0);
+
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label='assets-table'>
+        <TableBody>
+          {props.assetsArray[props.selectedListIndex].map((row, index) => (
+            <TableRow
+              key={index}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 }, height: '3rem' }}
+            >
+              <TableCell
+                className='p-0'
+                sx={{
+                  width: {
+                    xs: '8vw',
+                    md: '5vw'
+                  }
+                }}
+              >
+                <Avatar
+                  alt={`${row.name}-logo`}
+                  src={`${process.env.PUBLIC_URL}/assets/images/allianz-logo.jpeg`}
+                  sx={{width: '2rem', height: '2rem'}}
+                />
+              </TableCell>
+              <TableCell
+                className='p-0'
+                sx={{
+                  width: {
+                    xs: '35vw',
+                    sm: '25vw',
+                    md: '15vw',
+                  }
+                }}
+              >
+                <Typography variant='body2' noWrap>
+                  {row.name}
+                </Typography>
+              </TableCell>
+              <TableCell
+                className='p-0'
+                align='right'
+                sx={{
+                  width: {
+                    xs: '15vw',
+                    sm: '20vw',
+                    md: '15vw',
+                  }
+                }}
+              >
+                <Typography variant='body2' noWrap>
+                  {row.price}
+                </Typography>
+              </TableCell>
+              <TableCell
+                className='p-0'
+                align='right'
+                sx={{
+                  width: {
+                    xs: '20vw',
+                    sm: '10vw',
+                    md: '15vw',
+                    lg: '10vw'
+                  }
+                }}
+              >
+                <Typography variant='body2' noWrap>
+                  {row.change}
+                </Typography>
+              </TableCell>
+              <TableCell
+                className='p-0'
+                align='right'
+                sx={{
+                  width: {
+                    xs: '20vw',
+                    sm: '10vw',
+                    lg: '10vw'
+                  }
+                }}
+              >
+                <DropdownMenu
+                  selectedListIndex={props.selectedListIndex}
+                  listName={props.watchListsArray[index]}
+                  setListDropdownIndex={setListDropdownIndex}
+                  menuOptions={['Delete']}
+                  iconOptions={[<DeleteIcon />]}
+                  functionOptions={[
+                    () => {}
+                  ]}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+CustomTable.propTypes = {
+  assetsArray: PropTypes.array,
+  selectedListIndex: PropTypes.number,
+  watchListsArray: PropTypes.array,
+  setWatchListsArray: PropTypes.func,
+};
+
+export default CustomTable;
diff --git a/Frontend/src/components/common/SearchField.jsx b/Frontend/src/components/common/SearchField.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import TextField from '@mui/material/TextField';
+import {Container, InputAdornment, IconButton} from "@mui/material";
+import SearchIcon from '@mui/icons-material/Search';
+
+//TODO: function for the search
+const search = () => console.log('Searching for asset');
+
+/**
+ * Component for the search field in the screens' header
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SearchField = () => {
+  return (
+    <Container className='px-0'>
+      <TextField
+        id='standard-basic'
+        variant='standard'
+        placeholder='Search Asset'
+        fullWidth
+        sx={{
+          '& .MuiInputBase-input': {
+            '&::-webkit-input-placeholder': {
+              color: 'black'
+            },
+          },
+          '& .MuiInput-underline': {
+            '&:after': {
+              borderBottomColor: '#493f35',
+            },
+            '&:focus::after': {
+              borderBottomColor: '#493f35',
+            },
+          },
+          '& .MuiInputBase-root:before': {
+            borderBottom: '1px solid #493f35',
+          },
+        }}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <IconButton onClick={search} className='pe-0'>
+                <SearchIcon style={{color: '#493f35'}}/>
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+    </Container>
+  );
+}
+
+export default SearchField;