Merge pull request #9484 from ruchamahabal/onboarding_slide_fixes

fix: Onboarding Dialog

frappe/desk/doctype/onboarding_slide/onboarding_slide.py

@@ -101,10 +101,15 @@ def is_continue_slide_required(first_slide):
 def create_onboarding_docs(values, doctype=None, app=None, slide_type=None):
 	data = json.loads(values)
 	doc = frappe.new_doc(doctype)
-	if hasattr(doc, 'create_onboarding_docs'):
-		doc.create_onboarding_docs(data)
-	else:
-		create_generic_onboarding_doc(data, doctype, slide_type)
+	try:
+		if hasattr(doc, 'create_onboarding_docs'):
+			doc.flags.ignore_validate = True
+			doc.flags.ignore_mandatory = True
+			doc.create_onboarding_docs(data)
+		else:
+			create_generic_onboarding_doc(data, doctype, slide_type)
+	except Exception:
+		pass
 
 def create_generic_onboarding_doc(data, doctype, slide_type):
 	if slide_type == 'Settings':
@@ -117,8 +122,8 @@ def create_generic_onboarding_doc(data, doctype, slide_type):
 		doc = frappe.new_doc(doctype)
 		for entry in data:
 			doc.set(entry, data.get(entry))
+		doc.flags.ignore_validate = True
 		doc.flags.ignore_mandatory = True
-		doc.flags.ignore_links = True
 		doc.insert()
 
 @frappe.whitelist()

frappe/public/js/frappe/ui/onboarding_dialog.js

@@ -14,17 +14,30 @@ frappe.setup.OnboardingSlide = class OnboardingSlide extends frappe.ui.Slide {
 		this.$next_btn = this.slides_footer.find('.next-btn');
 		this.$complete_btn = this.slides_footer.find('.complete-btn');
 		this.$action_button = this.slides_footer.find('.next-btn');
+
 		if (this.help_links) {
 			this.$help_links = $(`<div class="text-center">
 				<div class="help-links"></div>
 			</div>`).appendTo(this.$body);
 			this.setup_help_links();
 		}
+
+		this.$skip_btn = this.slides_footer.find('.skip-btn').on('click', () => {
+			$('.onboarding-dialog').modal('toggle');
+		});
 	}
 
 	setup_form() {
 		super.setup_form();
 		const fields = this.get_atomic_fields();
+
+		// remove link indicator
+		fields.map((field) => {
+			if (field.fieldtype == 'Link') {
+				$('.link-btn').remove();
+			}
+		});
+
 		if (fields.length == 1) {
 			this.$form_wrapper.addClass("text-center");
 		} else {
@@ -33,8 +46,13 @@ frappe.setup.OnboardingSlide = class OnboardingSlide extends frappe.ui.Slide {
 	}
 
 	before_show() {
-		(this.id === 0) ?
-			this.$next_btn.text(__('Let\'s Start')) : this.$next_btn.text(__('Next'));
+		if (this.id === 0) {
+			this.$next_btn.text(__('Let\'s Go'));
+			this.$skip_btn.removeClass('hide');
+		} else {
+			this.$next_btn.text(__('Next'));
+			this.$skip_btn.addClass('hide');
+		}
 		//last slide
 		if (this.is_last_slide()) {
 			this.$complete_btn.removeClass('hide').addClass('action primary');
@@ -143,7 +161,10 @@ frappe.setup.OnboardingDialog  = class OnboardingDialog {
 			before_load: ($footer) => {
 				$footer.find('.prev-btn').addClass('hide');
 				$footer.find('.next-btn').removeClass('btn-default').addClass('btn-primary action');
-				$footer.find('.text-right').prepend(
+				$footer.find('.prev-div').prepend(
+					$(`<a class="skip-btn text-muted btn btn-link btn-sm hide">
+				${__("Do It Later")}</a>`));
+				$footer.find('.next-div').prepend(
 					$(`<a class="complete-btn btn btn-primary btn-sm hide">
 				${__("Complete")}</a>`));
 			}

frappe/public/js/frappe/ui/slides.js

@@ -77,7 +77,7 @@ frappe.ui.Slide = class Slide {
 	// Form methods
 	get_atomic_fields() {
 		var fields = JSON.parse(JSON.stringify(this.fields));
-		if(this.add_more) {
+		if (this.add_more) {
 			this.count = 1;
 			fields = fields.map((field, i) => {
 				if (field.fieldname) {
@@ -149,9 +149,14 @@ frappe.ui.Slide = class Slide {
 	bind_fields_to_action_btn() {
 		var me = this;
 		this.reqd_fields.map((field) => {
-			field.$wrapper.on('change input', () => {
+			field.$wrapper.on('change input click', () => {
 				me.reset_action_button_state();
 			});
+			field.$wrapper.on('keydown', 'input', e => {
+				if (e.key == 'Enter') {
+					me.reset_action_button_state();
+				}
+			});
 		});
 	}
 
@@ -332,10 +337,10 @@ frappe.ui.Slides = class Slides {
 
 	make_prev_next_buttons() {
 		$(`<div class="row">
-			<div class="col-sm-4">
+			<div class="col-sm-4 text-left prev-div">
 				<a class="prev-btn btn btn-default btn-sm" tabindex="0">${__("Previous")}</a>
 			</div>
-			<div class="col-sm-8 text-right">
+			<div class="col-sm-8 text-right next-div">
 				<a class="next-btn btn btn-default btn-sm" tabindex="0">${__("Next")}</a>
 			</div>
 		</div>`).appendTo(this.$footer);

frappe/public/less/desk.less

@@ -966,11 +966,15 @@ input[type="checkbox"] {
 .onboarding-dialog {
 
 	.slide-body {
-		width: 65%;
 		margin-right: auto;
 		margin-left: auto;
 	}
 
+	.slides-wrapper {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
 	.modal-content {
 		border: 1px solid #d1d8dd;
   		box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
@@ -1009,6 +1013,9 @@ input[type="checkbox"] {
 		margin-top: 15px;
 	}
 
+	.skip-btn {
+		padding: 5px 0px 5px 0px;
+	}
 }
 
 /* broken image styling */