feat: better indicators for skipped steps
This commit is contained in:
Shivam Mishra
parent
190745fed8
commit
ad697fa3f7
2 changed files with 102 additions and 74 deletions
|
|
@ -8,11 +8,11 @@ export default class OnboardingWidget extends Widget {
|
|||
}
|
||||
|
||||
make_body() {
|
||||
this.body.addClass('grid')
|
||||
this.body.addClass("grid");
|
||||
if (this.steps.length < 5) {
|
||||
this.body.addClass(`grid-rows-${this.steps.length}`)
|
||||
this.body.addClass(`grid-rows-${this.steps.length}`);
|
||||
} else if (this.steps.length >= 5) {
|
||||
this.body.addClass('grid-rows-5')
|
||||
this.body.addClass("grid-rows-5");
|
||||
}
|
||||
this.steps.forEach((step) => {
|
||||
this.add_step(step);
|
||||
|
|
@ -20,24 +20,34 @@ export default class OnboardingWidget extends Widget {
|
|||
}
|
||||
|
||||
add_step(step) {
|
||||
let status = step.is_complete
|
||||
? "complete"
|
||||
: step.is_skipped
|
||||
? "skipped"
|
||||
: "";
|
||||
let $step = $(`<div class="onboarding-step ${status}" data-step-name=${step.name}>
|
||||
<i class="fa fa-check-circle" aria-hidden="true" title="${status}"></i>
|
||||
let status = "";
|
||||
let icon_class = "fa-circle-o";
|
||||
|
||||
if (step.is_skipped) {
|
||||
status = "skipped"
|
||||
icon_class = "fa-times-circle-o"
|
||||
}
|
||||
|
||||
if (step.is_complete) {
|
||||
status = "complete";
|
||||
icon_class = "fa-check-circle-o";
|
||||
}
|
||||
|
||||
let $step = $(`<div class="onboarding-step ${status}">
|
||||
<i class="fa ${icon_class}" aria-hidden="true" title="${status}"></i>
|
||||
<span>${step.title}</span>
|
||||
</div>`);
|
||||
|
||||
if (!step.is_mandatory && !step.is_complete) {
|
||||
// let skip_html = $(`<i class="fa fa-check text-extra-muted step-skip" title="Mark as Complete" aria-hidden="true"></i>`);
|
||||
let skip_html = $(`<span class="ml-5 small text-muted step-skip">Skip</span>`);
|
||||
let skip_html = $(
|
||||
`<span class="ml-5 small text-muted step-skip">Skip</span>`
|
||||
);
|
||||
skip_html.appendTo($step);
|
||||
skip_html.on('click', () => {
|
||||
skip_html.on("click", () => {
|
||||
this.skip_step(step, $step);
|
||||
event.stopPropagation();
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
let action = () => {};
|
||||
|
|
@ -45,88 +55,105 @@ export default class OnboardingWidget extends Widget {
|
|||
action = () => {
|
||||
frappe.help.show_video(step.video_url, step.title);
|
||||
this.mark_complete(step, $step);
|
||||
}
|
||||
}
|
||||
|
||||
else if (step.action == "Create Entry") {
|
||||
};
|
||||
} else if (step.action == "Create Entry") {
|
||||
action = () => {
|
||||
frappe.ui.form.make_quick_entry(step.reference_document, () => {
|
||||
this.mark_complete(step, $step);
|
||||
}, null, null, true)
|
||||
}
|
||||
}
|
||||
|
||||
else if (step.action == "View Settings") {
|
||||
frappe.ui.form.make_quick_entry(
|
||||
step.reference_document,
|
||||
() => {
|
||||
this.mark_complete(step, $step);
|
||||
},
|
||||
null,
|
||||
null,
|
||||
true
|
||||
);
|
||||
};
|
||||
} else if (step.action == "View Settings") {
|
||||
action = () => {
|
||||
frappe.set_route("Form", step.reference_document)
|
||||
}
|
||||
}
|
||||
|
||||
else if (step.action == "View Report") {
|
||||
frappe.set_route("Form", step.reference_document);
|
||||
};
|
||||
} else if (step.action == "View Report") {
|
||||
action = () => {
|
||||
let route = generate_route({
|
||||
name: step.reference_report,
|
||||
type: 'report',
|
||||
is_query_report: ["Query Report", "Script Report"].includes(step.report_type)
|
||||
type: "report",
|
||||
is_query_report: ["Query Report", "Script Report"].includes(
|
||||
step.report_type
|
||||
),
|
||||
});
|
||||
|
||||
frappe.set_route(route);
|
||||
this.mark_complete(step, $step);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$step.on('click', action)
|
||||
|
||||
$step.on("click", action);
|
||||
|
||||
$step.appendTo(this.body);
|
||||
return $step;
|
||||
}
|
||||
|
||||
mark_complete(step, $step) {
|
||||
frappe.call("frappe.desk.desktop.update_onboarding_step", {
|
||||
name: step.name,
|
||||
field: 'is_complete',
|
||||
value: 1
|
||||
}).then(() => {
|
||||
step.is_complete = true;
|
||||
$step.addClass('complete');
|
||||
})
|
||||
frappe
|
||||
.call("frappe.desk.desktop.update_onboarding_step", {
|
||||
name: step.name,
|
||||
field: "is_complete",
|
||||
value: 1,
|
||||
})
|
||||
.then(() => {
|
||||
step.is_complete = true;
|
||||
$step.removeClass("skipped");
|
||||
$step.addClass("complete");
|
||||
|
||||
let pending = onb.steps.filter(step => {
|
||||
return !(step.is_complete || step.is_skipped)
|
||||
})
|
||||
let icon = $step.find("i.fa");
|
||||
icon.removeClass();
|
||||
icon.addClass('fa');
|
||||
icon.addClass('fa-check-circle-o');
|
||||
|
||||
if (pending.length) {
|
||||
this.show_success()
|
||||
}
|
||||
let pending = this.steps.filter((step) => {
|
||||
return !(step.is_complete || step.is_skipped);
|
||||
});
|
||||
|
||||
if (pending.length == 0) {
|
||||
this.show_success();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
skip_step(step, $step) {
|
||||
frappe.call("frappe.desk.desktop.update_onboarding_step", {
|
||||
name: step.name,
|
||||
field: 'is_skipped',
|
||||
value: 1
|
||||
}).then(() => {
|
||||
step.is_skipped = true;
|
||||
$step.addClass('skipped');
|
||||
})
|
||||
frappe
|
||||
.call("frappe.desk.desktop.update_onboarding_step", {
|
||||
name: step.name,
|
||||
field: "is_skipped",
|
||||
value: 1,
|
||||
})
|
||||
.then(() => {
|
||||
step.is_skipped = true;
|
||||
$step.removeClass("complete");
|
||||
$step.addClass("skipped");
|
||||
|
||||
let pending = onb.steps.filter(step => {
|
||||
return !(step.is_complete || step.is_skipped)
|
||||
})
|
||||
let icon = $step.find("i.fa");
|
||||
icon.removeClass();
|
||||
icon.addClass('fa');
|
||||
icon.addClass('fa-times-circle-o');
|
||||
|
||||
if (pending.length) {
|
||||
this.show_success()
|
||||
}
|
||||
let pending = this.steps.filter((step) => {
|
||||
return !(step.is_complete || step.is_skipped);
|
||||
});
|
||||
|
||||
if (pending.length == 0) {
|
||||
this.show_success();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
show_success() {
|
||||
let height = this.widget.height();
|
||||
this.widget.empty();
|
||||
this.widget.height(height);
|
||||
this.widget.addClass('flex');
|
||||
this.widget.addClass('align-center');
|
||||
this.widget.addClass('justify-center');
|
||||
this.widget.addClass("flex");
|
||||
this.widget.addClass("align-center");
|
||||
this.widget.addClass("justify-center");
|
||||
|
||||
let success = $(`<div class="success">
|
||||
<h1>Hooray 🎉</h1>
|
||||
|
|
@ -134,8 +161,7 @@ export default class OnboardingWidget extends Widget {
|
|||
</div>
|
||||
`);
|
||||
success.appendTo(this.widget);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
set_body() {
|
||||
this.widget.addClass("onboarding-widget-box");
|
||||
|
|
@ -162,7 +188,9 @@ export default class OnboardingWidget extends Widget {
|
|||
set_title(title) {
|
||||
super.set_title(title);
|
||||
if (this.subtitle) {
|
||||
let subtitle = $(`<div class="widget-subtitle">${this.subtitle}</div>`);
|
||||
let subtitle = $(
|
||||
`<div class="widget-subtitle">${this.subtitle}</div>`
|
||||
);
|
||||
subtitle.appendTo(this.title_field);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -358,7 +358,7 @@
|
|||
i {
|
||||
color: @text-muted;
|
||||
padding-left: 5px;
|
||||
padding-right: 12px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.step-skip {
|
||||
|
|
@ -386,7 +386,7 @@
|
|||
|
||||
&.skipped {
|
||||
i {
|
||||
color: @blue-light;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -646,8 +646,8 @@
|
|||
@-webkit-keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
-webkit-transform: scale3d(0.7, 0.7, 0.7);
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
|
||||
50% {
|
||||
|
|
@ -658,8 +658,8 @@
|
|||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
-webkit-transform: scale3d(0.7, 0.7, 0.7);
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
|
||||
50% {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue