Provided better modularity for using app setting saved filters in HOC…

…s, changed filter layout, removed extra prop from ReviewNearbyTasksWidget to fix problem with prop values
maproulette · Oct 16, 2023 · 08aee10 · 08aee10
1 parent fe75042
commit 08aee10
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 43 deletions.
diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js b/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js
@@ -252,11 +252,11 @@ export class ViewChallengeTasks extends Component {
         </div>
 
         <div className="mr-my-4 mr-space-y-3">
-            {/* <p className="mr-text-base mr-uppercase mr-text-mango">
-              <FormattedMessage {...messages.filterListLabel} />
-            </p> */}
-
-            <div className='mr-flex mr-justify-between mr-flex-1 mr-px-2 xl:mr-px-4'>
+          <div className='mr-flex mr-justify-between mr-flex-1 mr-px-2 xl:mr-px-4'>
+            <div className='mr-flex'>
+              <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-8">
+                <FormattedMessage {...messages.filterListLabel} />
+              </p>
               <ul className="mr-mb-4 xl:mr-mb-0 mr-flex mr-items-center mr-space-x-6 xl:mr-space-x-8">
                 <li>
                   <TaskStatusFilter {...this.props} />
@@ -271,6 +271,7 @@ export class ViewChallengeTasks extends Component {
                   <TaskPropertyFilter {...this.props} />
                 </li>
               </ul>
+            </div>
               <div>
                 {calculateTasksInChallenge(this.props) !== _get(this.props, 'taskInfo.totalCount', 0) ? clearFiltersControl : null}
               </div>

diff --git a/src/components/HOCs/WithFilterCriteria/WithFilterCriteria.js b/src/components/HOCs/WithFilterCriteria/WithFilterCriteria.js
@@ -23,12 +23,14 @@ const DEFAULT_CRITERIA = {sortCriteria: {sortBy: 'name', direction: 'DESC'},
 
 /**
  * WithFilterCriteria keeps track of the current criteria being used
- * to filter, sort and page the tasks.
+ * to filter, sort and page the tasks. If a use case requires user app settings for 
+ * saving and loading filters, the 'usePersistedFilters' prop must be true and the correct 
+ * setting name provided via the 'savedFilterSettingName' prop.
  *
  * @author [Kelli Rotstan](https://github.com/krotstan)
  */
 export const WithFilterCriteria = function(WrappedComponent, ignoreURL = true,
-  ignoreLocked = true, skipInitialFetch = false, usePersistedFilters = false) {
+  ignoreLocked = true, skipInitialFetch = false, usePersistedFilters = false, savedFilterSettingName = null) {
    return class extends Component {
      state = {
        loading: false,
@@ -216,8 +218,8 @@ export const WithFilterCriteria = function(WrappedComponent, ignoreURL = true,
 
 
      updateCriteriaFromSavedFilters(props) {
-       const savedFilters = this.props.getUserAppSetting(
-        this.props.user, 'taskBundleFilters') || ''
+       const savedFilters = usePersistedFilters && savedFilterSettingName ? this.props.getUserAppSetting(
+        this.props.user, savedFilterSettingName) : ''
        const criteria = savedFilters && savedFilters.length > 0 ?
        buildSearchCriteriafromURL(savedFilters) :
        _cloneDeep(props.history.location.state)

diff --git a/src/components/HOCs/WithFilteredClusteredTasks/WithFilteredClusteredTasks.js b/src/components/HOCs/WithFilteredClusteredTasks/WithFilteredClusteredTasks.js
@@ -30,15 +30,17 @@ import { buildSearchCriteriafromURL } from '../../../services/SearchCriteria/Sea
  * down in the `includeTaskStatuses`, `includeTaskPriorities`, and
  * `selectedTasks` props. By default, all statuses and priorities are enabled
  * (so tasks in any status and priority will pass through) and no tasks are
- * selected.
+ * selected. If a use case requires user app settings for saving and loading filters,
+ * 
  *
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
 export default function WithFilteredClusteredTasks(WrappedComponent,
                                                    tasksProp='clusteredTasks',
                                                    outputProp,
                                                    initialFilters,
-                                                   useSavedFilters = false) {
+                                                   useSavedFilters = false,
+                                                   savedFilterSettingName = null) {
   return class extends Component {
     defaultFilters = () => {
       return {
@@ -280,9 +282,12 @@ export default function WithFilteredClusteredTasks(WrappedComponent,
       )
     }
 
+    // This will check for saved filters if the 'useSavedFilters' prop is true and a valid user
+    // app setting value has been provided for the filter location.
+
     setupFilters = () => {
-      const savedFilters = this.props.getUserAppSetting(
-        this.props.user, 'taskBundleFilters') || ''
+      const savedFilters = useSavedFilters && savedFilterSettingName ? this.props.getUserAppSetting(
+        this.props.user, savedFilterSettingName) : ''
       let useURLFilters = false
       let loadFromSavedFilters = false
       const criteria =

diff --git a/src/components/TaskFilters/FilterDropdown.js b/src/components/TaskFilters/FilterDropdown.js
@@ -14,7 +14,7 @@ export default class FilterDropdown extends Component {
             onClick={dropdown.toggleDropdownVisible}
           >
             <span className="mr-text-base mr-uppercase mr-mr-1">
-              <span className='mr-hidden xl:mr-inline'>Filter By </span>{this.props.title}
+              {this.props.title}
             </span>
             <SvgSymbol
               sym="icon-cheveron-down"

diff --git a/src/components/TaskFilters/Messages.js b/src/components/TaskFilters/Messages.js
@@ -6,22 +6,22 @@ import { defineMessages } from 'react-intl'
 export default defineMessages({
   filterByPropertyLabel: {
     id: "TaskPropertyFilter.label",
-    defaultMessage: "Task Property",
+    defaultMessage: "Property",
   },
 
   filterByPriorityLabel: {
     id: "TaskPriorityFilter.label",
-    defaultMessage: "Task Priority",
+    defaultMessage: "Priority",
   },
 
   filterByStatusLabel: {
     id: "TaskStatusFilter.label",
-    defaultMessage: "Task Status",
+    defaultMessage: "Status",
   },
 
   filterByReviewStatusLabel: {
     id: "TaskReviewStatusFilter.label",
-    defaultMessage: "Task Review Status",
+    defaultMessage: "Review Status",
   },
 
   filterByMetaReviewStatusLabel: {

diff --git a/src/components/TaskFilters/TaskReviewStatusFilter.js b/src/components/TaskFilters/TaskReviewStatusFilter.js
@@ -22,11 +22,6 @@ import messages from './Messages'
 export default class TaskReviewStatusFilter extends Component {
   render() {
 
-    // console.log('includereviewstatus props', this.props.includeTaskReviewStatuses)
-    // console.log('base review statuses',TaskReviewStatusWithUnset)
-    // console.log('includeMetaReviewStatuses props', this.props.includeMetaReviewStatuses)
-    // console.log('base metaReviewStatuses', TaskMetaReviewStatusWithUnset)
-
     const taskReviewStatusFiltersActive = !Object.values(this.props.includeTaskReviewStatuses).every(value => value) || 
       Object.keys(this.props.includeTaskReviewStatuses).length < Object.keys(TaskReviewStatusWithUnset).length
 

diff --git a/src/components/Widgets/ReviewNearbyTasksWidget/Messages.js b/src/components/Widgets/ReviewNearbyTasksWidget/Messages.js
@@ -14,6 +14,11 @@ export default defineMessages({
     defaultMessage: "Nearby Tasks",
   },
 
+  filterListLabel: {
+    id: "Widgets.ReviewNearbyTasksWidget.controls.filterList.label",
+    defaultMessage: "Filter By:"
+  },
+
   clearFiltersLabel: {
     id: "Widgets.ReviewNearbyTasksWidget.controls.clearFilters.label",
     defaultMessage: "Clear Filters",

diff --git a/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js b/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js
@@ -230,20 +230,25 @@ export default class ReviewNearbyTasksWidget extends Component {
             )}
           </div>
           <div className="mr-my-4 mr-px-4 mr-justify-between mr-flex">
-            <ul className="mr-mb-4 xl:mr-mb-0 md:mr-flex">
-              <li className="md:mr-mr-4">
-                <TaskStatusFilter {...this.props} />
-              </li>
-              <li className="md:mr-mr-4">
-                <TaskReviewStatusFilter {...this.props} />
-              </li>
-              <li className="md:mr-mr-4">
-                <TaskPriorityFilter {...this.props} />
-              </li>
-              <li className="md:mr-mr-4">
-                <TaskPropertyFilter {...this.props} />
-              </li>
-            </ul>
+            <div className='mr-flex'>
+              <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-8">
+                <FormattedMessage {...messages.filterListLabel} />
+              </p>
+              <ul className="md:mr-space-x-6 mr-mb-4 xl:mr-mb-0 md:mr-flex">
+                <li>
+                  <TaskStatusFilter {...this.props} />
+                </li>
+                <li>
+                  <TaskReviewStatusFilter {...this.props} />
+                </li>
+                <li>
+                  <TaskPriorityFilter {...this.props} />
+                </li>
+                <li>
+                  <TaskPropertyFilter {...this.props} />
+                </li>
+              </ul>
+            </div>
             {clearFiltersControl}
           </div>
         </div>
@@ -270,15 +275,17 @@ registerWidgetType(
               ),
               true,
               false,
-              true
+              true,
+              false
             )
           ),
           'nearbyTasks',
-          'taskClusters',
+          // 'taskClusters',
           'filteredClusteredTasks',
           {
             includeLocked: false,
-          }
+          },
+          false
         )
       )
     )

diff --git a/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js b/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js
@@ -398,7 +398,7 @@ const BuildBundle = props => {
       </div>
       <div className="mr-my-4 mr-px-4 mr-flex mr-justify-between">
         <div className='mr-flex'>
-          <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-6">
+          <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-8">
             <FormattedMessage {...messages.filterListLabel} />
           </p>
           <ul className="mr-mb-4 xl:mr-mb-0 md:mr-flex">
@@ -475,7 +475,7 @@ registerWidgetType(
                   ),
                   'filteredClusteredTasks',
                   'taskInfo'
-                ), true, false, true, true,
+                ), true, false, true, true, 'taskBundleFilters'
               )
             ),
             'clusteredTasks',
@@ -484,7 +484,8 @@ registerWidgetType(
               statuses: VALID_STATUSES,
               includeLocked: false,
             },
-            true
+            true,
+            'taskBundleFilters'
           )
         )
       )