Aknaproff/resources/js/components/CreateForm.vue

<template>
    <div>
        <form id="create_form">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <a
                        class="nav-link active"
                        id="form-tab"
                        data-toggle="tab"
                        href="#form_builder_tab"
                        role="tab"
                        aria-controls="form"
                        aria-selected="true"
                    >
                        <i class="fas fa-align-justify"></i>
                        {{ trans("messages.form") }}
                    </a>
                </li>
                <li class="nav-item" role="presentation" id="tour_step_4">
                    <a
                        class="nav-link"
                        id="field_conditions-tab"
                        data-toggle="tab"
                        href="#field_conditions_tab"
                        role="tab"
                        aria-controls="field_conditions"
                        aria-selected="false"
                    >
                        <i class="fas fa-wrench"></i>
                        {{ trans("messages.field_conditions") }}
                    </a>
                </li>
                <li class="nav-item" role="presentation" id="tour_step_5">
                    <a
                        class="nav-link"
                        id="email-tab"
                        data-toggle="tab"
                        href="#email_settings_tab"
                        role="tab"
                        aria-controls="email"
                        aria-selected="false"
                    >
                        <i class="fas fa-envelope"></i>
                        {{ trans("messages.email") }}
                    </a>
                </li>
                <li class="nav-item" role="presentation" id="tour_step_6">
                    <a
                        class="nav-link"
                        id="form-settings-tab"
                        data-toggle="tab"
                        href="#form_settings_tab"
                        role="tab"
                        aria-controls="form-settings"
                        aria-selected="false"
                    >
                        <i class="fas fa-cogs"></i>
                        {{ trans("messages.settings") }}
                    </a>
                </li>
                <li class="nav-item" role="presentation" id="tour_step_7">
                    <a
                        class="nav-link"
                        id="mailchimp-tab"
                        data-toggle="tab"
                        href="#mailchimp_tab"
                        role="tab"
                        aria-controls="mailchimp"
                        aria-selected="false"
                    >
                        <i class="fab fa-mailchimp fa-lg"></i>
                        {{ trans("messages.mailchimp") }}
                    </a>
                </li>
                <li
                    class="nav-item"
                    role="presentation"
                    id="acelle_mail_tour"
                    v-if="is_acelle_mail_enabled"
                >
                    <a
                        class="nav-link"
                        id="acelle-mail-tab"
                        data-toggle="tab"
                        href="#acelle_mail_tab"
                        role="tab"
                    >
                        <i class="fas fa-mail-bulk"></i>
                        {{ acelle_mail_name }}
                    </a>
                </li>
                <li class="nav-item" role="presentation" id="webhook_tour">
                    <a
                        class="nav-link"
                        id="webhook-tab"
                        data-toggle="tab"
                        href="#webhook_tab"
                        role="tab"
                    >
                        <i class="far fa-paper-plane"></i>
                        {{ trans("messages.webhook") }}
                    </a>
                </li>
                <li class="nav-item" role="presentation" id="tour_step_8">
                    <a
                        class="nav-link"
                        id="js-css-tab"
                        data-toggle="tab"
                        href="#custom_js_css_tab"
                        role="tab"
                        aria-controls="js-css"
                        aria-selected="false"
                    >
                        <i class="fas fa-file-code"></i>
                        {{ trans("messages.additional_js_css") }}
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <button
                        type="button"
                        class="btn btn-xs bg-gradient-danger app_tour_play_btn"
                        @click="getAppTour"
                    >
                        <i class="far fa-play-circle"></i>
                        {{ trans("messages.app_tour") }}
                    </button>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div
                    class="tab-pane fade show active"
                    id="form_builder_tab"
                    role="tabpanel"
                    aria-labelledby="form-tab"
                >
                    <form-tab
                        :selected_elements="selected_elements"
                        :settings="settings"
                        :form="form"
                        :placeholder_img="placeholderImg"
                        :form_custom_attributes="form_custom_attributes"
                    ></form-tab>
                </div>
                <div
                    class="tab-pane fade"
                    id="field_conditions_tab"
                    role="tabpanel"
                    aria-labelledby="field_conditions-tab"
                >
                    <condtionalFields
                        :conditional-fields="conditional_fields"
                        :selected-elements="selected_elements"
                    ></condtionalFields>
                </div>
                <div
                    class="tab-pane fade"
                    id="email_settings_tab"
                    role="tabpanel"
                    aria-labelledby="email-tab"
                >
                    <email-tab
                        :emailConfig="emailConfig"
                        :selected_elements="selected_elements"
                        :settings="settings"
                    >
                    </email-tab>
                </div>
                <div
                    class="tab-pane fade"
                    id="form_settings_tab"
                    role="tabpanel"
                    aria-labelledby="form-settings-tab"
                >
                    <settings-tab
                        :settings="settings"
                        :selected_elements="selected_elements"
                    >
                    </settings-tab>
                </div>
                <div
                    class="tab-pane fade"
                    id="mailchimp_tab"
                    role="tabpanel"
                    aria-labelledby="mailchimp-tab"
                >
                    <mailchimp
                        :details="mailchimp_details"
                        :selected_elements="selected_elements"
                    >
                    </mailchimp>
                </div>
                <div
                    class="tab-pane fade"
                    id="acelle_mail_tab"
                    role="tabpanel"
                    aria-labelledby="acelle-mail-tab"
                    v-if="is_acelle_mail_enabled"
                >
                    <acelle-mail
                        :acelle-mail="acelle_mail_info"
                        :selected_elements="selected_elements"
                    >
                    </acelle-mail>
                </div>
                <div
                    class="tab-pane fade"
                    id="webhook_tab"
                    role="tabpanel"
                    aria-labelledby="webhook-tab"
                >
                    <webhook :webhook-info="webhook_info" />
                </div>
                <div
                    class="tab-pane fade"
                    id="custom_js_css_tab"
                    role="tabpanel"
                    aria-labelledby="js-css-tab"
                >
                    <additional-js-css :additional-data="additionalData">
                    </additional-js-css>
                </div>
            </div>
            <!-- submit button -->
            <div v-if="selected_elements.length">
                <hr class="mt-5" />
                <div id="tour_step_9">
                    <button
                        type="submit"
                        class="btn btn-success btn-lg float-right ladda-form-save-btn mb-2"
                        name="submit_type"
                        value="0"
                    >
                        {{ trans("messages.save_as_form") }}
                    </button>
                    <button
                        type="submit"
                        class="btn btn-secondary btn-lg float-right ladda-template-save-btn mb-2 mr-1"
                        name="submit_type"
                        value="1"
                        v-if="disabled_save_temp_btn"
                    >
                        {{ trans("messages.save_as_template") }}
                    </button>
                </div>
            </div>
            <AskUserChoice id="userChoiceModal"> </AskUserChoice>
        </form>
    </div>
