eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new search ui

Browse Source
This commit is contained in:
Jannat Patel
2022-12-22 15:47:03 +05:30
parent 2b45e7d77c
commit 0f314bc4e3
7 changed files with 92 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lms/templates/search_course/search_course.html
View File

@@ -1,7 +1,14 @@
{% set search_placeholder = frappe.db.get_single_value("LMS Settings", "search_placeholder") %}
{% set portal_course_creation = frappe.db.get_single_value("LMS Settings", "portal_course_creation") %}
<input class="search" id="search-course" placeholder="{{ _(search_placeholder) or 'Search' }}">
<div id="search-modal" class="modal-container">
<div class="modal-inner">
<input class="search" id="search-course" placeholder="{{ _(search_placeholder) or 'Search for courses' }}">
</div>
</div>
<div class="empty-state alert alert-dismissible search-empty-state hide">
<a href="#" class="close-search-empty-state" aria-label="close">&times;</a>
<div>

28
lms/templates/search_course/search_course.js
View File

@@ -6,6 +6,14 @@ frappe.ready(() => {
$(".close-search-empty-state").click((e) => {
close_search_empty_state(e);
});
$("#open-search").click((e) => {
show_search_bar();
});
$("#search-course").focusout((e) => {
hide_search_bar();
});
});
const search_course = (e) => {
@@ -28,7 +36,14 @@ const search_course = (e) => {
text: input,
},
callback: (data) => {
render_course_list(data.message);
let courses = data.message;
$(".result-row").remove();
for (let i in courses) {
let element = `<div class="result-row">
${courses[i].title}
</div>`;
$("#search-result").append(element);
}
},
});
};
@@ -72,3 +87,14 @@ const close_search_empty_state = (e) => {
$(".search-empty-state").addClass("hide");
$("#search-course").val("");
};
const show_search_bar = () => {
$("#open-search").addClass("hide");
$("#search-modal").css("display", "block");
$("#search-course").focus();
};
const hide_search_bar = () => {
$("#open-search").removeClass("hide");
$("#search-modal").css("display", "none");
};