old client structure

website/client/src/components/members/classBadge.vue

@@ -0,0 +1,56 @@
+<template lang="pug">
+.class-badge.d-flex.justify-content-center
+  .align-self-center.svg-icon(v-html="icons[memberClass]")
+</template>
+
+<style lang="scss" scoped>
+@import '~client/assets/scss/colors.scss';
+
+.class-badge {
+  $badge-size: 32px;
+
+  width: $badge-size;
+  height: $badge-size;
+  background: $white;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  border-radius: 100px;
+
+  &.under-avatar {
+    position: absolute;
+    left: calc(50% - (16px));
+    bottom: -($badge-size / 2);
+    z-index: 1;
+  }
+
+  .svg-icon {
+    width: 19px;
+    height: 19px;
+  }
+}
+</style>
+
+<script>
+import warriorIcon from 'assets/svg/warrior.svg';
+import rogueIcon from 'assets/svg/rogue.svg';
+import healerIcon from 'assets/svg/healer.svg';
+import wizardIcon from 'assets/svg/wizard.svg';
+
+export default {
+  props: {
+    memberClass: {
+      type: String,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        warrior: warriorIcon,
+        rogue: rogueIcon,
+        healer: healerIcon,
+        wizard: wizardIcon,
+      }),
+    };
+  },
+};
+</script>

website/client/src/components/members/groupMemberSearchDropdown.vue

@@ -0,0 +1,58 @@
+<template lang="pug">
+b-dropdown.select-member(:text="text")
+  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 }}
+</template>
+
+<style lang="scss" scoped>
+  .select-member {
+    width: 100%;
+  }
+</style>
+
+<script>
+// @TODO: how do we subclass the other member search or compose?
+import debounce from 'lodash/debounce';
+
+export default {
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    members: {
+      type: Array,
+      required: true,
+    },
+    groupId: {
+      type: String,
+    },
+  },
+  data () {
+    return {
+      searchTerm: '',
+      memberResults: [],
+    };
+  },
+  mounted () {
+    this.memberResults = this.members;
+  },
+  watch: {
+    searchTerm: debounce(function searchTerm (newSearch) {
+      this.searchMember(newSearch);
+    }, 500),
+  },
+  methods: {
+    selectMember (member) {
+      this.$emit('member-selected', member);
+    },
+    async searchMember (search) {
+      this.memberResults = await this.$store.dispatch('members:getGroupMembers', {
+        groupId: this.groupId,
+        searchTerm: search,
+      });
+    },
+  },
+};
+</script>

website/client/src/components/members/memberSearchDropdown.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+b-dropdown.create-dropdown(:text="text", no-flip)
+  b-dropdown-form(:disabled='false', v-on:submit.prevent="onSubmit")
+    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 }}
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+<script>
+// @TODO: how do we subclass this rather than type checking?
+import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
+
+export default {
+  mixins: [challengeMemberSearchMixin],
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    members: {
+      type: Array,
+      required: true,
+    },
+    challengeId: {
+      type: String,
+    },
+  },
+  data () {
+    return {
+      searchTerm: '',
+      memberResults: [],
+    };
+  },
+  watch: {
+    memberResults () {
+      if (this.memberResults.length > 10) this.memberResults.length = 10;
+    },
+  },
+  methods: {
+    selectMember (member) {
+      this.$emit('member-selected', member);
+    },
+  },
+};
+</script>

website/client/src/components/members/removeMemberModal.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+  b-modal#remove-member(:title="$t('removeMember')", size='md', :hide-footer="true")
+    .text-center
+      h2.col-12 {{ $t('sureKick') }}
+      .col-12.removing-member(v-if='memberToRemove.profile') {{memberToRemove.profile.name}}
+    .modal-body
+      textarea.form-control(type='text',
+        rows='5',
+        :placeholder="$t('optionalMessage')",
+        v-model='removeMessage')
+    .modal-footer
+      button.pull-left.btn.btn-danger(@click='confirmRemoveMember()') {{ $t('yesRemove') }}
+      button.btn.btn-secondary(@click='close()') {{ $t('cancel') }}
+</template>
+
+<style scoped>
+  .removing-member {
+    color: #878190;
+    margin-bottom: .5em;
+  }
+</style>
+
+<script>
+export default {
+  props: ['memberToRemove', 'groupId'],
+  data () {
+    return {
+      removeMessage: '',
+    };
+  },
+  methods: {
+    async confirmRemoveMember () {
+      await this.$store.dispatch('members:removeMember', {
+        memberId: this.memberToRemove._id,
+        groupId: this.groupId,
+        message: this.removeMessage,
+      });
+
+      this.removeMessage = '';
+      this.$emit('member-removed', this.memberToRemove);
+      this.close();
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'remove-member');
+    },
+  },
+};
+</script>