Added styles to selecting challenge winner (#9164)

website/client/components/challenges/closeChallengeModal.vue

@@ -10,13 +10,10 @@ div
       .col-12
         strong(v-once) {{$t('selectChallengeWinnersDescription')}}
       .col-12
-        input.form-control(type='text', v-model='searchTerm')
-      .col-12
-        div(v-for='member in memberResults', @click='selectMember(member._id)')
-          strong {{member.profile.name}}
-          span(v-if='winnerId === member._id') Selected
-      //-   select.form-control(v-model='winnerId')
-      //-     option(v-for='member in members', :value='member._id') {{member.profile.name}}
+        b-dropdown.create-dropdown(:text="winnerText")
+          input.form-control(type='text', v-model='searchTerm')
+          b-dropdown-item(v-for="member in memberResults", :key="member._id", @click="selectMember(member)")
+            | {{ member.profile.name }}
       .col-12
         button.btn.btn-primary(v-once, @click='closeChallenge') {{$t('awardWinners')}}
       .col-12
@@ -91,7 +88,7 @@ export default {
   },
   data () {
     return {
-      winnerId: '',
+      winner: {},
       searchTerm: '',
       memberResults: [],
     };
@@ -100,6 +97,15 @@ export default {
     searchTerm: debounce(function searchTerm (newSearch) {
       this.searchChallengeMember(newSearch);
     }, 500),
+    members () {
+      this.memberResults = this.members;
+    },
+  },
+  computed: {
+    winnerText () {
+      if (!this.winner.profile) return this.$t('selectMember');
+      return this.winner.profile.name;
+    },
   },
   methods: {
     async searchChallengeMember (search) {
@@ -108,13 +114,13 @@ export default {
         searchTerm: search,
       });
     },
-    selectMember (memberId) {
-      this.winnerId = memberId;
+    selectMember (member) {
+      this.winner = member;
     },
     async closeChallenge () {
       this.challenge = await this.$store.dispatch('challenges:selectChallengeWinner', {
         challengeId: this.challengeId,
-        winnerId: this.winnerId,
+        winnerId: this.winner._id,
       });
       this.$router.push('/challenges/myChallenges');
     },