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>
 

stories/Sections/Layout.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Chatwoot/Layout" />
+
+# Layout guidelines
+
+Chatwoot follows a fixed-width sidebar on the left menu on all pages. The remaining space of the layout is where the layout changes according to what the page needs.
+
+### Normal Grid
+
+Chatwoot is built on top of [foundation](https://get.foundation/sites/docs/) and uses the **flex-grid** from Foundation. We insist to solve every possible layout with this grid.
+The docs for the grid can be found here on [foundation grid docs](https://get.foundation/sites/docs/grid.html).
+
+### 3 column layout
+
+We Recommend the use of this solution only when the normal grid fails to solve it or needs severe overriding. Some layouts need custom functionality where Foundation grid is not enough. The main conversation page is an example of this grid as a candidate.
+
+**Usage** - We have created a mixin `three-column-grid` which can be included by importing the file
+
+`@import '~dashboard/assets/scss/mixins';`
+
+There are 2 parameters for this mixin, The first one being the minimum possible width for the first column in `rem`. This value is usually a multiple of `8` when converted to `px`. Eg: `256px` will be used as `25.6rem`.
+Similarly, the second param is the minimum possible width of the third column.