New client members (#8795)

* Began styling member modal

* Added store and updated modal styles

* Began converting angular

* Ported over angular routes

* Fixed lint issues

website/client/components/appHeader.vue

@@ -47,9 +47,9 @@ export default {
     UserListDetail,
   },
   computed: {
-    ...mapState({
-      user: 'user.data',
-    }),
+   ...mapState({
+     user: 'user.data',
+   }),
   },
 };
 </script>

website/client/components/guilds/guild.vue

@@ -24,7 +24,7 @@
       .col-12
         h3(v-once) {{ $t('chat') }}
 
-        textarea(placeholder="$('chatPlaceHolder')")
+        textarea(:placeholder="$t('chatPlaceHolder')")
         button.btn.btn-secondary.send-chat.float-right(v-once) {{ $t('send') }}
 
         .hr
@@ -66,9 +66,7 @@
       .col-6
         members-modal(:group='guild')
         br
-        button.btn.btn-primary(v-once) {{$t('joinGuild')}}
-        br
-        button.btn.float-left(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
+        button.btn.btn-primary(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
         br
         button.btn.btn-primary(v-once) {{$t('inviteToGuild')}}
         br
@@ -289,18 +287,6 @@ export default {
         },
       ];
     },
-    editGroup () {
-      // @TODO: Open up model
-    },
-    save () {
-      let newLeader = this.group._newLeader && this.group._newLeader._id;
-
-      if (newLeader) {
-        this.group.leader = newLeader;
-      }
-
-      // Groups.Group.update(group);
-    },
     deleteAllMessages () {
       if (confirm(this.$t('confirmDeleteAllMessages'))) {
         // User.clearPMs();

website/client/components/guilds/membersModal.vue

@@ -2,30 +2,41 @@
 div
   button.btn.btn-primary(b-btn, @click="$root.$emit('show::modal','members-modal')") {{ $t('viewMembers') }}
 
-  b-modal#members-modal(:title="$t('createGuild')")
+  b-modal#members-modal(:title="$t('createGuild')", size='lg')
     .header-wrap(slot="modal-header")
       .row
         .col-6
-          h1 Testing
+          h1(v-once) {{$t('members')}}
         .col-6
           button(type="button" aria-label="Close" class="close")
             span(aria-hidden="true") ×
       .row
         .form-group.col-6
           input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-        .col-6
+        .col-4.offset-2
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
     .row(v-for='member in members', :key='member', )
-      .col-8
-        user-list-detail
-      .col-4
+      .col-8.offset-1
+        user-list-detail(:user='member')
+      .col-3.actions
         b-dropdown(:text="$t('sort')", right=true)
-          b-dropdown-item(@click='sort(option.value)') {{$t('remove')}}
-          b-dropdown-item(@click='sort(option.value)') {{$t('message')}}
-          b-dropdown-item(@click='sort(option.value)') {{$t('addManager')}}
-          b-dropdown-item(@click='sort(option.value)') {{$t('removeManager')}}
+          b-dropdown-item(@click='sort(option.value)')
+            img.action-icon(src='~assets/members/remove.svg')
+            | {{$t('removeMember')}}
+          b-dropdown-item(@click='sort(option.value)')
+            img.action-icon(src='~assets/members/message.svg')
+            | {{$t('sendMessage')}}
+          b-dropdown-item(@click='sort(option.value)')
+            img.action-icon(src='~assets/members/star.svg')
+            | {{$t('promoteToLeader')}}
+          b-dropdown-item(@click='sort(option.value)')
+            img.action-icon(src='~assets/members/star.svg')
+            | {{$t('addManager')}}
+          b-dropdown-item(@click='sort(option.value)')
+            img.action-icon(src='~assets/members/remove.svg')
+            | {{$t('removeManager2')}}
 
   b-modal#remove-member(:title="$t('confirmRemoveMember')")
     button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
@@ -35,20 +46,26 @@ div
 </template>
 
 <style lang='scss'>
+  header {
+    background-color: #edecee;
+    border-radius: 4px 4px 0 0;
+  }
 
-header {
-  background-color: #edecee;
-  border-radius: 4px 4px 0 0;
-}
+  .header-wrap {
+    width: 100%;
+  }
 
-.header-wrap {
-  width: 100%;
-}
+  h1 {
+    color: #4f2a93;
+  }
 
-h1 {
-  color: #4f2a93;
-}
+  .actions {
+    padding-top: 5em;
 
+    .action-icon {
+      margin-right: 1em;
+    }
+  }
 </style>
 
 <script>
@@ -66,17 +83,43 @@ export default {
     bDropdownItem,
     UserListDetail,
   },
+  created () {
+    this.getMembers();
+  },
   data () {
     return {
-      members: ['one', 'two'],
+      members: [],
       memberToRemove: '',
+      sortOptions: [
+        {
+          value: 'tier',
+          text: this.$t('tier'),
+        },
+        {
+          value: 'name',
+          text: this.$t('name'),
+        },
+        {
+          value: 'level',
+          text: this.$t('level'),
+        },
+        {
+          value: 'class',
+          text: this.$t('class'),
+        },
+      ],
+      searchTerm: '',
     };
   },
   methods: {
-    getMembers () {
-      // We should get members here via store if they are not loaded
+    async getMembers () {
+      let members = await this.$store.dispatch('members:getGroupMembers', {
+        groupId: this.group._id,
+        includeAllPublicFields: true,
+      });
+      this.members = members;
     },
-    clickMember (uid, forceShow) {
+    async clickMember (uid, forceShow) {
       let user = this.$store.state.user.data;
 
       if (user._id === uid && !forceShow) {
@@ -89,59 +132,47 @@ export default {
         return;
       }
 
-      // $root.$emit('show::modal','members-modal')
-      // We need the member information up top here, but then we pass it down to the modal controller
-      // down below. Better way of handling this?
-      // Members.selectMember(uid)
-      //   .then(function () {
-      //     $rootScope.openModal('member', {controller: 'MemberModalCtrl', windowClass: 'profile-modal', size: 'lg'});
-      //   });
+      await this.$store.dispatch('members:selectMember', {
+        memberId: uid,
+      });
+
+      this.$root.$emit('show::modal', 'members-modal');
     },
-    removeMember (member) {
+    async removeMember (member) {
       this.memberToRemove = member;
       this.$root.$emit('show::modal', 'remove-member');
     },
-    confirmRemoveMember (confirmation) {
+    async confirmRemoveMember (confirmation) {
       if (!confirmation) {
         this.memberToRemove = '';
         return;
       }
-      // Groups.Group.removeMember(
-      //   $scope.removeMemberData.group._id,
-      //   $scope.removeMemberData.member._id,
-      //   $scope.removeMemberData.message
-      // ).then(function (response) {
-      //   if($scope.removeMemberData.isMember){
-      //     _.pull($scope.removeMemberData.group.members, $scope.removeMemberData.member);
-      //   }else{
-      //     _.pull($scope.removeMemberData.group.invites, $scope.removeMemberData.member);
-      //   }
-      //
-      //   $scope.removeMemberData = undefined;
-      // });
+
+      await this.$store.dispatch('members:removeMember', {
+        memberId: this.memberToRemove._id,
+        groupId: this.group._id,
+        message: this.removeMessage,
+      });
+
+      this.memberToRemove = '';
+      this.removeMessage = '';
     },
-    quickReply (uid) {
+    async quickReply (uid) {
       this.memberToReply = uid;
-      this.$root.$emit('show::modal', 'private-message');
-      // Members.selectMember(uid)
-      //   .then(function (response) {
-      //     $rootScope.openModal('private-message', {controller: 'MemberModalCtrl'});
-      //   });
+      await this.$store.dispatch('members:selectMember', {
+        memberId: uid,
+      });
+      this.$root.$emit('show::modal', 'private-message'); //  MemberModalCtrl
     },
-    addManager () {
-      // Groups.Group.addManager(this.group._id, this.group._newManager)
-      //   .then(function (response) {
-      //     this.group._newManager = '';
-      //     this.group.managers = response.data.data.managers;
-      //   });
+    async addManager (memberId) {
+      await this.$store.dispatch('group:addManager', {
+        memberId,
+      });
     },
-    removeManager (memberId) {
-      this.memberToReply = memberId;
-      // Groups.Group.removeManager(this.group._id, memberId)
-      //   .then(function (response) {
-      //     this.group._newManager = '';
-      //     this.group.managers = response.data.data.managers;
-      //   });
+    async removeManager (memberId) {
+      await this.$store.dispatch('group:removeManager', {
+        memberId,
+      });
     },
   },
 };

website/client/components/userListDetail.vue

@@ -2,7 +2,7 @@
 .d-flex
   avatar#header-avatar(:user="user")
   div
-    h3.character-name 
+    h3.character-name
       | {{user.profile.name}}
       .is-buffed(v-if="isBuffed")
         .svg-icon(v-html="icons.buff")