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.
113 lines
3.8 KiB
113 lines
3.8 KiB
<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="getDialogProperties.title || defaultMessage[type].title"
|
|
:TitleEn="getDialogProperties.titleEn || defaultMessage[type].titleEn"
|
|
:color="getDialogProperties.color || defaultMessage[type].color"
|
|
></WM-PartTitle>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<div
|
|
class="WM-Align-R WM-Margin-T-10"
|
|
>{{ getDialogProperties.message || defaultMessage[type].message }}</div>
|
|
</v-card-text>
|
|
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
:color="getDialogProperties.cancelButtonColor || defaultMessage[type].cancelButtonColor"
|
|
@click="cancel"
|
|
depressed
|
|
dark
|
|
>
|
|
<v-icon dark right>fas fa-times</v-icon>
|
|
{{getDialogProperties.cancelButtonText || defaultMessage[type].cancelButtonText}}
|
|
</v-btn>
|
|
<v-btn
|
|
:color="getDialogProperties.confirmButtonColor || defaultMessage[type].confirmButtonColor"
|
|
depressed
|
|
dark
|
|
@click="confirm"
|
|
>
|
|
<v-icon dark right>fas fa-trash-alt</v-icon>
|
|
{{getDialogProperties.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: {
|
|
success: function() {
|
|
return "";
|
|
},
|
|
close: function() {
|
|
return "";
|
|
},
|
|
message:
|
|
"آیا از حذف آیتم مطمئن هستید؟ امکان بازگشت وجود نخواهد داشت.",
|
|
title: " تایید حذف ",
|
|
titleEn: " Remove Confirmation ",
|
|
color: "red",
|
|
cancelButtonText: "انصراف",
|
|
confirmButtonText: "حذف",
|
|
cancelButtonColor: "cyan",
|
|
confirmButtonColor: "red"
|
|
}
|
|
},
|
|
type: "delete"
|
|
}),
|
|
watch: {
|
|
getDialogType(type) {
|
|
if (["delete"].includes(type)) {
|
|
this.type = type;
|
|
} else {
|
|
this.type = "delete";
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters("modal", [
|
|
"getDialogType",
|
|
"getDialogProperties",
|
|
"isModal"
|
|
]),
|
|
modal: {
|
|
get() {
|
|
return this.isModal("modal/dialog");
|
|
},
|
|
set(value) {
|
|
if (value) {
|
|
this.$_openModal("modal/dialog");
|
|
} else {
|
|
this.$_closeModal("modal/dialog");
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async confirm() {
|
|
if (typeof this.getDialogProperties.success == "function") {
|
|
await this.getDialogProperties.success();
|
|
}
|
|
this.$_closeModal("modal/dialog");
|
|
},
|
|
async cancel() {
|
|
if (typeof this.getDialogProperties.close == "function") {
|
|
await this.getDialogProperties.close();
|
|
}
|
|
this.$_closeModal("modal/dialog");
|
|
}
|
|
}
|
|
};
|
|
</script>
|