feat: Creates component show all contact info (#2252)

* feat: Adds component to show contact fields
* feat: Creates component show all contact info

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -13,8 +13,8 @@
       </h2>
       <h3 class="sub-block-title contact--work">
         {{ contact.title }}
-        <i v-if="contact.company.name" class="icon ion-minus-round" />
-        <span class="company-name">{{ contact.company.name }}</span>
+        <i v-if="company.name" class="icon ion-minus-round" />
+        <span class="company-name">{{ company.name }}</span>
       </h3>
       <p v-if="additionalAttributes.description" class="contact--bio">
         {{ additionalAttributes.description }}
@@ -69,6 +69,10 @@ export default {
 
       return { twitter: twitterScreenName, ...(socialProfiles || {}) };
     },
+    company() {
+      const { company = {} } = this.contact;
+      return company;
+    },
   },
   methods: {
     onEditClick() {

app/javascript/dashboard/modules/contact/components/ContactPanel.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="panel">
+    <contact-intro
+      :contact="contact"
+      @message="toggleConversationModal"
+      @edit="toggleEditModal"
+    />
+    <contact-fields :contact="contact" :edit="null" />
+    <edit-contact
+      v-if="showEditModal"
+      :show="showEditModal"
+      :contact="contact"
+      @cancel="toggleEditModal"
+    />
+    <new-conversation
+      :show="showConversationModal"
+      :contact="contact"
+      @cancel="toggleConversationModal"
+    />
+  </div>
+</template>
+<script>
+import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact';
+import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation';
+import ContactIntro from './ContactIntro';
+import ContactFields from './ContactFields';
+
+export default {
+  components: {
+    EditContact,
+    NewConversation,
+    ContactIntro,
+    ContactFields,
+  },
+  props: {
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      showEditModal: false,
+      showConversationModal: false,
+    };
+  },
+  methods: {
+    toggleEditModal() {
+      this.showEditModal = !this.showEditModal;
+    },
+    toggleConversationModal() {
+      this.showConversationModal = !this.showConversationModal;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.panel {
+  padding: var(--space-normal) var(--space-normal);
+}
+</style>

app/javascript/dashboard/modules/contact/components/ManageLayout.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="wrap">
-    <div class="left"></div>
+    <div class="left">
+      <contact-panel v-if="!uiFlags.isFetchingItem" :contact="contact" />
+    </div>
     <div class="center"></div>
     <div class="right"></div>
   </div>
@@ -8,9 +10,12 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import ContactPanel from './ContactPanel';
 
 export default {
-  components: {},
+  components: {
+    ContactPanel,
+  },
   props: {
     contactId: {
       type: [String, Number],
@@ -28,9 +33,20 @@ export default {
       const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
       return hasEmptyResults;
     },
+    contact() {
+      return this.$store.getters['contacts/getContact'](this.contactId);
+    },
+  },
+  mounted() {
+    this.getContactDetails();
+  },
+  methods: {
+    getContactDetails() {
+      if (this.contactId) {
+        this.$store.dispatch('contacts/show', { id: this.contactId });
+      }
+    },
   },
-  mounted() {},
-  methods: {},
 };
 </script>
 

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -6,7 +6,7 @@
       :on-input-search="onInputSearch"
       :on-toggle-create="onToggleCreate"
     />
-    <manage-layout />
+    <manage-layout :contact-id="contactId" />
 
     <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
   </div>
@@ -15,7 +15,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import ContactsHeader from '../components/Header';
-import ManageLayout from '../components/ManageLayout';
+import ManageLayout from 'dashboard/modules/contact/components/ManageLayout';
 import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
 
 export default {