add seprate actions for dashboard tables

This commit is contained in:
yogesh_gohil
2019-11-17 16:36:30 +05:30
parent 810ff2af8f
commit 0711393bd1
6 changed files with 263 additions and 30 deletions

View File

@ -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)
})
})
}

View File

@ -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'

View File

@ -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
},
}

View File

@ -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>
@ -287,6 +304,24 @@
<font-awesome-icon icon="check-circle" class="dropdown-item-icon" />
{{ $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>
@ -369,16 +404,16 @@ export default {
methods: {
...mapActions('dashboard', [
'getChart',
'loadData'
]),
...mapActions('estimate', [
'deleteEstimate',
'convertToInvoice'
]),
...mapActions('invoice', [
'loadData',
'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)
this.$refs.table.refresh()
let response = await this.markEstimateAsSent(data)
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'))
}
}
})
}
}

View File

@ -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'))
}
}
})

View File

@ -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)
},