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

<template>
    <basic-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>WMi-cancel</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>WMi-trash</v-icon>
                    {{getDialogProperties.confirmButtonText || defaultMessage[type].confirmButtonText}}
                </v-btn>
            </v-card-actions>
        </v-card>
    </basic-modal>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name: "modal_modal_dialog",
    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"]),
    },
    methods: {
        async confirm() {
            if (typeof this.getDialogProperties.success == "function") {
                await this.getDialogProperties.success();
            }
            this.$_closeModal();
        },
        async cancel() {
            if (typeof this.getDialogProperties.close == "function") {
                await this.getDialogProperties.close();
            }
            this.$_closeModal();
        }
    }
};
</script>