MT#54808 Calls to Voicebox signed differently on Call list and Dashboard

Change-Id: I4676be1a3911694e222a2a2f381602f4dfb37ec3

src/components/pages/Conversations/CscCallItem.vue

@@ -1,5 +1,7 @@
 <template>
-    <q-item>
+    <q-item
+        :class="sleekMode ? 'csc-call-item-sleek-mode' : ''"
+    >
         <q-item-section
             side
             top
@@ -28,6 +30,7 @@
                 {{ $t('Duration') }}: {{ call.duration }}
             </q-item-label>
             <q-item-label
+                v-if="!sleekMode"
                 caption
             >
                 <span>
@@ -44,6 +47,7 @@
             </q-item-label>
         </q-item-section>
         <q-item-section
+            v-if="!sleekMode"
             side
         >
             <csc-more-menu>
@@ -113,6 +117,10 @@ export default {
         blockBothPossible: {
             type: Boolean,
             default: false
+        },
+        sleekMode: {
+            type: Boolean,
+            default: false
         }
     },
     data () {
@@ -185,4 +193,6 @@ export default {
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+    .csc-call-item-sleek-mode
+        padding 2px !important
 </style>

src/components/pages/Dashboard/CscCardDashboard.vue

@@ -49,12 +49,16 @@
         />
 
         <q-card-section
-            class="csc-card-list"
+            class="csc-card-list">
-        >
+
             <q-list
                 v-for="(item, index) in itemsList"
                 :key="item.id"
             >
+                <template v-if="useSlot">
+                    <slot name="listItems" :call="item.call" :index="index"></slot>
+                </template>
+                <template v-else>
                     <q-item>
                         <q-item-section avatar>
                             <q-icon
@@ -84,7 +88,9 @@
                                 {{ item.extra_text }}
                             </q-item-label>
                         </q-item-section>
+
                     </q-item>
+                </template>
                 <q-separator
                     v-if="index !== itemsList.length-1"
                     spaced
@@ -111,7 +117,7 @@
         />
 
         <q-card-section
-            class="text-center"
+            class="csc-card-footer text-center justify-center"
         >
             <q-btn
                 color="primary"
@@ -119,6 +125,7 @@
                 flat
                 :label="buttonTitle"
                 :to="routeTo"
+                class="vertical-middle  justify-center"
             />
         </q-card-section>
     </q-card>
@@ -169,6 +176,10 @@ export default {
         noItemsMessage: {
             type: String,
             default: ''
+        },
+        useSlot: {
+            type: Boolean,
+            default: false
         }
     }
 }
@@ -186,5 +197,8 @@ export default {
         padding-bottom: 22px
 
     .csc-card-list
-        min-height: 359px
+        height: 400px
+
+    .csc-card-footer
+        height: 80px
 </style>

src/pages/CscPageDashboard.vue

@@ -27,7 +27,18 @@
             :loading="$wait.is('getCallsData')"
             :error="callsError"
             data-cy="dashboard-view-calllist"
+            :use-slot=true
+        >
+            <template
+                v-slot:listItems="{call}"
+            >
+                <csc-call-item
+                    :call="call"
+                    :call-available="callAvailable"
+                    :sleek-mode=true
                 />
+            </template>
+        </csc-card-dashboard>
         <csc-card-dashboard
             :title="$t('Registered Devices')"
             :count="registeredDevicesCount"
@@ -45,6 +56,7 @@
 
 <script>
 import CscCardDashboard from 'components/pages/Dashboard/CscCardDashboard'
+import CscCallItem from 'components/pages/Conversations/CscCallItem'
 import CscPage from 'components/CscPage'
 import { mapWaitingActions } from 'vue-wait'
 import {
@@ -63,7 +75,8 @@ export default {
     name: 'CscPageDashboard',
     components: {
         CscCardDashboard,
-        CscPage
+        CscPage,
+        CscCallItem
     },
     data () {
         return {
@@ -119,14 +132,15 @@ export default {
                 showGlobalError(calls?.reason?.data?.message)
             } else {
                 this.callsCount = calls.value.totalCount
-                this.callItems = calls.value.items.map((item) => {
+                this.callItems = calls.value.items.slice(0, 5).map((item) => {
                     return {
                         id: item.id,
                         icon: { name: callIcon(item), color: callIconColor(item) },
                         clickable_icon: false,
                         title: this.checkTitleToShow(item),
                         sub_title: date.formatDate(item.start_time, INTERNAL_DATE_FORMAT_DASH_HOUR),
-                        extra_text: item.duration.split('.')[0]
+                        extra_text: item.duration.split('.')[0],
+                        call: item
                     }
                 })
             }