fix status action in view estimate

resources/assets/js/store/modules/estimate/actions.js

@@ -56,6 +56,7 @@ export const fetchViewEstimate = ({ commit, dispatch, state }, id) => {
 export const sendEmail = ({ commit, dispatch, state }, data) => {
   return new Promise((resolve, reject) => {
     window.axios.post(`/api/estimates/send`, data).then((response) => {
+      commit(types.UPDATE_ESTIMATE_STATUS, {id: data.id, status: 'SENT'})
       resolve(response)
     }).catch((err) => {
       reject(err)
@@ -100,7 +101,7 @@ export const deleteMultipleEstimates = ({ commit, dispatch, state }, id) => {
 export const updateEstimate = ({ commit, dispatch, state }, data) => {
   return new Promise((resolve, reject) => {
     window.axios.put(`/api/estimates/${data.id}`, data).then((response) => {
-      commit(types.UPDATE_ESTIMATE, response.data)
+      commit(types.UPDATE_ESTIMATE_STATUS, response.data)
       resolve(response)
     }).catch((err) => {
       reject(err)

resources/assets/js/store/modules/estimate/getters.js

@@ -4,3 +4,7 @@ export const getTemplateId = (state) => state.estimateTemplateId
 export const selectedEstimates = (state) => state.selectedEstimates
 export const totalEstimates = (state) => state.totalEstimates
 export const selectedCustomer = (state) => state.selectedCustomer
+export const getEstimate = (state) => (id) => {
+  let invId = parseInt(id)
+  return state.estimates.find(estimate => estimate.id === invId)
+}

resources/assets/js/store/modules/estimate/mutation-types.js

@@ -14,3 +14,4 @@ export const SELECT_CUSTOMER = 'SELECT_CUSTOMER'
 export const RESET_SELECTED_CUSTOMER = 'RESET_SELECTED_CUSTOMER'
 export const SET_SELECT_ALL_STATE = 'SET_SELECT_ALL_STATE'
 export const RESET_SELECTED_ESTIMATES = 'RESET_SELECTED_ESTIMATES'
+export const UPDATE_ESTIMATE_STATUS = 'UPDATE_ESTIMATE_STATUS'

resources/assets/js/store/modules/estimate/mutations.js

@@ -37,6 +37,12 @@ export default {
     state.estimates[pos] = data.estimate
   },
 
+  [types.UPDATE_ESTIMATE_STATUS] (state, data) {
+    let pos = state.estimates.findIndex(estimate => estimate.id === data.id)
+
+    state.estimates[pos].status = data.status
+  },
+
   [types.RESET_SELECTED_ESTIMATES] (state, data) {
     state.selectedEstimates = []
     state.selectAllField = false

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

@@ -3,11 +3,11 @@
     <div class="page-header">
       <h3 class="page-title"> {{ estimate.estimate_number }}</h3>
       <div class="page-actions row">
-        <div class="col-xs-2">
+        <div class="col-xs-2 mr-3">
           <base-button
-            v-if="estimate.status !== 'SENT'"
+            v-if="estimate.status === 'DRAFT'"
-            :loading="isRequestOnGoing"
+            :loading="isMarkAsSent"
-            :disabled="isRequestOnGoing"
+            :disabled="isMarkAsSent"
             :outline="true"
             color="theme"
             @click="onMarkAsSent"
@@ -15,6 +15,18 @@
             {{ $t('estimates.mark_as_sent') }}
           </base-button>
         </div>
+        <div class="col-xs-2">
+          <base-button
+            v-if="estimate.status === 'DRAFT'"
+            :loading="isSendingEmail"
+            :disabled="isSendingEmail"
+            :outline="true"
+            color="theme"
+            @click="onSendEstimate"
+          >
+            {{ $t('estimates.send_estimate') }}
+          </base-button>
+        </div>
         <v-dropdown :close-on-select="false" align="left" class="filter-container">
           <a slot="activator" href="#">
             <base-button color="theme">
@@ -111,7 +123,7 @@
           <div class="left">
             <div class="inv-name">{{ estimate.user.name }}</div>
             <div class="inv-number">{{ estimate.estimate_number }}</div>
-            <div :class="'est-status-'+estimate.status.toLowerCase()" class="inv-status">{{ estimate.status }}</div>
+            <div :class="'est-status-'+estimate.status.toLowerCase()"class="inv-status">{{ estimate.status }}</div>
           </div>
           <div class="right">
             <div class="inv-amount" v-html="$utils.formatMoney(estimate.total, estimate.user.currency)" />
@@ -129,7 +141,9 @@
   </div>
 </template>
 <script>
-import { mapActions } from 'vuex'
+// import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+
 const _ = require('lodash')
 export default {
   data () {
@@ -137,9 +151,9 @@ export default {
       id: null,
       count: null,
       estimates: [],
-      estimate: null,
+      // estimate: null,
       currency: null,
-      shareableLink: null,
+      // shareableLink: null,
       searchData: {
         orderBy: null,
         orderByField: null,
@@ -147,11 +161,16 @@ export default {
       },
       status: ['DRAFT', 'SENT', 'VIEWED', 'EXPIRED', 'ACCEPTED', 'REJECTED'],
       isMarkAsSent: false,
+      isSendingEmail: false,
       isRequestOnGoing: false,
       isSearching: false
     }
   },
   computed: {
+    estimate () {
+      return this.$store.getters['estimate/getEstimate'](this.$route.params.id)
+    },
+
     getOrderBy () {
       if (this.searchData.orderBy === 'asc' || this.searchData.orderBy == null) {
         return true
@@ -159,22 +178,25 @@ export default {
       return false
     }
   },
+    shareableLink () {
+      return `/estimates/pdf/${this.estimate.unique_hash}`
+    },
   watch: {
     '$route.params.id' (val) {
       this.fetchEstimate()
     }
   },
-  mounted () {
+  created () {
     this.loadEstimates()
     this.onSearched = _.debounce(this.onSearched, 500)
   },
   methods: {
     ...mapActions('estimate', [
       'fetchEstimates',
-      'fetchViewEstimate',
       'getRecord',
       'searchEstimate',
       'markAsSent',
+      'sendEmail',
       'deleteEstimate',
       'selectEstimate'
     ]),
@@ -205,15 +227,15 @@ export default {
         this.estimates = response.data.estimates.data
       }
     },
-    async fetchEstimate () {
+    // async fetchEstimate () {
-      let estimate = await this.fetchViewEstimate(this.$route.params.id)
+    //   let estimate = await this.fetchViewEstimate(this.$route.params.id)
 
-      if (estimate.data) {
+    //   if (estimate.data) {
-        this.estimate = estimate.data.estimate
+    //     this.estimate = estimate.data.estimate
-        this.shareableLink = estimate.data.shareable_link
+    //     this.shareableLink = estimate.data.shareable_link
-        this.currency = estimate.data.estimate.user.currency
+    //     this.currency = estimate.data.estimate.user.currency
-      }
+    //   }
-    },
+    // },
     sortData () {
       if (this.searchData.orderBy === 'asc') {
         this.searchData.orderBy = 'desc'
@@ -242,6 +264,24 @@ export default {
         }
       })
     },
+    async onSendEstimate (id) {
+      swal({
+        title: this.$t('general.are_you_sure'),
+        text: this.$t('estimates.confirm_send_estimate'),
+        icon: '/assets/icon/paper-plane-solid.svg',
+        buttons: true,
+        dangerMode: true
+      }).then(async (willSendEstimate) => {
+        if (willSendEstimate) {
+          this.isSendingEmail = true
+          let response = await this.sendEmail({id: this.estimate.id})
+          this.isSendingEmail = false
+          if (response.data) {
+            window.toastr['success'](this.$tc('estimates.send_estimate_successfully'))
+          }
+        }
+      })
+    },
     async removeEstimate (id) {
       this.selectEstimate([parseInt(id)])
       this.id = id