Enhancement: Paginate conversation calls in tabs (#560)

* Use conversationPage module for pagination * Load more conversations * Reset list if conversation status is changed * Add specs to conversationPage * Reset filter when page is re-mounted * Update text * Update text
2020-02-26 21:15:01 +05:30
parent e5bc372a29
commit 0740d4762f
28 changed files with 395 additions and 141 deletions
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -3,40 +3,52 @@
    <div class="chat-list__top">
      <h1 class="page-title">
        <woot-sidemenu-icon />
-        {{ inbox.name || pageTitle }}
+        {{ inbox.name || $t('CHAT_LIST.TAB_HEADING') }}
      </h1>
-      <chat-filter @statusFilterChange="getDataForStatusTab" />
+      <chat-filter @statusFilterChange="updateStatusType" />
    </div>

    <chat-type-tabs
      :items="assigneeTabItems"
-      :active-tab-index="activeAssigneeTab"
+      :active-tab="activeAssigneeTab"
      class="tab--chat-type"
-      @chatTabChange="getDataForTab"
+      @chatTabChange="updateAssigneeTab"
    />

-    <p
-      v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
-      class="content-box"
-    >
+    <p v-if="!chatListLoading && !getChatsForTab().length" class="content-box">
      {{ $t('CHAT_LIST.LIST.404') }}
    </p>

-    <div v-if="chatListLoading" class="text-center">
-      <span class="spinner message"></span>
-    </div>
-
-    <transition-group
-      name="conversations-list"
-      tag="div"
-      class="conversations-list"
-    >
+    <div class="conversations-list">
      <conversation-card
-        v-for="chat in getChatsForTab(activeStatus)"
+        v-for="chat in getChatsForTab()"
        :key="chat.id"
        :chat="chat"
      />
-    </transition-group>
+
+      <div v-if="chatListLoading" class="text-center">
+        <span class="spinner"></span>
+      </div>
+
+      <div
+        v-if="!hasCurrentPageEndReached && !chatListLoading"
+        class="text-center load-more-conversations"
+        @click="fetchConversations"
+      >
+        {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
+      </div>
+
+      <p
+        v-if="
+          getChatsForTab().length &&
+            hasCurrentPageEndReached &&
+            !chatListLoading
+        "
+        class="text-center text-muted end-of-list-text"
+      >
+        {{ $t('CHAT_LIST.EOF') }}
+      </p>
+    </div>
  </div>
 </template>

@@ -59,11 +71,11 @@ export default {
    ChatFilter,
  },
  mixins: [timeMixin, conversationMixin],
-  props: ['conversationInbox', 'pageTitle'],
+  props: ['conversationInbox'],
  data() {
    return {
-      activeAssigneeTab: 0,
-      activeStatus: 0,
+      activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
+      activeStatus: wootConstants.STATUS_TYPE.OPEN,
    };
  },
  computed: {
@@ -78,66 +90,69 @@ export default {
      convStats: 'getConvTabStats',
    }),
    assigneeTabItems() {
-      return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map((item, index) => ({
-        id: index,
+      return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => ({
+        key: item.KEY,
        name: item.NAME,
-        count: this.convStats[item.KEY] || 0,
+        count: this.convStats[item.COUNT_KEY] || 0,
      }));
    },
    inbox() {
      return this.$store.getters['inboxes/getInbox'](this.activeInbox);
    },
-    getToggleStatus() {
-      if (this.toggleType) {
-        return 'Open';
-      }
-      return 'Resolved';
+    currentPage() {
+      return this.$store.getters['conversationPage/getCurrentPage'](
+        this.activeAssigneeTab
+      );
+    },
+    hasCurrentPageEndReached() {
+      return this.$store.getters['conversationPage/getHasEndReached'](
+        this.activeAssigneeTab
+      );
+    },
+  },
+  watch: {
+    conversationInbox() {
+      this.resetAndFetchData();
    },
  },
  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('setChatFilter', this.activeStatus);
+    this.resetAndFetchData();
    this.$store.dispatch('agents/get');
  },
  methods: {
-    fetchData() {
-      if (this.chatLists.length === 0) {
-        this.fetchConversations();
-      }
+    resetAndFetchData() {
+      this.$store.dispatch('conversationPage/reset');
+      this.$store.dispatch('emptyAllConversations');
+      this.fetchConversations();
    },
    fetchConversations() {
      this.$store.dispatch('fetchAllConversations', {
        inboxId: this.conversationInbox ? this.conversationInbox : undefined,
        assigneeType: this.activeAssigneeTab,
-        status: this.activeStatus ? 'resolved' : 'open',
+        status: this.activeStatus,
+        page: this.currentPage + 1,
      });
    },
-    getDataForTab(index) {
-      if (this.activeAssigneeTab !== index) {
-        this.activeAssigneeTab = index;
-        this.fetchConversations();
+    updateAssigneeTab(selectedTab) {
+      if (this.activeAssigneeTab !== selectedTab) {
+        this.activeAssigneeTab = selectedTab;
+        if (!this.currentPage) {
+          this.fetchConversations();
+        }
      }
    },
-    getDataForStatusTab(index) {
+    updateStatusType(index) {
      if (this.activeStatus !== index) {
        this.activeStatus = index;
-        this.fetchConversations();
+        this.resetAndFetchData();
      }
    },
    getChatsForTab() {
      let copyList = [];
-      if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.MINE) {
+      if (this.activeAssigneeTab === 'me') {
        copyList = this.mineChatsList.slice();
-      } else if (
-        this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.UNASSIGNED
-      ) {
+      } else if (this.activeAssigneeTab === 'unassigned') {
        copyList = this.unAssignedChatsList.slice();
      } else {
        copyList = this.allChatList.slice();
--- a/app/javascript/dashboard/components/buttons/ResolveButton.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveButton.vue
@@ -16,8 +16,12 @@
 /* global bus */
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner';
+import wootConstants from '../../constants';

 export default {
+  components: {
+    Spinner,
+  },
  props: ['conversationId'],
  data() {
    return {
@@ -29,19 +33,23 @@ export default {
      currentChat: 'getSelectedChat',
    }),
    currentStatus() {
-      const ButtonName = this.currentChat.status === 0 ? 'Resolve' : 'Reopen';
+      const ButtonName =
+        this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+          ? this.$t('CONVERSATION.HEADER.RESOLVE_ACTION')
+          : this.$t('CONVERSATION.HEADER.REOPEN_ACTION');
      return ButtonName;
    },
    buttonClass() {
-      return this.currentChat.status === 0 ? 'success' : 'warning';
+      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+        ? 'success'
+        : 'warning';
    },
    buttonIconClass() {
-      return this.currentChat.status === 0 ? 'ion-checkmark' : 'ion-refresh';
+      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
+        ? 'ion-checkmark'
+        : 'ion-refresh';
    },
  },
-  components: {
-    Spinner,
-  },
  methods: {
    toggleStatus() {
      this.isLoading = true;
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -1,15 +1,15 @@
 <template>
-  <woot-tabs :index="tabsIndex" @change="onTabChange">
+  <woot-tabs :index="activeTabIndex" @change="onTabChange">
    <woot-tabs-item
      v-for="item in items"
-      :key="item.name"
+      :key="item.key"
      :name="item.name"
      :count="item.count"
    />
  </woot-tabs>
 </template>
 <script>
-/* eslint no-console: 0 */
+import wootConstants from '../../constants';

 export default {
  props: {
@@ -17,24 +17,25 @@ export default {
      type: Array,
      default: () => [],
    },
-    activeTabIndex: {
-      type: Number,
-      default: 0,
+    activeTab: {
+      type: String,
+      default: wootConstants.ASSIGNEE_TYPE.ME,
    },
  },
  data() {
    return {
-      tabsIndex: 0,
+      tabsIndex: wootConstants.ASSIGNEE_TYPE.ME,
    };
  },
-  created() {
-    this.tabsIndex = this.activeTabIndex;
+  computed: {
+    activeTabIndex() {
+      return this.items.findIndex(item => item.key === this.activeTab);
+    },
  },
  methods: {
    onTabChange(selectedTabIndex) {
-      if (selectedTabIndex !== this.tabsIndex) {
-        this.$emit('chatTabChange', selectedTabIndex);
-        this.tabsIndex = selectedTabIndex;
+      if (this.items[selectedTabIndex].key !== this.activeTab) {
+        this.$emit('chatTabChange', this.items[selectedTabIndex].key);
      }
    },
  },
--- a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <select v-model="activeIndex" class="status--filter" @change="onTabChange()">
+  <select v-model="activeStatus" class="status--filter" @change="onTabChange()">
    <option
      v-for="item in $t('CHAT_LIST.CHAT_STATUS_ITEMS')"
      :key="item['VALUE']"
@@ -11,15 +11,16 @@
 </template>

 <script>
+import wootConstants from '../../../constants';
+
 export default {
  data: () => ({
-    activeIndex: 0,
+    activeStatus: wootConstants.STATUS_TYPE.OPEN,
  }),
-  mounted() {},
  methods: {
    onTabChange() {
-      this.$store.dispatch('setChatFilter', this.activeIndex);
-      this.$emit('statusFilterChange', this.activeIndex);
+      this.$store.dispatch('setChatFilter', this.activeStatus);
+      this.$emit('statusFilterChange', this.activeStatus);
    },
  },
 };