Skip to content

Commit

Permalink
Updated the Manage Categories page
Browse files Browse the repository at this point in the history
  • Loading branch information
@JackNeto
JackNeto committed Jul 31, 2019
1 parent a635754 commit fd023ad
Show file tree
Hide file tree
Showing 16 changed files with 550 additions and 367 deletions.
5 changes: 2 additions & 3 deletions src/common/Header/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ const Header = ({ children, match }) => {
const { currentTarget } = event
setAnchorEl(currentTarget)
setOpen(!open)
console.log('currentTarget', currentTarget)
}

const handleClose = () => {
Expand Down Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion src/core/Accounts/ImportTransactions/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export class ImportTransactionsComponent extends React.Component {


handleParsedData = (transactions, errors) => {
console.log('handleParsedData', transactions)
return this.setState({
showTransactions: true,
transactions: transactions.map(t => Object.assign(t, { id: uuid() })),
Expand Down
4 changes: 2 additions & 2 deletions src/core/Accounts/Transactions/TransactionsTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,10 @@ export class TransactionsTableComponent extends React.Component {
}

filterByDescription = (transaction) => {
let res = transaction.description.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)
res = res || category.toLowerCase().includes(this.state.filters.description.toLowerCase())
}
return res
}
Expand Down
53 changes: 10 additions & 43 deletions src/core/Accounts/Transactions/TransactionsToolbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
}
}
})
Expand All @@ -88,10 +71,6 @@ export class TransactionsToolbarComponent extends React.Component {
}
}

onClearClick = () => {
this.props.filterProps.unsetFilter({ attr: 'description' })
}

render() {
const {
classes,
Expand All @@ -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
Expand Down
100 changes: 50 additions & 50 deletions src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
className=" "
>
<div
className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-8 MuiToolbar-gutters"
className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-6 MuiToolbar-gutters"
>
<div
className="TableToolbar-title-12"
className="TableToolbar-title-10"
>
<div>
<h6
Expand All @@ -22,10 +22,10 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
</div>
</div>
<div
className="TableToolbar-spacer-10"
className="TableToolbar-spacer-8"
/>
<div
className="TableToolbar-actions-11"
className="TableToolbar-actions-9"
>
<div
className="withRouter(TransactionsToolbarComponent)-buttons-2"
Expand All @@ -34,31 +34,31 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
className="withRouter(TransactionsToolbarComponent)-search-3"
>
<div
className="withRouter(TransactionsToolbarComponent)-searchIcon-4"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<div
className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-6"
className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-4 MuiInputBase-adornedStart"
onClick={[Function]}
>
<div
className="MuiInputAdornment-root MuiInputAdornment-positionStart"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<input
className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-7"
className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-5 MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Search description or categories..."
type="text"
placeholder="Search description or category"
type="search"
value=""
/>
</div>
Expand Down Expand Up @@ -198,7 +198,7 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-99 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-102 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
onBlur={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -228,7 +228,7 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
</svg>
<input
checked={false}
className="PrivateSwitchBase-input-102"
className="PrivateSwitchBase-input-105"
data-indeterminate={false}
onChange={[Function]}
type="checkbox"
Expand Down Expand Up @@ -396,10 +396,10 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
className=" "
>
<div
className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-8 MuiToolbar-gutters"
className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-6 MuiToolbar-gutters"
>
<div
className="TableToolbar-title-12"
className="TableToolbar-title-10"
>
<div>
<h6
Expand All @@ -413,10 +413,10 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
</div>
</div>
<div
className="TableToolbar-spacer-10"
className="TableToolbar-spacer-8"
/>
<div
className="TableToolbar-actions-11"
className="TableToolbar-actions-9"
>
<div
className="withRouter(TransactionsToolbarComponent)-buttons-2"
Expand All @@ -425,31 +425,31 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
className="withRouter(TransactionsToolbarComponent)-search-3"
>
<div
className="withRouter(TransactionsToolbarComponent)-searchIcon-4"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<div
className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-6"
className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-4 MuiInputBase-adornedStart"
onClick={[Function]}
>
<div
className="MuiInputAdornment-root MuiInputAdornment-positionStart"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<input
className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-7"
className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-5 MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Search description or categories..."
type="text"
placeholder="Search description or category"
type="search"
value=""
/>
</div>
Expand Down Expand Up @@ -589,7 +589,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
>
<span
aria-disabled={false}
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-99 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-102 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
onBlur={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -619,7 +619,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
</svg>
<input
checked={false}
className="PrivateSwitchBase-input-102"
className="PrivateSwitchBase-input-105"
data-indeterminate={false}
onChange={[Function]}
type="checkbox"
Expand Down
36 changes: 19 additions & 17 deletions src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,30 +26,32 @@ exports[`TransactionsToolbar matches snapshot with no selected transactions 1`]
>
<div>
<div>
<div>
<svg
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<div
className="MuiInputBase-root"
className="MuiInputBase-root MuiInputBase-adornedStart"
onClick={[Function]}
>
<div
className="MuiInputAdornment-root MuiInputAdornment-positionStart"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<input
className="MuiInputBase-input"
className="MuiInputBase-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Search description or categories..."
type="text"
placeholder="Search description or category"
type="search"
value=""
/>
</div>
Expand Down
Loading

0 comments on commit fd023ad

Please sign in to comment.