Files
chatwoot/app/javascript/dashboard/store/modules/agentCapacityPolicies.js
Sivin Varghese ca579bd62a feat: Agent capacity policy Create/Edit pages (#12424)
# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-5573/feat-createedit-agent-capacity-policy-page

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/8de9e3c5d8824cd998d242636540dd18?sid=1314536f-c8d6-41fd-8139-cae9bf94f942

### Screenshots

**Light mode**
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/7e6d83a4-ce02-47a7-91f6-87745f8f5549"
/>
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/7dd1f840-2e25-4365-aa1d-ed9dac13385a"
/>

**Dark mode**
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/0c787095-7146-4fb3-a61a-e2232973bcba"
/>
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/481c21fd-03b5-4c1f-b59e-7f8c8017f9ce"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2025-09-12 18:42:55 +05:30

317 lines
8.7 KiB
JavaScript

import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import types from '../mutation-types';
import AgentCapacityPoliciesAPI from '../../api/agentCapacityPolicies';
import { throwErrorMessage } from '../utils/api';
import camelcaseKeys from 'camelcase-keys';
import snakecaseKeys from 'snakecase-keys';
export const state = {
records: [],
uiFlags: {
isFetching: false,
isFetchingItem: false,
isCreating: false,
isUpdating: false,
isDeleting: false,
},
usersUiFlags: {
isFetching: false,
isDeleting: false,
},
};
export const getters = {
getAgentCapacityPolicies(_state) {
return _state.records;
},
getUIFlags(_state) {
return _state.uiFlags;
},
getUsersUIFlags(_state) {
return _state.usersUiFlags;
},
getAgentCapacityPolicyById: _state => id => {
return _state.records.find(record => record.id === Number(id)) || {};
},
};
export const actions = {
get: async function get({ commit }) {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: true });
try {
const response = await AgentCapacityPoliciesAPI.get();
commit(
types.SET_AGENT_CAPACITY_POLICIES,
camelcaseKeys(response.data, { deep: true })
);
} catch (error) {
throwErrorMessage(error);
} finally {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: false });
}
},
show: async function show({ commit }, policyId) {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: true });
try {
const response = await AgentCapacityPoliciesAPI.show(policyId);
const policy = camelcaseKeys(response.data, { deep: true });
commit(types.SET_AGENT_CAPACITY_POLICY, policy);
} catch (error) {
throwErrorMessage(error);
} finally {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, {
isFetchingItem: false,
});
}
},
create: async function create({ commit }, policyObj) {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: true });
try {
const response = await AgentCapacityPoliciesAPI.create(
snakecaseKeys(policyObj)
);
commit(
types.ADD_AGENT_CAPACITY_POLICY,
camelcaseKeys(response.data, { deep: true })
);
return response.data;
} catch (error) {
throwErrorMessage(error);
throw error;
} finally {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: false });
}
},
update: async function update({ commit }, { id, ...policyParams }) {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: true });
try {
const response = await AgentCapacityPoliciesAPI.update(
id,
snakecaseKeys(policyParams)
);
commit(
types.EDIT_AGENT_CAPACITY_POLICY,
camelcaseKeys(response.data, { deep: true })
);
return response.data;
} catch (error) {
throwErrorMessage(error);
throw error;
} finally {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: false });
}
},
delete: async function deletePolicy({ commit }, policyId) {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: true });
try {
await AgentCapacityPoliciesAPI.delete(policyId);
commit(types.DELETE_AGENT_CAPACITY_POLICY, policyId);
} catch (error) {
throwErrorMessage(error);
throw error;
} finally {
commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: false });
}
},
getUsers: async function getUsers({ commit }, policyId) {
commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
isFetching: true,
});
try {
const response = await AgentCapacityPoliciesAPI.getUsers(policyId);
commit(types.SET_AGENT_CAPACITY_POLICIES_USERS, {
policyId,
users: camelcaseKeys(response.data),
});
return response.data;
} catch (error) {
throwErrorMessage(error);
throw error;
} finally {
commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
isFetching: false,
});
}
},
addUser: async function addUser({ commit }, { policyId, userData }) {
try {
const response = await AgentCapacityPoliciesAPI.addUser(
policyId,
userData
);
commit(types.ADD_AGENT_CAPACITY_POLICIES_USERS, {
policyId,
user: camelcaseKeys(response.data),
});
return response.data;
} catch (error) {
throwErrorMessage(error);
throw error;
}
},
removeUser: async function removeUser({ commit }, { policyId, userId }) {
commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
isDeleting: true,
});
try {
await AgentCapacityPoliciesAPI.removeUser(policyId, userId);
commit(types.DELETE_AGENT_CAPACITY_POLICIES_USERS, { policyId, userId });
} catch (error) {
throwErrorMessage(error);
throw error;
} finally {
commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
isDeleting: false,
});
}
},
createInboxLimit: async function createInboxLimit(
{ commit },
{ policyId, limitData }
) {
try {
const response = await AgentCapacityPoliciesAPI.createInboxLimit(
policyId,
limitData
);
commit(
types.SET_AGENT_CAPACITY_POLICIES_INBOXES,
camelcaseKeys(response.data)
);
return response.data;
} catch (error) {
throwErrorMessage(error);
throw error;
}
},
updateInboxLimit: async function updateInboxLimit(
{ commit },
{ policyId, limitId, limitData }
) {
try {
const response = await AgentCapacityPoliciesAPI.updateInboxLimit(
policyId,
limitId,
limitData
);
commit(
types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES,
camelcaseKeys(response.data)
);
return response.data;
} catch (error) {
throwErrorMessage(error);
throw error;
}
},
deleteInboxLimit: async function deleteInboxLimit(
{ commit },
{ policyId, limitId }
) {
try {
await AgentCapacityPoliciesAPI.deleteInboxLimit(policyId, limitId);
commit(types.DELETE_AGENT_CAPACITY_POLICIES_INBOXES, {
policyId,
limitId,
});
} catch (error) {
throwErrorMessage(error);
throw error;
}
},
};
export const mutations = {
[types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG](_state, data) {
_state.uiFlags = {
..._state.uiFlags,
...data,
};
},
[types.SET_AGENT_CAPACITY_POLICIES]: MutationHelpers.set,
[types.SET_AGENT_CAPACITY_POLICY]: MutationHelpers.setSingleRecord,
[types.ADD_AGENT_CAPACITY_POLICY]: MutationHelpers.create,
[types.EDIT_AGENT_CAPACITY_POLICY]: MutationHelpers.updateAttributes,
[types.DELETE_AGENT_CAPACITY_POLICY]: MutationHelpers.destroy,
[types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG](_state, data) {
_state.usersUiFlags = {
..._state.usersUiFlags,
...data,
};
},
[types.SET_AGENT_CAPACITY_POLICIES_USERS](_state, { policyId, users }) {
const policy = _state.records.find(p => p.id === policyId);
if (policy) {
policy.users = users;
}
},
[types.ADD_AGENT_CAPACITY_POLICIES_USERS](_state, { policyId, user }) {
const policy = _state.records.find(p => p.id === policyId);
if (policy) {
policy.users = policy.users || [];
policy.users.push(user);
policy.assignedAgentCount = policy.users.length;
}
},
[types.DELETE_AGENT_CAPACITY_POLICIES_USERS](_state, { policyId, userId }) {
const policy = _state.records.find(p => p.id === policyId);
if (policy) {
policy.users = (policy.users || []).filter(user => user.id !== userId);
policy.assignedAgentCount = policy.users.length;
}
},
[types.SET_AGENT_CAPACITY_POLICIES_INBOXES](_state, data) {
const policy = _state.records.find(
p => p.id === data.agentCapacityPolicyId
);
policy?.inboxCapacityLimits.push({
id: data.id,
inboxId: data.inboxId,
conversationLimit: data.conversationLimit,
});
},
[types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES](_state, data) {
const policy = _state.records.find(
p => p.id === data.agentCapacityPolicyId
);
const limit = policy?.inboxCapacityLimits.find(l => l.id === data.id);
if (limit) {
Object.assign(limit, {
conversationLimit: data.conversationLimit,
});
}
},
[types.DELETE_AGENT_CAPACITY_POLICIES_INBOXES](
_state,
{ policyId, limitId }
) {
const policy = _state.records.find(p => p.id === policyId);
if (policy) {
policy.inboxCapacityLimits = policy.inboxCapacityLimits.filter(
limit => limit.id !== limitId
);
}
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};