New client more updates (#8934)

* Added api token to page

* Fixed wiki link

* Added categoires

* Removed extra create challenge button. Add prize model and user balance deduction

* Added pending filter

* Added member sort

* Added confirmation for leaving

* Filtered tavern

* Added redirect to newly created guild

* Made guild links routerlinks

* Fixed wiki link and added fetch recent messages

* Show backgrounds only on edit. Fixed glasses equip

* Added link to register page

* Added yesterdailies

* Added achievement footer

* Update guild badges

* Added avatar to achievement avatar component

* More guild crests updates

* Achievement footer and avatar added

* Added notification read

* Removed duplicate string

website/client/components/groups/membersModal.vue

@@ -15,7 +15,7 @@ div
           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}}
-    .row(v-for='member in members')
+    .row(v-for='member in sortedMembers')
       .col-8.offset-1
         member-details(:member='member')
       .col-3.actions
@@ -105,6 +105,7 @@ div
 
 <script>
 // @TODO: Move this under members directory
+import sortBy from 'lodash/sortBy';
 import bModal from 'bootstrap-vue/lib/components/modal';
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
@@ -113,7 +114,6 @@ import MemberDetails from '../memberDetails';
 import removeIcon from 'assets/members/remove.svg';
 import messageIcon from 'assets/members/message.svg';
 import starIcon from 'assets/members/star.svg';
-import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
 
 export default {
   props: ['group', 'hideBadge'],
@@ -130,11 +130,12 @@ export default {
   },
   data () {
     return {
+      sortOption: '',
       members: [],
       memberToRemove: '',
       sortOptions: [
         {
-          value: 'tier',
+          value: 'level',
           text: this.$t('tier'),
         },
         {
@@ -142,7 +143,7 @@ export default {
           text: this.$t('name'),
         },
         {
-          value: 'level',
+          value: 'lvl',
           text: this.$t('level'),
         },
         {
@@ -155,10 +156,30 @@ export default {
         removeIcon,
         messageIcon,
         starIcon,
-        goldGuildBadgeIcon,
       }),
     };
   },
+  computed: {
+    sortedMembers () {
+      let sortedMembers = this.members;
+      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;
+        }
+      }]);
+
+      return this.members;
+    },
+  },
   methods: {
     async getMembers () {
       let groupId = this.$store.state.groupId || this.group._id;
@@ -232,6 +253,9 @@ export default {
     close () {
       this.$root.$emit('hide::modal', 'members-modal');
     },
+    sort (option) {
+      this.sortOption = option;
+    },
   },
 };
 </script>