You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.5 KiB
99 lines
3.5 KiB
5 years ago
|
<template>
|
||
|
|
<v-dialog v-model="modal" width="40%" transition="slide-x-transition">
|
||
|
|
<v-card class="RTL">
|
||
|
|
<v-card-title class="red lighten-5" primary-title>
|
||
|
|
<WM-PartTitle
|
||
|
|
class="WM-Margin-T-20"
|
||
|
|
:TitleFa="getAlertProperties.title || defaultMessage[type].title"
|
||
|
|
:TitleEn="getAlertProperties.titleEn || defaultMessage[type].titleEn"
|
||
|
|
:Color="getAlertProperties.color || defaultMessage[type].color"
|
||
|
|
></WM-PartTitle>
|
||
|
|
</v-card-title>
|
||
|
|
<v-card-text>
|
||
|
|
<div class="WM-Align-R WM-Margin-T-10">{{ getAlertProperties.message || defaultMessage[type].message }}</div>
|
||
|
|
</v-card-text>
|
||
|
|
|
||
|
|
<v-divider></v-divider>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-btn :color="getAlertProperties.cancelButtonColor || defaultMessage[type].cancelButtonColor" @click="cancel" depressed dark>
|
||
|
|
<v-icon dark right>fas fa-times</v-icon>
|
||
|
|
{{getAlertProperties.cancelButtonText || defaultMessage[type].cancelButtonText}}
|
||
|
|
</v-btn>
|
||
|
|
<v-btn :color="getAlertProperties.confirmButtonColor || defaultMessage[type].confirmButtonColor" depressed dark @click="confirm">
|
||
|
|
<v-icon dark right>fas fa-trash-alt</v-icon>
|
||
|
|
{{getAlertProperties.confirmButtonText || defaultMessage[type].confirmButtonText}}
|
||
|
|
</v-btn>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapActions, mapGetters } from 'vuex';
|
||
|
|
export default {
|
||
|
|
data: () => ({
|
||
|
|
defaultMessage: {
|
||
|
|
delete: {
|
||
|
|
onConfirm: function() {
|
||
|
|
return "";
|
||
|
|
},
|
||
|
|
onCancel: function() {
|
||
|
|
return "";
|
||
|
|
},
|
||
|
|
message:
|
||
|
|
"آیا از حذف آیتم مطمئن هستید؟ امکان بازگشت وجود نخواهد داشت.",
|
||
|
|
title: " تایید حذف ",
|
||
|
|
titleEn: " Remove Confirmation ",
|
||
|
|
color: "red",
|
||
|
|
cancelButtonText: "انصراف",
|
||
|
|
confirmButtonText: "حذف",
|
||
|
|
cancelButtonColor: "cyan",
|
||
|
|
confirmButtonColor: "red"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
type: 'delete'
|
||
|
|
}),
|
||
|
|
watch: {
|
||
|
|
getAlertType(type) {
|
||
|
|
if (["delete"].includes(type)) {
|
||
|
|
this.type = type;
|
||
|
|
} else {
|
||
|
|
this.type = "delete";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
...mapGetters('modal', ['getAlertType', 'getAlertProperties', 'isModal']),
|
||
|
|
modal: {
|
||
|
|
get() {
|
||
|
|
return this.isModal("modal/alert");
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
if (value) {
|
||
|
|
this.openModal("modal/alert");
|
||
|
|
} else {
|
||
|
|
this.closeModal("modal/alert");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions('modal', ['closeModal']),
|
||
|
|
async confirm() {
|
||
|
|
|
||
|
|
if(typeof this.getAlertProperties.onConfirm == 'function') {
|
||
|
|
await this.getAlertProperties.onConfirm();
|
||
|
|
}
|
||
|
|
this.closeModal('modal/alert');
|
||
|
|
},
|
||
|
|
async cancel() {
|
||
|
|
if(typeof this.getAlertProperties.onCancel == 'function') {
|
||
|
|
await this.getAlertProperties.onCancel();
|
||
|
|
}
|
||
|
|
this.closeModal('modal/alert');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|