LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Save UI state in the database (#1635)

Browse Source 
feat: Save UI state in the database
This commit is contained in:
Pranav Raj S
2021-01-10 19:25:33 +05:30
committed by GitHub
parent 37d8e1c9a0
commit 160a6fc6cf
13 changed files with 129 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/dashboard/api/auth.js
View File

@@ -140,6 +140,12 @@ export default {
return axios.put(endPoints('profileUpdate').url, formData);
},
updateUISettings({ uiSettings }) {
return axios.put(endPoints('profileUpdate').url, {
profile: { ui_settings: uiSettings },
});
},
updateAvailability({ availability }) {
return axios.put(endPoints('profileUpdate').url, {
profile: { availability },

27
app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
View File

@@ -63,25 +63,23 @@ export default {
data() {
return {
panelToggleState: true,
showSearchModal: false,
};
},
computed: {
...mapGetters({
uiSettings: 'getUISettings',
chatList: 'getAllConversations',
currentChat: 'getSelectedChat',
}),
isContactPanelOpen: {
get() {
if (this.currentChat.id) {
return this.panelToggleState;
}
return false;
},
set(val) {
this.panelToggleState = val;
},
isContactPanelOpen() {
if (this.currentChat.id) {
const {
is_contact_sidebar_open: isContactSidebarOpen,
} = this.uiSettings;
return isContactSidebarOpen;
}
return false;
},
},
@@ -132,7 +130,12 @@ export default {
}
},
onToggleContactPanel() {
this.isContactPanelOpen = !this.isContactPanelOpen;
this.$store.dispatch('updateUISettings', {
uiSettings: {
...this.uiSettings,
is_contact_sidebar_open: !this.isContactPanelOpen,
},
});
},
onSearch() {
this.showSearchModal = true;

27
app/javascript/dashboard/store/modules/auth.js
View File

@@ -34,6 +34,10 @@ export const getters = {
return _state.currentUser.id;
},
getUISettings(_state) {
return _state.currentUser.ui_settings || {};
},
getCurrentUserAvailabilityStatus(_state) {
return _state.currentUser.availability_status;
},
@@ -95,6 +99,7 @@ export const actions = {
logout({ commit }) {
commit(types.default.CLEAR_USER);
},
updateProfile: async ({ commit }, params) => {
try {
const response = await authAPI.profileUpdate(params);
@@ -105,6 +110,17 @@ export const actions = {
}
},
updateUISettings: async ({ commit }, params) => {
try {
commit(types.default.SET_CURRENT_USER_UI_SETTINGS, params);
const response = await authAPI.updateUISettings(params);
setUser(response.data, getHeaderExpiry(response));
commit(types.default.SET_CURRENT_USER);
} catch (error) {
// Ignore error
}
},
updateAvailability: ({ commit, dispatch }, { availability }) => {
authAPI.updateAvailability({ availability }).then(response => {
const userData = response.data;
@@ -130,7 +146,7 @@ export const actions = {
};
// mutations
const mutations = {
export const mutations = {
[types.default.SET_CURRENT_USER_AVAILABILITY](_state, status) {
Vue.set(_state.currentUser, 'availability_status', status);
},
@@ -145,6 +161,15 @@ const mutations = {
Vue.set(_state, 'currentUser', currentUser);
},
[types.default.SET_CURRENT_USER_UI_SETTINGS](_state, { uiSettings }) {
Vue.set(_state, 'currentUser', {
..._state.currentUser,
ui_settings: {
..._state.currentUser.ui_settings,
...uiSettings,
},
});
},
[types.default.SET_CURRENT_ACCOUNT_ID](_state, accountId) {
Vue.set(_state, 'currentAccountId', Number(accountId));
},

26
app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
View File

@@ -70,6 +70,32 @@ describe('#actions', () => {
});
});
describe('#updateUISettings', () => {
it('sends correct actions if API is success', async () => {
axios.put.mockResolvedValue({
data: {
id: 1,
name: 'John',
availability_status: 'offline',
ui_settings: { is_contact_sidebar_open: true },
},
headers: { expiry: 581842904 },
});
await actions.updateUISettings(
{ commit, dispatch },
{ uiSettings: { is_contact_sidebar_open: false } }
);
expect(setUser).toHaveBeenCalledTimes(1);
expect(commit.mock.calls).toEqual([
[
types.default.SET_CURRENT_USER_UI_SETTINGS,
{ uiSettings: { is_contact_sidebar_open: false } },
],
[types.default.SET_CURRENT_USER],
]);
});
});
describe('#setUser', () => {
it('sends correct actions if user is logged in', async () => {
Cookies.getJSON.mockImplementation(() => true);

8
app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
View File

@@ -25,4 +25,12 @@ describe('#getters', () => {
})
).toEqual('busy');
});
it('getUISettings', () => {
expect(
getters.getUISettings({
currentUser: { ui_settings: { is_contact_sidebar_open: true } },
})
).toEqual({ is_contact_sidebar_open: true });
});
});

21
app/javascript/dashboard/store/modules/specs/auth/mutations.spec.js Normal file
View File

@@ -0,0 +1,21 @@
import types from '../../../mutation-types';
import { mutations } from '../../auth';
describe('#mutations', () => {
describe('#SET_CURRENT_USER_UI_SETTINGS', () => {
it('set ui flags', () => {
const state = {
currentUser: {
ui_settings: { is_contact_sidebar_open: true, icon_type: 'emoji' },
},
};
mutations[types.SET_CURRENT_USER_UI_SETTINGS](state, {
uiSettings: { is_contact_sidebar_open: false },
});
expect(state.currentUser.ui_settings).toEqual({
is_contact_sidebar_open: false,
icon_type: 'emoji',
});
});
});
});

1
app/javascript/dashboard/store/mutation-types.js
View File

@@ -4,6 +4,7 @@ export default {
SET_CURRENT_USER: 'SET_CURRENT_USER',
SET_CURRENT_ACCOUNT_ID: 'SET_CURRENT_ACCOUNT_ID',
SET_CURRENT_USER_AVAILABILITY: 'SET_CURRENT_USER_AVAILABILITY',
SET_CURRENT_USER_UI_SETTINGS: 'SET_CURRENT_USER_UI_SETTINGS',
// Chat List
RECEIVE_CHAT_LIST: 'RECEIVE_CHAT_LIST',