TT#24843 Implement call action button

Change-Id: I433a0ebccd84c8926202d67c9b3284edcf869620

TESTDATA.md

@@ -67,10 +67,10 @@ Should be created using an xmpp client authenticating as subscribers, but have n
 
 ## MOCK DATA
 
-You can also use mock data in src/api/conversations.js, replacing the resolve() with this:
+You can also use mock data in src/api/conversations.js, replacing the jsonBody variable with this:
 
 `
-resolve(
+let jsonBody = getJsonBody(
     {
       "_embedded": {
         "ngcp:conversations": [
@@ -157,5 +157,5 @@ resolve(
       },
       "total_count": 4
     }
-);
+)
 `

src/components/Login.vue

@@ -11,7 +11,7 @@
                     <q-card-main>
                         <q-field icon="fa-user-circle" :helper="$t('pages.login.username_helper')" :count="128">
                             <q-input type="text" max-length="128" :float-label="$t('pages.login.username')"
-                                     clearable v-model="username" @keyup.enter="login()"/>
+                                     autofocus clearable v-model="username" @keyup.enter="login()"/>
                         </q-field>
                         <q-field icon="fa-lock" :helper="$t('pages.login.password_helper')" :count="32">
                             <q-input type="password" max-length="32" :float-label="$t('pages.login.password')"

src/components/pages/Conversations.vue

@@ -1,7 +1,8 @@
 <template>
     <csc-page :title="$t('pages.conversations.title')">
         <q-infinite-scroll :handler="loadMore" :offset=1 ref="infinite">
-            <q-card v-for="conversation in conversations" :key="conversation.caller"
+            <q-card v-for="(conversation, index) in conversations"
+                :key="conversation.caller"
                 class="conversation-card">
                 <csc-collapsible :icon="getCollapsibleIcons(conversation)"
                     :label="getCollapsibleLabel(conversation)"
@@ -10,7 +11,19 @@
                 <div v-if="hasCallOption(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-btn>
+                        <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()">
+                                        {{ $t('pages.conversations.buttons.audioCall') }}
+                                    </q-item>
+                                    <q-item @click="call(conversation, 'audioVideo'), $refs.popover[index].close()">
+                                        {{ $t('pages.conversations.buttons.videoCall') }}
+                                    </q-item>
+                                </q-list>
+                              </q-popover>
+                        </q-btn>
                     </q-card-actions>
                 </div>
             </q-card>
@@ -24,8 +37,8 @@
 <script>
     import CscPage from '../CscPage'
     import CscCollapsible from '../card/CscCollapsible'
-    import { QBtn, QCardActions, QCard,
+    import { QBtn, QCardActions, QCard, QCardSeparator, QInfiniteScroll,
-        QCardSeparator, QInfiniteScroll, QSpinnerDots } from 'quasar-framework'
+        QPopover, QList, QItem, QSpinnerDots } from 'quasar-framework'
     export default {
         data () {
             return {
@@ -39,6 +52,9 @@
             QCardSeparator,
             CscCollapsible,
             QInfiniteScroll,
+            QPopover,
+            QList,
+            QItem,
             QSpinnerDots
         },
         computed: {
@@ -47,8 +63,15 @@
             }
         },
         methods: {
+            call(conversation, localMedia) {
+                let number = conversation.direction == 'out' ?
+                    conversation.callee : conversation.caller;
+                this.$store.dispatch('call/start',
+                    { number: number, localMedia: localMedia });
+            },
             loadMore(index, done) {
-                this.$store.dispatch('conversations/loadConversations').then(() => {
+                this.$store.dispatch('conversations/loadConversations')
+                    .then(() => {
                         done();
                     }).catch((err) => {
                         done();
@@ -81,9 +104,12 @@
                 };
             },
             getCollapsibleLabel(item) {
-                let prefix = item.status == 'ok' ? this.$t('pages.conversations.labels.successful')
+                let prefix = item.status == 'ok' ?
+                    this.$t('pages.conversations.labels.successful')
                     : this.$t('pages.conversations.labels.unsuccessful');
-                let direction = item.direction == 'in' ? this.$t('pages.conversations.labels.from') : this.$t('pages.conversations.labels.to');
+                let direction = item.direction == 'in' ?
+                    this.$t('pages.conversations.labels.from') :
+                    this.$t('pages.conversations.labels.to');
                 return `${prefix} ${item.type} ${direction} ${item.caller}`;
             }
         }

src/locales/en.json

@@ -90,7 +90,9 @@
                 "to": "to"
             },
             "buttons": {
-                "call": "CALL"
+                "call": "CALL",
+                "audioCall": "Audio Call",
+                "videoCall": "Video Call"
             }
         },
         "reminder": {

src/store/call.js

@@ -164,7 +164,11 @@ export default {
          * @param options.number
          */
         start(context, options) {
+            console.log('start()');
+            console.log('options.number is', options.number, 'and options.localMedia is', options.localMedia);
+            context.commit('layout/showRight', null, { root: true });
             Vue.call.createLocalMedia(options.localMedia).then((localMediaStream)=>{
+                console.log('Vue.call.createLocalMediai()');
                 var call = Vue.call.start(options.number, localMediaStream);
                 call.onAccepted(()=>{
                     }).onEnded(()=>{