add seprate actions for dashboard tables

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

@@ -3,7 +3,7 @@ import * as types from './mutation-types'
 
 export const loadData = ({ commit, dispatch, state }, params) => {
   return new Promise((resolve, reject) => {
-    window.axios.get(`/api/dashboard`, {params}).then((response) => {
+    window.axios.get(`/api/dashboard`, { params }).then((response) => {
       commit(types.SET_INITIAL_DATA, response.data)
       commit(types.GET_INITIAL_DATA, true)
       resolve(response)
@@ -23,3 +23,108 @@ export const getChart = ({ commit, dispatch, state }) => {
     })
   })
 }
+
+export const sendEmail = ({ commit, dispatch, state }, data) => {
+  return new Promise((resolve, reject) => {
+    window.axios.post(`/api/invoices/send`, data).then((response) => {
+      commit(types.UPDATE_INVOICE_STATUS, { id: data.id, status: 'SENT' })
+      resolve(response)
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+
+export const markAsSent = ({ commit, dispatch, state }, data) => {
+  return new Promise((resolve, reject) => {
+    window.axios.post(`/api/invoices/mark-as-sent`, data).then((response) => {
+      commit(types.UPDATE_INVOICE_STATUS, { id: data.id, status: 'SENT' })
+      resolve(response)
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+export const deleteInvoice = ({ commit, dispatch, state }, id) => {
+  return new Promise((resolve, reject) => {
+    window.axios.delete(`/api/invoices/${id}`).then((response) => {
+      if (response.data.error) {
+        resolve(response)
+      } else {
+        commit(types.DELETE_INVOICE, id)
+        resolve(response)
+      }
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+
+export const sendEstimateEmail = ({ 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)
+    })
+  })
+}
+
+export const markAsAccepted = ({ commit, dispatch, state }, data) => {
+  return new Promise((resolve, reject) => {
+    window.axios.post(`/api/estimates/accept`, data).then((response) => {
+      commit(types.UPDATE_ESTIMATE_STATUS, { id: data.id, status: 'ACCEPTED' })
+      resolve(response)
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+export const markAsRejected = ({ commit, dispatch, state }, data) => {
+  return new Promise((resolve, reject) => {
+    window.axios.post(`/api/estimates/reject`, data).then((response) => {
+      commit(types.UPDATE_ESTIMATE_STATUS, { id: data.id, status: 'REJECTED' })
+      resolve(response)
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+export const markEstimateAsSent = ({ commit, dispatch, state }, data) => {
+  return new Promise((resolve, reject) => {
+    window.axios.post(`/api/estimates/mark-as-sent`, data).then((response) => {
+      commit(types.UPDATE_ESTIMATE_STATUS, { id: data.id, status: 'SENT' })
+      resolve(response)
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+export const convertToInvoice = ({ commit, dispatch, state }, id) => {
+  return new Promise((resolve, reject) => {
+    window.axios.post(`/api/estimates/${id}/convert-to-invoice`).then((response) => {
+      // commit(types.UPDATE_INVOICE, response.data)
+      resolve(response)
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+export const deleteEstimate = ({ commit, dispatch, state }, id) => {
+  return new Promise((resolve, reject) => {
+    window.axios.delete(`/api/estimates/${id}`).then((response) => {
+      commit(types.DELETE_ESTIMATE, id)
+      resolve(response)
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}

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

@@ -1,2 +1,6 @@
 export const SET_INITIAL_DATA = 'SET_INITIAL_DATA'
 export const GET_INITIAL_DATA = 'GET_INITIAL_DATA'
+export const DELETE_INVOICE = 'DELETE_INVOICE'
+export const UPDATE_INVOICE_STATUS = 'UPDATE_INVOICE_STATUS'
+export const DELETE_ESTIMATE = 'DELETE_ESTIMATE'
+export const UPDATE_ESTIMATE_STATUS = 'UPDATE_ESTIMATE_STATUS'

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

@@ -1,7 +1,7 @@
 import * as types from './mutation-types'
 
 export default {
-  [types.SET_INITIAL_DATA] (state, data) {
+  [types.SET_INITIAL_DATA](state, data) {
     state.contacts = data.customersCount
     state.invoices = data.invoicesCount
     state.estimates = data.estimatesCount
@@ -30,7 +30,29 @@ export default {
     state.netProfit = data.netProfit
   },
 
-  [types.GET_INITIAL_DATA] (state, data) {
+  [types.GET_INITIAL_DATA](state, data) {
     state.isDataLoaded = data
-  }
+  },
+
+  [types.UPDATE_INVOICE_STATUS](state, data) {
+    let pos = state.dueInvoices.findIndex(invoice => invoice.id === data.id)
+
+    state.dueInvoices[pos].status = data.status
+  },
+
+  [types.DELETE_INVOICE](state, id) {
+    let index = state.dueInvoices.findIndex(invoice => invoice.id === id)
+    state.dueInvoices.splice(index, 1)
+  },
+
+  [types.DELETE_ESTIMATE](state, id) {
+    let index = state.recentEstimates.findIndex(estimate => estimate.id === id)
+    state.recentEstimates.splice(index, 1)
+  },
+
+  [types.UPDATE_ESTIMATE_STATUS](state, data) {
+    let pos = state.recentEstimates.findIndex(estimate => estimate.id === data.id)
+
+    state.recentEstimates[pos].status = data.status
+  },
 }

resources/assets/js/views/dashboard/Dashboard.vue

@@ -160,7 +160,7 @@
         </div>
         <div class="dashboard-table">
           <table-component
-            ref="table"
+            ref="inv_table"
             :data="getDueInvoices"
             :show-filter="false"
             table-class="table"
@@ -168,6 +168,15 @@
           >
             <table-column :label="$t('dashboard.recent_invoices_card.due_on')" show="formattedDueDate" />
             <table-column :label="$t('dashboard.recent_invoices_card.customer')" show="user.name" />
+                 <table-column
+              :label="$t('invoices.status')"
+              sort-as="status"
+            >
+              <template slot-scope="row" >
+                <span> {{ $t('invoices.status') }}</span> 
+                <span :class="'inv-status-'+row.status.toLowerCase()">{{ (row.status != 'PARTIALLY_PAID')? row.status : row.status.replace('_', ' ') }}</span>
+              </template>
+            </table-column>
             <table-column :label="$t('dashboard.recent_invoices_card.amount_due')" show="due_amount" sort-as="due_amount">
               <template slot-scope="row">
                 <span>{{ $t('dashboard.recent_invoices_card.amount_due') }}</span>
@@ -235,13 +244,21 @@
         </div>
         <div class="dashboard-table">
           <table-component
-            ref="table"
+            ref="est_table"
             :data="getRecentEstimates"
             :show-filter="false"
             table-class="table"
           >
             <table-column :label="$t('dashboard.recent_estimate_card.date')" show="formattedExpiryDate" />
             <table-column :label="$t('dashboard.recent_estimate_card.customer')" show="user.name" />
+            <table-column
+              :label="$t('estimates.status')"
+              show="status" >
+              <template slot-scope="row" >
+                <span> {{ $t('estimates.status') }}</span>
+                <span :class="'est-status-'+row.status.toLowerCase()">{{ row.status }}</span>
+              </template>
+            </table-column>
             <table-column :label="$t('dashboard.recent_estimate_card.amount_due')" show="total" sort-as="total">
               <template slot-scope="row">
                 <span>{{ $t('dashboard.recent_estimate_card.amount_due') }}</span>
@@ -288,6 +305,24 @@
                       {{ $t('estimates.mark_as_sent') }}
                     </a>
                   </v-dropdown-item>
+                  <v-dropdown-item v-if="row.status !== 'SENT'">
+                    <a class="dropdown-item" href="#" @click.self="sendEstimate(row.id)">
+                      <font-awesome-icon icon="paper-plane" class="dropdown-item-icon" />
+                      {{ $t('estimates.send_estimate') }}
+                    </a>
+                  </v-dropdown-item>
+                  <v-dropdown-item v-if="row.status !== 'ACCEPTED'">
+                    <a class="dropdown-item" href="#" @click.self="onMarkAsAccepted(row.id)">
+                      <font-awesome-icon icon="check-circle" class="dropdown-item-icon" />
+                      {{ $t('estimates.mark_as_accepted') }}
+                    </a>
+                  </v-dropdown-item>
+              <v-dropdown-item v-if="row.status !== 'REJECTED'">
+                <a class="dropdown-item" href="#" @click.self="onMarkAsRejected(row.id)">
+                  <font-awesome-icon icon="times-circle" class="dropdown-item-icon" />
+                  {{ $t('estimates.mark_as_rejected') }}
+                </a>
+              </v-dropdown-item>
                 </v-dropdown>
               </template>
             </table-column>
@@ -369,16 +404,16 @@ export default {
   methods: {
     ...mapActions('dashboard', [
       'getChart',
-      'loadData'
+      'loadData',
-    ]),
-    ...mapActions('estimate', [
-      'deleteEstimate',
-      'convertToInvoice'
-    ]),
-    ...mapActions('invoice', [
       'deleteInvoice',
       'sendEmail',
-      'markAsSent'
+      'markAsSent',
+      'sendEstimateEmail',
+      'deleteEstimate',
+      'markAsAccepted',
+      'markAsRejected',
+      'markEstimateAsSent',
+      'convertToInvoice'
     ]),
 
     async loadChart () {
@@ -404,7 +439,7 @@ export default {
           let res = await this.deleteEstimate(this.id)
           if (res.data.success) {
             window.toastr['success'](this.$tc('estimates.deleted_message', 1))
-            this.$refs.table.refresh()
+            this.refreshEstTable()
           } else if (res.data.error) {
             window.toastr['error'](res.data.message)
           }
@@ -412,6 +447,14 @@ export default {
       })
     },
 
+    refreshInvTable () {
+      this.$refs.inv_table.refresh()
+    },
+
+    refreshEstTable () {
+      this.$refs.est_table.refresh()
+    },
+
     async convertInToinvoice (id) {
       swal({
         title: this.$t('general.are_you_sure'),
@@ -432,6 +475,7 @@ export default {
         }
       })
     },
+
     async onMarkAsSent (id) {
       swal({
         title: this.$t('general.are_you_sure'),
@@ -444,8 +488,8 @@ export default {
           const data = {
             id: id
           }
-          let response = await this.markAsSent(data)
+          let response = await this.markEstimateAsSent(data)
-          this.$refs.table.refresh()
+          this.refreshEstTable()
           if (response.data) {
             window.toastr['success'](this.$tc('estimates.mark_as_sent_successfully'))
           }
@@ -466,7 +510,7 @@ export default {
           let res = await this.deleteInvoice(this.id)
           if (res.data.success) {
             window.toastr['success'](this.$tc('invoices.deleted_message'))
-            this.$refs.table.refresh()
+            this.refreshInvTable()
           } else if (res.data.error) {
             window.toastr['error'](res.data.message)
           }
@@ -487,13 +531,14 @@ export default {
             id: id
           }
           let response = await this.sendEmail(data)
-          this.$refs.table.refresh()
+          this.refreshInvTable()
           if (response.data) {
             window.toastr['success'](this.$tc('invoices.send_invoice_successfully'))
           }
         }
       })
     },
+
     async sentInvoice (id) {
       swal({
         title: this.$t('general.are_you_sure'),
@@ -507,12 +552,77 @@ export default {
             id: id
           }
           let response = await this.markAsSent(data)
-          this.$refs.table.refresh()
+          this.refreshInvTable()
           if (response.data) {
             window.toastr['success'](this.$tc('invoices.mark_as_sent_successfully'))
           }
         }
       })
+    },
+
+    async onMarkAsAccepted (id) {
+      swal({
+        title: this.$t('general.are_you_sure'),
+        text: this.$t('estimates.confirm_mark_as_accepted'),
+        icon: '/assets/icon/check-circle-solid.svg',
+        buttons: true,
+        dangerMode: true
+      }).then(async (markedAsRejected) => {
+        if (markedAsRejected) {
+          const data = {
+            id: id
+          }
+          let response = await this.markAsAccepted(data)
+          this.refreshEstTable()
+          if (response.data) {
+            this.refreshEstTable()
+            window.toastr['success'](this.$tc('estimates.marked_as_accepted_message'))
+          }
+        }
+      })
+    },
+
+    async onMarkAsRejected (id) {
+      swal({
+        title: this.$t('general.are_you_sure'),
+        text: this.$t('estimates.confirm_mark_as_rejected'),
+        icon: '/assets/icon/times-circle-solid.svg',
+        buttons: true,
+        dangerMode: true
+      }).then(async (markedAsRejected) => {
+        if (markedAsRejected) {
+          const data = {
+            id: id
+          }
+          let response = await this.markAsRejected(data)
+          this.refreshEstTable()
+          if (response.data) {
+            this.refreshEstTable()
+            window.toastr['success'](this.$tc('estimates.marked_as_rejected_message'))
+          }
+        }
+      })
+    },
+    
+    async sendEstimate (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) {
+          const data = {
+            id: id
+          }
+          let response = await this.sendEstimateEmail(data)
+          this.refreshEstTable()
+          if (response.data) {
+            window.toastr['success'](this.$tc('estimates.send_estimate_successfully'))
+          }
+        }
+      })
     }
 
   }

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

@@ -127,7 +127,7 @@
             <a :class="['tab-link', {'a-active': filters.status === 'SENT'}]" href="#" >{{ $t('general.sent') }}</a>
           </li>
           <li class="tab" @click="getStatus('')">
-            <a :class="['tab-link', {'a-active': filters.status === '' || filters.status === null}]" href="#">{{ $t('general.all') }}</a>
+            <a :class="['tab-link', {'a-active': filters.status === '' || filters.status !== 'DRAFT' && filters.status !== 'SENT'}]" href="#">{{ $t('general.all') }}</a>
           </li>
         </ul>
         <transition name="fade">
@@ -426,7 +426,7 @@ export default {
           if (response.data) {
             this.filters.status = 'ACCEPTED'
             this.$refs.table.refresh()
-            window.toastr['success'](this.$tc('estimates.confirm_mark_as_accepted'))
+            window.toastr['success'](this.$tc('estimates.marked_as_accepted_message'))
           }
         }
       })

resources/assets/js/views/settings/CompanyInfo.vue

@@ -47,13 +47,8 @@
             <label class="input-label">{{ $tc('settings.company_info.phone') }}</label>
             <base-input
               v-model="formData.phone"
-              :invalid="$v.formData.phone.$error"
               :placeholder="$t('settings.company_info.phone')"
-              @input="$v.formData.phone.$touch()"
             />
-            <div v-if="$v.formData.phone.$error">
-              <span v-if="!$v.formData.phone.phone" class="text-danger">{{ $tc('validation.numbers_only') }}</span>
-            </div>
           </div>
           <div class="col-md-6 mb-4">
             <label class="input-label">{{ $tc('settings.company_info.country') }}</label><span class="text-danger"> * </span>
@@ -260,9 +255,6 @@ export default {
       email: {
         email
       },
-      phone: {
-        numeric
-      },
       address_street_1: {
         maxLength: maxLength(255)
       },