fix status action in view invoice

resources/assets/js/views/invoices/View.vue

@@ -5,16 +5,28 @@
       <div class="page-actions row">
         <div class="col-xs-2 mr-3">
           <base-button
-            :loading="isRequestOnGoing"
-            :disabled="isRequestOnGoing"
+            v-if="invoice.status === 'DRAFT'"
+            :loading="isMarkingAsSent"
+            :disabled="isMarkingAsSent"
             :outline="true"
             color="theme"
             @click="onMarkAsSent"
           >
             {{ $t('invoices.mark_as_sent') }}
           </base-button>
+      
         </div>
-        <router-link :to="`/admin/payments/${$route.params.id}/create`">
+        <base-button
+          v-if="invoice.status === 'DRAFT'"
+          :loading="isSendingEmail"
+          :disabled="isSendingEmail"
+          :outline="true"
+          color="theme"
+          @click="onSendInvoice"
+        >
+        {{ $t('invoices.send_invoice') }}
+      </base-button>
+        <router-link v-if="invoice.status === 'SENT'" :to="`/admin/payments/${$route.params.id}/create`">
           <base-button
             color="theme"
           >
@@ -152,7 +164,9 @@ export default {
         searchText: null
       },
       isRequestOnGoing: false,
-      isSearching: false
+      isSearching: false,
+      isSendingEmail: false,
+      isMarkingAsSent: false
     }
   },
   computed: {
@@ -179,6 +193,7 @@ export default {
       'getRecord',
       'searchInvoice',
       'markAsSent',
+      'sendEmail',
       'deleteInvoice',
       'selectInvoice'
     ]),
@@ -235,16 +250,35 @@ export default {
         icon: '/assets/icon/check-circle-solid.svg',
         buttons: true,
         dangerMode: true
-      }).then(async (MarkAsSend_Invoice) => {
-        if (MarkAsSend_Invoice) {
-          this.isRequestOnGoing = true
+      }).then(async (willMarkAsSent) => {
+        if (willMarkAsSent) {
+          this.isMarkingAsSent = true
           let response = await this.markAsSent({id: this.invoice.id})
-          this.isRequestOnGoing = false
+          this.isMarkingAsSent = false
           if (response.data) {
             window.toastr['success'](this.$tc('invoices.marked_as_sent_message'))
           }
         }
       })
+    },
+     async onSendInvoice () {
+       swal({
+        title: this.$tc('general.are_you_sure'),
+        text: this.$tc('invoices.confirm_send_invoice'),
+        icon: '/assets/icon/paper-plane-solid.svg',
+        buttons: true,
+        dangerMode: true
+      }).then(async (willSendInvoice) => {
+        if (willSendInvoice) {
+          this.isSendingEmail = true
+          let response = await this.sendEmail({id: this.invoice.id})
+          this.fetchInvoice()
+          this.isSendingEmail = false
+          if (response.data) {
+            window.toastr['success'](this.$tc('invoices.confirm_send_invoice'))
+          }
+        }
+      })
     },
     async removeInvoice (id) {
       this.selectInvoice([parseInt(id)])