feat: add reset button to tree filter (#38)

Greenstand · Apr 30, 2021 · 8605d12 · 8605d12
1 parent ed20e83
commit 8605d12
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 31 deletions.
diff --git 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 (
     <React.Fragment>
       {
@@ -227,8 +245,8 @@ function Filter(props) {
             <TextField
               label="Device Identifier"
               placeholder="e.g. 1234abcd"
-              value={deviceIdentifier}
-              onChange={(e) => setDeviceIdentifier(e.target.value)}
+              value={deviceId}
+              onChange={(e) => setDeviceId(e.target.value)}
             />
             <TextField
               label="Planter Identifier"
@@ -265,22 +283,18 @@ function Filter(props) {
                 },
                 ...props.tagsState.tagList,
               ]}
+              value={tag}
               getOptionLabel={(tag) => tag.tagName}
               onChange={(_oldVal, newVal) => {
-                console.log(newVal);
-                setTagId(newVal && newVal.id);
+                //triggered by onInputChange
+                setTag(newVal);
               }}
               onInputChange={(_oldVal, newVal) => {
                 setTagSearchString(newVal);
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label="Tag"
-                  value={tagId}
-                  onChange={(e) => setTagId(e.target.value)}
-                />
-              )}
+              renderInput={(params) => {
+                return <TextField {...params} label="Tag" />;
+              }}
             />
             {!getOrganization() && (
               <TextField
@@ -310,6 +324,14 @@ function Filter(props) {
             >
               Apply
             </Button>
+            <Button
+              className={classes.apply}
+              variant="outlined"
+              color="primary"
+              onClick={handleReset}
+            >
+              Reset
+            </Button>
           </Grid>
         </Grid>
       }

diff --git 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
@@ -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
@@ -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);