Sort channel members

chat/UserList.vue

@@ -13,7 +13,7 @@
         </div>
         <div v-if="channel" style="padding-left:5px;flex:1;display:flex;flex-direction:column" v-show="tab === '1'">
             <div class="users" style="flex:1;padding-left:5px">
-                <h4>{{l('users.memberCount', channel.sortedMembers.length)}}</h4>
+                <h4>{{l('users.memberCount', channel.sortedMembers.length)}} <a class="btn sort" @click="switchSort"><i class="fa fa-sort"></i></a></h4>
                 <div v-for="member in filteredMembers" :key="member.character.name">
                     <user :character="member.character" :channel="channel" :showStatus="true"></user>
                 </div>
@@ -33,10 +33,43 @@
     import Vue from 'vue';
     import Tabs from '../components/tabs';
     import core from './core';
-    import {Channel, Character, Conversation} from './interfaces';
+    import { Channel, Character, Conversation } from './interfaces';
     import l from './localize';
     import Sidebar from './Sidebar.vue';
     import UserView from './UserView.vue';
+    import _ from 'lodash';
+
+    type StatusSort = {
+      [key in Character.Status]: number;
+    };
+
+    type GenderSort = {
+      [key in Character.Gender]: number;
+    };
+
+    const statusSort: StatusSort = {
+      'crown': 0,
+      'looking': 1,
+      'online': 2,
+      'idle': 3,
+      'away': 4,
+      'busy': 5,
+      'dnd': 6,
+      'offline': 7
+    };
+
+    const genderSort: GenderSort = {
+      'Female': 0,
+      'Male': 1,
+      'Herm': 2,
+      'Shemale': 3,
+      'Cunt-boy': 4,
+      'Transgender': 5,
+      'Male-Herm': 6,
+      'None': 7
+    };
+
+    const availableSorts = ['normal', 'status', 'gender'] as const;
 
     @Component({
         components: {user: UserView, sidebar: Sidebar, tabs: Tabs}
@@ -48,6 +81,8 @@
         l = l;
         sorter = (x: Character, y: Character) => (x.name < y.name ? -1 : (x.name > y.name ? 1 : 0));
 
+        sortType: typeof availableSorts[number] = 'normal';
+
         get friends(): Character[] {
             return core.characters.friends.slice().sort(this.sorter);
         }
@@ -61,6 +96,46 @@
         }
 
         get filteredMembers(): ReadonlyArray<Channel.Member> {
+          const members = this.getFilteredMembers();
+
+          if (this.sortType === 'normal') {
+            return members;
+          }
+
+          const sorted = [...members];
+
+          switch (this.sortType) {
+            case 'status':
+              sorted.sort((a, b) => {
+                const aVal = statusSort[a.character.status];
+                const bVal = statusSort[b.character.status];
+
+                if (aVal - bVal === 0) {
+                  return a.character.name.localeCompare(b.character.name);
+                }
+
+                return aVal - bVal;
+              });
+              break;
+
+            case 'gender':
+              sorted.sort((a, b) => {
+                const aVal = genderSort[(a.character.gender || 'None')];
+                const bVal = genderSort[(b.character.gender || 'None')];
+
+                if (aVal - bVal === 0) {
+                  return a.character.name.localeCompare(b.character.name);
+                }
+
+                return aVal - bVal;
+              });
+              break;
+          }
+
+          return sorted;
+        }
+
+        getFilteredMembers() {
           const members = this.prefilterMembers();
 
           if (!core.state.settings.risingFilter.hideChannelMembers) {
@@ -75,12 +150,20 @@
         }
 
         prefilterMembers(): ReadonlyArray<Channel.Member> {
+          const sorted = this.channel.sortedMembers;
+
           if(this.filter.length === 0)
-            return this.channel.sortedMembers;
+            return sorted;
 
           const filter = new RegExp(this.filter.replace(/[^\w]/gi, '\\$&'), 'i');
 
-          return this.channel.sortedMembers.filter((member) => filter.test(member.character.name));
+          return sorted.filter((member) => filter.test(member.character.name));
+        }
+
+        switchSort() {
+          const nextSortIndex = _.indexOf(availableSorts, this.sortType) + 1;
+
+          this.sortType = availableSorts[nextSortIndex % availableSorts.length];
         }
     }
 </script>