From 231965bad4a78dc21efae68bb0ba0c7070c6a189 Mon Sep 17 00:00:00 2001 From: tranquanghuy0801 Date: Thu, 14 Oct 2021 23:19:31 +1000 Subject: [PATCH 1/2] feat: include badge showing applied filters in Verify page --- src/common/utils.js | 32 ++++++++++++++++++++++++++++++++ src/components/Verify.js | 19 ++++++++++++++++++- 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/common/utils.js b/src/common/utils.js index 57f1103bd..2834deefa 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -8,4 +8,36 @@ export const getVerificationStatus = (active, approved) => { } else if (active === false && approved === false) { return verificationStates.REJECTED; } +}; + +export const countAppliedFilters = (filter) => { + let numFilters = 0; + + if (!filter) { + return numFilters; + } + + if (filter['active'] !== undefined && filter['approved'] !== undefined) { + numFilters += 1; + } + + Object.keys(filter).forEach(key => { + if (key === 'filter' || key == 'active' || key == 'approved') { + return; + } else if ((key === 'captureId' || key === 'uuid' || key === 'deviceIdentifier' || key === 'planterId' || key === 'planterIdentifier') && filter[key] !== '') { + numFilters += 1; + } else if (filter['tagId'] > 0) { + numFilters += 1; + } else if ((key === 'dateStart' || key === 'dateEnd') && filter[key] !== undefined) { + numFilters += 1; + } else if (key == 'organizationId' && filter[key] !== 'ALL_ORGANIZATIONS') { + numFilters += 1; + } else if (key == 'speciesId' && filter[key] !== 'ALL_SPECIES') { + numFilters += 1; + } else if (key == 'tokenId' && filter[key] !== 'All') { + numFilters += 1; + } + }); + + return numFilters; }; \ No newline at end of file diff --git a/src/components/Verify.js b/src/components/Verify.js index 72a2c6a50..e1d0b0579 100644 --- a/src/components/Verify.js +++ b/src/components/Verify.js @@ -14,6 +14,7 @@ import LinearProgress from '@material-ui/core/LinearProgress'; import IconFilter from '@material-ui/icons/FilterList'; import IconButton from '@material-ui/core/IconButton'; import Snackbar from '@material-ui/core/Snackbar'; +import Avatar from '@material-ui/core/Avatar'; import FilterTop from './FilterTop'; import CheckIcon from '@material-ui/icons/Check'; @@ -34,6 +35,7 @@ import { countToLocaleString } from '../common/numbers'; import { VerifyContext } from '../context/VerifyContext'; import { SpeciesContext } from '../context/SpeciesContext'; import { TagsContext } from '../context/TagsContext'; +import { countAppliedFilters } from 'common/utils.js'; const log = require('loglevel').getLogger('../components/Verify'); @@ -139,6 +141,12 @@ const useStyles = makeStyles((theme) => ({ mb: { marginBottom: '1rem', }, + activeFilters: { + width: theme.spacing(5), + height: theme.spacing(5), + marginLeft: '5px', + backgroundColor: theme.palette.stats.green, + } })); const ToVerifyCounter = withData(({ data }) => ( @@ -446,13 +454,22 @@ const Verify = (props) => { } key={1} > Filter + { + countAppliedFilters(verifyContext.filter) > 0 ? + + { + countAppliedFilters(verifyContext.filter) + } + + : "" + } , ]} > From 7819a2e5dc5b8c802dfe516da36ad2a3c362368d Mon Sep 17 00:00:00 2001 From: tranquanghuy0801 Date: Sat, 16 Oct 2021 21:33:45 +1000 Subject: [PATCH 2/2] fix: move the count filters function and write relevant test --- src/common/utils.js | 32 ---------------- src/components/Verify.js | 13 +++---- src/components/tests/verify.test.js | 7 ++++ src/models/Filter.js | 58 +++++++++++++++++++++++++++++ 4 files changed, 71 insertions(+), 39 deletions(-) diff --git a/src/common/utils.js b/src/common/utils.js index 2834deefa..57f1103bd 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -8,36 +8,4 @@ export const getVerificationStatus = (active, approved) => { } else if (active === false && approved === false) { return verificationStates.REJECTED; } -}; - -export const countAppliedFilters = (filter) => { - let numFilters = 0; - - if (!filter) { - return numFilters; - } - - if (filter['active'] !== undefined && filter['approved'] !== undefined) { - numFilters += 1; - } - - Object.keys(filter).forEach(key => { - if (key === 'filter' || key == 'active' || key == 'approved') { - return; - } else if ((key === 'captureId' || key === 'uuid' || key === 'deviceIdentifier' || key === 'planterId' || key === 'planterIdentifier') && filter[key] !== '') { - numFilters += 1; - } else if (filter['tagId'] > 0) { - numFilters += 1; - } else if ((key === 'dateStart' || key === 'dateEnd') && filter[key] !== undefined) { - numFilters += 1; - } else if (key == 'organizationId' && filter[key] !== 'ALL_ORGANIZATIONS') { - numFilters += 1; - } else if (key == 'speciesId' && filter[key] !== 'ALL_SPECIES') { - numFilters += 1; - } else if (key == 'tokenId' && filter[key] !== 'All') { - numFilters += 1; - } - }); - - return numFilters; }; \ No newline at end of file diff --git a/src/components/Verify.js b/src/components/Verify.js index e1d0b0579..cb36a38d1 100644 --- a/src/components/Verify.js +++ b/src/components/Verify.js @@ -35,7 +35,6 @@ import { countToLocaleString } from '../common/numbers'; import { VerifyContext } from '../context/VerifyContext'; import { SpeciesContext } from '../context/SpeciesContext'; import { TagsContext } from '../context/TagsContext'; -import { countAppliedFilters } from 'common/utils.js'; const log = require('loglevel').getLogger('../components/Verify'); @@ -144,7 +143,7 @@ const useStyles = makeStyles((theme) => ({ activeFilters: { width: theme.spacing(5), height: theme.spacing(5), - marginLeft: '5px', + marginLeft: '0.75rem', backgroundColor: theme.palette.stats.green, } })); @@ -172,6 +171,7 @@ const Verify = (props) => { grower: {}, }); const refContainer = useRef(); + const numFilters = verifyContext.filter.countAppliedFilters(); // log.debug( // 'render: verify', @@ -462,13 +462,12 @@ const Verify = (props) => { > Filter { - countAppliedFilters(verifyContext.filter) > 0 ? + numFilters > 0 && + ( - { - countAppliedFilters(verifyContext.filter) - } + {numFilters} - : "" + ) } , ]} diff --git a/src/components/tests/verify.test.js b/src/components/tests/verify.test.js index 19d60a8a6..733267145 100644 --- a/src/components/tests/verify.test.js +++ b/src/components/tests/verify.test.js @@ -299,6 +299,7 @@ describe('Verify', () => { filter: new FilterModel({ approved: false, active: true, + deviceIdentifier: '06C71C70-0636-4339-AE53-949107B58814', }), invalidateCaptureCount: true, captureCount: null, @@ -370,6 +371,12 @@ describe('Verify', () => { expect(tokenStatus).toBeInTheDocument(); }); + it('renders number of applied filters', () => { + const filter = screen.getByRole('button', { name: /filter/i }); + userEvent.click(filter); + expect(verifyValues.filter.countAppliedFilters()).toBe(2) ; + }) + it('renders side panel', () => { // screen.logTestingPlaygroundURL(); // expect(screen.getByText(/planters per page: 24/i)); diff --git a/src/models/Filter.js b/src/models/Filter.js index 44d5eba67..5408a696f 100644 --- a/src/models/Filter.js +++ b/src/models/Filter.js @@ -126,4 +126,62 @@ export default class Filter { return true; } }; + + /* + * A fn to count the number of current applied filters + */ + countAppliedFilters() { + let numFilters = 0; + + if (this.active !== undefined && this.approved !== undefined) { + numFilters += 1; + } + + if (this.uuid) { + numFilters += 1; + } + + if (this.captureId) { + numFilters += 1; + } + + if (this.deviceIdentifier) { + numFilters += 1; + } + + if (this.planterId) { + numFilters += 1; + } + + if (this.planterIdentifier) { + numFilters += 1; + } + + if (this.tagId > 0) { + numFilters += 1; + } + + if (this.dateStart) { + numFilters += 1; + } + + if (this.dateEnd) { + numFilters += 1; + } + + if (this.organizationId && this.organizationId !== ALL_ORGANIZATIONS) { + numFilters += 1; + } + + if (this.speciesId && this.speciesId !== ALL_SPECIES) { + numFilters += 1; + } + + if (this.tokenId && this.tokenId !== 'All') { + numFilters += 1; + } + + return numFilters; + } + }