Party header sort WIP (#10330)

* WIP(groups): improved sorting WIP

* WIP(groups): split sort option and direction

* WIP(party): header sort cont'd

* feat(party): header sorting

website/client/components/groups/membersModal.vue

@@ -10,13 +10,18 @@ div
         .col-6
           button(type="button" aria-label="Close" class="close", @click='close()')
             span(aria-hidden="true") ×
-      .row
+      .row.d-flex.align-items-center
-        .form-group.col-6
+        .col-4
-          input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
+          input.form-control.input-search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-        .col-5.offset-1
+        .col
-          span.dropdown-label {{ $t('sortBy') }}
+          select.form-control(@change='changeSortOption($event)')
-          b-dropdown(:text="$t('sort')", right=true)
+            option(v-for='sortOption in sortOptions', :value='sortOption.value') {{sortOption.text}}
-            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption)', :key='sortOption.value') {{sortOption.text}}
+        .col-3
+          select.form-control(@change='changeSortDirection($event)')
+            option(v-for='sortDirection in sortDirections', :value='sortDirection.value') {{sortDirection.text}}
+
+    .row.apply-options.d-flex.justify-content-center(v-if='sortDirty')
+      a(@click='applySortOptions()') {{ $t('applySortToHeader') }}
     .row(v-if='invites.length > 0')
       .col-6.offset-3.nav
         .nav-item(@click='viewMembers()', :class="{active: selectedPage === 'members'}") {{ $t('members') }}
@@ -69,14 +74,30 @@ div
 
 <style lang='scss'>
   #members-modal {
+    .modal-header {
+      background-color: #edecee;
+      border-radius: 8px 8px 0 0;
+      box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+    }
+
+    .modal-footer {
+      background-color: #edecee;
+      border-radius: 0 0 8px 8px;
+    }
+
     .small-text, .character-name {
       color: #878190;
     }
 
