Merge pull request #19 from jfabellera/groups

Groups and Descriptions

app.js

@@ -21,6 +21,7 @@ mongoose.connection.on('error', (err) => {
 
 const usersRouter = require('./routes/users');
 const expensesRouter = require('./routes/expenses');
+const groupsRouter = require('./routes/groups');
 
 let app = express();
 
@@ -31,5 +32,6 @@ app.use(express.json());
 
 app.use('/users', usersRouter);
 app.use('/expenses', expensesRouter.router);
+app.use('/groups', groupsRouter.router);
 
-app.listen(5000);
+app.listen(5000);

frontend/package.json

@@ -13,6 +13,7 @@
     "apexcharts": "^3.23.1",
     "axios": "^0.21.1",
     "bootstrap": "^4.5.3",
+    "immutability-helper": "^3.1.1",
     "moment": "^2.29.1",
     "querystring": "^0.2.0",
     "react": "^17.0.1",

frontend/public/styles.css

@@ -15,15 +15,18 @@ html {
 input[type='date']::-webkit-calendar-picker-indicator {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
-  bottom: 0;
-  width: auto;
-  height: auto;
+  width: 100%;
+  height: 100%;
   color: transparent;
+  border: 0;
   background: transparent;
 }
 
+input[type='date']::-webkit-calendar-picker-indicator:active {
+  border: 0;
+}
+
 /* Hide number input spinners */
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,

frontend/src/App.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
 
 import NavBar from './components/navBar';
 import LandingPage from './containers/home/landingPage';
 import Terms from './containers/home/terms';
 import Login from './containers/users/login';
 import Register from './containers/users/register';
 import Dashboard from './containers/expenses/dashboard';
+import Expenses from './containers/expenses/expenses';
 
 class App extends Component {
   render() {
@@ -20,8 +21,10 @@ class App extends Component {
           <Route exact path='/' component={LandingPage} />
           <Route exact path='/about/terms' component={Terms} />
           <Route path='/dashboard' component={Dashboard} />
+          <Route path='/expenses' component={Expenses} />
           <Route path='/login' component={Login} />
           <Route path='/register' component={Register} />
+          <Route render={() => <Redirect to={{ pathname: '/' }} />} />
         </div>
       </Router>
     );

frontend/src/components/customInputSelect.jsx

@@ -42,15 +42,16 @@ class CustomInputSelect extends Component {
     }
   }
 
-  getSuggestions = () => {
-    const escapedValue = escapeRegexCharacters(String(this.state.value).trim());
+  getSuggestions = (value) => {
+    const escapedValue = escapeRegexCharacters(String(value).trim());
     const regex = new RegExp('^' + escapedValue, 'i');
     const suggestions = this.props.options.filter((option) =>
       regex.test(option)
     );
 
     if (suggestions.length > 0) return suggestions;
-    else return [{ isAddNew: true }];
+    else if (this.state.value) return [{ isAddNew: true }];
+    else return [];
   };
 
   getSuggestionValue = (suggestion) => {
@@ -79,7 +80,7 @@ class CustomInputSelect extends Component {
   onClear = (e) => {
     const input = e.currentTarget.parentNode.getElementsByTagName('input')[0];
     this.setState({ value: '', suggestions: this.props.options }, () => {
-      input.focus()
+      input.focus();
     });
   };
 

frontend/src/components/expensesTable.css

@@ -1,9 +1,9 @@
-table {
+.expenses-table table {
   table-layout: fixed;
   z-index: 1;
 }
 
-td span {
+.expenses-table td span {
   display: block;
   white-space: nowrap;
   overflow: hidden;
@@ -14,22 +14,30 @@ td span {
   width: 4rem;
 }
 
-table thead th {
+.expenses-table table thead th {
   position: sticky;
   top: 0;
   background-color: white;
   z-index: 3;
 }
 
-td svg,
-table thead th span {
+.expenses-table td svg,
+.expenses-table table thead th span {
   cursor: pointer;
 }
 
-tbody tr:hover svg {
+.expenses-table tbody tr:hover svg {
   visibility: visible;
 }
 
+.expenses-table tbody tr:hover svg:hover {
+  opacity: 50%;
+}
+
+.expenses-table tbody tr:hover td:not(.expense-action) {
+  cursor: pointer;
+}
+
 .expense-normal,
 .expense-confirm {
   display: flex;
@@ -50,10 +58,19 @@ tbody tr:hover svg {
   background-color: rgb(255, 93, 93);
 }
 
-tbody tr:hover:not(.expense-delete) {
+.expense-edit {
+  background-color: rgb(235, 192, 0);
+}
+
+.expenses-table tbody tr:hover:not(.expense-delete),
+.expenses-table .expense-select {
   background-color: lightgray;
 }
 
-table tbody tr td {
+.expenses-table table tbody tr td {
   position: relative;
 }
+
+.expenses-table .fade {
+  transition: 0;
+}