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

@@ -0,0 +1,66 @@
+<template>
+  <div class="wrap">
+    <div class="left">
+      <contact-panel v-if="!uiFlags.isFetchingItem" :contact="contact" />
+    </div>
+    <div class="center"></div>
+    <div class="right"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ContactPanel from './ContactPanel';
+
+export default {
+  components: {
+    ContactPanel,
+  },
+  props: {
+    contactId: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'contacts/getUIFlags',
+    }),
+    showEmptySearchResult() {
+      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 });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/mixins';
+
+.wrap {
+  @include three-column-grid(27.2rem);
+  background: var(--color-background);
+  border-top: 1px solid var(--color-border);
+}
+
+.center {
+  border-right: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-border);
+}
+</style>