</template>

<script>
import formTab from "./FormTab";
import emailTab from "./EmailTab";
import settingsTab from "./SettingsTab";
import additionalJsCss from "./AdditionalJsCss";
import mailchimp from "./Mailchimp";
import condtionalFields from "./ConditionalField";
import AskUserChoice from "./AskUserChoiceAfterSave";
import AcelleMail from "./AcelleMail";
import Webhook from "./Webhook/Webhook";
export default {
    props: ["formData", "placeholderImg", "saveTemplate"],
    components: {
        formTab,
        emailTab,
        settingsTab,
        mailchimp,
        additionalJsCss,
        condtionalFields,
        AskUserChoice,
        AcelleMail,
        Webhook,
    },
    data() {
        return {
            selected_elements: [],
            form_parsed: [],
            form: [],
            emailConfig: {},
            settings: {},
            dashboard: "",
            additionalData: {},
            mailchimp_details: {},
            conditional_fields: [],
            form_scheduling: {
                closed_msg: "The form has been closed now!",
                start_date_time: "",
                end_date_time: "",
                is_enabled: false,
            },
            form_submision_ref: {
                is_enabled: false,
                prefix: "",
                suffix: "",
                start_no: "1",
                min_digit: "4",
            },
            form_theme: "default",
            responseData: [],
            is_enabled_draft_submit: 0,
            form_custom_attributes: [],
            disabled_save_temp_btn: null,
            password_protection: {
                is_enabled: false,
                password: "",
            },
            pdf_design: {
                header: `<h1 style="margin-top: 0px; margin-bottom: 0.5rem; font-family: &quot;Source Sans Pro&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; line-height: 1.2; color: rgb(0, 0, 0); font-size: 2.5rem; text-align: center;"><span style="color: rgb(33, 37, 41); font-size: 12.8px; text-align: left; background-color: rgb(244, 246, 249);"><span style="font-size: 24px;"><span style="font-weight: bolder;">{form_name}</span></span><sub style="font-size: 9.6px;"><span style="font-size: 12px;">{submission_date}</span></sub></span></h1>`,
            },
            spread_to_col: {
                enable: false,
                column: 2,
            },
            acelle_mail_info: {},
            is_acelle_mail_enabled: APP.ACELLE_MAIL_ENABLED,
            acelle_mail_name: APP.ACELLE_MAIL_NAME,
            webhook_info: {},
            popover_help_text: {
                enable: false,
                content: "",
            },
        };
    },
    created() {
        this.form_parsed = JSON.parse(this.formData);
        this.form.name = this.form_parsed.name;
        this.form.name_ru = this.form_parsed.name_ru;
        this.form.name_est = this.form_parsed.name_est;
        this.form.slug = this.form_parsed.slug;
        this.form.description = this.form_parsed.description;
        this.form.description_ru = this.form_parsed.description_ru;
        this.form.description_est = this.form_parsed.description_est;
        this.form.is_template = this.form_parsed.is_template;
        this.disabled_save_temp_btn = JSON.parse(this.saveTemplate);
        if (this.form_parsed.schema === null) {
            this.emailConfig = this.getData("email_config");
            this.settings = this.getData("settings");
            this.additionalData = { js: "", css: "" };
            this.conditional_fields = this.getData("conditional_fields");
        } else {
            this.selected_elements = this.form_parsed.schema.form;
            this.emailConfig = this.form_parsed.schema.emailConfig;
            this.settings = this.form_parsed.schema.settings;
            this.additionalData = _.isNull(
                this.form_parsed.schema.additional_js_css
            )
                ? { js: "", css: "" }
                : this.form_parsed.schema.additional_js_css;

            this.mailchimp_details = _.isNull(
                this.form_parsed.mailchimp_details
            )
                ? this.getData("mailchimp")
                : this.form_parsed.mailchimp_details;

            this.acelle_mail_info = _.isEmpty(this.form_parsed.acelle_mail_info)
                ? this.getData("acelle_mail")
                : this.form_parsed.acelle_mail_info;

            this.conditional_fields = _.isUndefined(
                this.form_parsed.schema.conditional_fields
            )
                ? this.getData("conditional_fields")
                : this.form_parsed.schema.conditional_fields;
            this.form_custom_attributes = _.isUndefined(
                this.form_parsed.schema.form_attributes
            )
                ? this.form_custom_attributes
                : this.form_parsed.schema.form_attributes;
        }

        this.webhook_info =
            this.form_parsed?.webhook_info || this.getData("webhook_info");

        this.getNewlyAddedPropertyForExistingForm();
        this.$eventBus.$on("callRedirectUser", (data) => {
            $("#userChoiceModal").modal("hide");
            setTimeout(() => {
                this.redirectUsersAccordingToResponse(data);
            }, 1000);
        });
    },
    beforeDestroy() {
        this.$eventBus.$off("callRedirectUser");
    },
    mounted() {
        const self = this;

        $("form#create_form").validate({
            ignore: ".note-editor *",
            submitHandler: function (form, e) {
                var field_names = [];
                if (self.selected_elements.length > 0) {
                    for (
                        let index = 0;
                        index < self.selected_elements.length;
                        index++
                    ) {
                        self.selected_elements[
                            index
                        ].extras.showConfigurator = false;
                        if (_.isEmpty(self.selected_elements[index].name)) {
                            toastr.error(
                                self.trans(
                                    "messages.field_dont_have_name_property",
                                    {
                                        input: self.selected_elements[index]
                                            .label,
                                    }
                                )
                            );
                            return false;
                        } else if (
                            /\s/.test(self.selected_elements[index].name)
                        ) {
                            toastr.error(
                                self.trans("messages.field_contain_space", {
                                    input: self.selected_elements[index].label,
                                })
                            );
                            return false;
                        } else if (
                            _.includes(
                                field_names,
                                self.selected_elements[index].name
                            )
                        ) {
                            toastr.error(
                                self.trans(
                                    "messages.field_contain_duplicate_field_name",
                                    {
                                        input: self.selected_elements[index]
                                            .label,
                                    }
                                )
                            );
                            field_names = [];
                            return false;
                        } else if (
                            !_.includes(
                                field_names,
                                self.selected_elements[index].name
                            )
                        ) {
                            field_names.push(
                                self.selected_elements[index].name
                            );
                        }
                    }
                }

                let data = _.pick(self.form, [
                    "name",
                    "name_ru",
                    "name_est",
                    "description",
                    "description_ru",
                    "description_est",
                    "slug",
                ]);
                console.log(data);
                data.form = self.selected_elements;
                data.email_config = self.emailConfig;
                data.settings = self.settings;
                data.js_css = self.additionalData;
                data.mailchimp_details = self.mailchimp_details;
                data.acelle_mail_info = self.acelle_mail_info;
                data.conditional_fields = self.conditional_fields;
                data.is_template = $("input[name='submit_type']").val();
                data.form_attributes = self.form_custom_attributes;
                data.contains_page_break = _.some(self.selected_elements, {
                    type: "page_break",
                });
                data.webhook_info = self.webhook_info;
                //get ladda btn based on submit type
                if (data.is_template === "1") {
                    var ladda = Ladda.create(
                        document.querySelector(".ladda-template-save-btn")
                    );
                } else {
                    var ladda = Ladda.create(
                        document.querySelector(".ladda-form-save-btn")
                    );
                }

                if ($("form#create_form").valid()) {
                    //disable both btn and start ladda
                    $(
                        "button.ladda-form-save-btn, button.ladda-template-save-btn"
                    ).attr("disabled", "disabled");
                    ladda.start();

                    axios
                        .put("/forms/" + self.form_parsed.id, data)
                        .then(function (response) {
                            //remove disable from both btn and stop ladda
                            $(
                                "button.ladda-form-save-btn, button.ladda-template-save-btn"
                            ).removeAttr("disabled");
                            ladda.stop();

                            if (response.data.success == true) {
                                self.responseData = response.data;
                                $("#userChoiceModal").modal("show");
                            } else {
                                toastr.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
        });

        //if mpfg_tour not finished call getAppTour
        if (_.isNull(localStorage.getItem("mpfg_tour"))) {
            localStorage.setItem("mpfg_tour", "finished");
            this.getAppTour();
        }
    },
    methods: {
        getData(type) {
            if (type == "email_config") {
                var email = {
                    email: {
                        enable: "",
                        from: "",
                        to: "",
                        reply_to_email: "",
                        cc: "",
                        bcc: "",
                        subject: "",
                        body: "",
                        attach_pdf: false,
                    },
                    auto_response: {
                        from: "",
                        to: "",
                        subject: "",
                        body: "",
                        is_enable: false,
                        attach_pdf: false,
                    },
                    smtp: {
                        host: "",
                        port: "",
                        from_address: "",
                        from_name: "",
                        encryption: "",
                        username: "",
                        password: "",
                        use_system_smtp: 1,
                    },
                };

                return email;
            } else if (type == "settings") {
                var setting = {
                    recaptcha: {
                        is_enable: 0,
                        site_key: "",
                        secret_key: "",
                    },
                    color: {
                        label: "#000000",
                        error_msg: "#a94442",
                        required_asterisk_color: "#a94442",
                        background: "#ffffff",
                        image_path: "",
                        page_color: "#f4f6f9",
                    },
                    notification: {
                        post_submit_action: "same_page",
                        failed_msg: "Something went wrong, please try again.",
                        success_msg: "Your submission has been received.",
                        redirect_url: "",
                        position: "toast-top-right",
                    },
                    submit: {
                        text: "Submit",
                        loading_text: "Submitting...",
                        btn_alignment: "float-right",
                        btn_size: "",
                        btn_color: "btn-primary",
                        btn_style: "default",
                        btn_icon: "none",
                        icon_position: "left",
                    },
                    form_data: {
                        col_visible: [],
                        btn_enabled: ["view", "delete"],
                    },
                    background: {
                        bg_type: "bg_color",
                    },
                    form_scheduling: this.form_scheduling,
                    form_submision_ref: this.form_submision_ref,
                    theme: this.form_theme,
                    is_enabled_draft_submit: this.is_enabled_draft_submit,
                    layout: "classic",
                    password_protection: this.password_protection,
                    pdf_design: this.pdf_design,
                    is_qr_code_enabled: false,
                    qr_code_data_format: "string",
                    is_ref_num_bar_code_enabled: false,
                    is_ref_num_qr_code_enabled: false,
                };

                return setting;
            } else if (type == "mailchimp") {
                return {
                    is_enable: false,
                    api_key: "",
                    list_id: "",
                    email_field: "",
                    name_field: "",
                };
            } else if (type == "acelle_mail") {
                return {
                    is_enable: false,
                    api_token: "",
                    list_id: "",
                    campaign_fields: [],
                };
            } else if (type == "conditional_fields") {
                var conditional_fields = [
                    {
                        action: "",
                        element: "",
                        conditions: [
                            {
                                condition: "",
                                value: "",
                                element_type: "text",
                                element_index: "",
                                operator: "==",
                                logical_operator: "AND",
                            },
                        ],
                    },
                ];

                return conditional_fields;
            } else if (type == "webhook_info") {
                return {
                    is_enable: false,
                    url: "",
                    secret_key: "",
                };
            }
        },
        getNewlyAddedPropertyForExistingForm() {
            const self = this;
            _.forEach(self.selected_elements, function (element) {
                if (_.isUndefined(element.conditional_class)) {
                    element.conditional_class = "";
                }

                if (_.isUndefined(element.col)) {
                    element.col = "col-md-12";
                }

                if (_.isUndefined(element.popover_help_text)) {
                    element["popover_help_text"] = _.clone(
                        self.popover_help_text
                    );
                }
                //if spread to col option is undefined for element set to default
                if (
                    _.includes(["radio", "checkbox"], element.type) &&
                    _.isUndefined(element.spread_to_col)
                ) {
                    element.spread_to_col = self.spread_to_col;
                }

                if (
                    _.includes(["text"], element.type) &&
                    _.includes(["text", "email", "number"], element.subtype) &&
                    _.isUndefined(element.allowed_input)
                ) {
                    element.allowed_input = {
                        values: "",
                        error_msg: "This value is not allowed.",
                    };
                }
            });

            if (_.isUndefined(self.settings.form_scheduling)) {
                self.settings.form_scheduling = self.form_scheduling;
            }

            if (_.isUndefined(self.settings.form_submision_ref)) {
                self.settings.form_submision_ref = self.form_submision_ref;
            }

            if (_.isUndefined(self.settings.theme)) {
                self.settings.theme = self.form_theme;
            }

            if (_.isUndefined(self.settings.is_qr_code_enabled)) {
                Vue.set(self.settings, "is_qr_code_enabled", false);
            }

            if (
                _.isUndefined(self.settings.is_ref_num_bar_code_enabled) ||
                _.isUndefined(self.settings.is_ref_num_qr_code_enabled)
            ) {
                Vue.set(self.settings, "is_ref_num_bar_code_enabled", false);
                Vue.set(self.settings, "is_ref_num_qr_code_enabled", false);
            }

            if (_.isUndefined(self.settings.qr_code_data_format)) {
                Vue.set(self.settings, "qr_code_data_format", "string");
            }

            if (_.isUndefined(self.settings.is_enabled_draft_submit)) {
                self.settings.is_enabled_draft_submit =
                    self.is_enabled_draft_submit;
            }

            if (_.isUndefined(self.settings.notification.position)) {
                self.settings.notification.position = "toast-top-right";
            }

            if (_.isUndefined(self.settings.submit.btn_style)) {
                Vue.set(self.settings.submit, "btn_style", "default");
            }

            if (_.isUndefined(self.settings.submit.btn_icon)) {
                Vue.set(self.settings.submit, "btn_icon", "none");
            }

            if (_.isUndefined(self.settings.submit.icon_position)) {
                Vue.set(self.settings.submit, "icon_position", "left");
            }

            if (_.isUndefined(self.settings.color.page_color)) {
                Vue.set(self.settings.color, "page_color", "#f4f6f9");
            }

            if (_.isUndefined(self.settings.password_protection)) {
                self.settings.password_protection = self.password_protection;
            }

            if (_.isUndefined(self.settings.pdf_design)) {
                self.settings.pdf_design = self.pdf_design;
            }
        },
        redirectUsersAccordingToResponse(choice) {
            if (choice == "home") {
                window.location = this.responseData.redirect;
            } else if (choice == "preview") {
                window.open(
                    this.responseData.preview,
                    this.responseData.form_name
                );
            }
        },
        getAppTour() {
            if (!$('#appTab a[href="#form-generator"]').hasClass("active")) {
                $('#appTab a[href="#form-generator"]').tab("show");
            }

            const self = this;
            var intro = introJs();
            intro.setOptions({
                steps: [
                    {
                        intro: self.trans("messages.welcome_tour_msg"),
                    },
                    {
                        element: document.querySelectorAll("#tour_step_1")[0],
                        intro: self.trans("messages.tour_step_1_intro"),
                        position: "right",
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_2",
                        intro: self.trans("messages.tour_step_2_intro"),
                        position: "right",
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_3",
                        intro: self.trans("messages.tour_step_3_intro"),
                        position: "bottom",
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_4",
                        intro: self.trans("messages.tour_step_4_intro"),
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_5",
                        intro: self.trans("messages.tour_step_5_intro"),
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_6",
                        intro: self.trans("messages.tour_step_6_intro"),
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_7",
                        intro: self.trans("messages.tour_step_7_intro"),
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_8",
                        intro: self.trans("messages.tour_step_8_intro"),
                        scrollTo: "tooltip",
                    },
                    {
                        element: "#tour_step_9",
                        intro: self.trans("messages.tour_step_9_intro"),
                        scrollTo: "tooltip",
                    },
                ],
            });

            intro.start();
        },
    },
};
</script>