feat: notification center (#1612)

Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -0,0 +1,55 @@
+import types from '../../mutation-types';
+import NotificationsAPI from '../../../api/notifications';
+
+export const actions = {
+  get: async ({ commit }, { page = 1 } = {}) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: {
+          data: { payload, meta },
+        },
+      } = await NotificationsAPI.get(page);
+      commit(types.CLEAR_NOTIFICATIONS);
+      commit(types.SET_NOTIFICATIONS, payload);
+      commit(types.SET_NOTIFICATIONS_META, meta);
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
+    }
+  },
+  unReadCount: async ({ commit } = {}) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true });
+    try {
+      const { data } = await NotificationsAPI.getUnreadCount();
+      commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, data);
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false });
+    }
+  },
+  read: async (
+    { commit },
+    { primaryActorType, primaryActorId, unreadCount }
+  ) => {
+    try {
+      await NotificationsAPI.read(primaryActorType, primaryActorId);
+      commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, unreadCount - 1);
+      commit(types.UPDATE_NOTIFICATION, primaryActorId);
+    } catch (error) {
+      throw new Error(error);
+    }
+  },
+  readAll: async ({ commit }) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true });
+    try {
+      await NotificationsAPI.readAll();
+      commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, 0);
+      commit(types.UPDATE_ALL_NOTIFICATIONS);
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
+      throw new Error(error);
+    }
+  },
+};

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

@@ -0,0 +1,15 @@
+export const getters = {
+  getNotifications($state) {
+    return Object.values($state.records).sort((n1, n2) => n2.id - n1.id);
+  },
+  getUIFlags($state) {
+    return $state.uiFlags;
+  },
+  getNotification: $state => id => {
+    const notification = $state.records[id];
+    return notification || {};
+  },
+  getMeta: $state => {
+    return $state.meta;
+  },
+};

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

@@ -0,0 +1,26 @@
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations } from './mutations';
+
+const state = {
+  meta: {
+    count: 0,
+    currentPage: 1,
+    unReadCount: 0,
+  },
+  records: {},
+  uiFlags: {
+    isFetching: false,
+    isFetchingItem: false,
+    isUpdating: false,
+    isUpdatingUnreadCount: false,
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

app/javascript/dashboard/store/modules/notifications/mutations.js

@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import types from '../../mutation-types';
+
+export const mutations = {
+  [types.SET_NOTIFICATIONS_UI_FLAG]($state, data) {
+    $state.uiFlags = {
+      ...$state.uiFlags,
+      ...data,
+    };
+  },
+  [types.CLEAR_NOTIFICATIONS]: $state => {
+    Vue.set($state, 'records', {});
+  },
+  [types.SET_NOTIFICATIONS_META]: ($state, data) => {
+    const {
+      count,
+      current_page: currentPage,
+      unread_count: unreadCount,
+    } = data;
+
+    Vue.set($state.meta, 'count', count);
+    Vue.set($state.meta, 'currentPage', currentPage);
+    Vue.set($state.meta, 'unreadCount', unreadCount);
+  },
+  [types.SET_NOTIFICATIONS_UNREAD_COUNT]: ($state, count) => {
+    Vue.set($state.meta, 'unreadCount', count);
+  },
+  [types.SET_NOTIFICATIONS]: ($state, data) => {
+    data.forEach(notification => {
+      Vue.set($state.records, notification.id, {
+        ...($state.records[notification.id] || {}),
+        ...notification,
+      });
+    });
+  },
+  [types.UPDATE_NOTIFICATION]: ($state, primaryActorId) => {
+    Object.values($state.records).forEach(item => {
+      if (item.primary_actor_id === primaryActorId) {
+        Vue.set($state.records[item.id], 'read_at', true);
+      }
+    });
+  },
+  [types.UPDATE_ALL_NOTIFICATIONS]: $state => {
+    Object.values($state.records).forEach(item => {
+      Vue.set($state.records[item.id], 'read_at', true);
+    });
+  },
+};