#3124: Query filters UI to work with common filters

NCI-Agency · Aug 5, 2020 · 41e5805 · 41e5805
1 parent 88c54d5
commit 41e5805
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 76 deletions.
diff --git a/client/src/components/AdvancedSearch.js b/client/src/components/AdvancedSearch.js
@@ -9,6 +9,7 @@ import {
 import { resetPagination, SEARCH_OBJECT_LABELS, setSearchQuery } from "actions"
 import ButtonToggleGroup from "components/ButtonToggleGroup"
 import searchFilters, {
+  findCommonFiltersForAllObjectTypes,
   POSTITION_POSITION_TYPE_FILTER_KEY,
   SearchQueryPropType
 } from "components/SearchFilters"
@@ -64,7 +65,13 @@ const AdvancedSearch = ({
     getOrgQueryParams(null)
   )
   const ALL_FILTERS = searchFilters.searchFilters()
-  const filterDefs = objectType ? ALL_FILTERS[objectType].filters : {}
+  const commonFiltersForAllObjectTypes = findCommonFiltersForAllObjectTypes(
+    searchObjectTypes,
+    ALL_FILTERS
+  )
+  const filterDefs = objectType
+    ? ALL_FILTERS[objectType].filters
+    : commonFiltersForAllObjectTypes
   const existingKeys = filters.map(f => f.key)
   const moreFiltersAvailable =
     existingKeys.length < Object.keys(filterDefs).length
@@ -173,10 +180,12 @@ const AdvancedSearch = ({
                   flexGrow: 1
                 }}
               >
-                {!objectType ? (
-                  "To add filters, first pick a type above"
-                ) : !moreFiltersAvailable ? (
-                  "No additional filters available"
+                {!moreFiltersAvailable ? (
+                  !objectType ? (
+                    "To add more filters, first pick a type above"
+                  ) : (
+                    "No additional filters available"
+                  )
                 ) : (
                   <Popover
                     content={advancedSearchMenuContent}
@@ -234,7 +243,9 @@ const AdvancedSearch = ({
 
   function changeObjectType(objectType) {
     setObjectType(objectType)
-    setFilters([])
+    setFilters(
+      filters.filter(value => commonFiltersForAllObjectTypes[value.key])
+    )
     setOrgFilterQueryParams(getOrgQueryParams(null))
   }
 

diff --git a/client/src/components/SearchFilters.js b/client/src/components/SearchFilters.js
@@ -27,7 +27,9 @@ import {
   TagOverlayRow,
   TaskSimpleOverlayRow
 } from "components/advancedSelectWidget/AdvancedSelectOverlayRow"
+import Model from "components/Model"
 import _isEmpty from "lodash/isEmpty"
+import _pickBy from "lodash/pickBy"
 import {
   Location,
   Organization,
@@ -82,6 +84,15 @@ export const RECURSE_STRATEGY = {
   PARENTS: "PARENTS"
 }
 
+const StatusFilter = {
+  component: SelectFilter,
+  deserializer: deserializeSelectFilter,
+  props: {
+    queryKey: "status",
+    options: [Model.STATUS.ACTIVE, Model.STATUS.INACTIVE]
+  }
+}
+
 const taskFilters = () => {
   const taskFiltersObj = {
     Organization: {
@@ -91,15 +102,6 @@ const taskFilters = () => {
         queryKey: "taskedOrgUuid",
         queryOrgRecurseStrategyKey: "orgRecurseStrategy"
       }
-    },
-    Status: {
-      component: SelectFilter,
-      deserializer: deserializeSelectFilter,
-      props: {
-        queryKey: "status",
-        options: [Task.STATUS.ACTIVE, Task.STATUS.INACTIVE],
-        labels: ["Active", "Inactive"]
-      }
     }
   }
   const projectedCompletion = Settings.fields.task.projectedCompletion
@@ -395,6 +397,7 @@ const searchFilters = function() {
 
   const countries = Settings.fields.advisor.person.countries || [] // TODO: make search also work with principal countries
   const ranks = (Settings.fields.person.ranks || []).map(f => f.value)
+
   filters[SEARCH_OBJECT_TYPES.PEOPLE] = {
     filters: {
       Organization: {
@@ -417,14 +420,6 @@ const searchFilters = function() {
           ]
         }
       },
-      Status: {
-        component: SelectFilter,
-        deserializer: deserializeSelectFilter,
-        props: {
-          queryKey: "status",
-          options: [Person.STATUS.ACTIVE, Person.STATUS.INACTIVE]
-        }
-      },
       Location: {
         component: AdvancedSelectFilter,
         deserializer: deserializeAdvancedSelectFilter,
@@ -466,14 +461,6 @@ const searchFilters = function() {
 
   filters[SEARCH_OBJECT_TYPES.ORGANIZATIONS] = {
     filters: {
-      Status: {
-        component: SelectFilter,
-        deserializer: deserializeSelectFilter,
-        props: {
-          queryKey: "status",
-          options: [Organization.STATUS.ACTIVE, Organization.STATUS.INACTIVE]
-        }
-      },
       "Organization Type": {
         component: SelectFilter,
         deserializer: deserializeSelectFilter,
@@ -515,14 +502,6 @@ const searchFilters = function() {
           queryOrgRecurseStrategyKey: "orgRecurseStrategy"
         }
       },
-      Status: {
-        component: SelectFilter,
-        deserializer: deserializeSelectFilter,
-        props: {
-          queryKey: "status",
-          options: [Position.STATUS.ACTIVE, Position.STATUS.INACTIVE]
-        }
-      },
       Location: {
         component: AdvancedSelectFilter,
         deserializer: deserializeAdvancedSelectFilter,
@@ -545,23 +524,18 @@ const searchFilters = function() {
   }
 
   filters[SEARCH_OBJECT_TYPES.LOCATIONS] = {
-    filters: {
-      Status: {
-        component: SelectFilter,
-        deserializer: deserializeSelectFilter,
-        props: {
-          queryKey: "status",
-          options: [Location.STATUS.ACTIVE, Location.STATUS.INACTIVE]
-        }
-      }
-    }
+    filters: {}
   }
 
   // Task filters
   filters[SEARCH_OBJECT_TYPES.TASKS] = {
     filters: taskFilters()
   }
 
+  for (const [, filtersForType] of Object.entries(filters)) {
+    filtersForType.filters.Status = StatusFilter
+  }
+
   return filters
 }
 
@@ -608,39 +582,52 @@ export const SearchDescription = ({ searchQuery, showPlaceholders }) => {
   const filterDefs =
     searchQuery.objectType && SEARCH_OBJECT_TYPES[searchQuery.objectType]
       ? ALL_FILTERS[SEARCH_OBJECT_TYPES[searchQuery.objectType]].filters
-      : {}
-  const filters = searchQuery.filters.filter(f => filterDefs[f.key])
+      : findCommonFiltersForAllObjectTypes(
+        Object.keys(SEARCH_OBJECT_TYPES),
+        ALL_FILTERS
+      )
+  const filters = searchQuery.filters
   return (
     <span className="asLink">
-      {searchQuery.objectType ? (
-        <>
-          <b>{SEARCH_OBJECT_LABELS[searchQuery.objectType]}</b>
-          {filters.length > 0 ? (
-            <>
-              <> filtered on </>
-              {filters.map(
-                (filter, i) =>
-                  filterDefs[filter.key] && (
-                    <SearchFilterDisplay
-                      key={filter.key}
-                      filter={filter}
-                      element={filterDefs[filter.key]}
-                      showSeparator={i !== filters.length - 1}
-                    />
-                  )
-              )}
-            </>
-          ) : (
-            showPlaceholders && " - add filters"
-          )}
-        </>
-      ) : (
-        showPlaceholders && "Add filters"
-      )}
+      <>
+        <b>
+          {searchQuery.objectType
+            ? SEARCH_OBJECT_LABELS[searchQuery.objectType]
+            : "Everything"}
+        </b>
+        {filters.length > 0 ? (
+          <>
+            <> filtered on </>
+            {filters.map(
+              (filter, i) =>
+                filterDefs[filter.key] && (
+                  <SearchFilterDisplay
+                    key={filter.key}
+                    filter={filter}
+                    element={filterDefs[filter.key]}
+                    showSeparator={i !== filters.length - 1}
+                  />
+                )
+            )}
+          </>
+        ) : (
+          showPlaceholders && " - add filters"
+        )}
+      </>
     </span>
   )
 }
 
+export const findCommonFiltersForAllObjectTypes = (
+  searchObjectTypes,
+  theSearchFilters
+) =>
+  searchObjectTypes
+    .map(type => theSearchFilters[type].filters)
+    .reduce((filters1, filters2) =>
+      _pickBy(filters1, (value, key) => filters2[key])
+    )
+
 SearchDescription.propTypes = {
   searchQuery: SearchQueryPropType,
   showPlaceholders: PropTypes.bool