Filter for live conversations

app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue

@@ -1,28 +1,13 @@
 <template>
   <div class="flex-1 overflow-auto p-4">
     <div class="row">
-      <div class="column small-12 medium-8 conversation-metric">
+      <open-conversations />
+
+      <div class="column small-12 medium-4 flex">
         <metric-card
-          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
-          :is-loading="uiFlags.isFetchingAccountConversationMetric"
-          :loading-message="
-            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-          "
+          :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')"
+          class="flex-1"
         >
-          <div
-            v-for="(metric, name, index) in conversationMetrics"
-            :key="index"
-            class="metric-content column"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </div>
-      <div class="column small-12 medium-4">
-        <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
           <div
             v-for="(metric, name, index) in agentStatusMetrics"
             :key="index"
@@ -79,20 +64,22 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import OpenConversations from './components/LiveReports/OpenConversations.vue';
 import AgentTable from './components/overview/AgentTable.vue';
 import TeamTable from './components/overview/TeamTable.vue';
 import MetricCard from './components/overview/MetricCard.vue';
-import { OVERVIEW_METRICS } from './constants';
 import ReportHeatmap from './components/Heatmap.vue';
 
 import endOfDay from 'date-fns/endOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
 import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
+import { OVERVIEW_METRICS } from './constants';
 
 export default {
   name: 'LiveReports',
   components: {
+    OpenConversations,
     TeamTable,
     AgentTable,
     MetricCard,
@@ -108,7 +95,6 @@ export default {
       agentStatus: 'agents/getAgentStatus',
       agents: 'agents/getAgents',
       teams: 'teams/getTeams',
-      accountConversationMetric: 'getAccountConversationMetric',
       agentConversationMetric: 'getAgentConversationMetric',
       teamConversationMetric: 'getTeamConversationMetric',
       accountConversationHeatmap: 'getAccountConversationHeatmapData',
@@ -124,16 +110,6 @@ export default {
       });
       return metric;
     },
-    conversationMetrics() {
-      let metric = {};
-      Object.keys(this.accountConversationMetric).forEach(key => {
-        const metricName = this.$t(
-          `OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.${OVERVIEW_METRICS[key]}`
-        );
-        metric[metricName] = this.accountConversationMetric[key];
-      });
-      return metric;
-    },
   },
   mounted() {
     this.$store.dispatch('agents/get');
@@ -146,7 +122,6 @@ export default {
   },
   methods: {
     fetchAllData() {
-      this.$store.dispatch('fetchLiveConversationMetric');
       this.$store.dispatch('fetchAgentConversationMetric');
       this.$store.dispatch('fetchTeamConversationMetric');
       this.fetchHeatmapData();

app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue

@@ -1,19 +1,27 @@
 <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')"
-  />
+  <div class="overflow-auto">
+    <metric-card :is-live="false" header="Team wise reports" />
+    <metric-card :is-live="false" header="Team wise reports">
+      <woot-reports
+        key="team-reports"
+        class="!p-0"
+        type="team"
+        getter-key="teams/getTeams"
+        action-key="teams/get"
+        :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+      />
+    </metric-card>
+  </div>
 </template>
 
 <script>
 import WootReports from './components/WootReports.vue';
+import MetricCard from './components/overview/MetricCard.vue';
 
 export default {
   components: {
     WootReports,
+    MetricCard,
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue

@@ -0,0 +1,79 @@
+<script>
+import { mapGetters } from 'vuex';
+import { OVERVIEW_METRICS } from '../../constants';
+import MetricCard from '../overview/MetricCard.vue';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+
+export default {
+  components: {
+    MultiselectDropdown,
+    MetricCard,
+  },
+  data() {
+    return {
+      selectedTeam: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      teams: 'teams/getTeams',
+      accountConversationMetric: 'getAccountConversationMetric',
+      uiFlags: 'getOverviewUIFlags',
+    }),
+    conversationMetrics() {
+      let metric = {};
+      Object.keys(this.accountConversationMetric).forEach(key => {
+        const metricName = this.$t(
+          `OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.${OVERVIEW_METRICS[key]}`
+        );
+        metric[metricName] = this.accountConversationMetric[key];
+      });
+      return metric;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('fetchLiveConversationMetric');
+  },
+  methods: {
+    onSelectTeam(team) {
+      this.$store.dispatch('fetchLiveConversationMetric', { team_id: team.id });
+      this.selectedTeam = team;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="column small-12 medium-8 conversation-metric">
+    <metric-card
+      class="overflow-visible"
+      :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
+      :is-loading="uiFlags.isFetchingAccountConversationMetric"
+      loading-message="Loading metrics"
+    >
+      <template #control>
+        <multiselect-dropdown
+          class="!mb-0 !w-1/2"
+          :options="teams"
+          :selected-item="selectedTeam"
+          multiselector-title=""
+          multiselector-placeholder="Select a team"
+          no-search-result="No teams found"
+          input-placeholder="Search for a team"
+          :is-filter="true"
+          @click="onSelectTeam"
+        />
+      </template>
+      <div
+        v-for="(metric, name, index) in conversationMetrics"
+        :key="index"
+        class="metric-content column"
+      >
+        <h3 class="heading">
+          {{ name }}
+        </h3>
+        <p class="metric">{{ metric }}</p>
+      </div>
+    </metric-card>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue

@@ -4,7 +4,7 @@
       <slot name="header">
         <div class="card-header--title-area">
           <h5>{{ header }}</h5>
-          <span class="live">
+          <span v-if="isLive" class="live">
             <span class="ellipse" /><span>{{
               $t('OVERVIEW_REPORTS.LIVE')
             }}</span>
@@ -15,7 +15,7 @@
         </div>
       </slot>
     </div>
-    <div v-if="!isLoading" class="card-body row">
+    <div v-if="!isLoading" class="card-body row" :class="!isLive ? 'px-0' : ''">
       <slot />
     </div>
     <div v-else-if="isLoading" class="conversation-metric-loader">
@@ -33,6 +33,10 @@ export default {
     Spinner,
   },
   props: {
+    isLive: {
+      type: Boolean,
+      default: true,
+    },
     header: {
       type: String,
       default: '',
@@ -45,6 +49,10 @@ export default {
       type: String,
       default: '',
     },
+    isFilter: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -95,9 +103,11 @@ export default {
 .card-body {
   .metric-content {
     @apply pb-2;
+
     .heading {
       @apply text-base text-slate-700 dark:text-slate-100;
     }
+
     .metric {
       @apply text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1;
     }