feat: Adds the ability to sort conversations (#6853)

* Add sort filter

* Change UI

* Change filter

* Complete sort by filters

* Style fixes

* Fix default sort

* Update app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/ChatList.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Added translation

* Added review fixes

* Add more updates

* Code cleanups

* Update last_activity_at on message received event

* Cleans up the design for chatlist and icons

* Fix sort

* Remove inline styles

* Add tag along with the title

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

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

@@ -335,10 +335,24 @@ const actions = {
     dispatch('contacts/setContact', sender);
   },
 
-  setChatFilter({ commit }, data) {
+  updateConversationLastActivity(
+    { commit },
+    { conversationId, lastActivityAt }
+  ) {
+    commit(types.UPDATE_CONVERSATION_LAST_ACTIVITY, {
+      lastActivityAt,
+      conversationId,
+    });
+  },
+
+  setChatStatusFilter({ commit }, data) {
     commit(types.CHANGE_CHAT_STATUS_FILTER, data);
   },
 
+  setChatSortFilter({ commit }, data) {
+    commit(types.CHANGE_CHAT_SORT_FILTER, data);
+  },
+
   updateAssignee({ commit }, data) {
     commit(types.UPDATE_ASSIGNEE, data);
   },

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

@@ -9,10 +9,14 @@ export const getSelectedChatConversation = ({
 
 // getters
 const getters = {
-  getAllConversations: ({ allConversations }) =>
-    allConversations.sort(
-      (a, b) => b.messages.last()?.created_at - a.messages.last()?.created_at
-    ),
+  getAllConversations: ({ allConversations, chatSortFilter }) => {
+    const comparator = {
+      latest: (a, b) => b.last_activity_at - a.last_activity_at,
+      sort_on_created_at: (a, b) => a.created_at - b.created_at,
+    };
+
+    return allConversations.sort(comparator[chatSortFilter]);
+  },
   getSelectedChat: ({ selectedChatId, allConversations }) => {
     const selectedChat = allConversations.find(
       conversation => conversation.id === selectedChatId
@@ -85,6 +89,7 @@ const getters = {
     ).length;
   },
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
+  getChatSortFilter: ({ chatSortFilter }) => chatSortFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
   getConversationById: _state => conversationId => {
     return _state.allConversations.find(

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

@@ -10,6 +10,7 @@ const state = {
   allConversations: [],
   listLoadingStatus: true,
   chatStatusFilter: wootConstants.STATUS_TYPE.OPEN,
+  chatSortFilter: wootConstants.SORT_BY_TYPE.LATEST,
   currentInbox: null,
   selectedChatId: null,
   appliedFilters: [],
@@ -77,6 +78,13 @@ export const mutations = {
     Vue.set(chat.meta, 'team', team);
   },
 
+  [types.UPDATE_CONVERSATION_LAST_ACTIVITY](
+    _state,
+    { lastActivityAt, conversationId }
+  ) {
+    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
+    Vue.set(chat, 'last_activity_at', lastActivityAt);
+  },
   [types.ASSIGN_PRIORITY](_state, { priority, conversationId }) {
     const [chat] = _state.allConversations.filter(c => c.id === conversationId);
     Vue.set(chat, 'priority', priority);
@@ -175,6 +183,10 @@ export const mutations = {
     _state.chatStatusFilter = data;
   },
 
+  [types.CHANGE_CHAT_SORT_FILTER](_state, data) {
+    _state.chatSortFilter = data;
+  },
+
   // Update assignee on action cable message
   [types.UPDATE_ASSIGNEE](_state, payload) {
     const [chat] = _state.allConversations.filter(c => c.id === payload.id);