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

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;
     },