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

feat: Agent capacity policy index page with CRUD actions (#12409)

Browse Source
This commit is contained in:
Sivin Varghese
2025-09-12 16:22:42 +05:30
committed by GitHub
parent 16b98b6017
commit 59ba91473a
20 changed files with 1429 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue
View File

@@ -30,7 +30,7 @@ const agentAssignments = computed(() => [
],
},
{
key: 'agent_capacity_policy',
key: 'agent_capacity_policy_index',
title: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.TITLE'),
description: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.DESCRIPTION'),
features: [

10
app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js
View File

@@ -5,6 +5,7 @@ import AssignmentPolicyIndex from './Index.vue';
import AgentAssignmentIndex from './pages/AgentAssignmentIndexPage.vue';
import AgentAssignmentCreate from './pages/AgentAssignmentCreatePage.vue';
import AgentAssignmentEdit from './pages/AgentAssignmentEditPage.vue';
import AgentCapacityIndex from './pages/AgentCapacityIndexPage.vue';
export default {
routes: [
@@ -54,6 +55,15 @@ export default {
permissions: ['administrator'],
},
},
{
path: 'capacity',
name: 'agent_capacity_policy_index',
component: AgentCapacityIndex,
meta: {
featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
permissions: ['administrator'],
},
},
],
},
],

126
app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue Normal file
View File

@@ -0,0 +1,126 @@
<script setup>
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore, useMapGetter } from 'dashboard/composables/store';
import { useRouter } from 'vue-router';
import { useAlert } from 'dashboard/composables';
import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
import AgentCapacityPolicyCard from 'dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue';
import ConfirmDeletePolicyDialog from './components/ConfirmDeletePolicyDialog.vue';
const store = useStore();
const { t } = useI18n();
const router = useRouter();
const agentCapacityPolicies = useMapGetter(
'agentCapacityPolicies/getAgentCapacityPolicies'
);
const uiFlags = useMapGetter('agentCapacityPolicies/getUIFlags');
const usersUiFlags = useMapGetter('agentCapacityPolicies/getUsersUIFlags');
const confirmDeletePolicyDialogRef = ref(null);
const breadcrumbItems = computed(() => {
const items = [
{
label: t('ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
routeName: 'assignment_policy_index',
},
{
label: t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.TITLE'),
},
];
return items;
});
const handleBreadcrumbClick = item => {
router.push({
name: item.routeName,
});
};
const onClickCreatePolicy = () => {
router.push({
name: 'agent_capacity_policy_create',
});
};
const onClickEditPolicy = id => {
router.push({
name: 'agent_capacity_policy_edit',
params: {
id,
},
});
};
const handleFetchUsers = id => {
if (usersUiFlags.value.isFetching) return;
store.dispatch('agentCapacityPolicies/getUsers', id);
};
const handleDelete = id => {
confirmDeletePolicyDialogRef.value.openDialog(id);
};
const handleDeletePolicy = async policyId => {
try {
await store.dispatch('agentCapacityPolicies/delete', policyId);
useAlert(
t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.DELETE_POLICY.SUCCESS_MESSAGE')
);
confirmDeletePolicyDialogRef.value.closeDialog();
} catch (error) {
useAlert(
t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.DELETE_POLICY.ERROR_MESSAGE')
);
}
};
onMounted(() => {
store.dispatch('agentCapacityPolicies/get');
});
</script>
<template>
<SettingsLayout
:is-loading="uiFlags.isFetching"
:no-records-found="agentCapacityPolicies.length === 0"
:no-records-message="
$t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.NO_RECORDS_FOUND')
"
>
<template #header>
<div class="flex items-center gap-2 w-full justify-between">
<Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
<Button icon="i-lucide-plus" md @click="onClickCreatePolicy">
{{
$t(
'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.CREATE_POLICY'
)
}}
</Button>
</div>
</template>
<template #body>
<div class="flex flex-col gap-4 pt-8">
<AgentCapacityPolicyCard
v-for="policy in agentCapacityPolicies"
:key="policy.id"
v-bind="policy"
:is-fetching-users="usersUiFlags.isFetching"
@fetch-users="handleFetchUsers"
@edit="onClickEditPolicy"
@delete="handleDelete"
/>
</div>
</template>
<ConfirmDeletePolicyDialog
ref="confirmDeletePolicyDialogRef"
@delete="handleDeletePolicy"
/>
</SettingsLayout>
</template>

14
app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmDeletePolicyDialog.vue
View File

@@ -31,19 +31,13 @@ defineExpose({ openDialog, closeDialog });
<Dialog
ref="dialogRef"
type="alert"
:title="t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.TITLE')"
:description="
t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.DESCRIPTION')
"
:title="t('ASSIGNMENT_POLICY.DELETE_POLICY.TITLE')"
:description="t('ASSIGNMENT_POLICY.DELETE_POLICY.DESCRIPTION')"
:confirm-button-label="
t(
'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.CONFIRM_BUTTON_LABEL'
)
t('ASSIGNMENT_POLICY.DELETE_POLICY.CONFIRM_BUTTON_LABEL')
"
:cancel-button-label="
t(
'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.CANCEL_BUTTON_LABEL'
)
t('ASSIGNMENT_POLICY.DELETE_POLICY.CANCEL_BUTTON_LABEL')
"
@confirm="handleDialogConfirm"
/>