TT#20532 As a Customer, I want to download a single Fax

What has been done:
- TT#34559, Conversations: Implement error handling
- TT#34558, Conversations: Implement store action
- TT#34557, Conversations: Implement the download button
  in the vue component CscConversation
- TT#34550, Conversations: Implement download method in
  api layer

Change-Id: I10ea9b084b4f5a4fc8e1c9d22a0554e66fcdac84

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .thumbs.db
+.vscode
 node_modules/
 dist/
 npm-debug.log*

src/api/conversations.js

@@ -18,9 +18,6 @@ export function getConversations(id, page, rows) {
                         let inputString = `${item.type}${item.call_type}${item.id}`;
                         let id = crypto.createHash('sha256').update(inputString).digest('base64');
                         item._id = id;
-                        if (item._links['ngcp:voicemailrecordings']) {
-                            item.voicemail = item._links['ngcp:voicemailrecordings'].href;
-                        }
                         delete item._links;
                         if (item.type == 'call') {
                             item.type = item.call_type != 'call' ? 'callforward'
@@ -39,7 +36,6 @@ export function getConversations(id, page, rows) {
     });
 }
 
-
 export function downloadVoiceMail(id) {
     return new Promise((resolve, reject)=>{
         Vue.http.get('/api/voicemailrecordings/' + id, { responseType: 'blob' })
@@ -54,6 +50,20 @@ export function downloadVoiceMail(id) {
     });
 }
 
+export function downloadFax(id) {
+    return new Promise((resolve, reject)=>{
+        Vue.http.get('/api/faxrecordings/' + id, { responseType: 'blob' })
+            .then(res => {
+                return res.blob();
+            }).then(fax => {
+                saveAs(fax, "fax-" + id + '.tif');
+                resolve();
+            }).catch((err)=>{
+                reject(err);
+            });
+    });
+}
+
 
 
 

src/components/CscConversation.vue

@@ -50,7 +50,7 @@
                                 {{ $t('pages.conversations.buttons.videoCall') }}
                             </q-item>
                         </q-list>
-                      </q-popover>
+                    </q-popover>
                 </q-btn>
                 <q-btn v-if="isType('voicemail')" flat round small color="primary"
                     icon="play_arrow" @click="downloadVoiceMail(conversation.id)">
@@ -58,6 +58,15 @@
                 </q-btn>
             </q-card-actions>
         </div>
+        <div v-else-if="isType('fax')" slot="footer">
+            <q-card-separator />
+            <q-card-actions align="center">
+                <q-btn flat round small color="primary"
+                    icon="file_download" @click="downloadFax(conversation.id)">
+                    {{ $t('pages.conversations.buttons.download') }}
+                </q-btn>
+            </q-card-actions>
+        </div>
     </csc-card-collapsible>
 </template>
 
@@ -90,6 +99,9 @@
             downloadVoiceMail(id) {
                 this.$store.dispatch('conversations/downloadVoiceMail', id);
             },
+            downloadFax(id) {
+                this.$store.dispatch('conversations/downloadFax', id);
+            },
             call(localMedia) {
                 let conversation = this.conversation;
                 let number = conversation.direction == 'out' ?

src/components/pages/Conversations.vue

@@ -5,8 +5,11 @@
 </template>
 
 <script>
+    import { mapState } from 'vuex'
     import CscPage from '../CscPage'
     import CscConversations from '../CscConversations'
+    import { startLoading, stopLoading,
+        showGlobalError, showToast } from '../../helpers/ui'
     export default {
         data () {
             return {
@@ -17,8 +20,40 @@
             CscConversations
         },
         computed: {
-            conversations() {
-                return this.$store.state.conversations.conversations;
+            ...mapState('conversations', [
+                'conversations',
+                'downloadFaxState',
+                'downloadVoiceMailState',
+                'downloadFaxError',
+                'downloadVoiceMailError'
+            ])
+        },
+        watch: {
+            downloadVoiceMailState(state) {
+                if (state === 'requesting') {
+                    startLoading();
+                }
+                else if (state === 'failed') {
+                    stopLoading();
+                    showGlobalError(this.downloadVoiceMailError || this.$t('pages.conversations.downloadVoiceMailErrorMessage'));
+                }
+                else if (state === 'succeeded') {
+                    stopLoading();
+                    showToast(this.$t('pages.conversations.downloadVoiceMailSuccessMessage'));
+                }
+            },
+            downloadFaxState(state) {
+                if (state === 'requesting') {
+                    startLoading();
+                }
+                else if (state === 'failed') {
+                    stopLoading();
+                    showGlobalError(this.downloadFaxError || this.$t('pages.conversations.downloadFaxErrorMessage'));
+                }
+                else if (state === 'succeeded') {
+                    stopLoading();
+                    showToast(this.$t('pages.conversations.downloadFaxSuccessMessage'));
+                }
             }
         }
     }

src/locales/en.json

@@ -98,7 +98,8 @@
                 "call": "CALL",
                 "audioCall": "Audio Call",
                 "videoCall": "Video Call",
-                "play": "Play"
+                "play": "Play",
+                "download": "Download"
             },
             "card": {
                 "date": "Date",
@@ -107,7 +108,11 @@
                 "pages": "Pages",
                 "cost": "Cost",
                 "message": "Message"
-            }
+            },
+            "downloadVoiceMailSuccessMessage": "Voicemail downloaded successfully",
+            "downloadVoiceMailErrorMessage": "Downloading of voicemail failed",
+            "downloadFaxSuccessMessage": "Fax downloaded successfully",
+            "downloadFaxErrorMessage": "Downloading of fax failed"
         },
         "reminder": {
             "title": "Reminder",

src/store/conversations.js

@@ -1,6 +1,13 @@
 'use strict';
 
-import { getConversations, downloadVoiceMail } from '../api/conversations'
+import { getConversations, downloadVoiceMail, downloadFax } from '../api/conversations'
+
+const RequestState = {
+    button: 'button',
+    requesting: 'requesting',
+    succeeded: 'succeeded',
+    failed: 'failed'
+};
 
 export default {
     namespaced: true,
@@ -8,34 +15,63 @@ export default {
         page: 1,
         rows: 10,
         conversations: [
-        ]
+        ],
+        downloadVoiceMailState: RequestState.button,
+        downloadVoiceMailError: null,
+        downloadFaxState: RequestState.button,
+        downloadFaxError: null
     },
     mutations: {
         loadConversations(state, options) {
             state.conversations = state.conversations.concat(options);
             state.page++;
+        },
+        downloadVoiceMailRequesting(state) {
+            state.downloadVoiceMailState = RequestState.requesting;
+            state.downloadVoiceMailError = null;
+        },
+        downloadVoiceMailSucceeded(state) {
+            state.downloadVoiceMailState = RequestState.succeeded;
+            state.downloadVoiceMailError = null;
+        },
+        downloadVoiceMailFailed(state, error) {
+            state.downloadVoiceMailState = RequestState.failed;
+            state.downloadVoiceMailError = error;
+        },
+        downloadFaxRequesting(state) {
+            state.downloadFaxState = RequestState.requesting;
+            state.downloadFaxError = null;
+        },
+        downloadFaxSucceeded(state) {
+            state.downloadFaxState = RequestState.succeeded;
+            state.downloadFaxError = null;
+        },
+        downloadFaxFailed(state, error) {
+            state.downloadFaxState = RequestState.failed;
+            state.downloadFaxError = error;
         }
     },
     actions: {
         loadConversations(context) {
-            return new Promise((resolve, reject) => {
-                getConversations(localStorage.getItem('subscriberId'), context.state.page, context.state.rows)
-                    .then(result => {
-                        context.commit('loadConversations', result);
-                        resolve();
-                    })
-                .catch((err)=>{
-                    reject(err);
-                });
-            });
+            getConversations(localStorage.getItem('subscriberId'), context.state.page, context.state.rows)
+                .then(result => {
+                    context.commit('loadConversations', result);
+                })
         },
         downloadVoiceMail(context, id) {
-            return new Promise((resolve, reject)=>{
-                downloadVoiceMail(id).then(()=>{
-                    resolve();
-                }).catch((err)=>{
-                    reject(err);
-                });
+            context.commit('downloadVoiceMailRequesting');
+            downloadVoiceMail(id).then(()=>{
+                context.commit('downloadVoiceMailSucceeded');
+            }).catch((err)=>{
+                context.commit('downloadVoiceMailFailed', err.body.message);
+            });
+        },
+        downloadFax(context, id) {
+            context.commit('downloadFaxRequesting');
+            downloadFax(id).then(()=>{
+                context.commit('downloadFaxSucceeded');
+            }).catch((err)=>{
+                context.commit('downloadFaxFailed', err.body.message);
             });
         }
     }

t/api/conversations.js

@@ -76,8 +76,7 @@ describe('Conversations', function(){
             "start_time": "2017-12-07 16:22:04",
             "type": "voicemail",
             "voicemail_subscriber_id": 235,
-            "_id": hashedId,
-            "voicemail": "/api/voicemailrecordings/1"
+            "_id": hashedId
         }];
 
         Vue.http.interceptors = [];