feat: Update the design for user management page (#9948)
This PR is the part of the settings page design update series. This PR updates the design for the user management page. Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Pranav
@@ -1,5 +1,6 @@
|
||||
const FEATURE_HELP_URLS = {
|
||||
agent_bots: 'https://chwt.app/hc/agent-bots',
|
||||
agents: 'https://chwt.app/hc/agents',
|
||||
audit_logs: 'https://chwt.app/hc/audit-logs',
|
||||
campaigns: 'https://chwt.app/hc/campaigns',
|
||||
canned_responses: 'https://chwt.app/hc/canned',
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
"HEADER": "Agents",
|
||||
"HEADER_BTN_TXT": "Add Agent",
|
||||
"LOADING": "Fetching Agent List",
|
||||
"SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
|
||||
"DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
|
||||
"LEARN_MORE": "Learn about user roles",
|
||||
"AGENT_TYPES": {
|
||||
"ADMINISTRATOR": "Administrator",
|
||||
"AGENT": "Agent"
|
||||
@@ -33,7 +34,6 @@
|
||||
"PLACEHOLDER": "Please select a role",
|
||||
"ERROR": "Role is required"
|
||||
},
|
||||
|
||||
"EMAIL": {
|
||||
"LABEL": "Email Address",
|
||||
"PLACEHOLDER": "Please enter an email address of the agent"
|
||||
|
||||
@@ -1,230 +1,208 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
<script setup>
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import { useI18n } from 'dashboard/composables/useI18n';
|
||||
import { useStoreGetters, useStore } from 'dashboard/composables/store';
|
||||
|
||||
import AddAgent from './AddAgent.vue';
|
||||
import EditAgent from './EditAgent.vue';
|
||||
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
|
||||
import SettingsLayout from '../SettingsLayout.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddAgent,
|
||||
EditAgent,
|
||||
Thumbnail,
|
||||
},
|
||||
mixins: [globalConfigMixin],
|
||||
data() {
|
||||
return {
|
||||
loading: {},
|
||||
showAddPopup: false,
|
||||
showDeletePopup: false,
|
||||
showEditPopup: false,
|
||||
agentAPI: {
|
||||
message: '',
|
||||
},
|
||||
currentAgent: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
agentList: 'agents/getAgents',
|
||||
uiFlags: 'agents/getUIFlags',
|
||||
currentUserId: 'getCurrentUserID',
|
||||
globalConfig: 'globalConfig/get',
|
||||
}),
|
||||
deleteConfirmText() {
|
||||
return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
|
||||
this.currentAgent.name
|
||||
}`;
|
||||
},
|
||||
deleteRejectText() {
|
||||
return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${
|
||||
this.currentAgent.name
|
||||
}`;
|
||||
},
|
||||
deleteMessage() {
|
||||
return ` ${this.currentAgent.name}?`;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('agents/get');
|
||||
},
|
||||
methods: {
|
||||
showEditAction(agent) {
|
||||
return this.currentUserId !== agent.id;
|
||||
},
|
||||
showDeleteAction(agent) {
|
||||
if (this.currentUserId === agent.id) {
|
||||
return false;
|
||||
}
|
||||
const getters = useStoreGetters();
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
if (!agent.confirmed) {
|
||||
return true;
|
||||
}
|
||||
const loading = ref({});
|
||||
const showAddPopup = ref(false);
|
||||
const showDeletePopup = ref(false);
|
||||
const showEditPopup = ref(false);
|
||||
const agentAPI = ref({ message: '' });
|
||||
const currentAgent = ref({});
|
||||
|
||||
if (agent.role === 'administrator') {
|
||||
return this.verifiedAdministrators().length !== 1;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
verifiedAdministrators() {
|
||||
return this.agentList.filter(
|
||||
agent => agent.role === 'administrator' && agent.confirmed
|
||||
);
|
||||
},
|
||||
// Edit Function
|
||||
openAddPopup() {
|
||||
this.showAddPopup = true;
|
||||
},
|
||||
hideAddPopup() {
|
||||
this.showAddPopup = false;
|
||||
},
|
||||
const deleteConfirmText = computed(
|
||||
() => `${t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${currentAgent.value.name}`
|
||||
);
|
||||
const deleteRejectText = computed(() => {
|
||||
return `${t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${currentAgent.value.name}`;
|
||||
});
|
||||
const deleteMessage = computed(() => {
|
||||
return ` ${currentAgent.value.name}?`;
|
||||
});
|
||||
|
||||
// Edit Function
|
||||
openEditPopup(agent) {
|
||||
this.showEditPopup = true;
|
||||
this.currentAgent = agent;
|
||||
},
|
||||
hideEditPopup() {
|
||||
this.showEditPopup = false;
|
||||
},
|
||||
const agentList = computed(() => getters['agents/getAgents'].value);
|
||||
const uiFlags = computed(() => getters['agents/getUIFlags'].value);
|
||||
const currentUserId = computed(() => getters.getCurrentUserID.value);
|
||||
|
||||
// Delete Function
|
||||
openDeletePopup(agent) {
|
||||
this.showDeletePopup = true;
|
||||
this.currentAgent = agent;
|
||||
},
|
||||
closeDeletePopup() {
|
||||
this.showDeletePopup = false;
|
||||
},
|
||||
confirmDeletion() {
|
||||
this.loading[this.currentAgent.id] = true;
|
||||
this.closeDeletePopup();
|
||||
this.deleteAgent(this.currentAgent.id);
|
||||
},
|
||||
async deleteAgent(id) {
|
||||
try {
|
||||
await this.$store.dispatch('agents/delete', id);
|
||||
this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
|
||||
} catch (error) {
|
||||
this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
|
||||
}
|
||||
},
|
||||
// Show SnackBar
|
||||
showAlertMessage(message) {
|
||||
// Reset loading, current selected agent
|
||||
this.loading[this.currentAgent.id] = false;
|
||||
this.currentAgent = {};
|
||||
// Show message
|
||||
this.agentAPI.message = message;
|
||||
useAlert(message);
|
||||
},
|
||||
},
|
||||
onMounted(() => {
|
||||
store.dispatch('agents/get');
|
||||
});
|
||||
|
||||
const verifiedAdministrators = computed(() => {
|
||||
return agentList.value.filter(
|
||||
agent => agent.role === 'administrator' && agent.confirmed
|
||||
);
|
||||
});
|
||||
|
||||
const showEditAction = agent => {
|
||||
return currentUserId.value !== agent.id;
|
||||
};
|
||||
|
||||
const showDeleteAction = agent => {
|
||||
if (currentUserId.value === agent.id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!agent.confirmed) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (agent.role === 'administrator') {
|
||||
return verifiedAdministrators.value.length !== 1;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
const showAlertMessage = message => {
|
||||
loading.value[currentAgent.value.id] = false;
|
||||
currentAgent.value = {};
|
||||
agentAPI.value.message = message;
|
||||
useAlert(message);
|
||||
};
|
||||
|
||||
const openAddPopup = () => {
|
||||
showAddPopup.value = true;
|
||||
};
|
||||
const hideAddPopup = () => {
|
||||
showAddPopup.value = false;
|
||||
};
|
||||
|
||||
const openEditPopup = agent => {
|
||||
showEditPopup.value = true;
|
||||
currentAgent.value = agent;
|
||||
};
|
||||
const hideEditPopup = () => {
|
||||
showEditPopup.value = false;
|
||||
};
|
||||
|
||||
const openDeletePopup = agent => {
|
||||
showDeletePopup.value = true;
|
||||
currentAgent.value = agent;
|
||||
};
|
||||
const closeDeletePopup = () => {
|
||||
showDeletePopup.value = false;
|
||||
};
|
||||
|
||||
const deleteAgent = async id => {
|
||||
try {
|
||||
await store.dispatch('agents/delete', id);
|
||||
showAlertMessage(t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
|
||||
} catch (error) {
|
||||
showAlertMessage(t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
|
||||
}
|
||||
};
|
||||
const confirmDeletion = () => {
|
||||
loading.value[currentAgent.value.id] = true;
|
||||
closeDeletePopup();
|
||||
deleteAgent(currentAgent.value.id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 p-4 overflow-auto">
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
icon="add-circle"
|
||||
@click="openAddPopup()"
|
||||
>
|
||||
{{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
|
||||
</woot-button>
|
||||
|
||||
<!-- List Agents -->
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-full lg:w-3/5">
|
||||
<woot-loading-state
|
||||
v-if="uiFlags.isFetching"
|
||||
:message="$t('AGENT_MGMT.LOADING')"
|
||||
/>
|
||||
<div v-else>
|
||||
<p v-if="!agentList.length">
|
||||
{{ $t('AGENT_MGMT.LIST.404') }}
|
||||
</p>
|
||||
<table v-else class="woot-table">
|
||||
<tbody>
|
||||
<tr v-for="(agent, index) in agentList" :key="agent.email">
|
||||
<!-- Gravtar Image -->
|
||||
<td>
|
||||
<Thumbnail
|
||||
:src="agent.thumbnail"
|
||||
:username="agent.name"
|
||||
size="40px"
|
||||
:status="agent.availability_status"
|
||||
/>
|
||||
</td>
|
||||
<!-- Agent Name + Email -->
|
||||
<td>
|
||||
<span class="agent-name">
|
||||
<SettingsLayout
|
||||
:is-loading="uiFlags.isFetching"
|
||||
:loading-message="$t('AGENT_MGMT.LOADING')"
|
||||
:no-records-found="!agentList.length"
|
||||
:no-records-message="$t('AGENT_MGMT.LIST.404')"
|
||||
>
|
||||
<template #header>
|
||||
<BaseSettingsHeader
|
||||
:title="$t('AGENT_MGMT.HEADER')"
|
||||
:description="$t('AGENT_MGMT.DESCRIPTION')"
|
||||
:link-text="$t('AGENT_MGMT.LEARN_MORE')"
|
||||
feature-name="agents"
|
||||
>
|
||||
<template #actions>
|
||||
<woot-button
|
||||
class="button nice rounded-md"
|
||||
icon="add-circle"
|
||||
@click="openAddPopup"
|
||||
>
|
||||
{{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
|
||||
</woot-button>
|
||||
</template>
|
||||
</BaseSettingsHeader>
|
||||
</template>
|
||||
<template #body>
|
||||
<table class="divide-y divide-slate-75 dark:divide-slate-700">
|
||||
<tbody
|
||||
class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<tr v-for="(agent, index) in agentList" :key="agent.email">
|
||||
<td class="py-4 ltr:pr-4 rtl:pl-4">
|
||||
<div class="flex items-center flex-row gap-4">
|
||||
<Thumbnail
|
||||
:src="agent.thumbnail"
|
||||
:username="agent.name"
|
||||
size="40px"
|
||||
:status="agent.availability_status"
|
||||
/>
|
||||
<div>
|
||||
<span class="block font-medium capitalize">
|
||||
{{ agent.name }}
|
||||
</span>
|
||||
<span>{{ agent.email }}</span>
|
||||
</td>
|
||||
<!-- Agent Role + Verification Status -->
|
||||
<td>
|
||||
<span class="agent-name">
|
||||
{{
|
||||
$t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`)
|
||||
}}
|
||||
</span>
|
||||
<span v-if="agent.confirmed">
|
||||
{{ $t('AGENT_MGMT.LIST.VERIFIED') }}
|
||||
</span>
|
||||
<span v-if="!agent.confirmed">
|
||||
{{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
|
||||
</span>
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td>
|
||||
<div class="button-wrapper">
|
||||
<woot-button
|
||||
v-if="showEditAction(agent)"
|
||||
v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
|
||||
variant="smooth"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
icon="edit"
|
||||
class-names="grey-btn"
|
||||
@click="openEditPopup(agent)"
|
||||
/>
|
||||
<woot-button
|
||||
v-if="showDeleteAction(agent)"
|
||||
v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
|
||||
variant="smooth"
|
||||
color-scheme="alert"
|
||||
size="tiny"
|
||||
icon="dismiss-circle"
|
||||
class-names="grey-btn"
|
||||
:is-loading="loading[agent.id]"
|
||||
@click="openDeletePopup(agent, index)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden w-1/3 lg:block">
|
||||
<span
|
||||
v-dompurify-html="
|
||||
useInstallationName(
|
||||
$t('AGENT_MGMT.SIDEBAR_TXT'),
|
||||
globalConfig.installationName
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add Agent -->
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="py-4 ltr:pr-4 rtl:pl-4">
|
||||
<span class="block font-medium capitalize">
|
||||
{{ $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4 ltr:pr-4 rtl:pl-4">
|
||||
<span v-if="agent.confirmed">
|
||||
{{ $t('AGENT_MGMT.LIST.VERIFIED') }}
|
||||
</span>
|
||||
<span v-if="!agent.confirmed">
|
||||
{{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4">
|
||||
<div class="flex justify-end gap-1">
|
||||
<woot-button
|
||||
v-if="showEditAction(agent)"
|
||||
v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
|
||||
variant="smooth"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
icon="edit"
|
||||
class-names="grey-btn"
|
||||
@click="openEditPopup(agent)"
|
||||
/>
|
||||
<woot-button
|
||||
v-if="showDeleteAction(agent)"
|
||||
v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
|
||||
variant="smooth"
|
||||
color-scheme="alert"
|
||||
size="tiny"
|
||||
icon="dismiss-circle"
|
||||
class-names="grey-btn"
|
||||
:is-loading="loading[agent.id]"
|
||||
@click="openDeletePopup(agent, index)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
|
||||
<AddAgent :on-close="hideAddPopup" />
|
||||
</woot-modal>
|
||||
<!-- Edit Agent -->
|
||||
|
||||
<woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
|
||||
<EditAgent
|
||||
v-if="showEditPopup"
|
||||
@@ -236,7 +214,7 @@ export default {
|
||||
:on-close="hideEditPopup"
|
||||
/>
|
||||
</woot-modal>
|
||||
<!-- Delete Agent -->
|
||||
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeletePopup"
|
||||
:on-close="closeDeletePopup"
|
||||
@@ -247,5 +225,5 @@ export default {
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
const SettingsContent = () => import('../Wrapper.vue');
|
||||
const SettingsWrapper = () => import('../SettingsWrapper.vue');
|
||||
const AgentHome = () => import('./Index.vue');
|
||||
|
||||
export default {
|
||||
routes: [
|
||||
{
|
||||
path: frontendURL('accounts/:accountId/settings/agents'),
|
||||
component: SettingsContent,
|
||||
component: SettingsWrapper,
|
||||
props: {
|
||||
headerTitle: 'AGENT_MGMT.HEADER',
|
||||
icon: 'people',
|
||||
|
||||
Reference in New Issue
Block a user