Sept 23 fixes (#9074)

* Discover challenges

* Fixed hero loading

* Moved add task button

* Fixed bailey showing

* Added logs for bad sub data

* Fixed blurb editing

* Added confirmation for deleteing message

* Reset invite modals on invite

* fixed group member sorting

* Fixed chat time styles

* Fixed hover on liked

* Fixed like count

* Added reverse

* Fixed editing party

* Added leader conditions

* Added search

* Added loading

* Reset members when leaving party

* Rounded pending

* Fixed overflow on collecting quests

* Added to invite friends

* Hid summary from party

* Fixed button styles

* Fixed button class

* Removed okay button

* Fixed renav for profile modal

* Added subscription back to menu

* Fixed static link

* Added daily due setting

* Added local auth adding

* Fixed centering of text

* Removed message locally

* Added count for new message

* Added style fix for profile pet

* Fixed achievement popovers

* Fixed white boxes

* Added plain color backgrounds

* fixed challenge mutability

* Fixed challenge editing

* Added notation for large numbers

* Add color text to guild sizes

* Removed membership filters from discover challenges

* Added invites to group

* Cmd + enter send message

* Made leader clickable

* Updated group validation

* Added cancelling autocomplete

* Added mention icon

* Added removing member

* Removed extra string

website/client/components/groups/membersModal.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
 // @TODO: Move this to a member directory
 div
-  b-modal#members-modal(:title="$t('createGuild')", size='md')
+  remove-member-modal(:member-to-remove='memberToRemove', :group-id='this.groupId' @member-removed='memberRemoved')
+  b-modal#members-modal(:title="$t('createGuild')", size='md', :hide-footer='true')
     .header-wrap(slot="modal-header")
       .row
         .col-6
@@ -16,36 +17,47 @@ 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 sortedMembers')
-      .col-11.no-padding-left
-        member-details(:member='member')
-      .col-1.actions
-        b-dropdown(right=true)
-          .svg-icon.inline.dots(slot='button-content', v-html="icons.dots")
-          b-dropdown-item(@click='sort(option.value)', v-if='isLeader')
-            span.dropdown-icon-item
-              .svg-icon.inline(v-html="icons.removeIcon", v-if='isLeader')
-              span.text {{$t('removeMember')}}
-          b-dropdown-item(@click='sendMessage(member._id)')
-            span.dropdown-icon-item
-              .svg-icon.inline(v-html="icons.messageIcon")
-              span.text {{$t('sendMessage')}}
-          b-dropdown-item(@click='sort(option.value)', v-if='isLeader')
-            span.dropdown-icon-item
-              .svg-icon.inline(v-html="icons.starIcon")
-              span.text {{$t('promoteToLeader')}}
-          b-dropdown-item(@click='sort(option.value)', v-if='isLeader && groupIsSubscribed')
-            span.dropdown-icon-item
-              .svg-icon.inline(v-html="icons.starIcon")
-              span.text {{$t('addManager')}}
-          b-dropdown-item(@click='sort(option.value)', v-if='isLeader && groupIsSubscribed')
-            span.dropdown-icon-item
-              .svg-icon.inline(v-html="icons.removeIcon")
-              span.text {{$t('removeManager2')}}
-    .row(v-if='groupId === "challenge"')
-      .col-12.text-center
-        button.btn.btn-secondary(@click='loadMoreMembers()') {{ $t('loadMore') }}
-    .row.gradient(v-if='members.length > 3')
+    .row(v-if='invites.length > 0')
+      .col-6.offset-3.nav
+        .nav-item(@click='viewMembers()', :class="{active: selectedPage === 'members'}") {{ $t('members') }}
+        .nav-item(@click='viewInvites()', :class="{active: selectedPage === 'invites'}") {{ $t('invites') }}
+    div(v-if='selectedPage === "members"')
+      .row(v-for='(member, index) in sortedMembers')
+        .col-11.no-padding-left
+          member-details(:member='member')
+        .col-1.actions
+          b-dropdown(right=true)
+            .svg-icon.inline.dots(slot='button-content', v-html="icons.dots")
+            b-dropdown-item(@click='removeMember(member, index)', v-if='isLeader')
+              span.dropdown-icon-item
+                .svg-icon.inline(v-html="icons.removeIcon", v-if='isLeader')
+                span.text {{$t('removeMember')}}
+            b-dropdown-item(@click='sendMessage(member._id)')
+              span.dropdown-icon-item
+                .svg-icon.inline(v-html="icons.messageIcon")
+                span.text {{$t('sendMessage')}}
+            b-dropdown-item(@click='sort(option.value)', v-if='isLeader')
+              span.dropdown-icon-item
+                .svg-icon.inline(v-html="icons.starIcon")
+                span.text {{$t('promoteToLeader')}}
+            b-dropdown-item(@click='sort(option.value)', v-if='isLeader && groupIsSubscribed')
+              span.dropdown-icon-item
+                .svg-icon.inline(v-html="icons.starIcon")
+                span.text {{$t('addManager')}}
+            b-dropdown-item(@click='sort(option.value)', v-if='isLeader && groupIsSubscribed')
+              span.dropdown-icon-item
+                .svg-icon.inline(v-html="icons.removeIcon")
+                span.text {{$t('removeManager2')}}
+      .row(v-if='groupId === "challenge"')
+        .col-12.text-center
+          button.btn.btn-secondary(@click='loadMoreMembers()') {{ $t('loadMore') }}
+      .row.gradient(v-if='members.length > 3')
+    div(v-if='selectedPage === "invites"')
+      .row(v-for='member in invites')
+        .col-11.no-padding-left
+          member-details(:member='member')
+    .modal-footer
+      button.btn.btn-primary(@click='close()') {{ $t('close') }}
 </template>
 
 <style lang='scss'>
@@ -130,10 +142,29 @@ div
   .dropdown-icon-item .svg-icon {
     width: 20px;
   }
+
+  .nav {
+    font-weight: bold;
+    margin-bottom: .5em;
+    margin-top: .5em;
+  }
+
+  .nav-item {
+    display: inline-block;
+    font-size: 16px;
+    margin: 0 auto;
+    padding: .5em;
+    color: #878190;
+  }
+
+  .nav-item:hover, .nav-item.active {
+    color: #4f2a93;
+    border-bottom: 2px solid #4f2a93;
+    cursor: pointer;
+  }
 </style>
 
 <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';
@@ -141,6 +172,7 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import { mapState } from 'client/libs/store';
 
 import privateMessageModal from 'client/components/private-message-modal';
+import removeMemberModal from 'client/components/members/removeMemberModal';
 import MemberDetails from '../memberDetails';
 import removeIcon from 'assets/members/remove.svg';
 import messageIcon from 'assets/members/message.svg';
@@ -155,12 +187,15 @@ export default {
     bDropdownItem,
     MemberDetails,
     privateMessageModal,
+    removeMemberModal,
   },
   data () {
     return {
       sortOption: '',
+      selectedPage: 'members',
       members: [],
-      memberToRemove: '',
+      invites: [],
+      memberToRemove: {},
       sortOptions: [
         {
           value: 'level',
@@ -212,6 +247,13 @@ export default {
     },
     sortedMembers () {
       let sortedMembers = this.members;
+
+      if (this.searchTerm) {
+        sortedMembers = sortedMembers.filter(member => {
+          return member.profile.name.toLowerCase().indexOf(this.searchTerm.toLowerCase) !== -1;
+        });
+      }
+
       if (!this.sortOption) return sortedMembers;
 
       sortedMembers = sortBy(this.members, [(member) => {
@@ -227,7 +269,7 @@ export default {
         }
       }]);
 
-      return this.members;
+      return sortedMembers;
     },
   },
   watch: {
@@ -252,6 +294,12 @@ export default {
           includeAllPublicFields: true,
         });
         this.members = members;
+
+        let invites = await this.$store.dispatch('members:getGroupInvites', {
+          groupId,
+          includeAllPublicFields: true,
+        });
+        this.invites = invites;
       }
 
       if (this.$store.state.memberModalOptions.viewingMembers.length > 0) {
@@ -277,24 +325,15 @@ export default {
 
       this.$root.$emit('show::modal', 'members-modal');
     },
-    async removeMember (member) {
+    async removeMember (member, index) {
       this.memberToRemove = member;
+      this.memberToRemove.index = index;
       this.$root.$emit('show::modal', 'remove-member');
     },
-    async confirmRemoveMember (confirmation) {
-      if (!confirmation) {
-        this.memberToRemove = '';
-        return;
-      }
-
-      await this.$store.dispatch('members:removeMember', {
-        memberId: this.memberToRemove._id,
-        groupId: this.group._id,
-        message: this.removeMessage,
-      });
-
-      this.memberToRemove = '';
-      this.removeMessage = '';
+    memberRemoved () {
+      this.members.splice(this.memberToRemove.index, 1);
+      this.group.memberCount -= 1;
+      this.memberToRemove =  {};
     },
     async quickReply (uid) {
       this.memberToReply = uid;
@@ -330,6 +369,12 @@ export default {
 
       this.members = this.members.concat(newMembers);
     },
+    viewMembers () {
+      this.selectedPage = 'members';
+    },
+    viewInvites () {
+      this.selectedPage = 'invites';
+    },
   },
 };
 </script>