fix: search filter section according to spec
This commit is contained in:
José Oliveira
parent
f2a304ae49
commit
e4c383e656
6 changed files with 91 additions and 40 deletions
|
|
@ -1,38 +1,56 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
||||
import Chip from 'src/components/Chip'
|
||||
import { P } from 'src/components/typography'
|
||||
import { ActionButton } from 'src/components/buttons'
|
||||
import { P, Label2 } from 'src/components/typography'
|
||||
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
|
||||
import { ReactComponent as FilterIcon } from 'src/styling/icons/button/filter/white.svg'
|
||||
import { ReactComponent as ReverseFilterIcon } from 'src/styling/icons/button/filter/zodiac.svg'
|
||||
|
||||
import { chipStyles, styles } from './SearchFilter.styles'
|
||||
|
||||
const useChipStyles = makeStyles(chipStyles)
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const SearchFilter = ({ filters, onFilterDelete, setFilters }) => {
|
||||
const capitalize = R.converge(R.concat(), [
|
||||
R.compose(R.toUpper, R.head),
|
||||
R.tail
|
||||
])
|
||||
|
||||
const SearchFilter = ({ filters, onFilterDelete, setFilters, entries }) => {
|
||||
const chipClasses = useChipStyles()
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<>
|
||||
<P className={classes.text}>{'Filters:'}</P>
|
||||
<div>
|
||||
{filters.map((f, idx) => (
|
||||
<Chip
|
||||
key={idx}
|
||||
classes={chipClasses}
|
||||
label={`${f.type}: ${f.value}`}
|
||||
onDelete={() => onFilterDelete(f)}
|
||||
deleteIcon={<CloseIcon className={classes.button} />}
|
||||
/>
|
||||
))}
|
||||
<Chip
|
||||
classes={chipClasses}
|
||||
label={`Delete filters`}
|
||||
onDelete={() => setFilters([])}
|
||||
deleteIcon={<CloseIcon className={classes.button} />}
|
||||
/>
|
||||
<div className={classes.filters}>
|
||||
<div className={classes.chips}>
|
||||
{filters.map((f, idx) => (
|
||||
<Chip
|
||||
key={idx}
|
||||
classes={chipClasses}
|
||||
label={`${capitalize(f.type)}: ${f.value}`}
|
||||
onDelete={() => onFilterDelete(f)}
|
||||
deleteIcon={<CloseIcon className={classes.button} />}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className={classes.deleteWrapper}>
|
||||
{entries && (
|
||||
<Label2 className={classes.entries}>{`${entries} entries`}</Label2>
|
||||
)}
|
||||
<ActionButton
|
||||
color="secondary"
|
||||
Icon={ReverseFilterIcon}
|
||||
InverseIcon={FilterIcon}
|
||||
className={classes.deleteButton}
|
||||
onClick={() => setFilters([])}>
|
||||
Delete filters
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,28 +4,26 @@ import {
|
|||
smallestFontSize,
|
||||
inputFontFamily,
|
||||
inputFontWeight,
|
||||
spacer
|
||||
spacer,
|
||||
offColor
|
||||
} from 'src/styling/variables'
|
||||
|
||||
const chipStyles = {
|
||||
root: {
|
||||
borderRadius: spacer / 2,
|
||||
marginTop: spacer / 2,
|
||||
marginRight: spacer / 4,
|
||||
marginBottom: spacer / 2,
|
||||
marginLeft: spacer / 4,
|
||||
height: spacer * 3,
|
||||
marginLeft: 0,
|
||||
height: 20,
|
||||
backgroundColor: zircon,
|
||||
'&:hover, &:focus, &:active': {
|
||||
backgroundColor: zircon
|
||||
}
|
||||
},
|
||||
marginBottom: 'auto'
|
||||
},
|
||||
label: {
|
||||
fontSize: smallestFontSize,
|
||||
fontWeight: inputFontWeight,
|
||||
fontFamily: inputFontFamily,
|
||||
paddingRight: spacer / 2,
|
||||
paddingLeft: spacer / 2,
|
||||
paddingRight: 0,
|
||||
paddingLeft: spacer,
|
||||
color: primaryColor
|
||||
}
|
||||
}
|
||||
|
|
@ -34,11 +32,30 @@ const styles = {
|
|||
button: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
marginLeft: 8
|
||||
marginLeft: 8,
|
||||
marginRight: 8
|
||||
},
|
||||
text: {
|
||||
marginTop: 0,
|
||||
marginBottom: 0
|
||||
},
|
||||
filters: {
|
||||
display: 'flex',
|
||||
marginBottom: 16
|
||||
},
|
||||
deleteWrapper: {
|
||||
display: 'flex',
|
||||
marginLeft: 'auto',
|
||||
justifyContent: 'flex-end',
|
||||
flexDirection: 'row'
|
||||
},
|
||||
entries: {
|
||||
color: offColor,
|
||||
margin: 'auto',
|
||||
marginRight: 12
|
||||
},
|
||||
chips: {
|
||||
marginTop: 'auto'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,36 +20,36 @@ const CustomersList = ({ data, locale, onClick, loading }) => {
|
|||
const elements = [
|
||||
{
|
||||
header: 'Phone',
|
||||
width: 172,
|
||||
width: 175,
|
||||
view: it => getFormattedPhone(it.phone, locale.country)
|
||||
},
|
||||
{
|
||||
header: 'Name',
|
||||
width: 241,
|
||||
width: 247,
|
||||
view: getName
|
||||
},
|
||||
{
|
||||
header: 'Total TXs',
|
||||
width: 126,
|
||||
width: 130,
|
||||
textAlign: 'right',
|
||||
view: it => `${Number.parseInt(it.totalTxs)}`
|
||||
},
|
||||
{
|
||||
header: 'Total spent',
|
||||
width: 152,
|
||||
width: 155,
|
||||
textAlign: 'right',
|
||||
view: it =>
|
||||
`${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode ?? ''}`
|
||||
},
|
||||
{
|
||||
header: 'Last active',
|
||||
width: 133,
|
||||
width: 137,
|
||||
view: it =>
|
||||
ifNotNull(it.lastActive, moment.utc(it.lastActive).format('YYYY-MM-D'))
|
||||
},
|
||||
{
|
||||
header: 'Last transaction',
|
||||
width: 161,
|
||||
width: 165,
|
||||
textAlign: 'right',
|
||||
view: it => {
|
||||
const hasLastTx = !R.isNil(it.lastTxFiatCode)
|
||||
|
|
@ -66,7 +66,7 @@ const CustomersList = ({ data, locale, onClick, loading }) => {
|
|||
},
|
||||
{
|
||||
header: 'Status',
|
||||
width: 188,
|
||||
width: 191,
|
||||
view: it => <MainStatus statuses={[getAuthorizedStatus(it)]} />
|
||||
}
|
||||
]
|
||||
|
|
@ -78,6 +78,7 @@ const CustomersList = ({ data, locale, onClick, loading }) => {
|
|||
emptyText="No customers so far"
|
||||
elements={elements}
|
||||
data={data}
|
||||
width={'1200'}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -285,18 +285,19 @@ const Transactions = () => {
|
|||
)}
|
||||
</div>
|
||||
<div className={classes.headerLabels}>
|
||||
<div>
|
||||
<TxOutIcon />
|
||||
<span>Cash-out</span>
|
||||
</div>
|
||||
<div>
|
||||
<TxInIcon />
|
||||
<span>Cash-in</span>
|
||||
</div>
|
||||
<div>
|
||||
<TxOutIcon />
|
||||
<span>Cash-out</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{filters.length > 0 && (
|
||||
<SearchFilter
|
||||
entries={filteredTransactions.length}
|
||||
filters={filters}
|
||||
onFilterDelete={onFilterDelete}
|
||||
setFilters={setFilters}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>icon/button/filter/white</title>
|
||||
<g id="icon/button/filter/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M0.6,-3.33066907e-16 L0.509218076,0.00652107669 C0.068925647,0.0708166555 -0.160361948,0.596737342 0.124968515,0.966531156 L4.166,6.204 L4.16660432,9.6 C4.16660432,9.79162756 4.25813682,9.97172829 4.41293455,10.0846831 L6.8797259,11.8846831 L6.96095139,11.9350192 C7.34801849,12.1353088 7.83339568,11.8580867 7.83339568,11.4 L7.833,6.204 L11.8750315,0.966531156 C12.179384,0.572084421 11.8982155,-3.33066907e-16 11.4,-3.33066907e-16 L0.6,-3.33066907e-16 Z M10.179,1.199 L6.75836419,5.63346884 L6.70465653,5.71638775 C6.65811535,5.80315577 6.63339568,5.90052663 6.63339568,6 L6.633,10.219 L5.366,9.294 L5.36660432,6 L5.35847177,5.90154229 C5.34231401,5.80441508 5.30240262,5.71222382 5.24163581,5.63346884 L1.82,1.199 L10.179,1.199 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>icon/button/filter/zodiac</title>
|
||||
<g id="icon/button/filter/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M0.6,-4.56301663e-14 L0.509218076,0.00652107669 C0.068925647,0.0708166555 -0.160361948,0.596737342 0.124968515,0.966531156 L4.166,6.204 L4.16660432,9.6 C4.16660432,9.79162756 4.25813682,9.97172829 4.41293455,10.0846831 L6.8797259,11.8846831 L6.96095139,11.9350192 C7.34801849,12.1353088 7.83339568,11.8580867 7.83339568,11.4 L7.833,6.204 L11.8750315,0.966531156 C12.179384,0.572084421 11.8982155,-4.56301663e-14 11.4,-4.56301663e-14 L0.6,-4.56301663e-14 Z M10.179,1.199 L6.75836419,5.63346884 L6.70465653,5.71638775 C6.65811535,5.80315577 6.63339568,5.90052663 6.63339568,6 L6.633,10.219 L5.366,9.294 L5.36660432,6 L5.35847177,5.90154229 C5.34231401,5.80441508 5.30240262,5.71222382 5.24163581,5.63346884 L1.82,1.199 L10.179,1.199 Z" id="Path" fill="#1B2559" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Add table
Add a link
Reference in a new issue