From 8605d1211d1e4bdbfc4c77040d764586e2376a47 Mon Sep 17 00:00:00 2001 From: Gwynn Dandridge-Perry Date: Fri, 30 Apr 2021 12:34:16 -0700 Subject: [PATCH] feat: add reset button to tree filter (#38) --- src/components/FilterTop.js | 64 +++++++++++++++++++---------- src/components/TreeImageScrubber.js | 4 +- src/models/Filter.js | 6 +-- src/models/verify.js | 15 ++++--- 4 files changed, 58 insertions(+), 31 deletions(-) diff --git a/src/components/FilterTop.js b/src/components/FilterTop.js index 3f8988e7a..82cf7a679 100644 --- a/src/components/FilterTop.js +++ b/src/components/FilterTop.js @@ -68,13 +68,11 @@ function Filter(props) { const { classes, filter } = props; const dateStartDefault = null; const dateEndDefault = null; - const [treeId, setTreeId] = useState(filter.treeId); - const [planterId, setPlanterId] = useState(filter.planterId); - const [deviceIdentifier, setDeviceIdentifier] = useState( - filter.deviceIdentifier, - ); + const [treeId, setTreeId] = useState(filter.treeId || ''); + const [planterId, setPlanterId] = useState(filter.planterId || ''); + const [deviceId, setDeviceId] = useState(filter.deviceIdentifier || ''); const [planterIdentifier, setPlanterIdentifier] = useState( - filter.planterIdentifier, + filter.planterIdentifier || '', ); const [approved, setApproved] = useState(filter.approved); const [active, setActive] = useState(filter.active); @@ -83,7 +81,7 @@ function Filter(props) { ); const [dateEnd, setDateEnd] = useState(filter.dateEnd || dateEndDefault); const [speciesId, setSpeciesId] = useState(ALL_SPECIES); - const [tagId, setTagId] = useState(0); + const [tag, setTag] = useState(null); const [tagSearchString, setTagSearchString] = useState(''); const [organizationId, setOrganizationId] = useState(ALL_ORGANIZATIONS); @@ -111,18 +109,38 @@ function Filter(props) { const filter = new FilterModel(); filter.treeId = treeId; filter.planterId = planterId; - filter.deviceIdentifier = deviceIdentifier; + filter.deviceIdentifier = deviceId; filter.planterIdentifier = planterIdentifier; filter.dateStart = dateStart ? formatDate(dateStart) : undefined; filter.dateEnd = dateEnd ? formatDate(dateEnd) : undefined; filter.approved = approved; filter.active = active; filter.speciesId = speciesId; - filter.tagId = tagId; + filter.tagId = tag ? tag.id : 0; filter.organizationId = organizationId; props.onSubmit && props.onSubmit(filter); } + function handleReset() { + console.log('--- RESET filter and form ---'); + // reset form values, except 'approved' and 'active' which we'll keep + setTreeId(''); + setPlanterId(''); + setDeviceId(''); + setPlanterIdentifier(''); + setDateStart(dateStartDefault); + setDateEnd(dateEndDefault); + setSpeciesId(ALL_SPECIES); + setOrganizationId(ALL_ORGANIZATIONS); + setTag(null); + setTagSearchString(''); + + const filter = new FilterModel(); + filter.approved = approved; // keeps last value set + filter.active = active; // keeps last value set + props.onSubmit && props.onSubmit(filter); + } + return ( { @@ -227,8 +245,8 @@ function Filter(props) { setDeviceIdentifier(e.target.value)} + value={deviceId} + onChange={(e) => setDeviceId(e.target.value)} /> tag.tagName} onChange={(_oldVal, newVal) => { - console.log(newVal); - setTagId(newVal && newVal.id); + //triggered by onInputChange + setTag(newVal); }} onInputChange={(_oldVal, newVal) => { setTagSearchString(newVal); }} - renderInput={(params) => ( - setTagId(e.target.value)} - /> - )} + renderInput={(params) => { + return ; + }} /> {!getOrganization() && ( Apply + } diff --git a/src/components/TreeImageScrubber.js b/src/components/TreeImageScrubber.js index 236b6a488..62dbd7e61 100644 --- a/src/components/TreeImageScrubber.js +++ b/src/components/TreeImageScrubber.js @@ -201,7 +201,9 @@ const TreeImageScrubber = (props) => { * effect to load page when mounted */ useEffect(() => { - log.debug('mounted'); + log.debug('mounted:'); + // update filter right away to prevent non-Filter type objects loading + props.verifyDispatch.updateFilter(props.verifyState.filter); props.verifyDispatch.loadTreeImages(); }, [props.verifyDispatch]); diff --git a/src/models/Filter.js b/src/models/Filter.js index c9591cc3a..dcbfb7128 100644 --- a/src/models/Filter.js +++ b/src/models/Filter.js @@ -52,9 +52,9 @@ export default class Filter { where.approved = this.approved; } - if (this.rejected !== undefined) { - where.rejected = this.rejected; - } + // if (this.rejected !== undefined) { + // where.rejected = this.rejected; + // } if (this.active !== undefined) { where.active = this.active; diff --git a/src/models/verify.js b/src/models/verify.js index 1679fa8c9..f04d36e49 100644 --- a/src/models/verify.js +++ b/src/models/verify.js @@ -103,15 +103,17 @@ const verify = { }; }, setFilter(state, filter) { - return { - ...state, - filter, - }; + log.debug('setFilter', state.filter, filter); + // ensure filter is a FilterModel + const newFilter = new FilterModel(filter); + return filter.getWhereObj() + ? { ...state, filter } + : { ...state, filter: newFilter }; }, setTreeCount(state, treeCount) { return { ...state, - treeCount, + treeCount: Number(treeCount), invalidateTreeCount: false, }; }, @@ -332,6 +334,7 @@ const verify = { //{{{ log.debug('to load images'); const verifyState = state.verify; + if ( verifyState.isLoading || (verifyState.treeCount > 0 && @@ -359,7 +362,7 @@ const verify = { }; log.debug('load page with params:', pageParams); const result = await api.getTreeImages(pageParams); - log.debug('loaded trees:%d', result.length); + log.debug('loaded trees:', result.length); this.appendTreeImages(result); //restore loading status this.setLoading(false);