Add New SweetAlert & Notification Components

This commit is contained in:
Aman Upadhyay
2021-04-09 12:35:50 +00:00
committed by Mohit Panjwani
parent 3f7db2793f
commit c3d3e5e35f
78 changed files with 2295 additions and 984 deletions

View File

@ -1,19 +1,19 @@
<template>
<base-page v-if="isSuperAdmin" class="item-create">
<sw-page-header class="mb-3" :title="pageTitle">
<sw-page-header :title="pageTitle" class="mb-3">
<sw-breadcrumb slot="breadcrumbs">
<sw-breadcrumb-item to="/admin/dashboard" :title="$t('general.home')" />
<sw-breadcrumb-item to="/admin/users" :title="$tc('users.user', 2)" />
<sw-breadcrumb-item :title="$t('general.home')" to="/admin/dashboard" />
<sw-breadcrumb-item :title="$tc('users.user', 2)" to="/admin/users" />
<sw-breadcrumb-item
v-if="$route.name === 'users.edit'"
to="#"
:title="$t('users.edit_user')"
to="#"
active
/>
<sw-breadcrumb-item
v-else
to="#"
:title="$t('users.new_user')"
to="#"
active
/>
</sw-breadcrumb>
@ -43,8 +43,8 @@
<sw-input-group
:label="$t('users.email')"
class="mt-4"
:error="emailError"
class="mt-4"
required
>
<sw-input
@ -229,6 +229,8 @@ export default {
methods: {
...mapActions('users', ['addUser', 'fetchUser', 'updateUser']),
...mapActions('notification', ['showNotification']),
async loadEditData() {
let response = await this.fetchUser(this.$route.params.id)
@ -251,12 +253,18 @@ export default {
response = await this.updateUser(this.formData)
let data
if (response.data.success) {
window.toastr['success'](this.$tc('users.updated_message'))
this.showNotification({
type: 'success',
message: this.$tc('users.updated_message'),
})
this.$router.push('/admin/users')
this.isLoading = false
}
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.addUser(this.formData)
@ -264,7 +272,10 @@ export default {
if (response.data.success) {
this.isLoading = false
if (!this.isEdit) {
window.toastr['success'](this.$tc('users.created_message'))
this.showNotification({
type: 'success',
message: this.$tc('users.created_message'),
})
this.$router.push('/admin/users')
return true
}

View File

@ -2,8 +2,8 @@
<base-page v-if="isSuperAdmin" class="items">
<sw-page-header :title="$t('users.title')">
<sw-breadcrumb slot="breadcrumbs">
<sw-breadcrumb-item to="dashboard" :title="$t('general.home')" />
<sw-breadcrumb-item to="#" :title="$tc('users.title', 2)" active />
<sw-breadcrumb-item :title="$t('general.home')" to="dashboard" />
<sw-breadcrumb-item :title="$tc('users.title', 2)" to="#" active />
</sw-breadcrumb>
<template slot="actions">
@ -91,7 +91,7 @@
</sw-button>
</sw-empty-table-placeholder>
<div class="relative table-container" v-show="!showEmptyScreen">
<div v-show="!showEmptyScreen" class="relative table-container">
<div
class="relative flex items-center justify-between h-10 mt-5 list-none border-b-2 border-gray-200 border-solid"
>
@ -209,8 +209,8 @@
<dot-icon slot="activator" />
<sw-dropdown-item
tag-name="router-link"
:to="`users/${row.id}/edit`"
tag-name="router-link"
>
<pencil-icon class="h-5 mr-3 text-gray-600" />
{{ $t('general.edit') }}
@ -302,17 +302,17 @@ export default {
},
},
},
created() {
if (!this.isSuperAdmin) {
this.$router.push('/admin/dashboard')
}
},
watch: {
filters: {
handler: 'setFilters',
deep: true,
},
},
created() {
if (!this.isSuperAdmin) {
this.$router.push('/admin/dashboard')
}
},
destroyed() {
if (this.selectAllField) {
@ -330,6 +330,8 @@ export default {
'setSelectAllState',
]),
...mapActions('notification', ['showNotification']),
refreshTable() {
this.$refs.table.refresh()
},
@ -384,52 +386,71 @@ export default {
let user = []
user.push(id)
swal({
this.$swal({
title: this.$t('general.are_you_sure'),
text: this.$tc('users.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.deleteUser(user)
if (res.data.success) {
window.toastr['success'](this.$tc('users.deleted_message', 1))
this.showNotification({
type: 'success',
message: this.$tc('users.deleted_message', 1),
})
this.$refs.table.refresh()
return true
}
if (res.data.error === 'user_attached') {
window.toastr['error'](
this.$tc('users.user_attached_message'),
this.$t('general.action_failed')
)
this.showNotification({
type: 'error',
message:
(this.$tc('users.user_attached_message'),
this.$t('general.action_failed')),
})
return true
}
window.toastr['error'](res.data.message)
this.showNotification({
type: 'error',
message: res.data.message,
})
return true
}
})
},
async removeMultipleUsers() {
swal({
this.$swal({
title: this.$t('general.are_you_sure'),
text: this.$tc('users.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 res = await this.deleteMultipleUsers()
if (res.data.success || res.data.users) {
window.toastr['success'](this.$tc('users.deleted_message', 2))
this.showNotification({
type: 'success',
message: this.$tc('users.deleted_message', 2),
})
this.$refs.table.refresh()
} else if (res.data.error) {
window.toastr['error'](res.data.message)
this.showNotification({
type: 'error',
message: res.data.message,
})
}
}
})