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">
-</style>
+    .csc-call-item-sleek-mode
+        padding 2px !important
+</style>

src/components/pages/Dashboard/CscCardDashboard.vue

@@ -49,42 +49,48 @@
         />
 
         <q-card-section
-            class="csc-card-list"
-        >
+            class="csc-card-list">
+
             <q-list
                 v-for="(item, index) in itemsList"
                 :key="item.id"
             >
-                <q-item>
-                    <q-item-section avatar>
-                        <q-icon
-                            v-if="!item.clickable_icon"
-                            :color="item.icon.color"
-                            clickable
-                            :name="item.icon.name"
-                        />
-                        <q-btn
-                            v-if="item.clickable_icon"
-                            flat
-                            :color="item.icon.color"
-                            :icon="item.icon.name"
-                            @click="$emit('action', item.id)"
-                        />
-                    </q-item-section>
+                <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
+                                v-if="!item.clickable_icon"
+                                :color="item.icon.color"
+                                clickable
+                                :name="item.icon.name"
+                            />
+                            <q-btn
+                                v-if="item.clickable_icon"
+                                flat
+                                :color="item.icon.color"
+                                :icon="item.icon.name"
+                                @click="$emit('action', item.id)"
+                            />
+                        </q-item-section>
 
-                    <q-item-section>
-                        <q-item-label>{{ item.title }}</q-item-label>
-                        <q-item-label caption>
-                            {{ item.sub_title }}
-                        </q-item-label>
-                    </q-item-section>
+                        <q-item-section>
+                            <q-item-label>{{ item.title }}</q-item-label>
+                            <q-item-label caption>
+                                {{ item.sub_title }}
+                            </q-item-label>
+                        </q-item-section>
 
-                    <q-item-section side>
-                        <q-item-label caption>
-                            {{ item.extra_text }}
-                        </q-item-label>
-                    </q-item-section>
-                </q-item>
+                        <q-item-section side>
+                            <q-item-label caption>
+                                {{ 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
                     }
                 })
             }