Merge pull request carrawao#75 from carrawao/feature/activities

Feature/activities
fefifef · May 13, 2022 · 8e628a4 · 8e628a4
2 parents 4b73ca0 + 866a1a1
commit 8e628a4
Show file tree

Hide file tree

Showing 13 changed files with 230 additions and 217 deletions.
diff --git a/Backend/data/shareSymbols.txt b/Backend/data/shareSymbols.txt
@@ -1 +1,7 @@
-IBM
+IBM
+A
+JPM-P-M
+AMZN
+AADI
+K
+FB
diff --git a/Frontend/src/Example DataJSON.jsonc b/Frontend/src/Example DataJSON.jsonc
diff --git a/Frontend/src/components/common/SearchField.jsx b/Frontend/src/components/common/SearchField.jsx
@@ -38,6 +38,7 @@ const SearchField = props => {
   return (
     <TextField
       id='search-field'
+      autoComplete='off'
       variant='standard'
       placeholder='Search Asset'
       className='d-flex flex-grow-1'

diff --git a/Frontend/src/components/common/SearchResultsTable.jsx b/Frontend/src/components/common/SearchResultsTable.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
+import {Link, useNavigate} from 'react-router-dom';
 import {Avatar, Button, Grid, List, ListItem, ListItemButton, Typography, Tooltip} from '@mui/material';
 import DoneIcon from '@mui/icons-material/Done';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
@@ -32,6 +32,11 @@ const SearchResultsTable = props => {
     return isAssetInWatchList;
   }
 
+  let navigate = useNavigate();
+  const routeChange = path => {
+    navigate(path);
+  } 
+
   /**
    * Renders each item if the search results table
    * @param element
@@ -88,17 +93,23 @@ const SearchResultsTable = props => {
           <Grid
             item
             className={`d-flex flex-column ${props.watchListsArray && props.watchListsArray.length > 0 ? 'flex-xl-row flex-grow-1 col-1 pe-4' : 'col-9 col-sm-10'}`}>
-            <Typography
-              noWrap
-              className={`${props.watchListsArray && props.watchListsArray.length > 0 && 'col-xl-8'}`}
-              fontSize={{
-                lg: 16,
-                md: 15,
-                xs: 14
-              }}
+            <Link
+              className='col-12 text-decoration-none text-black'
+              to={`/asset/${element.assetType}/${element.symbol}`}
+              key={`search_result_links_${index}`}
             >
-              {element.name ? element.name : element.symbol}
-            </Typography>
+              <Typography
+                noWrap
+                className={`${props.watchListsArray && props.watchListsArray.length > 0 && 'col-xl-8'}`}
+                fontSize={{
+                  lg: 16,
+                  md: 15,
+                  xs: 14
+                }}
+              >
+                {element.name ? element.name : element.symbol}
+              </Typography>
+            </Link>
 
             <Typography
               className={`fw-bold ${props.watchListsArray && props.watchListsArray.length > 0 && 'ms-xl-3 text-xl-center'} col-lg-4`}
@@ -112,7 +123,39 @@ const SearchResultsTable = props => {
               {element.assetType}
             </Typography>
           </Grid>
-
+          {!props.watchListsArray && 
+            <Grid item className='d-flex flex-row justify-content-end'>
+              <ListItemButton
+                className='p-0 ms-3 flex-grow-0 justify-content-end'
+                onClick={() => {routeChange(`../activities/addActivity/${element.assetType}/${element.symbol}/${element.name}`)}}
+              >
+                <Tooltip
+                  title='Add Activity'
+                  arrow
+                  componentsProps={{
+                    tooltip: {
+                      sx: {
+                        color: 'white',
+                        fontSize: '14px',
+                        fontWeight: 'bold',
+                        backgroundColor: '#30302f',
+                        '& .MuiTooltip-arrow': {
+                          color: '#30302f'
+                        },
+                      },
+                    },
+                  }}
+                >
+                  <Avatar
+                    className='me-2'
+                    sx={{width: '1.4rem', height: '1.4rem', backgroundColor: 'white', border: 'solid 2px #493f35'}}
+                  >
+                    <AddIcon sx={{color: '#493f35', fontSize: '20px'}}/>
+                  </Avatar>
+                </Tooltip>
+              </ListItemButton>
+            </Grid>
+          }
           {props.watchListsArray && props.watchListsArray.length > 0 &&
             <Grid item className='d-flex flex-row justify-content-end'>
               <Avatar
@@ -156,8 +199,7 @@ const SearchResultsTable = props => {
               </ListItemButton>
               <ListItemButton
                 className='p-0 ms-3 flex-grow-0 justify-content-end'
-                onClick={() => {
-                }}
+                onClick={() => {routeChange(`../activities/addActivity/${element.assetType}/${element.symbol}/${element.name}`)}}
               >
                 <Tooltip
                   title='Add Activity'
@@ -196,17 +238,7 @@ const SearchResultsTable = props => {
       <List
         className={`d-flex flex-column ${props.watchListsArray && props.watchListsArray.length > 0 ? 'col-12 col-sm-10 col-lg-9 col-xl-11' : 'col-12 col-sm-11 col-md-10 col-lg-11 col-xl-9'}`}>
         {props.searchResult.map((element, index) => {
-          return props.watchListsArray && props.watchListsArray.length > 0 ?
-            renderSearchResultList(element, index)
-            : (
-              <Link
-                className='col-12 text-decoration-none text-black'
-                to={`/asset/${element.assetType}/${element.symbol}`}
-                key={`search_result_links_${index}`}
-              >
-                {renderSearchResultList(element, index)}
-              </Link>
-            )
+          return renderSearchResultList(element, index)
         })}
       </List>
       <Button

diff --git a/Frontend/src/components/screens/Activities/ActivitiesList.jsx b/Frontend/src/components/screens/Activities/ActivitiesList.jsx
@@ -71,7 +71,21 @@ const ActivitiesList = (props) => {
     <Container className='p-0'>
       {years.map((year, index) => (
       <Container className='p-0' key={`activitiesList_${year}`}>
-        <Typography variant='h4' sx={{margin: '1rem', marginBottom: '0rem'}}>{year}</Typography>
+        <Box className='d-flex flex-row justify-content-between align-items-start'>
+          <Typography variant='h4' sx={{margin: '1rem', marginBottom: '0rem'}}>
+            {year}
+          </Typography>
+          <Box className='d-none d-md-flex'>
+            <Typography variant='h6' sx={{margin: '1rem', marginBottom: '0rem'}}> 
+            {activitiesForEachYearArray[index].length} total ·&nbsp; 
+              {activitiesForEachYearArray[index].filter(activity => activity.type === 'buy').length} buys ·&nbsp; 
+              {activitiesForEachYearArray[index].filter(activity => activity.type === 'sell').length} sells ·&nbsp;
+              {activitiesForEachYearArray[index].filter(activity => activity.type === 'dividend').length} dividends ·&nbsp; 
+              {activitiesForEachYearArray[index].filter(activity => activity.type === 'deposit').length} deposits ·&nbsp; 
+              {activitiesForEachYearArray[index].filter(activity => activity.type === 'payout').length} payouts 
+            </Typography>
+          </Box>
+        </Box>
         <Box>
           <List className='d-flex flex-column'>
             {activitiesForEachYearArray[index].map((element, i) => (

diff --git a/Frontend/src/components/screens/Activities/ActivitiesScreen.jsx b/Frontend/src/components/screens/Activities/ActivitiesScreen.jsx
@@ -3,7 +3,8 @@ import {useNavigate} from 'react-router-dom';
 import {
   Container,
   Button,
-  Grid
+  Grid,
+  Typography
 } from '@mui/material';
 import PropTypes from 'prop-types';
 
@@ -30,44 +31,16 @@ const ActivitiesScreen = props => {
     navigate(path);
   }
 
-  const dummyCash = () => {
-    const cash = [{
-      firstActivity: '2900-01-01',     
-      id: 0,
-      symbol: 'ING',
-      name: 'ING Konto',
-      assetTypeForDisplay: 'Cash',
-      value: 0,
-      quantity: 1,
-      gains: 0,
-      realisedGains: 0,
-      totalGains: 0,
-      performanceWithRealisedGains: 0,
-      performanceWithOutRealisedGains: 0,
-      taxes: 0,
-      fees: 0,
-      dailyDataForPerformanceGraph: [],
-      dailyDataForValueDevelopment: [],
-      stateChanges: [],
-      deposits: [],
-      analysisInfo: undefined
-    }]
-
-    props.setPortfolioData(prevData => {
-      const portfolioData = {...prevData};
-      portfolioData[props.activePortfolio]['cash'] = cash;
-      return portfolioData;
-    });
-  }
-
   const deleteActivity = async () => {
     if (portfolioData['activities'].length <= 1) {
-      alert(`You need at least one activity in your portfolio!`);
+      props.setStatusMessage('You need at least one activity in your portfolio!');
+      props.setMessageType('error');
       return;
     }
     const dependedOn = checkIfDependedOn(selectedActivityId);
     if (dependedOn) {
-      alert(`Activity can't be deleted because others depend on it!`);
+      props.setStatusMessage(`Activity can't be deleted because others depend on it!`);
+      props.setMessageType('error');
       return;
     }
 
@@ -152,26 +125,37 @@ const ActivitiesScreen = props => {
   const renderBody = () => (
     <Grid className='d-flex justify-content-center pt-2'>
       <Container className='p-0'>
-        <Button onClick={() => dummyCash()}>Add a dummy cash account</Button>
-        <Button
-          className='my-3'
-          variant='outlined'
-          onClick={() => routeChange('addActivity')}
-          sx={{
-            color: 'white',
-            borderColor: '#4eb96f',
-            backgroundColor: '#4eb96f',
-            '&:hover': {
-              borderColor: '#068930',
-              backgroundColor: '#4eb96f',
-            },
-            '&.Mui-disabled': {
-              backgroundColor: 'rgb(228 231 235)',
-            }
-          }}
+        <Grid 
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
         >
-          Add Activity
-        </Button>
+          <Typography
+            variant='h3'
+          >
+            Activities 
+          </Typography>
+          <Button
+            className='my-3'
+            variant='outlined'
+            onClick={() => routeChange('addActivity')}
+            sx={{
+              color: 'white',
+              borderColor: '#4eb96f',
+              backgroundColor: '#4eb96f',
+              '&:hover': {
+                borderColor: '#068930',
+                backgroundColor: '#4eb96f',
+              },
+              '&.Mui-disabled': {
+                backgroundColor: 'rgb(228 231 235)',
+              }
+            }}
+          >
+            Add Activity
+          </Button>
+        </Grid>
         <ActivitiesList
           activePortfolio={props.activePortfolio}
           portfolioData={props.portfolioData}
-Original file line number
+Diff line change
@@ -1 +1,7 @@
-    IBM
+    IBM
+    A
+    JPM-P-M
+    AMZN
+    AADI
+    K
+    FB