From 6ab354454ad183cc9f1e59db191b77d2b09a379d Mon Sep 17 00:00:00 2001
From: Carlo Venusino <cvenusino@sipwise.com>
Date: Thu, 26 Aug 2021 15:43:02 +0200
Subject: [PATCH] TT#136551 Send FAX - Content/File not working properly

Change-Id: I0d7b9d3d97aa96b4c460f1d4789c867b2561c773
---
 src/api/communication.js             | 30 +++++++++++---------------
 src/components/CscSendFax.vue        | 32 +++++++++++++++++-----------
 src/components/form/CscInputFile.vue | 11 +++++++++-
 src/helpers/ui.js                    |  7 ++++--
 4 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/api/communication.js b/src/api/communication.js
index 9ab36961..f3430ae3 100644
--- a/src/api/communication.js
+++ b/src/api/communication.js
@@ -1,21 +1,17 @@
-
+import { post } from 'src/api/common'
 import _ from 'lodash'
-import Vue from 'vue'
 
-export function createFax (options) {
-    return new Promise((resolve, reject) => {
-        var formData = new FormData()
-        var fields = _.clone(options)
-        delete fields.file
-        var json = JSON.stringify(fields)
-        formData.append('json', json)
-        if (options.file) {
-            formData.append('faxfile', options.file)
-        }
-        Vue.http.post('api/faxes/', formData).then(() => {
-            resolve()
-        }).catch((err) => {
-            reject(err)
-        })
+export async function createFax (options) {
+    const formData = new FormData()
+    const fields = _.clone(options)
+    delete fields.faxfile
+    const json = JSON.stringify(fields)
+    formData.append('json', json)
+    if (options.faxfile) {
+        formData.append('faxfile', options.faxfile)
+    }
+    return await post({
+        resource: 'faxes',
+        body: formData
     })
 }
diff --git a/src/components/CscSendFax.vue b/src/components/CscSendFax.vue
index 67b89ee6..a64be5a2 100644
--- a/src/components/CscSendFax.vue
+++ b/src/components/CscSendFax.vue
@@ -51,7 +51,7 @@
                 />
                 <csc-input-file
                     accept=".pdf,.tiff,.txt,.ps"
-                    @isFileSelected="toggleFileSelected"
+                    @file-selected="toggleFileSelected"
                 />
             </q-card-section>
             <q-card-actions>
@@ -61,6 +61,7 @@
                     icon="clear"
                     color="default"
                     :label="$t('Cancel')"
+                    @click="resetFormData"
                 />
                 <q-btn
                     flat
@@ -101,14 +102,7 @@ export default {
     },
     data () {
         return {
-            selectedFile: false,
-            form: {
-                destination: '',
-                pageHeader: null,
-                data: null,
-                quality: this.$faxQualityOptionsDefault.value,
-                file: {}
-            },
+            form: {},
             isMobile: this.$q.platform.is.mobile,
             destinationError: false
         }
@@ -121,7 +115,7 @@ export default {
                 }),
                 maxLength: maxLength(3600)
             },
-            file: {
+            faxfile: {
                 required: requiredUnless(function () {
                     return this.hasContentToSend
                 })
@@ -134,7 +128,7 @@ export default {
     },
     computed: {
         hasContentToSend () {
-            return !!this.form.data || this.selectedFile
+            return (this.form.data && this.form.data.length > 0) || this.form.faxfile
         },
         formDisabled () {
             return !this.$v.form.$anyDirty ||
@@ -172,9 +166,12 @@ export default {
             })
         }
     },
+    mounted () {
+        this.resetFormData()
+    },
     methods: {
         toggleFileSelected (value) {
-            this.selectedFile = value
+            this.form.faxfile = value
         },
         sendFax () {
             if (this.$v.form.$error ||
@@ -182,10 +179,21 @@ export default {
                 showGlobalError(this.$t('You have invalid form input. Please check and try again.'))
             } else {
                 this.$store.dispatch('communication/createFax', this.form)
+                this.resetFormData()
             }
         },
         error (state) {
             this.destinationError = state
+        },
+        resetFormData () {
+            this.form = {
+                destination: '',
+                pageHeader: null,
+                data: null,
+                quality: this.$faxQualityOptionsDefault.value,
+                faxfile: null
+            }
+            this.$v.$reset()
         }
     }
 }
diff --git a/src/components/form/CscInputFile.vue b/src/components/form/CscInputFile.vue
index a90401d8..3bc51e3f 100644
--- a/src/components/form/CscInputFile.vue
+++ b/src/components/form/CscInputFile.vue
@@ -32,11 +32,12 @@
                     size="sm"
                     unelevated
                     :label="$t('Reset')"
-                    @click="selectedFile = null; $refs.fileInput.$el.value = null"
+                    @click="resetFile"
                 />
             </template>
         </q-input>
         <q-input
+            :value="selectedFile"
             v-show="false"
             ref="fileInput"
             type="file"
@@ -62,9 +63,17 @@ export default {
             return this.$t('No file')
         }
     },
+    watch: {
+        selectedFile () {
+            this.$emit('file-selected', this.selectedFile)
+        }
+    },
     methods: {
         fileInput (fileList) {
             this.selectedFile = fileList[0]
+        },
+        resetFile () {
+            this.selectedFile = null
         }
     }
 }
diff --git a/src/helpers/ui.js b/src/helpers/ui.js
index f7e1d296..36d1b36c 100644
--- a/src/helpers/ui.js
+++ b/src/helpers/ui.js
@@ -1,4 +1,3 @@
-
 import _ from 'lodash'
 import {
     Loading,
@@ -10,9 +9,13 @@ import {
 import {
     i18n
 } from 'src/boot/i18n'
+import CscSpinner from 'components/CscSpinner'
 
 export function startLoading () {
-    Loading.show({ delay: 0 })
+    Loading.show({
+        delay: 0,
+        spinner: CscSpinner
+    })
 }
 
 export function stopLoading () {