-    .no-padding-left, .modal-body {
+    .no-padding-left {
       padding-left: 0;
     }
 
+    .modal-body {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
     .member-details {
       margin: 0;
     }
@@ -88,15 +109,21 @@ div
 </style>
 
 <style lang='scss' scoped>
-  header {
+  .apply-options {
-    background-color: #edecee;
+    padding: 1em;
-    border-radius: 4px 4px 0 0;
+    margin: 0;
+    background-color: #f9f9f9;
+    color: #2995cd;
   }
 
   .header-wrap {
     width: 100%;
   }
 
+  .form-control {
+    font-size: 0.9rem;
+  }
+
   h1 {
     color: #4f2a93;
   }
@@ -172,7 +199,6 @@ div
 </style>
 
 <script>
-// import sortBy from "lodash/sortBy";
 import orderBy from 'lodash/orderBy';
 import isEmpty from 'lodash/isEmpty';
 import { mapState } from 'client/libs/store';
@@ -193,82 +219,49 @@ export default {
   data () {
     return {
       sortOption: {},
+      sortDirty: false,
       selectedPage: 'members',
       members: [],
       invites: [],
       memberToRemove: {},
       sortOptions: [
         {
-          value: 'class',
+          value: 'stats.class',
-          text: this.$t('class'),
+          text: this.$t('sortClass'),
-          order: 'asc',
-          param: 'stats.class',
         },
         {
-          value: 'background',
+          value: 'preferences.background',
-          text: this.$t('background'),
+          text: this.$t('sortBackground'),
-          order: 'asc',
-          param: 'preferences.background',
         },
         {
-          value: 'date-joined-asc',
+          value: 'auth.timestamps.created',
-          text: this.$t('sortDateJoinedAsc'),
+          text: this.$t('sortDateJoined'),
-          order: 'asc',
-          param: 'auth.timestamps.created',
         },
         {
-          value: 'date-joined-desc',
+          value: 'auth.timestamps.loggedin',
-          text: this.$t('sortDateJoinedDesc'),
+          text: this.$t('sortLogin'),
-          order: 'desc',
-          param: 'auth.timestamps.created',
         },
         {
-          value: 'login-asc',
+          value: 'stats.lvl',
-          text: this.$t('sortLoginAsc'),
+          text: this.$t('sortLevel'),
-          order: 'asc',
-          param: 'auth.timestamps.loggedin',
         },
         {
-          value: 'login-desc',
+          value: 'profile.name',
-          text: this.$t('sortLoginDesc'),
+          text: this.$t('sortName'),
-          order: 'desc',
-          param: 'auth.timestamps.loggedin',
         },
         {
-          value: 'level-asc',
+          value: 'contributor.level',
-          text: this.$t('sortLevelAsc'),
+          text: this.$t('sortTier'),
-          order: 'asc',
+        },
-          param: 'stats.lvl',
+      ],
+      sortDirections: [
+        {
+          value: 'asc',
+          text: this.$t('ascendingAbbrev'),
         },
         {
-          value: 'level-desc',
+          value: 'desc',
-          text: this.$t('sortLevelDesc'),
+          text: this.$t('descendingAbbrev'),
-          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: '',
@@ -318,7 +311,7 @@ export default {
 
       if (!isEmpty(this.sortOption)) {
         // Use the memberlist filtered by searchTerm
-        sortedMembers = orderBy(sortedMembers, [this.sortOption.param], [this.sortOption.order]);
+        sortedMembers = orderBy(sortedMembers, [this.sortOption.value], [this.sortOption.direction]);
       }
 
       return sortedMembers;
@@ -424,8 +417,25 @@ export default {
     close () {
       this.$root.$emit('bv::hide::modal', 'members-modal');
     },
-    sort (option) {
+    changeSortOption (e) {
-      this.sortOption = option;
+      this.sortOption.value = e.target.value;
+      this.sort();
+    },
+    changeSortDirection (e) {
+      this.sortOption.direction = e.target.value;
+      this.sort();
+    },
+    sort () {
+      this.sortDirty = true;
+      this.members = orderBy(this.members, [this.sortOption.value], [this.sortOption.direction]);
+    },
+    async applySortOptions () {
+      const settings = {
+        'party.order': this.sortOption.value,
+        'party.orderAscending': this.sortOption.direction,
+      };
+      await this.$store.dispatch('user:set', settings);
+      this.sortDirty = false;
     },
     async loadMoreMembers () {
       const lastMember = this.members[this.members.length - 1];

website/client/components/header/index.vue

@@ -18,7 +18,7 @@ div
       @resized="setPartyMembersWidth($event)"
     )
       member-details(
-        v-for="(member, $index) in partyMembers",
+        v-for="(member, $index) in sortedPartyMembers",
         :key="member._id",
         v-if="member._id !== user._id && $index < membersToShow",
         :member="member",
@@ -107,6 +107,7 @@ div
 </style>
 
 <script>
+import orderBy from 'lodash/orderBy';
 import { mapGetters, mapActions } from 'client/libs/store';
 import MemberDetails from '../memberDetails';
 import createPartyModal from '../groups/createPartyModal';
@@ -140,6 +141,9 @@ export default {
     membersToShow () {
       return Math.floor(this.currentWidth / 140) + 1;
     },
+    sortedPartyMembers () {
+      return orderBy(this.partyMembers, [this.user.party.order], [this.user.party.orderAscending]);
+    },
   },
   methods: {
     ...mapActions({

website/common/locales/en/groups.json

@@ -107,16 +107,16 @@
   "yesRemove": "Yes, remove them",
   "foreverAlone": "Can't like your own message. Don't be that person.",
 
-  "sortDateJoinedAsc": "Earliest Date Joined",
+  "sortBackground": "Sort by Background",
-  "sortDateJoinedDesc": "Latest Date Joined",
+  "sortClass": "Sort by Class",
-  "sortLoginAsc": "Earliest Login",
+  "sortDateJoined": "Sort by Join Date",
-  "sortLoginDesc": "Latest Login",
+  "sortLogin": "Sort by Login Date",
-  "sortLevelAsc": "Lowest Level",
+  "sortLevel": "Sort by Level",
-  "sortLevelDesc": "Highest Level",
+  "sortName": "Sort by Name",
-  "sortNameAsc": "Name (A - Z)",
+  "sortTier": "Sort by Tier",
-  "sortNameDesc": "Name (Z - A)",
+  "ascendingAbbrev": "Asc",
-  "sortTierAsc": "Lowest Tier",
+  "descendingAbbrev": "Desc",
-  "sortTierDesc": "Highest Tier",
+  "applySortToHeader": "Apply Sort Options to Party Header",
 
   "confirmGuild": "Create Guild for 4 Gems?",
   "leaveGroupCha": "Leave Guild challenges and...",