willaengine/resources/js/Global/components/Misc/Dialog.vue

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