feat: Adds 3 column layout for contact page (#2174)

* Feat: Adds 3 column layout for contact page

* Makes a mixin for 3 column layouts

* Fixes story meta

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -236,3 +236,11 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+@mixin three-column-grid($column-one-width: 25.6rem,
+  $column-three-width: 25.6rem) {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax($column-one-width, 6fr) 10fr minmax($column-three-width, 6fr);
+}

app/javascript/dashboard/routes/dashboard/contacts/components/ManageLayout.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="wrap">
+    <div class="left"></div>
+    <div class="center"></div>
+    <div class="right"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {},
+  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;
+    },
+  },
+  mounted() {},
+  methods: {},
+};
+</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>

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

@@ -1,12 +1,29 @@
 <template>
-  <div class="contact-manage-view row"></div>
+  <div class="contact-manage-view">
+    <contacts-header
+      :search-query="searchQuery"
+      :on-search-submit="onSearchSubmit"
+      :on-input-search="onInputSearch"
+      :on-toggle-create="onToggleCreate"
+    />
+    <manage-layout />
+
+    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import ContactsHeader from '../components/Header';
+import ManageLayout from '../components/ManageLayout';
+import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
 
 export default {
-  components: {},
+  components: {
+    ContactsHeader,
+    CreateContact,
+    ManageLayout,
+  },
   props: {
     contactId: {
       type: [String, Number],
@@ -14,7 +31,10 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      searchQuery: '',
+      showCreateModal: false,
+    };
   },
   computed: {
     ...mapGetters({
@@ -26,7 +46,28 @@ export default {
     },
   },
   mounted() {},
-  methods: {},
+  methods: {
+    onInputSearch(event) {
+      const newQuery = event.target.value;
+      const refetchAllContacts = !!this.searchQuery && newQuery === '';
+      if (refetchAllContacts) {
+        this.$store.dispatch('contacts/get', { page: 1 });
+      }
+      this.searchQuery = newQuery;
+    },
+    onSearchSubmit() {
+      this.selectedContactId = '';
+      if (this.searchQuery) {
+        this.$store.dispatch('contacts/search', {
+          search: this.searchQuery,
+          page: 1,
+        });
+      }
+    },
+    onToggleCreate() {
+      this.showCreateModal = !this.showCreateModal;
+    },
+  },
 };
 </script>