Merge d4048d4 into 952caf6

src/common/Header/index.jsx

@@ -52,7 +52,6 @@ const Header = ({ children, match }) => {
     const { currentTarget } = event
     setAnchorEl(currentTarget)
     setOpen(!open)
-    console.log('currentTarget', currentTarget)
   }
 
   const handleClose = () => {
@@ -98,10 +97,10 @@ const Header = ({ children, match }) => {
                       <Paper>
                         <MenuList role="menu">
                           <MenuItem onClick={handleClose} component={LinkTo('/budget')}>
-                            <ListItemText primary="Budget History" />
+                            <ListItemText primary="History" />
                           </MenuItem>
                           <MenuItem onClick={handleClose} component={LinkTo('/budget-categories')}>
-                            <ListItemText primary="Budget Categories" />
+                            <ListItemText primary="Categories" />
                           </MenuItem>
                         </MenuList>
                       </Paper>

src/common/LoginButton/index.jsx

@@ -23,7 +23,8 @@ import { userLogout } from '../../store/user/actions'
 
 const styles = theme => ({
   root: {
-    display: 'flex'
+    display: 'flex',
+    minWidth: 135
   },
   popper: {
     zIndex: theme.zIndex.drawer + 1

src/common/Logo/index.jsx

@@ -8,7 +8,8 @@ import LinkTo from '../LinkTo'
 
 const styles = {
   logo: {
-    display: 'flex'
+    display: 'flex',
+    minWidth: 135
   },
   image: {
     width: '30px',

src/common/ModalDialog/index.jsx

@@ -71,7 +71,7 @@ const ModalDialog = ({
 ModalDialog.propTypes = {
   open: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
-  children: PropTypes.array.isRequired,
+  children: PropTypes.node.isRequired,
   onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,

src/core/Accounts/ImportTransactions/CsvImportForm.jsx

@@ -278,7 +278,6 @@ export class CsvImportFormComponent extends React.Component {
               variant="contained"
               color="primary"
               disabled={isSubmitting || file === null || error !== null}
-              onClick={this.handleButtonClick}
             >
               Import
             </Button>

src/core/Accounts/ImportTransactions/index.jsx

@@ -65,7 +65,7 @@ export class ImportTransactionsComponent extends React.Component {
       .map(transaction => ({
         amount: transaction.amount,
         description: transaction.description,
-        category: transaction.category,
+        categoryId: transaction.categoryId,
         createdAt: transaction.createdAt
       }))
     if (transactions.length > 0) {

src/core/Accounts/Transactions/TransactionDialog.jsx

@@ -57,13 +57,6 @@ const colourStyles = {
 }
 
 const mapStateToProps = ({ budget }) => ({ budget })
-// const mapStateToProps = ({ budget }) => ({
-//   budget,
-//   budgetForSelect: budget.tree.map(cat => ({
-//     label: budget.byId[cat.id].label,
-//     options: cat.children.map(subCat => budget.byId[subCat])
-//   }))
-// })
 
 const mapDispatchToProps = (dispatch) => {
   return {
@@ -112,12 +105,12 @@ export const TransactionDialogComponent = ({
     <AutoComplete
       className={classes.input}
       label="Category"
-      name="category"
-      value={values.category}
-      options={budget.categories}
+      name="categoryId"
+      value={values.categoryId}
+      options={budget.categoryTree}
       onChange={setFieldValue}
-      error={errors.category && touched.category}
-      helperText={errors.category}
+      error={errors.categoryId && touched.categoryId}
+      helperText={errors.categoryId}
       styles={colourStyles}
     />
     <TextField
@@ -181,25 +174,26 @@ export default compose(
       if (transaction === null) {
         return {
           description: '',
-          category: null,
+          categoryId: null,
           amount: '',
           createdAt: format(Date.now(), 'YYYY-MM-DD')
         }
       }
       return {
         ...transaction,
-        category: transaction.category === undefined ? null : {
-          label: transaction.category,
-          value: transaction.category,
-          colour: budget.colours[transaction.category]
+        categoryId: transaction.categoryId === undefined ? null : {
+          id: budget.categoriesById[transaction.categoryId].id,
+          label: budget.categoriesById[transaction.categoryId].name,
+          value: budget.categoriesById[transaction.categoryId].name,
+          colour: budget.categoriesById[transaction.categoryId].colour
         },
         createdAt: format(new Date(transaction.createdAt), 'YYYY-MM-DD')
       }
     },
     validationSchema: Yup.object().shape({
       description: Yup.string()
         .max(256, 'Too Long!'),
-      category: Yup.object()
+      categoryId: Yup.object()
         .nullable(),
       amount: Yup.number()
         .required('Please enter an amount'),
@@ -210,7 +204,7 @@ export default compose(
       setSubmitting(true)
       props.handleSave(props.account, {
         ...values,
-        category: (values.category === null ? undefined : values.category.value),
+        categoryId: (values.categoryId === null ? undefined : values.categoryId.id),
         createdAt: parse(values.createdAt).getTime()
       })
       resetForm()

src/core/Accounts/Transactions/TransactionsTable.jsx

@@ -56,7 +56,7 @@ const styles = theme => ({
 })
 
 const mapStateToProps = (state, props) => ({
-  budgetColours: state.budget.colours,
+  budget: state.budget,
   formatCurrency: currencyFormatter(state.settings.locale, props.account.currency),
   formatDecimal: decimalFormatter(state.settings.locale, props.account.type),
   formatDate: dateFormatter(state.settings.locale)
@@ -127,9 +127,10 @@ export class TransactionsTableComponent extends React.Component {
   }
 
   filterByDescription = (transaction) => {
-    let res = transaction.description.toLowerCase().includes(this.state.filters.description)
-    if (transaction.category !== undefined) {
-      res = res || transaction.category.toLowerCase().includes(this.state.filters.description)
+    let res = transaction.description.toLowerCase().includes(this.state.filters.description.toLowerCase())
+    if (transaction.categoryId !== undefined) {
+      const category = this.props.budget.categoriesById[transaction.categoryId].name
+      res = res || category.toLowerCase().includes(this.state.filters.description.toLowerCase())
     }
     return res
   }
@@ -198,7 +199,7 @@ export class TransactionsTableComponent extends React.Component {
       className,
       children,
       account,
-      budgetColours,
+      budget,
       formatDate,
       Toolbar,
       toolbarProps,
@@ -285,17 +286,20 @@ export class TransactionsTableComponent extends React.Component {
               <Column
                 width={200}
                 label="Category"
-                dataKey="category"
+                dataKey="categoryId"
                 cellRenderer={
                   ({ rowData }) => {
-                    const colour = rowData.category in budgetColours ? budgetColours[rowData.category] : '#dddddd'
-                    return rowData.category !== undefined && (
+                    if (rowData.categoryId === undefined) return null
+                    const category = budget.categoriesById[rowData.categoryId]
+                    if (category === undefined) return null
+                    if (category.colour === undefined) return null
+                    return (
                       <Chip
                         size="small"
-                        label={rowData.category}
+                        label={category.name}
                         style={{
-                          background: colour,
-                          color: chroma.contrast(colour, 'black') > 5 ? 'black' : 'white'
+                          background: category.colour,
+                          color: chroma.contrast(category.colour, 'black') > 5 ? 'black' : 'white'
                         }}
                       />
                     )
@@ -341,7 +345,7 @@ TransactionsTableComponent.propTypes = {
   toolbarProps: PropTypes.object,
   account: PropTypes.object.isRequired,
   transactions: PropTypes.array.isRequired,
-  budgetColours: PropTypes.object.isRequired,
+  budget: PropTypes.object.isRequired,
   formatCurrency: PropTypes.func.isRequired,
   formatDecimal: PropTypes.func.isRequired,
   formatDate: PropTypes.func.isRequired,

src/core/Accounts/Transactions/TransactionsToolbar.jsx

@@ -9,8 +9,8 @@ import Icon from '@mdi/react'
 import DeleteIcon from '@material-ui/icons/Delete'
 import { mdiImport } from '@mdi/js'
 import InputBase from '@material-ui/core/InputBase'
+import InputAdornment from '@material-ui/core/InputAdornment'
 import SearchIcon from '@material-ui/icons/Search'
-import CancelIcon from '@material-ui/icons/Cancel'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import confirm from '../../../util/confirm'
 import TableToolbar from '../../../common/TableToolbar'
@@ -34,36 +34,19 @@ const styles = theme => ({
       backgroundColor: fade(theme.palette.grey[400], 0.25)
     }
   },
-  searchIcon: {
-    width: theme.spacing(9),
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: '#bbb'
-  },
-  clearIcon: {
-    position: 'absolute',
-    right: theme.spacing(2),
-    padding: 0,
-    marginTop: theme.spacing(2),
-    color: '#999'
-  },
   inputRoot: {
     color: 'inherit',
-    width: '100%'
+    width: '100%',
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1)
+
   },
   inputInput: {
-    paddingTop: theme.spacing(1) * 1.8,
-    paddingRight: theme.spacing(5),
-    paddingBottom: theme.spacing(1),
-    paddingLeft: theme.spacing(8),
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {
-      minWidth: 230
+      minWidth: 240
     }
   }
 })
@@ -88,10 +71,6 @@ export class TransactionsToolbarComponent extends React.Component {
     }
   }
 
-  onClearClick = () => {
-    this.props.filterProps.unsetFilter({ attr: 'description' })
-  }
-
   render() {
     const {
       classes,
@@ -116,29 +95,17 @@ export class TransactionsToolbarComponent extends React.Component {
         ) : (
           <div className={classes.buttons}>
             <div className={classes.search}>
-              <div className={classes.searchIcon}>
-                <SearchIcon />
-              </div>
               <InputBase
-                placeholder="Search description or categories..."
+                type="search"
+                placeholder="Search description or category"
                 onChange={this.onChangeSearch}
                 value={filterProps.filters.description || ''}
                 classes={{
                   root: classes.inputRoot,
                   input: classes.inputInput
                 }}
-
+                startAdornment={<InputAdornment position="start"><SearchIcon /></InputAdornment>}
               />
-              {('description' in this.props.filterProps.filters) && (
-                <IconButton
-                  className={classes.clearIcon}
-                  aria-label="Clear"
-                  size="small"
-                  onClick={this.onClearClick}
-                >
-                  <CancelIcon fontSize="inherit" />
-                </IconButton>
-              )}
             </div>
             <Tooltip title="Import transaction">
               <IconButton

src/core/Accounts/Transactions/__tests__/TransactionsTable.test.jsx

@@ -32,7 +32,7 @@ describe('TransactionsTable', () => {
           className=""
           account={account}
           transactions={[]}
-          budgetColours={{}}
+          budget={{}}
           formatCurrency={mochFormatCurrency}
           formatDecimal={mochFormatDecimal}
           formatDate={mochFormatDate}
@@ -55,7 +55,7 @@ describe('TransactionsTable', () => {
           className=""
           account={account}
           transactions={transactions}
-          budgetColours={{}}
+          budget={{}}
           formatCurrency={mochFormatCurrency}
           formatDecimal={mochFormatDecimal}
           formatDate={mochFormatDate}
@@ -78,7 +78,7 @@ describe('TransactionsTable', () => {
           className=""
           account={account}
           transactions={transactions}
-          budgetColours={{}}
+          budget={{}}
           formatCurrency={mochFormatCurrency}
           formatDecimal={mochFormatDecimal}
           formatDate={mochFormatDate}