[#247] Filters conversation by status and paginate conversations (#284)

* [#247] Filters conversation by status

* Fixes conversation finder specs

* [#248] Paginates conversation

* Use method name in description

* Move page to default param, add filters on frontend

* Fix code climate issues

app/javascript/dashboard/api/inbox/conversation.js

@@ -6,12 +6,12 @@ class ConversationApi extends ApiClient {
     super('conversations');
   }
 
-  get({ inboxId, convStatus, assigneeStatus }) {
+  get({ inboxId, status, assigneeType }) {
     return axios.get(this.url, {
       params: {
         inbox_id: inboxId,
-        conversation_status_id: convStatus,
-        assignee_type_id: assigneeStatus,
+        status,
+        assignee_type_id: assigneeType,
       },
     });
   }

app/javascript/dashboard/components/ChatList.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="conversations-sidebar  medium-4 columns">
-    <!-- <SearchBox></SearchBox> -->
-
     <div class="chat-list__top">
       <h1 class="page-title">
         {{ getInboxName }}
@@ -14,10 +12,11 @@
       :active-tab-index="activeAssigneeTab"
       class="tab--chat-type"
       @chatTabChange="getDataForTab"
-    ></chat-type-tabs>
+    >
+    </chat-type-tabs>
 
     <p
-      v-if="!chatListLoading && !getChatsForTab(activeStatusTab).length"
+      v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
       class="content-box"
     >
       {{ $t('CHAT_LIST.LIST.404') }}
@@ -33,7 +32,7 @@
       class="conversations-list"
     >
       <conversation-card
-        v-for="chat in getChatsForTab(activeStatusTab)"
+        v-for="chat in getChatsForTab(activeStatus)"
         :key="chat.id"
         :chat="chat"
       />
@@ -56,13 +55,12 @@ import wootConstants from '../constants';
 export default {
   mixins: [timeMixin, conversationMixin],
   props: ['conversationInbox', 'pageTitle'],
-  data: () => ({
-    chats: null,
-    activeStatusTab: 0,
-    activeAssigneeTab: 0,
-    toggleType: true,
-    allMessageType: 2,
-  }),
+  data() {
+    return {
+      activeAssigneeTab: 0,
+      activeStatus: 0,
+    };
+  },
   mounted() {
     this.$watch('$store.state.route', () => {
       if (this.$store.state.route.name !== 'inbox_conversation') {
@@ -85,17 +83,8 @@ export default {
       chatListLoading: 'getChatListLoadingStatus',
       currentUserID: 'getCurrentUserID',
       activeInbox: 'getSelectedInbox',
+      convStats: 'getConvTabStats',
     }),
-    convStats() {
-      const mineCount = this.mineChatsList.length;
-      const unAssignedCount = this.unAssignedChatsList.length;
-      const allCount = this.allChatList.length;
-      return {
-        mineCount,
-        unAssignedCount,
-        allCount,
-      };
-    },
     assigneeTabItems() {
       return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map((item, index) => ({
         id: index,
@@ -120,24 +109,27 @@ export default {
   methods: {
     fetchData() {
       if (this.chatLists.length === 0) {
-        this.$store.dispatch('fetchAllConversations', {
-          inboxId: this.conversationInbox ? this.conversationInbox : undefined,
-          assigneeStatus: this.allMessageType,
-          convStatus: this.activeStatusTab,
-        });
+        this.fetchConversations();
       }
     },
+    fetchConversations() {
+      this.$store.dispatch('fetchAllConversations', {
+        inboxId: this.conversationInbox ? this.conversationInbox : undefined,
+        assigneeType: this.activeAssigneeTab,
+        status: this.activeStatus ? 'resolved' : 'open',
+      });
+    },
     getDataForTab(index) {
-      this.activeAssigneeTab = index;
-      if (!(index in this.chatLists)) {
-        // this.$store.dispatch('fetchList', {
-        //   inbox: this.conversationInbox,
-        //   type: index,
-        // });
+      if (this.activeAssigneeTab !== index) {
+        this.activeAssigneeTab = index;
+        this.fetchConversations();
       }
     },
     getDataForStatusTab(index) {
-      this.activeStatusTab = index;
+      if (this.activeStatus !== index) {
+        this.activeStatus = index;
+        this.fetchConversations();
+      }
     },
     getChatsForTab() {
       let copyList = [];
@@ -154,7 +146,6 @@ export default {
         (a, b) =>
           this.lastMessage(b).created_at - this.lastMessage(a).created_at
       );
-
       return sorted;
     },
   },

app/javascript/dashboard/components/widgets/ChatTypeTabs.vue

@@ -32,8 +32,10 @@ export default {
   },
   methods: {
     onTabChange(selectedTabIndex) {
-      this.$emit('chatTabChange', selectedTabIndex);
-      this.tabsIndex = selectedTabIndex;
+      if (selectedTabIndex !== this.tabsIndex) {
+        this.$emit('chatTabChange', selectedTabIndex);
+        this.tabsIndex = selectedTabIndex;
+      }
     },
   },
 };

app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue

@@ -1,7 +1,12 @@
-
 <template>
-  <select class="status--filter" v-model="activeIndex" @change="onTabChange()">
-    <option v-for="(item, index) in $t('CHAT_LIST.CHAT_STAUTUS_ITEMS')" :value="item['VALUE']">{{item["TEXT"]}}</option>
+  <select v-model="activeIndex" class="status--filter" @change="onTabChange()">
+    <option
+      v-for="item in $t('CHAT_LIST.CHAT_STATUS_ITEMS')"
+      :key="item['VALUE']"
+      :value="item['VALUE']"
+    >
+      {{ item['TEXT'] }}
+    </option>
   </select>
 </template>
 
@@ -10,8 +15,7 @@ export default {
   data: () => ({
     activeIndex: 0,
   }),
-  mounted() {
-  },
+  mounted() {},
   methods: {
     onTabChange() {
       this.$store.dispatch('setChatFilter', this.activeIndex);

app/javascript/dashboard/i18n/locale/en/chatlist.json

@@ -25,7 +25,7 @@
       "ALL": 2
     },
 
-    "CHAT_STAUTUS_ITEMS": [
+    "CHAT_STATUS_ITEMS": [
       { "TEXT": "Open", "VALUE": 0 },
       { "TEXT": "Resolved", "VALUE": 1 }
     ],

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -47,6 +47,7 @@ const getters = {
   },
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
+  getConvTabStats: ({ convTabStats }) => convTabStats,
 };
 
 export default getters;

app/javascript/dashboard/store/modules/conversations/index.js

@@ -6,8 +6,6 @@ import wootConstants from '../../../constants';
 import getters, { getSelectedChatConversation } from './getters';
 import actions from './actions';
 
-// const chatType = 'all';
-// initial state
 const state = {
   allConversations: [],
   convTabStats: {
@@ -30,10 +28,18 @@ const state = {
 
 // mutations
 const mutations = {
-  [types.default.SET_ALL_CONVERSATION](_state, chatList) {
-    _state.allConversations.push(...chatList);
+  [types.default.SET_ALL_CONVERSATION](_state, conversationList) {
+    const newAllConversations = [..._state.allConversations];
+    conversationList.forEach(conversation => {
+      const indexInCurrentList = newAllConversations.findIndex(
+        c => c.id === conversation.id
+      );
+      if (indexInCurrentList < 0) {
+        newAllConversations.push(conversation);
+      }
+    });
+    _state.allConversations = newAllConversations;
   },
-
   [types.default.EMPTY_ALL_CONVERSATION](_state) {
     _state.allConversations = [];
     _state.selectedChat = {
@@ -45,7 +51,6 @@ const mutations = {
       dataFetched: false,
     };
   },
-
   [types.default.SET_ALL_MESSAGES_LOADED](_state) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'allMessagesLoaded', true);
@@ -71,14 +76,14 @@ const mutations = {
   [types.default.SET_CONV_TAB_META](
     _state,
     {
-      overdue_count: overdueCount,
+      mine_count: mineCount,
+      unassigned_count: unAssignedCount,
       all_count: allCount,
-      open_count: openCount,
     } = {}
   ) {
-    Vue.set(_state.convTabStats, 'overdueCount', overdueCount);
-    Vue.set(_state.convTabStats, 'allConvCount', allCount);
-    Vue.set(_state.convTabStats, 'openCount', openCount);
+    Vue.set(_state.convTabStats, 'mineCount', mineCount);
+    Vue.set(_state.convTabStats, 'allCount', allCount);
+    Vue.set(_state.convTabStats, 'unAssignedCount', unAssignedCount);
   },
 
   [types.default.CURRENT_CHAT_WINDOW](_state, activeChat) {