mirror of
https://github.com/crater-invoice/crater.git
synced 2025-11-02 05:23:19 -05:00
Add New SweetAlert & Notification Components
This commit is contained in:
Aman Upadhyay
committed by
Mohit Panjwani
Mohit Panjwani
parent
3f7db2793f
commit
c3d3e5e35f
@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<base-page class="customer-create">
|
||||
<form v-if="!initLoad" @submit.prevent="submitCustomerData">
|
||||
<sw-page-header class="mb-5" :title="pageTitle">
|
||||
<sw-page-header :title="pageTitle" class="mb-5">
|
||||
<sw-breadcrumb slot="breadcrumbs">
|
||||
<sw-breadcrumb-item
|
||||
to="/admin/dashboard"
|
||||
:title="$t('general.home')"
|
||||
to="/admin/dashboard"
|
||||
/>
|
||||
<sw-breadcrumb-item
|
||||
to="/admin/customers"
|
||||
:title="$tc('customers.customer', 2)"
|
||||
to="/admin/customers"
|
||||
/>
|
||||
<sw-breadcrumb-item
|
||||
v-if="$route.name === 'customers.edit'"
|
||||
to="#"
|
||||
:title="$t('customers.edit_customer')"
|
||||
to="#"
|
||||
active
|
||||
/>
|
||||
<sw-breadcrumb-item
|
||||
v-else
|
||||
to="#"
|
||||
:title="$t('customers.new_customer')"
|
||||
to="#"
|
||||
active
|
||||
/>
|
||||
</sw-breadcrumb>
|
||||
@ -56,8 +56,8 @@
|
||||
>
|
||||
<sw-input-group
|
||||
:label="$t('customers.display_name')"
|
||||
class="md:col-span-3"
|
||||
:error="displayNameError"
|
||||
class="md:col-span-3"
|
||||
required
|
||||
>
|
||||
<sw-input
|
||||
@ -85,8 +85,8 @@
|
||||
|
||||
<sw-input-group
|
||||
:label="$t('customers.email')"
|
||||
class="md:col-span-3"
|
||||
:error="emailError"
|
||||
class="md:col-span-3"
|
||||
>
|
||||
<sw-input
|
||||
:invalid="$v.formData.email.$error"
|
||||
@ -243,8 +243,8 @@
|
||||
|
||||
<sw-input-group :label="$t('customers.zip_code')">
|
||||
<sw-input
|
||||
tabindex="14"
|
||||
v-model.trim="billing.zip"
|
||||
tabindex="14"
|
||||
type="text"
|
||||
name="zip"
|
||||
/>
|
||||
@ -406,16 +406,16 @@
|
||||
class="grid col-span-5 lg:col-span-4 gap-y-6 gap-x-4 md:grid-cols-6"
|
||||
>
|
||||
<sw-input-group
|
||||
class="md:col-span-3"
|
||||
v-for="(field, index) in customFields"
|
||||
:label="field.label"
|
||||
:required="field.is_required ? true : false"
|
||||
:key="index"
|
||||
class="md:col-span-3"
|
||||
>
|
||||
<component
|
||||
:type="field.type.label"
|
||||
:field="field"
|
||||
:isEdit="isEdit"
|
||||
:is-edit="isEdit"
|
||||
:is="field.type + 'Field'"
|
||||
:invalid-fields="invalidFields"
|
||||
:tabindex="23 + index"
|
||||
@ -694,7 +694,7 @@ export default {
|
||||
'updateCustomer',
|
||||
'fetchViewCustomer',
|
||||
]),
|
||||
|
||||
...mapActions('notification', ['showNotification']),
|
||||
...mapActions('customFields', ['fetchCustomFields']),
|
||||
|
||||
currencyNameWithCode({ name, code }) {
|
||||
@ -786,10 +786,16 @@ export default {
|
||||
this.$router.push(
|
||||
`/admin/customers/${response.data.customer.id}/view`
|
||||
)
|
||||
window.toastr['success'](this.$t('customers.updated_message'))
|
||||
this.showNotification({
|
||||
type: 'success',
|
||||
message: this.$t('customers.updated_message'),
|
||||
})
|
||||
}
|
||||
if (response.data.error) {
|
||||
window.toastr['error'](this.$t('validation.email_already_taken'))
|
||||
this.showNotification({
|
||||
type: 'error',
|
||||
message: this.$t('validation.email_already_taken'),
|
||||
})
|
||||
}
|
||||
} else {
|
||||
response = await this.addCustomer(this.formData)
|
||||
@ -797,7 +803,10 @@ export default {
|
||||
this.$router.push(
|
||||
`/admin/customers/${response.data.customer.id}/view`
|
||||
)
|
||||
window.toastr['success'](this.$t('customers.created_message'))
|
||||
this.showNotification({
|
||||
type: 'success',
|
||||
message: this.$t('customers.created_message'),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -806,7 +815,10 @@ export default {
|
||||
} catch (error) {
|
||||
this.isLoading = false
|
||||
if (err.response.data.errors.email) {
|
||||
window.toastr['error'](this.$t('validation.email_already_taken'))
|
||||
this.showNotification({
|
||||
type: 'error',
|
||||
message: this.$t('validation.email_already_taken'),
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -195,7 +195,11 @@
|
||||
<template slot-scope="row">
|
||||
<span>{{ $t('customers.contact_name') }}</span>
|
||||
<span>
|
||||
{{ row.contact_name ? row.contact_name : $t('customers.no_contact_name') }}
|
||||
{{
|
||||
row.contact_name
|
||||
? row.contact_name
|
||||
: $t('customers.no_contact_name')
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</sw-table-column>
|
||||
@ -354,6 +358,7 @@ export default {
|
||||
'deleteMultipleCustomers',
|
||||
'setSelectAllState',
|
||||
]),
|
||||
...mapActions('notification', ['showNotification']),
|
||||
refreshTable() {
|
||||
this.$refs.table.refresh()
|
||||
},
|
||||
@ -398,43 +403,60 @@ export default {
|
||||
},
|
||||
|
||||
async removeCustomer(id) {
|
||||
swal({
|
||||
this.$swal({
|
||||
title: this.$t('general.are_you_sure'),
|
||||
text: this.$tc('customers.confirm_delete'),
|
||||
icon: '/assets/icon/trash-solid.svg',
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
}).then(async (willDelete) => {
|
||||
if (willDelete) {
|
||||
icon: 'error',
|
||||
iconHtml: `<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-red-600"fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>`,
|
||||
showCancelButton: true,
|
||||
showConfirmButton: true,
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
let res = await this.deleteCustomer({ ids: [id] })
|
||||
|
||||
if (res.data.success) {
|
||||
window.toastr['success'](this.$tc('customers.deleted_message', 1))
|
||||
this.showNotification({
|
||||
type: 'success',
|
||||
message: this.$tc('customers.deleted_message', 1),
|
||||
})
|
||||
this.$refs.table.refresh()
|
||||
return true
|
||||
}
|
||||
|
||||
window.toastr['error'](res.data.message)
|
||||
this.showNotification({
|
||||
type: 'error',
|
||||
message: this.$tc(res.data.message),
|
||||
})
|
||||
return true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
async removeMultipleCustomers() {
|
||||
swal({
|
||||
this.$swal({
|
||||
title: this.$t('general.are_you_sure'),
|
||||
text: this.$tc('customers.confirm_delete', 2),
|
||||
icon: '/assets/icon/trash-solid.svg',
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
}).then(async (willDelete) => {
|
||||
if (willDelete) {
|
||||
icon: 'error',
|
||||
iconHtml: `<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-red-600"fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>`,
|
||||
showCancelButton: true,
|
||||
showConfirmButton: true,
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
let request = await this.deleteMultipleCustomers()
|
||||
if (request.data.success) {
|
||||
window.toastr['success'](this.$tc('customers.deleted_message', 2))
|
||||
this.showNotification({
|
||||
type: 'success',
|
||||
message: this.$tc('customers.deleted_message', 2),
|
||||
})
|
||||
this.refreshTable()
|
||||
} else if (request.data.error) {
|
||||
window.toastr['error'](request.data.message)
|
||||
this.showNotification({
|
||||
type: 'error',
|
||||
message: request.data.message,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<sw-page-header :title="pageTitle">
|
||||
<template slot="actions">
|
||||
<sw-button
|
||||
tag-name="router-link"
|
||||
:to="`/admin/customers/${$route.params.id}/edit`"
|
||||
tag-name="router-link"
|
||||
class="mr-3"
|
||||
variant="primary-outline"
|
||||
>
|
||||
@ -15,29 +15,29 @@
|
||||
{{ $t('customers.new_transaction') }}
|
||||
</sw-button>
|
||||
<sw-dropdown-item
|
||||
tag-name="router-link"
|
||||
:to="`/admin/estimates/create?customer=${$route.params.id}`"
|
||||
tag-name="router-link"
|
||||
>
|
||||
<document-icon class="h-5 mr-3 text-gray-600" />
|
||||
{{ $t('estimates.new_estimate') }}
|
||||
</sw-dropdown-item>
|
||||
<sw-dropdown-item
|
||||
tag-name="router-link"
|
||||
:to="`/admin/invoices/create?customer=${$route.params.id}`"
|
||||
tag-name="router-link"
|
||||
>
|
||||
<document-text-icon class="h-5 mr-3 text-gray-600" />
|
||||
{{ $t('invoices.new_invoice') }}
|
||||
</sw-dropdown-item>
|
||||
<sw-dropdown-item
|
||||
tag-name="router-link"
|
||||
:to="`/admin/payments/create?customer=${$route.params.id}`"
|
||||
tag-name="router-link"
|
||||
>
|
||||
<credit-card-icon class="h-5 mr-3 text-gray-600" />
|
||||
{{ $t('payments.new_payment') }}
|
||||
</sw-dropdown-item>
|
||||
<sw-dropdown-item
|
||||
tag-name="router-link"
|
||||
:to="`/admin/expenses/create?customer=${$route.params.id}`"
|
||||
tag-name="router-link"
|
||||
>
|
||||
<calculator-icon class="h-5 mr-3 text-gray-600" />
|
||||
{{ $t('expenses.new_expense') }}
|
||||
@ -112,25 +112,48 @@ export default {
|
||||
'selectCustomer',
|
||||
'deleteMultipleCustomers',
|
||||
]),
|
||||
...mapActions('notification', ['showNotification']),
|
||||
|
||||
async removeCustomer(id) {
|
||||
swal({
|
||||
this.$swal({
|
||||
title: this.$t('general.are_you_sure'),
|
||||
text: this.$tc('customers.confirm_delete'),
|
||||
icon: '/assets/icon/trash-solid.svg',
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
}).then(async (willDelete) => {
|
||||
if (willDelete) {
|
||||
icon: 'question',
|
||||
iconHtml: `<svg
|
||||
aria-hidden="true"
|
||||
class="w-6 h-6"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="trash"
|
||||
class="svg-inline--fa fa-trash fa-w-14"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<path
|
||||
fill="#55547A"
|
||||
d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
|
||||
></path>
|
||||
</svg>`,
|
||||
showCancelButton: true,
|
||||
showConfirmButton: true,
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
let data = [id]
|
||||
this.selectCustomer(data)
|
||||
let res = await this.deleteMultipleCustomers()
|
||||
if (res.data.success) {
|
||||
window.toastr['success'](this.$tc('customers.deleted_message'))
|
||||
this.showNotification({
|
||||
type: 'success',
|
||||
message: this.$tc('customers.deleted_message'),
|
||||
})
|
||||
this.$router.push('/admin/customers')
|
||||
return true
|
||||
} else if (request.data.error) {
|
||||
window.toastr['error'](res.data.message)
|
||||
this.showNotification({
|
||||
type: 'error',
|
||||
message: res.data.message,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user