Init Contact Panel (#206)

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="medium-3 bg-white contact--panel">
+    <thumbnail
+      :src="contactImage"
+      size="80px"
+      :badge="contact.channel"
+      :username="contact.name"
+    />
+    <h4>
+      {{ contact.name }}
+    </h4>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+    }),
+    contact() {
+      const { meta: { sender = {} } = {} } = this.currentChat || {};
+      return sender;
+    },
+    contactImage() {
+      return `/uploads/avatar/contact/${this.contact.id}/profilepic.jpeg`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+.contact--panel {
+  @include border-normal-left;
+  display: flex;
+  flex-direction: column;
+  padding: $space-large $space-normal $space-normal;
+  align-items: center;
+}
+</style>

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -1,7 +1,17 @@
 <template>
   <section class="app-content columns">
-    <chat-list :conversationInbox="inboxId" :pageTitle="$t('CHAT_LIST.TAB_HEADING')" ></chat-list>
-    <conversation-box :inbox-id="inboxId"></conversation-box>
+    <chat-list
+      :conversation-inbox="inboxId"
+      :page-title="$t('CHAT_LIST.TAB_HEADING')"
+    >
+    </chat-list>
+    <conversation-box
+      :inbox-id="inboxId"
+      :is-contact-panel-open="isContactPanelOpen"
+      @contactPanelToggle="onToggleContactPanel"
+    >
+    </conversation-box>
+    <contact-panel v-if="isContactPanelOpen"></contact-panel>
   </section>
 </template>
 
@@ -11,17 +21,20 @@
 import { mapGetters } from 'vuex';
 
 import ChatList from '../../../components/ChatList';
+import ContactPanel from './ContactPanel';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
 
 export default {
   components: {
     ChatList,
+    ContactPanel,
     ConversationBox,
   },
 
   data() {
     return {
       pageTitle: this.$state,
+      isContactPanelOpen: false,
     };
   },
   computed: {
@@ -62,6 +75,9 @@ export default {
         bus.$emit('scrollToMessage');
       });
     },
+    onToggleContactPanel() {
+      this.isContactPanelOpen = !this.isContactPanelOpen;
+    },
   },
 };
 </script>