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

feat: Update the design for teams (#9899)

Browse Source 
This PR updates the design for the team listing page. This PR is part of the design revamp project for all the settings pages.

Co-authored-by: Sojan Jose <sojan@pepalo.com>
This commit is contained in:
Pranav
2024-08-06 17:26:23 -07:00
committed by GitHub
parent cb4ad28a13
commit e330c2f6c0
3 changed files with 153 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/dashboard/i18n/locale/en/teamsSettings.json
View File

@@ -2,7 +2,9 @@
"TEAMS_SETTINGS": {
"NEW_TEAM": "Create new team",
"HEADER": "Teams",
"SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
"LOADING": "Fetching teams",
"DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
"LEARN_MORE": "Learn more about teams",
"LIST": {
"404": "There are no teams created on this account.",
"EDIT_TEAM": "Edit team"
@@ -85,7 +87,6 @@
"BUTTON_TEXT": "Add agents",
"AGENT_VALIDATION_ERROR": "Select at least one agent."
},
"FINISH": {
"TITLE": "Your team is ready!",
"MESSAGE": "You can now collaborate as a team on conversations. Happy supporting ",
@@ -98,7 +99,7 @@
"ERROR_MESSAGE": "Couldn't delete the team. Try again."
},
"CONFIRM": {
"TITLE": "Are you sure want to delete - %{teamName}",
"TITLE": "Are you sure you want to delete the team?",
"PLACE_HOLDER": "Please type {teamName} to confirm",
"MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
"YES": "Delete ",

265
app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
View File

@@ -1,143 +1,146 @@
<script>
import { mapGetters } from 'vuex';
<script setup>
import { useAlert } from 'dashboard/composables';
import { useAdmin } from 'dashboard/composables/useAdmin';
import accountMixin from '../../../../mixins/account';
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
import { computed, ref } from 'vue';
export default {
components: {},
mixins: [accountMixin],
setup() {
const { isAdmin } = useAdmin();
return {
isAdmin,
};
},
data() {
return {
loading: {},
showSettings: false,
showDeletePopup: false,
selectedTeam: {},
};
},
computed: {
...mapGetters({
teamsList: 'teams/getTeams',
globalConfig: 'globalConfig/get',
}),
deleteConfirmText() {
return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${
this.selectedTeam.name
}`;
},
deleteRejectText() {
return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.NO');
},
confirmDeleteTitle() {
return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
teamName: this.selectedTeam.name,
});
},
confirmPlaceHolderText() {
return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
teamName: this.selectedTeam.name,
})}`;
},
},
methods: {
async deleteTeam({ id }) {
try {
await this.$store.dispatch('teams/delete', id);
useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
} catch (error) {
useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
}
},
import { useStoreGetters, useStore } from 'dashboard/composables/store';
import { useI18n } from 'dashboard/composables/useI18n';
confirmDeletion() {
this.deleteTeam(this.selectedTeam);
this.closeDelete();
},
openDelete(team) {
this.showDeletePopup = true;
this.selectedTeam = team;
},
closeDelete() {
this.showDeletePopup = false;
this.selectedTeam = {};
},
},
const store = useStore();
const { t } = useI18n();
const getters = useStoreGetters();
const teamsList = computed(() => getters['teams/getTeams'].value);
const uiFlags = computed(() => getters['teams/getUIFlags'].value);
const { isAdmin } = useAdmin();
const loading = ref({});
const deleteTeam = async ({ id }) => {
try {
loading.value[id] = true;
await store.dispatch('teams/delete', id);
useAlert(t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
} catch (error) {
useAlert(t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
} finally {
loading.value[id] = false;
}
};
const showDeletePopup = ref(false);
const selectedTeam = ref({});
const openDelete = team => {
showDeletePopup.value = true;
selectedTeam.value = team;
};
const closeDelete = () => {
showDeletePopup.value = false;
selectedTeam.value = {};
};
const confirmDeletion = () => {
deleteTeam(selectedTeam.value);
closeDelete();
};
const deleteConfirmText = computed(
() => `${t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${selectedTeam.value.name}`
);
const deleteRejectText = computed(() => t('TEAMS_SETTINGS.DELETE.CONFIRM.NO'));
const confirmDeleteTitle = computed(() =>
t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
teamName: selectedTeam.value.name,
})
);
const confirmPlaceHolderText = computed(() =>
t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
teamName: selectedTeam.value.name,
})
);
</script>
<template>
<div class="flex-1 overflow-auto">
<div class="flex flex-row gap-4 p-8">
<div class="w-full md:w-3/5">
<p
v-if="!teamsList.length"
class="flex flex-col items-center justify-center h-full"
<BaseSettingsHeader
:title="$t('TEAMS_SETTINGS.HEADER')"
:description="$t('TEAMS_SETTINGS.DESCRIPTION')"
:link-text="$t('TEAMS_SETTINGS.LEARN_MORE')"
feature-name="team_management"
>
<template #actions>
<router-link
v-if="isAdmin"
:to="{ name: 'settings_teams_new' }"
class="button rounded-md primary"
>
{{ $t('TEAMS_SETTINGS.LIST.404') }}
<router-link
v-if="isAdmin"
:to="addAccountScoping('settings/teams/new')"
>
<fluent-icon icon="add-circle" />
<span class="button__content">
{{ $t('TEAMS_SETTINGS.NEW_TEAM') }}
</router-link>
</p>
</span>
</router-link>
</template>
</BaseSettingsHeader>
<div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
<woot-loading-state
v-if="uiFlags.isFetching"
:message="$t('TEAMS_SETTINGS.LOADING')"
/>
<p
v-else-if="!teamsList.length"
class="flex flex-col items-center justify-center h-full text-base p-8"
>
{{ $t('TEAMS_SETTINGS.LIST.404') }}
</p>
<table v-if="teamsList.length" class="woot-table">
<tbody>
<tr v-for="item in teamsList" :key="item.id">
<td>
<span class="agent-name">{{ item.name }}</span>
<p>{{ item.description }}</p>
</td>
<table
v-else
class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
>
<tbody class="divide-y divide-slate-50 dark:divide-slate-800">
<tr v-for="team in teamsList" :key="team.id">
<td class="py-4 pr-4">
<span class="block font-medium capitalize">{{ team.name }}</span>
<p class="mb-0">{{ team.description }}</p>
</td>
<td>
<div class="button-wrapper">
<router-link
:to="addAccountScoping(`settings/teams/${item.id}/edit`)"
>
<woot-button
v-if="isAdmin"
v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
variant="smooth"
size="tiny"
color-scheme="secondary"
class-names="grey-btn"
icon="settings"
/>
</router-link>
<woot-button
v-if="isAdmin"
v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle"
class-names="grey-btn"
:is-loading="loading[item.id]"
@click="openDelete(item)"
/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="hidden w-1/3 md:block">
<span
v-dompurify-html="
$t('TEAMS_SETTINGS.SIDEBAR_TXT', {
installationName: globalConfig.installationName,
})
"
/>
</div>
<td class="py-4 flex justify-end gap-1">
<router-link
:to="{
name: 'settings_teams_edit',
params: { teamId: team.id },
}"
>
<woot-button
v-if="isAdmin"
v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
variant="smooth"
size="tiny"
color-scheme="secondary"
class-names="grey-btn"
icon="settings"
/>
</router-link>
<woot-button
v-if="isAdmin"
v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle"
class-names="grey-btn"
:is-loading="loading[team.id]"
@click="openDelete(team)"
/>
</td>
</tr>
</tbody>
</table>
</div>
<woot-confirm-delete-modal
v-if="showDeletePopup"
@@ -153,11 +156,3 @@ export default {
/>
</div>
</template>
<style lang="scss" scoped>
.button-wrapper {
min-width: unset;
justify-content: flex-end;
padding-right: var(--space-large);
}
</style>

33
app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
View File

@@ -1,6 +1,6 @@
/* eslint arrow-body-style: 0 */
import { frontendURL } from '../../../../helper/URLHelper';
const TeamsIndex = () => import('./Index.vue');
const CreateStepWrap = () => import('./Create/Index.vue');
const EditStepWrap = () => import('./Edit/Index.vue');
const CreateTeam = () => import('./Create/CreateTeam.vue');
@@ -9,23 +9,13 @@ const AddAgents = () => import('./Create/AddAgents.vue');
const EditAgents = () => import('./Edit/EditAgents.vue');
const FinishSetup = () => import('./FinishSetup.vue');
const SettingsContent = () => import('../Wrapper.vue');
const TeamsHome = () => import('./Index.vue');
const SettingsWrapper = () => import('../SettingsWrapper.vue');
export default {
routes: [
{
path: frontendURL('accounts/:accountId/settings/teams'),
component: SettingsContent,
props: params => {
const showBackButton = params.name !== 'settings_teams_list';
return {
headerTitle: 'TEAMS_SETTINGS.HEADER',
headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
icon: 'people-team',
newButtonRoutes: ['settings_teams_new'],
showBackButton,
};
},
component: SettingsWrapper,
children: [
{
path: '',
@@ -34,11 +24,26 @@ export default {
{
path: 'list',
name: 'settings_teams_list',
component: TeamsHome,
component: TeamsIndex,
meta: {
permissions: ['administrator'],
},
},
],
},
{
path: frontendURL('accounts/:accountId/settings/teams'),
component: SettingsContent,
props: () => {
return {
headerTitle: 'TEAMS_SETTINGS.HEADER',
headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
icon: 'people-team',
newButtonRoutes: ['settings_teams_new'],
showBackButton: true,
};
},
children: [
{
path: 'new',
component: CreateStepWrap,