Fix "Not Participating" filter checkbox on Discover Challenges screen, Fixes #13025 (#13183)

* change 'role' options and filters to 'membership'

* added membership filtering function to discover challenges

* fix accidental deletion

* complete removal of roles from challenge filters

* abstract challenge "participating" filtering into mixin

* selecting "participating" and "not participating" shows all challenges

website/client/src/components/challenges/findChallenges.vue

@@ -31,7 +31,8 @@
       </div>
       <div class="row">
         <div
-          v-if="!loading && filteredChallenges.length === 0"
+          v-if="!loading &&
+          this.filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
         >
           <h2 v-once>
@@ -41,7 +42,7 @@
       </div>
       <div class="row">
         <div
-          v-for="challenge in filteredChallenges"
+          v-for="challenge in this.filteredChallenges"
           :key="challenge._id"
           class="col-12 col-md-6"
         >
@@ -170,9 +171,6 @@ export default {
   },
   computed: {
     ...mapState({ user: 'user.data' }),
-    filteredChallenges () {
-      return this.challenges;
-    },
   },
   mounted () {
     this.$store.dispatch('common:setTitle', {

website/client/src/components/challenges/myChallenges.vue

@@ -51,7 +51,7 @@
       </div>
       <div class="row">
         <div
-          v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
+          v-if="!loading && challenges.length > 0 && this.filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
         >
           <h2 v-once>
@@ -61,7 +61,7 @@
       </div>
       <div class="row">
         <div
-          v-for="challenge in filteredChallenges"
+          v-for="challenge in this.filteredChallenges"
           :key="challenge._id"
           class="col-12 col-md-6"
         >
@@ -197,25 +197,6 @@ export default {
   },
   computed: {
     ...mapState({ user: 'user.data' }),
-    filteredChallenges () {
-      const { filters } = this;
-      const { user } = this;
-
-      return this.challenges.filter(challenge => {
-        let isMember = true;
-
-        const filteringRole = filters.roles && filters.roles.length > 0;
-        if (filteringRole && filters.roles.indexOf('participating') !== -1) {
-          isMember = this.isMemberOfChallenge(user, challenge);
-        }
-
-        if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
-          isMember = !this.isMemberOfChallenge(user, challenge);
-        }
-
-        return isMember;
-      });
-    },
   },
   mounted () {
     this.$store.dispatch('common:setTitle', {

website/client/src/components/challenges/sidebar.vue

@@ -34,42 +34,19 @@
           </div>
         </div>
       </filter-group>
-      <filter-group :title="$t('role')">
-        <div
-          v-for="group in roleOptions"
-          :key="group.key"
-          class="form-check"
-        >
-          <div class="custom-control custom-checkbox">
-            <input
-              :id="group.key"
-              v-model="roleFilters"
-              class="custom-control-input"
-              type="checkbox"
-              :value="group.key"
-            >
-            <label
-              v-once
-              class="custom-control-label"
-              :for="group.key"
-            >{{ $t(group.label) }}</label>
-          </div>
-        </div>
-      </filter-group>
       <filter-group
-        v-if="$route.name !== 'findChallenges'"
         :title="$t('membership')"
         class="form-group"
       >
         <div
-          v-for="group in roleOptions"
+          v-for="group in membershipOptions"
           :key="group.key"
           class="form-check"
         >
           <div class="custom-control custom-checkbox">
             <input
               :id="group.key"
-              v-model="roleFilters"
+              v-model="membershipFilters"
               class="custom-control-input"
               type="checkbox"
               :value="group.key"
@@ -176,8 +153,8 @@ export default {
           key: 'time_management',
         },
       ],
-      roleFilters: [],
+      membershipFilters: [],
-      roleOptions: [
+      membershipOptions: [
         {
           label: 'participating',
           key: 'participating',
@@ -186,10 +163,6 @@ export default {
           label: 'not_participating',
           key: 'not_participating',
         },
-        // {
-        //   label: 'either',
-        //   key: 'either',
-        // },
       ],
       ownershipFilters: [],
       ownershipOptions: [
@@ -213,10 +186,10 @@ export default {
     categoryFilters: function categoryFilters () {
       this.emitFilters();
     },
-    roleFilters: function roleFilters () {
+    ownershipFilters: function ownershipFilters () {
       this.emitFilters();
     },
-    ownershipFilters: function ownershipFilters () {
+    membershipFilters: function membershipFilters () {
       this.emitFilters();
     },
     searchTerm: throttle(function searchTerm (newSearch) {
@@ -229,8 +202,8 @@ export default {
     emitFilters () {
       this.$emit('filter', {
         categories: this.categoryFilters,
-        roles: this.roleFilters,
         ownership: this.ownershipFilters,
+        membership: this.membershipFilters,
       });
     },
   },

website/client/src/mixins/challengeUtilities.js

@@ -4,4 +4,28 @@ export default {
       return user.challenges.indexOf(challenge._id) !== -1;
     },
   },
+  computed: {
+    filteredChallenges () {
+      const { filters } = this;
+      const { user } = this;
+
+      return this.challenges.filter(challenge => {
+        const filteringMembership = filters.membership && filters.membership.length > 0;
+
+        // if both filters are selected, display all challenges
+        if (filteringMembership && filters.membership.indexOf('participating') !== -1
+        && filteringMembership && filters.membership.indexOf('not_participating') !== -1) {
+          return true;
+        }
+
+        if (filteringMembership && filters.membership.indexOf('participating') !== -1) {
+          return this.isMemberOfChallenge(user, challenge);
+        }
+        if (filteringMembership && filters.membership.indexOf('not_participating') !== -1) {
+          return !this.isMemberOfChallenge(user, challenge);
+        }
+        return true;
+      });
+    },
+  },
 };