Init Contact Panel (#206)

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -44,8 +44,22 @@
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;
+    }
+
+    .user--profile__meta {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
       margin-left: $space-slab;
     }
+
+    .user--profile__button {
+      color: $color-woot;
+      font-size: $font-size-mini;
+      margin-top: $space-micro;
+      cursor: pointer;
+    }
   }
 }
 

app/javascript/dashboard/assets/scss/widgets/_thumbnail.scss

@@ -4,6 +4,8 @@
 
   .user-thumbnail {
     border-radius: 50%;
+    height: 100%;
+    width: 100%;
   }
 
   .source-badge {

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -13,12 +13,14 @@
       class="user-thumbnail"
       background-color="#1f93ff"
       color="white"
+      :size="avatarSize"
     >
     </Avatar>
     <img
       v-if="badge === 'Facebook'"
       id="badge"
       class="source-badge"
+      :style="badgeStyle"
       src="~dashboard/assets/images/fb-badge.png"
     />
   </div>
@@ -58,6 +60,15 @@ export default {
       imgError: false,
     };
   },
+  computed: {
+    avatarSize() {
+      return Number(this.size.replace(/\D+/g, ''));
+    },
+    badgeStyle() {
+      const badgeSize = `${this.avatarSize / 3}px`;
+      return { width: badgeSize, height: badgeSize };
+    },
+  },
   methods: {
     onImgError() {
       this.imgError = true;

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="medium-8 columns conversation-wrap">
+  <div :class="conversationClass">
     <div v-if="currentChat.id !== null" class="view-box columns">
-      <conversation-header :chat="currentChat" />
+      <conversation-header
+        :chat="currentChat"
+        :is-contact-panel-open="isContactPanelOpen"
+        @contactPanelToggle="onToggleContactPanel"
+      />
       <ul class="conversation-panel">
         <transition name="slide-up">
           <li>
@@ -104,6 +108,10 @@ export default {
       type: [Number, String],
       required: true,
     },
+    isContactPanelOpen: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -124,6 +132,11 @@ export default {
       fetchingInboxes: 'getInboxLoadingStatus',
       loadingChatList: 'getChatListLoadingStatus',
     }),
+    conversationClass() {
+      return `medium-${
+        this.isContactPanelOpen ? '5' : '8'
+      } columns conversation-wrap`;
+    },
     // Loading indicator
     // Returns corresponding loading message
     loadingIndicatorMessage() {
@@ -193,6 +206,10 @@ export default {
       }, 0);
     },
 
+    onToggleContactPanel() {
+      this.$emit('contactPanelToggle');
+    },
+
     attachListner() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
       this.heightBeforeLoad =

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -7,9 +7,17 @@
         :badge="chat.meta.sender.channel"
         :username="chat.meta.sender.name"
       />
-      <h3 class="user--name">
-        {{ chat.meta.sender.name }}
-      </h3>
+      <div class="user--profile__meta">
+        <h3 class="user--name">
+          {{ chat.meta.sender.name }}
+        </h3>
+        <button
+          class="user--profile__button"
+          @click="$emit('contactPanelToggle')"
+        >
+          {{ viewProfileButtonLabel }}
+        </button>
+      </div>
     </div>
     <div class="flex-container">
       <div class="multiselect-box ion-headphone">
@@ -49,7 +57,16 @@ export default {
     ResolveButton,
   },
 
-  props: ['chat'],
+  props: {
+    chat: {
+      type: Object,
+      default: () => {},
+    },
+    isContactPanelOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
   data() {
     return {
@@ -75,6 +92,9 @@ export default {
         ...this.agents,
       ];
     },
+    viewProfileButtonLabel() {
+      return `${this.isContactPanelOpen ? 'Hide' : 'View'}  Profile`;
+    },
   },
 
   methods: {
@@ -89,9 +109,7 @@ export default {
         });
     },
 
-    removeAgent(agent) {
-      console.log(agent.email);
-    },
+    removeAgent() {},
   },
 };
 </script>

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>