Party roster sorter: Member Modal Component (#9472)

* modify sort options for party members

* add unittest for membersModalComponent sort

* updates as requested in PR

* removed duplicates for `class` and `background` from flavour text

* fix linting error thrown by travis ci

test/client/unit/specs/components/groups/membersModal.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import MembersModalComponent from 'client/components/groups/membersModal.vue';
+
+describe('Members Modal Component', () => {
+  describe('Party Sort', () => {
+    let CTor;
+    let vm;
+
+    beforeEach(() => {
+      CTor = Vue.extend(MembersModalComponent);
+      vm = new CTor().$mount();
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('should have an empty object as sort-option at start', () => {
+      const defaultData = vm.data();
+      expect(defaultData.sortOption).to.eq({});
+    });
+
+    it('should accept sort-option object', () => {
+      const sortOption = vm.data().sortOption[0];
+      vm.sort(sortOption);
+      Vue.nextTick(() => {
+        expect(vm.data().sortOption).to.eq(sortOption);
+      });
+    });
+  });
+});

website/client/components/groups/membersModal.vue

@@ -16,7 +16,7 @@ div
         .col-5.offset-1
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
+            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption)', :key='sortOption.value') {{sortOption.text}}
     .row(v-if='invites.length > 0')
       .col-6.offset-3.nav
         .nav-item(@click='viewMembers()', :class="{active: selectedPage === 'members'}") {{ $t('members') }}
@@ -172,7 +172,9 @@ div
 </style>
 
 <script>
-import sortBy from 'lodash/sortBy';
+// import sortBy from "lodash/sortBy";
+import orderBy from 'lodash/orderBy';
+import isEmpty from 'lodash/isEmpty';
 import { mapState } from 'client/libs/store';
 
 import removeMemberModal from 'client/components/members/removeMemberModal';
@@ -190,27 +192,83 @@ export default {
   },
   data () {
     return {
-      sortOption: '',
+      sortOption: {},
       selectedPage: 'members',
       members: [],
       invites: [],
       memberToRemove: {},
       sortOptions: [
-        {
-          value: 'level',
-          text: this.$t('tier'),
-        },
-        {
-          value: 'name',
-          text: this.$t('name'),
-        },
-        {
-          value: 'lvl',
-          text: this.$t('level'),
-        },
         {
           value: 'class',
           text: this.$t('class'),
+          order: 'asc',
+          param: 'stats.class',
+        },
+        {
+          value: 'background',
+          text: this.$t('background'),
+          order: 'asc',
+          param: 'preferences.background',
+        },
+        {
+          value: 'date-joined-asc',
+          text: this.$t('sortDateJoinedAsc'),
+          order: 'asc',
+          param: 'auth.timestamps.created',
+        },
+        {
+          value: 'date-joined-desc',
+          text: this.$t('sortDateJoinedDesc'),
+          order: 'desc',
+          param: 'auth.timestamps.created',
+        },
+        {
+          value: 'login-asc',
+          text: this.$t('sortLoginAsc'),
+          order: 'asc',
+          param: 'auth.timestamps.loggedin',
+        },
+        {
+          value: 'login-desc',
+          text: this.$t('sortLoginDesc'),
+          order: 'desc',
+          param: 'auth.timestamps.loggedin',
+        },
+        {
+          value: 'level-asc',
+          text: this.$t('sortLevelAsc'),
+          order: 'asc',
+          param: 'stats.lvl',
+        },
+        {
+          value: 'level-desc',
+          text: this.$t('sortLevelDesc'),
+          order: 'desc',
+          param: 'stats.lvl',
+        },
+        {
+          value: 'name-asc',
+          text: this.$t('sortNameAsc'),
+          order: 'asc',
+          param: 'profile.name',
+        },
+        {
+          value: 'name-desc',
+          text: this.$t('sortNameDesc'),
+          order: 'desc',
+          param: 'profile.name',
+        },
+        {
+          value: 'tier-asc',
+          text: this.$t('sortTierAsc'),
+          order: 'asc',
+          param: 'contributor.level',
+        },
+        {
+          value: 'tier-desc',
+          text: this.$t('sortTierDesc'),
+          order: 'desc',
+          param: 'contributor.level',
         },
       ],
       searchTerm: '',
@@ -249,24 +307,18 @@ export default {
 
       if (this.searchTerm) {
         sortedMembers = sortedMembers.filter(member => {
-          return member.profile.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) !== -1;
+          return (
+            member.profile.name
+              .toLowerCase()
+              .indexOf(this.searchTerm.toLowerCase()) !== -1
+          );
         });
       }
 
-      if (!this.sortOption) return sortedMembers;
-
-      sortedMembers = sortBy(this.members, [(member) => {
-        if (this.sortOption === 'tier') {
-          if (!member.contributor) return;
-          return member.contributor.level;
-        } else if (this.sortOption === 'name') {
-          return member.profile.name;
-        } else if (this.sortOption === 'lvl') {
-          return member.stats.lvl;
-        } else if (this.sortOption === 'class') {
-          return member.stats.class;
+      if (!isEmpty(this.sortOption)) {
+        // Use the memberlist filtered by searchTerm
+        sortedMembers = orderBy(sortedMembers, [this.sortOption.param], [this.sortOption.order]);
       }
-      }]);
 
       return sortedMembers;
     },

website/common/locales/en/groups.json

@@ -102,15 +102,18 @@
   "optionalMessage": "Optional message",
   "yesRemove": "Yes, remove them",
   "foreverAlone": "Can't like your own message. Don't be that person.",
-  "sortLevel": "Sort by level",
-  "sortRandom": "Sort randomly",
-  "sortPets": "Sort by number of pets",
-  "sortName": "Sort by avatar name",
-  "sortBackgrounds": "Sort by background",
-  "sortHabitrpgJoined": "Sort by Habitica date joined",
-  "sortHabitrpgLastLoggedIn": "Sort by last time user logged in",
-  "ascendingSort": "Sort Ascending",
-  "descendingSort": "Sort Descending",
+
+  "sortDateJoinedAsc": "Earliest Date Joined",
+  "sortDateJoinedDesc": "Latest Date Joined",
+  "sortLoginAsc": "Earliest Login",
+  "sortLoginDesc": "Latest Login",
+  "sortLevelAsc": "Lowest Level",
+  "sortLevelDesc": "Highest Level",
+  "sortNameAsc": "Name (A - Z)",
+  "sortNameDesc": "Name (Z - A)",
+  "sortTierAsc": "Lowest Tier",
+  "sortTierDesc": "Highest Tier",
+
   "confirmGuild": "Create Guild for 4 Gems?",
   "leaveGroupCha": "Leave Guild challenges and...",
   "confirm": "Confirm",