TT#25261 Show call data in collapsible

What has been done:
- TT#25261, Conversation: As a Customer, I want to see a Call and it's
  details
- TT#25257, Conversation: As a Customer, I want to see VoiceMails

Change-Id: Ied64b894fd05623298546d1075a3622f114cad0c

src/components/card/CscCollapsible.vue

@@ -3,6 +3,7 @@
         <q-collapsible :icon="icon"
             :label="label"
             :sublabel="sublabel">
+            <slot></slot>
         </q-collapsible>
     </div>
 </template>
@@ -34,4 +35,10 @@
             color black
             font-size 18px
             font-weight 400
+        ul
+            list-style none
+            font-size 1rem
+            line-height 2rem
+            strong
+                font-weight 500
 </style>

src/components/pages/Conversations.vue

@@ -7,18 +7,35 @@
                 <csc-collapsible :icon="getCollapsibleIcons(conversation)"
                     :label="getCollapsibleLabel(conversation)"
                     :sublabel="conversation.start_time | readableDate">
+                    <div v-if="isCall(conversation.type) || isVoicemail(conversation.type)">
+                        <ul>
+                            <li><strong>
+                                    {{ $t('pages.conversations.card.date') }}:
+                                </strong> {{ conversation.start_time }}</li>
+                            <li>
+                                <strong>
+                                    {{ $t('pages.conversations.card.duration') }}:
+                                </strong> {{ conversation.duration }}</li>
+                            <li v-if="isVoicemail(conversation.type)">
+                                <strong>
+                                    {{ $t('pages.conversations.card.folder') }}:
+                                </strong> {{ conversation.folder }}</li>
+                        </ul>
+                    </div>
                 </csc-collapsible>
-                <div v-if="hasCallOption(conversation.type)">
+                <div v-if="!isFax(conversation.type)">
                     <q-card-separator />
                     <q-card-actions align="center">
                         <q-btn flat round small color="primary" icon="call">
                             {{ $t('pages.conversations.buttons.call') }}
                             <q-popover ref="popover">
                                 <q-list separator link>
-                                    <q-item @click="call(conversation, 'audioOnly'), $refs.popover[index].close()">
+                                    <q-item @click="call(conversation,
+                                        'audioOnly'), $refs.popover[index].close()">
                                         {{ $t('pages.conversations.buttons.audioCall') }}
                                     </q-item>
-                                    <q-item @click="call(conversation, 'audioVideo'), $refs.popover[index].close()">
+                                    <q-item @click="call(conversation,
+                                        'audioVideo'), $refs.popover[index].close()">
                                         {{ $t('pages.conversations.buttons.videoCall') }}
                                     </q-item>
                                 </q-list>
@@ -78,10 +95,6 @@
                         this.$refs.infinite.stop();
                     });
             },
-            hasCallOption(type) {
-                return (['call', 'call forward', 'sms', 'voicemail']
-                    .indexOf(type) > -1);
-            },
             getCollapsibleIcons(item) {
                 let directionIcon = item.direction == 'out' ? 'call_made' :
                     'call_received';
@@ -111,6 +124,24 @@
                     this.$t('pages.conversations.labels.from') :
                     this.$t('pages.conversations.labels.to');
                 return `${prefix} ${item.type} ${direction} ${item.caller}`;
+            },
+            isCall(type) {
+                return type == 'call';
+            },
+            isVoicemail(type) {
+                return type == 'voicemail';
+            },
+            isFax(type) {
+                return type == 'fax';
+            },
+            isXmpp(type) {
+                return type == 'xmpp';
+            },
+            isSms(type) {
+                return type == 'sms';
+            },
+            isCallForward(type) {
+                return type == 'call forward';
             }
         }
     }

src/locales/en.json

@@ -93,6 +93,14 @@
                 "call": "CALL",
                 "audioCall": "Audio Call",
                 "videoCall": "Video Call"
+            },
+            "card": {
+                "date": "Date",
+                "duration": "Duration",
+                "folder": "Folder",
+                "pages": "Pages",
+                "cost": "Cost",
+                "message": "Message"
             }
         },
         "reminder": {

src/store/conversations.js

@@ -29,9 +29,9 @@ export default {
     },
     actions: {
         loadConversations(context) {
-            return new Promise((resolve, reject)=>{
+            return new Promise((resolve, reject) => {
                 getConversations(localStorage.getItem('subscriberId'), context.state.page, context.state.rows)
-                    .then((result)=>{
+                    .then(result => {
                         context.commit('loadConversations', result);
                         resolve();
                     })