Refactor: Inbox store, remove inboxes from sidebar (#387)

* Refactor: Inbox store, remove inboxes from sidebar * Add a new page for inbox settings * Show inboxes on sidebar * Add inbox_members API * Disable similar-code check * Fix codeclimate scss issues * Add widget_color update API and actions * Add specs for inbox store * Fix Facebook auth flow * Fix agent loading, inbox name
2019-12-28 21:56:42 +05:30
parent 96f8070e79
commit 5ddc46c474
51 changed files with 1028 additions and 726 deletions
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -3,7 +3,7 @@
    <div class="chat-list__top">
      <h1 class="page-title">
        <woot-sidemenu-icon />
-        {{ getInboxName }}
+        {{ inbox.name || pageTitle }}
      </h1>
      <chat-filter @statusFilterChange="getDataForStatusTab" />
    </div>
@@ -53,6 +53,11 @@ import conversationMixin from '../mixins/conversations';
 import wootConstants from '../constants';

 export default {
+  components: {
+    ChatTypeTabs,
+    ConversationCard,
+    ChatFilter,
+  },
  mixins: [timeMixin, conversationMixin],
  props: ['conversationInbox', 'pageTitle'],
  data() {
@@ -61,25 +66,12 @@ export default {
      activeStatus: 0,
    };
  },
-  mounted() {
-    this.$watch('$store.state.route', () => {
-      if (this.$store.state.route.name !== 'inbox_conversation') {
-        this.$store.dispatch('emptyAllConversations');
-        this.fetchData();
-      }
-    });
-
-    this.$store.dispatch('emptyAllConversations');
-    this.fetchData();
-    this.$store.dispatch('agents/get');
-  },
  computed: {
    ...mapGetters({
      chatLists: 'getAllConversations',
      mineChatsList: 'getMineChats',
      allChatList: 'getAllStatusChats',
      unAssignedChatsList: 'getUnAssignedChats',
-      inboxesList: 'getInboxesList',
      chatListLoading: 'getChatListLoadingStatus',
      currentUserID: 'getCurrentUserID',
      activeInbox: 'getSelectedInbox',
@@ -92,12 +84,8 @@ export default {
        count: this.convStats[item.KEY] || 0,
      }));
    },
-    getInboxName() {
-      const inboxId = Number(this.activeInbox);
-      const [stateInbox] = this.inboxesList.filter(
-        inbox => inbox.channel_id === inboxId
-      );
-      return !stateInbox ? this.pageTitle : stateInbox.label;
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.activeInbox);
    },
    getToggleStatus() {
      if (this.toggleType) {
@@ -106,6 +94,18 @@ export default {
      return 'Resolved';
    },
  },
+  mounted() {
+    this.$watch('$store.state.route', () => {
+      if (this.$store.state.route.name !== 'inbox_conversation') {
+        this.$store.dispatch('emptyAllConversations');
+        this.fetchData();
+      }
+    });
+
+    this.$store.dispatch('emptyAllConversations');
+    this.fetchData();
+    this.$store.dispatch('agents/get');
+  },
  methods: {
    fetchData() {
      if (this.chatLists.length === 0) {
@@ -149,12 +149,6 @@ export default {
      return sorted;
    },
  },
-
-  components: {
-    ChatTypeTabs,
-    ConversationCard,
-    ChatFilter,
-  },
 };
 </script>

--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="column page-top-bar">
-    <img :src="headerImage" alt="No image" v-if="headerImage"/>
+    <img v-if="headerImage" :src="headerImage" alt="No image" />
    <h2 class="page-sub-title">
-      {{headerTitle}}
+      {{ headerTitle }}
    </h2>
-    <p class="small-12 column">
-        {{headerContent}}
+    <p v-if="headerContent" class="small-12 column">
+      {{ headerContent }}
    </p>
  </div>
 </template>
--- a/app/javascript/dashboard/components/SettingsFormHeader.vue
+++ b/app/javascript/dashboard/components/SettingsFormHeader.vue
@@ -10,7 +10,7 @@
    </div>
    <div v-if="buttonText" class="medium-4 text-right">
      <woot-submit-button
-        class="small"
+        class="default"
        :button-text="buttonText"
        :loading="isUpdating"
        @click="onClick()"
@@ -32,7 +32,7 @@ export default {
    },
    buttonText: {
      type: String,
-      required: true,
+      default: '',
    },
    isUpdating: {
      type: Boolean,
@@ -51,8 +51,19 @@ export default {
@import '~dashboard/assets/scss/variables';

 .settings--form--header {
+  align-items: center;
  border-bottom: 1px solid $color-border;
+  display: flex;
  margin-bottom: $space-normal;
  padding: $space-normal 0;
+
+  .button {
+    margin-bottom: 0;
+  }
+
+  .title {
+    margin-bottom: 0;
+    font-size: $font-size-default;
+  }
 }
 </style>
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -13,6 +13,12 @@
          :key="item.toState"
          :menu-item="item"
        />
+
+        <sidebar-item
+          v-if="shouldShowInboxes"
+          :key="inboxSection.toState"
+          :menu-item="inboxSection"
+        />
      </transition-group>
    </div>

@@ -41,7 +47,7 @@
        </div>
      </transition>
      <div class="current-user" @click.prevent="showOptions()">
-        <thumbnail :src="gravatarUrl()" :username="currentUser.name"/>
+        <thumbnail :src="gravatarUrl()" :username="currentUser.name" />
        <div class="current-user--data">
          <h3 class="current-user--name">
            {{ currentUser.name }}
@@ -50,9 +56,8 @@
            {{ currentUser.role }}
          </h5>
        </div>
-        <span
-          class="current-user--options icon ion-android-more-vertical"
-        ></span>
+        <span class="current-user--options icon ion-android-more-vertical">
+        </span>
      </div>
    </div>
  </aside>
@@ -69,12 +74,19 @@ import SidebarItem from './SidebarItem';
 import WootStatusBar from '../widgets/StatusBar';
 import { frontendURL } from '../../helper/URLHelper';
 import Thumbnail from '../widgets/Thumbnail';
+import sidemenuItems from '../../i18n/default-sidebar';

 export default {
+  components: {
+    SidebarItem,
+    WootStatusBar,
+    Thumbnail,
+  },
  mixins: [clickaway, adminMixin],
  props: {
    route: {
      type: String,
+      default: '',
    },
  },
  data() {
@@ -82,27 +94,22 @@ export default {
      showOptionsMenu: false,
    };
  },
-  mounted() {
-    // this.$store.dispatch('fetchLabels');
-    this.$store.dispatch('fetchInboxes');
-  },
  computed: {
    ...mapGetters({
-      sidebarList: 'getMenuItems',
      daysLeft: 'getTrialLeft',
      subscriptionData: 'getSubscription',
+      inboxes: 'inboxes/getInboxes',
    }),
    accessibleMenuItems() {
-      const currentRoute = this.$store.state.route.name;
      // get all keys in menuGroup
-      const groupKey = Object.keys(this.sidebarList);
+      const groupKey = Object.keys(sidemenuItems);

      let menuItems = [];
      // Iterate over menuGroup to find the correct group
      for (let i = 0; i < groupKey.length; i += 1) {
-        const groupItem = this.sidebarList[groupKey[i]];
+        const groupItem = sidemenuItems[groupKey[i]];
        // Check if current route is included
-        const isRouteIncluded = groupItem.routes.includes(currentRoute);
+        const isRouteIncluded = groupItem.routes.includes(this.currentRoute);
        if (isRouteIncluded) {
          menuItems = Object.values(groupItem.menuItems);
        }
@@ -114,6 +121,29 @@ export default {

      return this.filterMenuItemsByRole(menuItems);
    },
+    currentRoute() {
+      return this.$store.state.route.name;
+    },
+    shouldShowInboxes() {
+      return sidemenuItems.common.routes.includes(this.currentRoute);
+    },
+    inboxSection() {
+      return {
+        icon: 'ion-folder',
+        label: 'Inboxes',
+        hasSubMenu: true,
+        newLink: true,
+        key: 'inbox',
+        cssClass: 'menu-title align-justify',
+        toState: frontendURL('settings/inboxes'),
+        toStateName: 'settings_inbox_list',
+        children: this.inboxes.map(inbox => ({
+          id: inbox.id,
+          label: inbox.name,
+          toState: frontendURL(`inbox/${inbox.id}`),
+        })),
+      };
+    },
    currentUser() {
      return Auth.getCurrentUser();
    },
@@ -140,7 +170,9 @@ export default {
      return `${this.daysLeft} ${this.$t('APP_GLOBAL.TRIAL_MESSAGE')}`;
    },
  },
-
+  mounted() {
+    this.$store.dispatch('inboxes/get');
+  },
  methods: {
    gravatarUrl() {
      const hash = md5(this.currentUser.email);
@@ -165,11 +197,5 @@ export default {
      this.showOptionsMenu = !this.showOptionsMenu;
    },
  },
-
-  components: {
-    SidebarItem,
-    WootStatusBar,
-    Thumbnail,
-  },
 };
 </script>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -63,7 +63,7 @@ export default {
  computed: {
    ...mapGetters({
      currentChat: 'getSelectedChat',
-      inboxesList: 'getInboxesList',
+      inboxesList: 'inboxes/getInboxes',
      activeInbox: 'getSelectedInbox',
    }),

@@ -107,11 +107,10 @@ export default {
      `;
    },
    getEmojiSVG,
+
    inboxName(inboxId) {
-      const [stateInbox] = this.inboxesList.filter(
-        inbox => inbox.channel_id === inboxId
-      );
-      return !stateInbox ? '' : stateInbox.label;
+      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
+      return stateInbox.name || '';
    },
  },
 };
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="columns full-height conv-empty-state">
    <woot-loading-state
-      v-if="fetchingInboxes || loadingChatList"
+      v-if="uiFlags.isFetching || loadingChatList"
      :message="loadingIndicatorMessage"
    />
    <!-- Show empty state images if not loading -->
-    <div v-if="!fetchingInboxes && !loadingChatList" class="current-chat">
+    <div v-if="!uiFlags.isFetching && !loadingChatList" class="current-chat">
      <!-- No inboxes attached -->
      <div v-if="!inboxesList.length">
        <img src="~dashboard/assets/images/inboxes.svg" alt="No Inboxes" />
@@ -49,12 +49,12 @@ export default {
    ...mapGetters({
      currentChat: 'getSelectedChat',
      allConversations: 'getAllConversations',
-      inboxesList: 'getInboxesList',
-      fetchingInboxes: 'getInboxLoadingStatus',
+      inboxesList: 'inboxes/getInboxes',
+      uiFlags: 'inboxes/getUIFlags',
      loadingChatList: 'getChatListLoadingStatus',
    }),
    loadingIndicatorMessage() {
-      if (this.fetchingInboxes) {
+      if (this.uiFlags.isFetching) {
        return this.$t('CONVERSATION.LOADING_INBOXES');
      }
      return this.$t('CONVERSATION.LOADING_CONVERSATIONS');
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -75,10 +75,9 @@ export default {
    ...mapGetters({
      currentChat: 'getSelectedChat',
      allConversations: 'getAllConversations',
-      inboxesList: 'getInboxesList',
+      inboxesList: 'inboxes/getInboxes',
      listLoadingStatus: 'getAllMessagesLoaded',
      getUnreadCount: 'getUnreadCount',
-      fetchingInboxes: 'getInboxLoadingStatus',
      loadingChatList: 'getChatListLoadingStatus',
    }),

@@ -99,7 +98,7 @@ export default {
      } else {
        [stateInbox] = this.inboxesList;
      }
-      return !stateInbox ? 0 : stateInbox.pageId;
+      return !stateInbox ? 0 : stateInbox.page_id;
    },
    // Get current FB Page ID link
    linkToMessage() {