788 lines
24 KiB
Vue
788 lines
24 KiB
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: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 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.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",
|
|
"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>
|