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

feat: Add Reports for teams (#3116)

Browse Source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Fayaz Ahmed
2021-10-06 23:53:51 +05:30
committed by GitHub
parent 3e99088fe3
commit 1c6a539c0a
15 changed files with 240 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<woot-reports
key="team-reports"
type="team"
getter-key="teams/getTeams"
action-key="teams/get"
:download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
/>
</template>
<script>
import WootReports from './components/WootReports';
export default {
components: {
WootReports,
},
};
</script>

35
app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
View File

@@ -6,7 +6,7 @@
</p>
<multiselect
v-model="currentSelectedFilter"
:placeholder="$t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL')"
:placeholder="multiselectLabel"
label="name"
track-by="id"
:options="filterItemsList"
@@ -40,13 +40,13 @@
</template>
</multiselect>
</div>
<div v-if="type === 'label'" class="small-12 medium-3 pull-right">
<div v-else-if="type === 'label'" class="small-12 medium-3 pull-right">
<p aria-hidden="true" class="hide">
{{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
</p>
<multiselect
v-model="currentSelectedFilter"
:placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
:placeholder="multiselectLabel"
label="title"
track-by="id"
:options="filterItemsList"
@@ -59,11 +59,11 @@
<div
:style="{ backgroundColor: props.option.color }"
class="reports-option__rounded--item margin-right-small"
></div>
/>
<span class="reports-option__desc">
<span class="reports-option__title">{{
props.option.title
}}</span>
<span class="reports-option__title">
{{ props.option.title }}
</span>
</span>
</div>
</template>
@@ -78,15 +78,15 @@
"
></div>
<span class="reports-option__desc">
<span class="reports-option__title">{{
props.option.title
}}</span>
<span class="reports-option__title">
{{ props.option.title }}
</span>
</span>
</div>
</template>
</multiselect>
</div>
<div v-if="type === 'inbox'" class="small-12 medium-3 pull-right">
<div v-else class="small-12 medium-3 pull-right">
<p aria-hidden="true" class="hide">
{{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
</p>
@@ -94,7 +94,7 @@
v-model="currentSelectedFilter"
track-by="id"
label="name"
:placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
:placeholder="multiselectLabel"
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
deselect-label=""
@@ -185,12 +185,19 @@ export default {
const fromDate = subDays(new Date(), diff);
return this.fromCustomDate(fromDate);
},
multiselectLabel() {
const typeLabels = {
agent: this.$t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL'),
label: this.$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL'),
inbox: this.$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL'),
team: this.$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL'),
};
return typeLabels[this.type] || this.$t('FORMS.MULTISELECT.SELECT_ONE');
},
},
watch: {
filterItemsList(val) {
this.currentSelectedFilter = val[0];
},
currentSelectedFilter() {
this.changeFilterSelection();
},
},

24
app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
View File

@@ -15,8 +15,8 @@
@date-range-change="onDateRangeChange"
@filter-change="onFilterChange"
/>
<div v-if="selectedFilter">
<div class="row">
<div>
<div v-if="filterItemsList.length" class="row">
<woot-report-stats-card
v-for="(metric, index) in metrics"
:key="metric.NAME"
@@ -34,7 +34,10 @@
:message="$t('REPORT.LOADING_CHART')"
/>
<div v-else class="chart-container">
<woot-bar v-if="accountReport.data.length" :collection="collection" />
<woot-bar
v-if="accountReport.data.length && filterItemsList.length"
:collection="collection"
/>
<span v-else class="empty-state">
{{ $t('REPORT.NO_ENOUGH_DATA') }}
</span>
@@ -118,9 +121,15 @@ export default {
};
},
metrics() {
const reportKeys = [
'CONVERSATIONS',
'INCOMING_MESSAGES',
let reportKeys = ['CONVERSATIONS'];
// If report type is agent, we don't need to show
// incoming messages count, as there will not be any message
// sent by an agent which is incoming.
if (this.type !== 'agent') {
reportKeys.push('INCOMING_MESSAGES');
}
reportKeys = [
...reportKeys,
'OUTGOING_MESSAGES',
'FIRST_RESPONSE_TIME',
'RESOLUTION_TIME',
@@ -175,6 +184,9 @@ export default {
case 'inbox':
this.$store.dispatch('downloadInboxReports', { from, to, fileName });
break;
case 'team':
this.$store.dispatch('downloadTeamReports', { from, to, fileName });
break;
default:
break;
}

17
app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
View File

@@ -2,6 +2,7 @@ import Index from './Index';
import AgentReports from './AgentReports';
import LabelReports from './LabelReports';
import InboxReports from './InboxReports';
import TeamReports from './TeamReports';
import CsatResponses from './CsatResponses';
import SettingsContent from '../Wrapper';
import { frontendURL } from '../../../../helper/URLHelper';
@@ -97,5 +98,21 @@ export default {
},
],
},
{
path: frontendURL('accounts/:accountId/reports'),
component: SettingsContent,
props: {
headerTitle: 'TEAM_REPORTS.HEADER',
icon: 'ion-ios-people',
},
children: [
{
path: 'teams',
name: 'team_reports',
roles: ['administrator'],
component: TeamReports,
},
],
},
],
};