feature: addActivity from serachResults

fefifef · May 13, 2022 · f69a14e · f69a14e
1 parent e91bd5e
commit f69a14e
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 68 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/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/ActivitiesScreen.jsx b/Frontend/src/components/screens/Activities/ActivitiesScreen.jsx
@@ -31,36 +31,6 @@ 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) {
       props.setStatusMessage('You need at least one activity in your portfolio!');

diff --git a/Frontend/src/components/screens/Dashboard/DashboardScreen.jsx b/Frontend/src/components/screens/Dashboard/DashboardScreen.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import ScreensTemplate from '../../ScreensTemplate';
-import {Grid, Box} from '@mui/material';
+import {Grid, Typography, Box, Button} from '@mui/material';
 import PropTypes from 'prop-types';
 import AllocationGraph from './AllocationGraph';
 import PortfolioOverview from './PortfolioOverview';
@@ -16,6 +16,36 @@ import ChartButtons from '../AssetDetails/ChartButtons';
 const DashboardScreen = props => {
   const [view, setView] = useState('month');
 
+  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 renderBody = () => (
     <React.Fragment>
       <Grid
@@ -30,19 +60,41 @@ const DashboardScreen = props => {
           />
         </Grid>
         <Box className='col-12 col-md-10 flex-xl-column col-xl-8'>
-          <Box className='d-flex justify-content-center mb-2'>
-            <ChartButtons view={view} setView={setView}/>
-          </Box>
           <Box className='d-flex justify-content-center mb-4'>
             <PortfolioOverview
               portfolioData={props.portfolioData}
               activePortfolio={props.activePortfolio}
               setActivePortfolio={props.setActivePortfolio}
             />
           </Box>
+          <Box className='d-flex justify-content-center mb-2'>
+            <ChartButtons view={view} setView={setView}/>
+          </Box>
         </Box>
       </Grid>
-      <PortfolioCharts view={view} {...props}/>
+      {Object.keys(props.portfolioData[props.activePortfolio]['dailyDataForValueDevelopment']).length === 0 ? 
+        <Typography></Typography>
+        :
+        <PortfolioCharts view={view} {...props}/>
+      }
+      <Button
+        variant='outlined'
+        type='submit'
+        onClick={() => dummyCash()}
+        sx={{
+          margin: '1rem',
+          color: '#4eb96f',
+          borderColor: '#4eb96f',
+          backgroundColor: 'white',
+          '&:hover': {
+            borderColor: '#068930',
+            backgroundColor: 'white',
+            color: '#068930',
+          },
+        }}
+      >
+        Add a dummy cash account
+      </Button>
     </React.Fragment>
   );
 

diff --git a/Frontend/src/components/screens/Dashboard/PortfolioOverview.jsx b/Frontend/src/components/screens/Dashboard/PortfolioOverview.jsx
@@ -5,7 +5,8 @@ import {
   Select,
   MenuItem,
   FormControl,
-  Typography
+  Typography,
+  IconButton
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -57,7 +58,13 @@ const PortfolioOverview = props => {
             </FormControl>
           </Grid>
           <Grid item>
-            <AddIcon/>
+            <IconButton
+              aria-label='add a portfolio'
+              size='medium'
+              onClick={() => {}}
+            >
+              <AddIcon/>
+            </IconButton>
             <SettingsIcon/>
           </Grid>
         </Grid>
@@ -74,11 +81,11 @@ const PortfolioOverview = props => {
         </Grid>
         <Grid item className='d-flex flex-column col-5 align-items-center'>
           <Typography variant='h6' gutterBottom display='block'>Realised Gains</Typography>
-          <Typography variant='h6' gutterBottom>{portfolio['realisedGains']}</Typography>
+          <Typography variant='h6' gutterBottom>{new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR',}).format(portfolio['realisedGains'])}</Typography>
         </Grid>
         <Grid item className='d-flex flex-column col-3 align-items-center'>
           <Typography variant='h6' gutterBottom>Dividends</Typography>
-          <Typography variant='h6' gutterBottom>0,00€</Typography>
+          <Typography variant='h6' gutterBottom>{new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR',}).format(portfolio['dividends'])}</Typography>
         </Grid>
       </Grid>
     </Grid>

diff --git a/Frontend/src/routes/index.jsx b/Frontend/src/routes/index.jsx
@@ -33,7 +33,7 @@ const emptyPortfolioData = {
     'gains': 0,
     'realisedGains': 0,
     'totalGains': 0,
-    'dividens': 0,
+    'dividends': 0,
     'performanceWithRealisedGains': 0,
     'performanceWithoutRealisedGains': 0,
     'shares': [],
@@ -380,7 +380,7 @@ const AppRoutes = () => {
       tempPortfolioData[activePortfolio]['gains'] = dailyDataForValueDevelopment[latestDateWithData]['gains'];
       tempPortfolioData[activePortfolio]['realisedGains'] = dailyDataForValueDevelopment[latestDateWithData]['realisedGains'];
       tempPortfolioData[activePortfolio]['totalGains'] = dailyDataForValueDevelopment[latestDateWithData]['totalGains'];
-      tempPortfolioData[activePortfolio]['dividens'] = dailyDataForValueDevelopment[latestDateWithData]['dividens'];
+      tempPortfolioData[activePortfolio]['dividends'] = dailyDataForValueDevelopment[latestDateWithData]['dividends'];
       tempPortfolioData[activePortfolio]['fees'] = dailyDataForValueDevelopment[latestDateWithData]['fees'];
       tempPortfolioData[activePortfolio]['taxes'] = dailyDataForValueDevelopment[latestDateWithData]['taxes'];
       tempPortfolioData[activePortfolio]['performanceWithRealisedGains'] = dailyDataForPerformanceGraph[latestDateWithData]['performanceWithRealisedGains'];
@@ -400,7 +400,7 @@ const AppRoutes = () => {
         if (assetDailyDataForValueDevelopment[dateKey] === undefined) return; //return equals continue in a forEach loop
 
         const portfolioDateData = dailyDataForValueDevelopment[dateKey] ? dailyDataForValueDevelopment[dateKey] :
-          {value: 0, invested: 0, gains: 0, realisedGains: 0, totalGains: 0, dividens: 0, taxes: 0, fees: 0};
+          {value: 0, invested: 0, gains: 0, realisedGains: 0, totalGains: 0, dividends: 0, taxes: 0, fees: 0};
         let assetDateData = assetDailyDataForValueDevelopment[dateKey];
         dailyDataForValueDevelopment[dateKey] = {};
         Object.keys(assetDateData).forEach(attribute => {
-Original file line number
+Diff line change
@@ -1 +1,7 @@
-    IBM
+    IBM
+    A
+    JPM-P-M
+    AMZN
+    AADI
+    K
+    FB