feat: course filters

lms/public/css/style.css

@@ -1956,10 +1956,6 @@ select {
 	-webkit-appearance: none;
 }
 
-.course-list-cta {
-	float: right;
-}
-
 .modal-title {
 	font-size: var(--text-lg) !important;
 }
@@ -2027,15 +2023,24 @@ select {
 }
 
 .lms-menu {
+	background-color: var(--control-bg);
+	color: var(--text-color);
+	border: none;
+	border-radius: var(--border-radius);
+	padding: 0.15rem 0.5rem;
+	box-shadow: var(--btn-shadow);
 	background-image: url(/assets/lms/icons/down-arrow.svg);
 	background-position: right 0.5rem center;
 	background-repeat: no-repeat;
 	background-size: 0.75rem;
-	padding-right: 2.5rem;
-	text-align: left;
+	padding-right: 2rem;
 	-webkit-print-color-adjust: exact;
 }
 
+.lms-menu:focus-visible {
+	outline: var(--gray-500);
+}
+
 .clickable-row {
 	cursor: pointer;
 }
@@ -2278,4 +2283,8 @@ select {
 	position: absolute;
 	top: 0;
 	left: 0;
+}
+
+.course-filter {
+
 }

lms/public/js/common_functions.js

@@ -40,6 +40,10 @@ frappe.ready(() => {
 	$("#create-class").click((e) => {
 		open_class_dialog(e);
 	});
+
+	$("#course-filter").change((e) => {
+		filter_courses(e);
+	});
 });
 
 const pin_header = () => {
@@ -354,3 +358,17 @@ const save_class = (values) => {
 		},
 	});
 };
+
+const filter_courses = (e) => {
+	const course_lists = $(".course-cards-parent");
+	const filter = $(e.currentTarget).val();
+	course_lists.each((i, list) => {
+		const course_cards = $(list).children(".course-card");
+		course_cards.sort((a, b) => {
+			var value1 = $(a).data(filter);
+			var value2 = $(b).data(filter);
+			return value1 > value2 ? -1 : value1 < value2 ? 1 : 0;
+		});
+		$(list).append(course_cards);
+	});
+};