dont copy server geometries to recordsets, just keep them in top leve…

…l map state. combine filter types to one array
bcgov · Sep 21, 2023 · 67a3a3f · 67a3a3f
1 parent 58bbfbf
commit 67a3a3f
Show file tree

Hide file tree

Showing 7 changed files with 261 additions and 207 deletions.
diff --git a/api/src/paths/v2/activities.ts b/api/src/paths/v2/activities.ts
@@ -156,50 +156,47 @@ function sanitizeActivityFilterObject(filterObject: any, req: any) {
   sanitizedSearchCriteria.selectColumns = selectColumns;
 
   let sanitizedTableFilters = [];
+  //sanitize serverFilterGeometries
+  let serverFilterGeometries = [];
+
+  //sanitize clientFilterGeometries
+  let clientFilterGeometries = [];
 
   if (filterObject?.tableFilters?.length > 0) {
     filterObject.tableFilters.forEach((filter) => {
-      switch (filter.field) {
-        case 'created_by':
-          if (!sanitizedSearchCriteria.serverSideNamedFilters.hideEditedByFields) {
-            sanitizedTableFilters.push(filter);
+      switch (filter.filterType) {
+        case 'tableFilter':
+          switch (filter.field) {
+            case 'created_by':
+              if (!sanitizedSearchCriteria.serverSideNamedFilters.hideEditedByFields) {
+                sanitizedTableFilters.push(filter);
+              }
+              break;
+            case 'updated_by':
+              if (!sanitizedSearchCriteria.serverSideNamedFilters.hideEditedByFields) {
+                sanitizedTableFilters.push(filter);
+              }
+              break;
+            default:
+              sanitizedTableFilters.push(filter);
+              break;
+          }
+        case 'spatialFilterDrawn':
+          if (filter.filter) {
+            clientFilterGeometries.push(filter.filter);
           }
           break;
-        case 'updated_by':
-          if (!sanitizedSearchCriteria.serverSideNamedFilters.hideEditedByFields) {
-            sanitizedTableFilters.push(filter);
+        case 'spatialFilterUploaded':
+          if (!isNaN(filter?.filter?.geometry)) {
+            serverFilterGeometries.push(filter.filter.geometry);
           }
           break;
         default:
-          sanitizedTableFilters.push(filter);
           break;
       }
     });
   }
 
-  //sanitize serverFilterGeometries
-  let serverFilterGeometries = [];
-  if (filterObject?.serverFilterGeometryIDs?.length > 0) {
-
-    filterObject.serverFilterGeometryIDs.forEach((geometry) => {
-      if(!isNaN(geometry)){
-        serverFilterGeometries.push(geometry);
-      }
-    });
-  }
-
-  //sanitize clientFilterGeometries
-  let clientFilterGeometries = [];
-  if (filterObject?.clientFilterGeometries?.length > 0) {
-    filterObject.clientFilterGeometries.forEach((geometry) => {
-      if (geometry?.geometry) {
-        clientFilterGeometries.push(geometry);
-      }
-    });
-  }
-
-
-
   sanitizedSearchCriteria.clientReqTableFilters = sanitizedTableFilters;
   defaultLog.debug({
     label: 'getActivitiesBySearchFilterCriteria',
@@ -380,7 +377,7 @@ activities as (
     ,case when ServerBoundariesToIntersect.geog is null then false else true end as intersects_server_boundary
     `);
   }
-  if(filterObject?.clientFilterGeometries?.length > 0){
+  if (filterObject?.clientFilterGeometries?.length > 0) {
     sqlStatement.append(`
     ,case when ClientBoundariesToIntersect.geog is null then false else true end as intersects_client_boundary
     `);
@@ -408,8 +405,7 @@ activities as (
   sqlStatement.append(`
     )  `);
 
-
-    defaultLog.debug({ label: 'getActivitiesBySearchFilterCriteria', message: 'sql', body: sqlStatement });
+  defaultLog.debug({ label: 'getActivitiesBySearchFilterCriteria', message: 'sql', body: sqlStatement });
 
   return cte;
 }

diff --git a/appv2/src/UI/Overlay/Records/RecordSet.css b/appv2/src/UI/Overlay/Records/RecordSet.css
@@ -105,7 +105,8 @@ td {
 }
 
 .filterSelect {
-  width: 100px;
+  /*width: 100px;*/
+  max-width: 150px;
 }
 
 .recordSet_footer {

diff --git a/appv2/src/UI/Overlay/Records/RecordSet.tsx b/appv2/src/UI/Overlay/Records/RecordSet.tsx
@@ -121,12 +121,12 @@ export const RecordSet = (props) => {
                   <tr>
                     <th>Filter type</th>
                     <th>Operator</th>
-                    <th>Field</th>
+                    <th>Filter On</th>
                     <th>Value</th>
                     <th></th>
                   </tr>
                   {userSettingsState?.recordSets?.[props.setID]?.tableFilters.map((filter: any, i) => {
-                    return <Filter key={'filterIndex' + i} type="data" setID={props.setID} id={filter.id} />;
+                    return <Filter key={'filterIndex' + i} setID={props.setID} id={filter.id} />;
                   })}
                 </table>
               ) : (
@@ -194,6 +194,9 @@ const RecordSetFooter = (props) => {
 
 const Filter = (props) => {
   const userSettingsState = useSelector((state: any) => state.UserSettings);
+  const serverBoundariesToDisplay = useSelector((state: any) => state.Map.serverBoundaries).map((boundary) => {
+    return { label: boundary.name, value: boundary.id };
+  });
   console.dir(userSettingsState);
 
   const filterColumns =
@@ -205,6 +208,10 @@ const Filter = (props) => {
   });
   const dispatch = useDispatch();
 
+  const filterTypeInState = userSettingsState?.recordSets?.[props.setID]?.tableFilters?.find(
+    (filter) => filter.id === props.id
+  )?.filterType;
+
   const valueInState = userSettingsState?.recordSets?.[props.setID]?.tableFilters?.find(
     (filter) => filter.id === props.id
   )?.filter;
@@ -232,59 +239,143 @@ const Filter = (props) => {
     });
   };
 
+  let input = null;
+  switch (filterTypeInState) {
+    case 'tableFilter':
+      input = (
+        <input
+          key={'banana' + props.id}
+          ref={value}
+          className="filterSelect"
+          onChange={(e) => {
+            console.log('it changed');
+            debouncedUpdate(e.target.value);
+          }}
+          type="text"
+          value={valueInState}
+          //defaultValue={valueInState}
+        />
+      );
+      break;
+    case 'spatialFilterUploaded':
+      input = (
+        <select
+          className="filterSelect"
+          key={'filterType' + props.name}
+          value={valueInState}
+          onChange={(e) => {
+            console.dir(e.target);
+
+            dispatch({
+              type: RECORDSET_UPDATE_FILTER,
+              payload: {
+                filterType: 'tableFilter',
+                setID: props.setID,
+                filterID: props.id,
+                filter: e.target.value
+              }
+            });
+          }}>
+          {serverBoundariesToDisplay.map((option) => {
+            return (
+              <option key={option.value + option.label} value={option.value}>
+                {option.label}
+              </option>
+            );
+          })}
+        </select>
+      );
+
+      break;
+    default:
+      null;
+  }
+
   return (
     <tr>
-      <td><select
-        className="filterTypeSelect"
-        key={'filterTypeSelect' + props.name}
-        value={operatorInState}
-        onChange={(e) => {
-          console.dir(e.target.value);
+      <td>
+        <select
+          className="filterTypeSelect"
+          key={'filterTypeSelect' + props.name}
+          value={filterTypeInState}
+          onChange={(e) => {
+            console.dir(e.target.value);
 
-          dispatch({
-            type: RECORDSET_UPDATE_FILTER,
-            payload: {
-              filterType: e.target.value,
-              setID: props.setID,
-              filterID: props.id,
-              //operator: e.target.value
-            }
-          });
-        }}>
-        <option key={Math.random()} value={'tableFilter'} label={'Field/Column'}>
-          Field/Column
-        </option>
-        <option key={Math.random()} value={'spatialFilterDrawn'} label={'Spatial - Drawn'}>
-          Spatial - Drawn
-        </option>
-        <option key={Math.random()} value={'spatialFilterUploaded'} label={'Spatial - Uploaded'}>
-          Spatial - Uploaded
-        </option>
-      </select></td>
-      <td><select
-        className="filterSelect"
-        key={'operand' + props.name}
-        value={operatorInState}
-        onChange={(e) => {
-          console.dir(e.target.value);
+            dispatch({
+              type: RECORDSET_UPDATE_FILTER,
+              payload: {
+                filterType: e.target.value,
+                setID: props.setID,
+                filterID: props.id
+                //operator: e.target.value
+              }
+            });
+          }}>
+          <option key={Math.random()} value={'tableFilter'} label={'Field/Column'}>
+            Field/Column
+          </option>
+          <option key={Math.random()} value={'spatialFilterDrawn'} label={'Spatial - Drawn'}>
+            Spatial - Drawn
+          </option>
+          <option key={Math.random()} value={'spatialFilterUploaded'} label={'Spatial - Uploaded'}>
+            Spatial - Uploaded
+          </option>
+        </select>
+      </td>
+      <td>
+        <select
+          className="filterSelect"
+          key={'operand' + props.name}
+          value={operatorInState}
+          onChange={(e) => {
+            console.dir(e.target.value);
 
-          dispatch({
-            type: RECORDSET_UPDATE_FILTER,
-            payload: {
-              filterType: 'tableFilter',
-              setID: props.setID,
-              filterID: props.id,
-              operator: e.target.value
-            }
-          });
-        }}>
-        <option key={Math.random()} value={'CONTAINS'} label={'CONTAINS'}>
-          CONTAINS
-        </option>
-        <option key={Math.random()} value={'DOES NOT CONTAIN'} label={'DOES NOT CONTAIN'}>
-          DOES NOT CONTAIN
-        </option>
-      </select></td>
+            dispatch({
+              type: RECORDSET_UPDATE_FILTER,
+              payload: {
+                filterType: 'tableFilter',
+                setID: props.setID,
+                filterID: props.id,
+                operator: e.target.value
+              }
+            });
+          }}>
+          {
+            {
+              tableFilter: (
+                <>
+                  <option key={Math.random()} value={'CONTAINS'} label={'CONTAINS'}>
+                    CONTAINS
+                  </option>
+                  <option key={Math.random()} value={'DOES NOT CONTAIN'} label={'DOES NOT CONTAIN'}>
+                    DOES NOT CONTAIN
+                  </option>
+                </>
+              ),
+              spatialFilterDrawn: (
+                <>
+                  <option key={Math.random()} value={'CONAINED IN'} label={'CONAINED IN'}>
+                    CONAINED IN
+                  </option>
+                  <option key={Math.random()} value={'DOES NOT CONTAIN'} label={'DOES NOT CONTAIN'}>
+                    DOES NOT CONTAIN
+                  </option>
+                </>
+              ),
+              spatialFilterUploaded: (
+                <>
+                  <option key={Math.random()} value={'CONAINED IN'} label={'CONAINED IN'}>
+                    CONAINED IN
+                  </option>
+                  <option key={Math.random()} value={'NOT CONAINED IN'} label={'NOT CONAINED IN'}>
+                    NOT CONAINED IN
+                  </option>
+                </>
+              )
+            }[filterTypeInState]
+          }
+        </select>
+      </td>
       <td>
         <select
           className="filterSelect"
@@ -303,33 +394,24 @@ const Filter = (props) => {
               }
             });
           }}>
-          {filterOptions.map((option) => {
-            return (
-              <option key={option.value + option.label} value={option.value}>
-                {option.label}
-              </option>
-            );
-          })}
+          {filterTypeInState === 'tableFilter' ? (
+            filterOptions.map((option) => {
+              return (
+                <option key={option.value + option.label} value={option.value}>
+                  {option.label}
+                </option>
+              );
+            })
+          ) : (
+            <option key={props.id + 'SHAPEOPTION'} value={'SHAPE'}>
+              SHAPE
+            </option>
+          )}
         </select>
       </td>
-      {props.type === 'data' ? (
-        <td>
-          <input
-            key={'banana' + props.id}
-            ref={value}
-            className="filterSelect"
-            onChange={(e) => {
-              console.log('it changed');
-              debouncedUpdate(e.target.value);
-            }}
-            type="text"
-            value={valueInState}
-            //defaultValue={valueInState}
-          />
-        </td>
-      ) : (
-        <></>
-      )}
+      <td>
+        {input}
+      </td>
       <td className="deleteButtonCell">
         <Button
           className={'deleteButton'}

diff --git a/appv2/src/state/actions.tsx b/appv2/src/state/actions.tsx
@@ -162,6 +162,7 @@ export const RECORDSET_ADD_FILTER = 'RECORDSET_ADD_FILTER'
 export const RECORDSET_REMOVE_FILTER = 'RECORDSET_REMOVE_FILTER'
 export const RECORDSET_UPDATE_FILTER = 'RECORDSET_UPDATE_FILTER'
 export const RECORDSET_CLEAR_FILTERS = 'RECORDSET_CLEAR_FILTERS'
+export const INIT_SERVER_BOUNDARIES_GET = 'INIT_SERVER_BOUNDARIES_GET'
 
 export const USER_SETTINGS_ADD_RECORD_SET_REQUEST = 'USER_SETTINGS_ADD_RECORD_SET_REQUEST';
 export const USER_SETTINGS_ADD_RECORD_SET_SUCCESS = 'USER_SETTINGS_ADD_RECORD_SET_SUCCESS';