View participant list of active quest (#10531)

* participant list modal opens, nothing displayed yet

* display participants!

* only need to filter

* change button to link

* prevent scrolling back up when modal opens

* style link as h4

* move css

website/client/components/groups/group.vue

@@ -3,6 +3,7 @@
   group-form-modal(v-if='isParty')
   start-quest-modal(:group='this.group')
   quest-details-modal(:group='this.group')
+  participant-list-modal(:group='this.group')
   group-gems-modal
   .col-12.col-sm-8.standard-page
     .row
@@ -262,6 +263,7 @@ import * as Analytics from 'client/libs/analytics';
 import membersModal from './membersModal';
 import startQuestModal from './startQuestModal';
 import questDetailsModal from './questDetailsModal';
+import participantListModal from './participantListModal';
 import groupFormModal from './groupFormModal';
 import groupChallenges from '../challenges/groupChallenges';
 import groupGemsModal from 'client/components/groups/groupGemsModal';
@@ -292,6 +294,7 @@ export default {
     groupFormModal,
     groupChallenges,
     questDetailsModal,
+    participantListModal,
     groupGemsModal,
     questSidebarSection,
     sidebarSection,

website/client/components/groups/participantListModal.vue

@@ -0,0 +1,93 @@
+<template lang="pug">
+  b-modal#participant-list(size='md', :hide-footer='true')
+    .header-wrap(slot="modal-header")
+      .row
+        .col-6
+          h1(v-once) {{ $t('participantsTitle') }}
+        .col-6
+          button(type="button" aria-label="Close" class="close", @click='close()')
+            span(aria-hidden="true") ×
+    .row(v-for='member in participants')
+      .col-12.no-padding-left
+        member-details(:member='member')
+    .modal-footer
+      button.btn.btn-primary(@click='close()') {{ $t('close') }}
+</template>
+
+<style lang='scss'>
+  #participant-list {
+    .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 {
+      padding-left: 0;
+    }
+
+    .modal-body {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .member-details {
+      margin: 0;
+    }
+  }
+</style>
+
+<style lang='scss' scoped>
+  .header-wrap {
+    width: 100%;
+  }
+
+  h1 {
+    color: #4f2a93;
+  }
+
+  #participant-list_modal_body {
+    padding: 0;
+    max-height: 450px;
+
+    .member-details {
+      margin: 0;
+    }
+  }
+</style>
+
+<script>
+import { mapGetters } from 'client/libs/store';
+
+import MemberDetails from '../memberDetails';
+
+export default {
+  props: ['group'],
+  components: {
+    MemberDetails,
+  },
+  computed: {
+    ...mapGetters({
+      partyMembers: 'party:members',
+    }),
+    participants () {
+      let partyMembers = this.partyMembers || [];
+      return partyMembers.filter(member => this.group.quest.members[member._id] === true);
+    },
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'participant-list');
+    },
+  },
+};
+</script>

website/client/components/groups/questSidebarSection.vue

@@ -38,7 +38,7 @@ sidebar-section(:title="$t('questDetailsTitle')")
             .col-6
               h4.float-left(v-once) {{ questData.boss.name() }}
             .col-6
-              span.float-right(v-once) {{ $t('participantsTitle') }}
+              a.float-right(@click="openParticipantList()") {{ $t('participantsTitle') }}
           .row
             .col-12
               .grey-progress-bar
@@ -74,6 +74,14 @@ sidebar-section(:title="$t('questDetailsTitle')")
     margin: 0 auto;
   }
 
+  .boss-info {
+    a {
+      font-family: 'Roboto Condensed', sans-serif;
+      font-weight: bold;
+      color: $gray-10;
+    }
+  }
+
   .boss-health-bar {
     width: 80%;
     background-color: red;
@@ -258,6 +266,9 @@ export default {
     openQuestDetails () {
       this.$root.$emit('bv::show::modal', 'quest-details');
     },
+    openParticipantList () {
+      this.$root.$emit('bv::show::modal', 'participant-list');
+    },
     async questAbort () {
       if (!confirm(this.$t('sureAbort'))) return;
       if (!confirm(this.$t('doubleSureAbort'))) return;