Feature: View a contact's previous conversation (#422)

* Add API to fetch conversations of a contact

* Add conversation list in sidebar

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="contact-conversation--panel">
+    <contact-details-item
+      icon="ion-chatbubbles"
+      :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
+    />
+    <div v-if="!uiFlags.isFetching">
+      <i v-if="!previousConversations.length">
+        {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
+      </i>
+      <div v-else class="contact-conversation--list">
+        <conversation-card
+          v-for="conversation in previousConversations"
+          :key="conversation.id"
+          :chat="conversation"
+          :hide-inbox-name="true"
+          :hide-thumbnail="true"
+          class="compact"
+        />
+      </div>
+    </div>
+    <spinner v-else></spinner>
+  </div>
+</template>
+
+<script>
+import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
+import { mapGetters } from 'vuex';
+import Spinner from 'shared/components/Spinner.vue';
+import ContactDetailsItem from './ContactDetailsItem.vue';
+
+export default {
+  components: {
+    ConversationCard,
+    ContactDetailsItem,
+    Spinner,
+  },
+  props: {
+    contactId: {
+      type: [String, Number],
+      required: true,
+    },
+    conversationId: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+  computed: {
+    conversations() {
+      return this.$store.getters['contactConversations/getContactConversation'](
+        this.contactId
+      );
+    },
+    previousConversations() {
+      return this.conversations.filter(
+        conversation => conversation.id !== Number(this.conversationId)
+      );
+    },
+    ...mapGetters({
+      uiFlags: 'contactConversations/getUIFlags',
+    }),
+  },
+  watch: {
+    contactId(newContactId, prevContactId) {
+      if (newContactId && newContactId !== prevContactId) {
+        this.$store.dispatch('contactConversations/get', newContactId);
+      }
+    },
+  },
+  mounted() {
+    this.$store.dispatch('contactConversations/get', this.contactId);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+.contact-conversation--panel {
+  @include border-normal-top;
+  padding: $space-medium;
+}
+
+.contact-conversation--list {
+  margin-top: -$space-normal;
+}
+</style>

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

@@ -4,7 +4,7 @@
       <i :class="icon" class="conv-details--item__icon"></i>
       {{ title }}
     </div>
-    <div class="conv-details--item__value">
+    <div v-if="value" class="conv-details--item__value">
       {{ value }}
     </div>
   </div>

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

@@ -54,15 +54,22 @@
         icon="ion-clock"
       />
     </div>
+    <contact-conversations
+      v-if="contact.id"
+      :contact-id="contact.id"
+      :conversation-id="conversationId"
+    />
   </div>
 </template>
 
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import ContactDetailsItem from './ContactDetailsItem.vue';
+import ContactConversations from './ContactConversations.vue';
 
 export default {
   components: {
+    ContactConversations,
     ContactDetailsItem,
     Thumbnail,
   },
@@ -179,7 +186,7 @@ export default {
 }
 
 .conversation--details {
-  padding: $space-normal $space-medium;
+  padding: $space-medium;
   width: 100%;
 }