Merge pull request #515 from pateljannat/class-improvements

fix: Class improvements
2023-05-16 17:18:53 +05:30
parent 95012072fc 552b0c9616
commit 611cc4d5a1
11 changed files with 350 additions and 197 deletions
--- a/lms/lms/doctype/lms_class/lms_class.json
+++ b/lms/lms/doctype/lms_class/lms_class.json
@@ -11,6 +11,7 @@
  "title",
  "start_date",
  "end_date",
+  "paid_class",
  "column_break_4",
  "seat_count",
  "start_time",
@@ -75,6 +76,12 @@
   "label": "Custom Component",
   "options": "HTML"
  },
+  {
+   "default": "0",
+   "fieldname": "paid_class",
+   "fieldtype": "Check",
+   "label": "Paid Class"
+  },
  {
   "fieldname": "seat_count",
   "fieldtype": "Int",
--- a/lms/lms/doctype/lms_class/lms_class.py
+++ b/lms/lms/doctype/lms_class/lms_class.py
@@ -75,25 +75,11 @@ def add_student(email, class_name):
@frappe.whitelist()
 def remove_student(student, class_name):
 	frappe.db.delete("Class Student", {"student": student, "parent": class_name})
-	return True


@frappe.whitelist()
-def update_course(class_name, course, value):
-	if cint(value):
-		doc = frappe.get_doc(
-			{
-				"doctype": "Class Course",
-				"parent": class_name,
-				"course": course,
-				"parenttype": "LMS Class",
-				"parentfield": "courses",
-			}
-		)
-		doc.save()
-	else:
-		frappe.db.delete("Class Course", {"parent": class_name, "course": course})
-	return True
+def remove_course(course, parent):
+	frappe.db.delete("Class Course", {"course": course, "parent": parent})


@frappe.whitelist()
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -124,7 +124,7 @@ textarea.field-input {
 	border-bottom: none;
 }

-.level {
+.outline-lesson .level {
 	justify-content: start;
 }

@@ -526,24 +526,6 @@ input[type=checkbox] {
  margin: 0.25rem 0;
 }

-.button {
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem 1.25rem;
-  font-size: var(--text-md);
-  line-height: 20px;
-  box-shadow: var(--btn-shadow);
-  border: none;
-  width: fit-content;
-}
-
-.button:disabled {
-  cursor: not-allowed;
-}
-
 .wide-button {
 	padding: 0.3rem 4rem;
 	width: 100%;
@@ -555,35 +537,6 @@ input[type=checkbox] {
 	}
 }

-.is-secondary {
-  background: #FFFFFF;
-  color: var(--gray-900);
-}
-
-.is-secondary:hover {
-  text-decoration: none;
-  color: var(--gray-900);
-}
-
-.is-default {
-  background: var(--gray-100);
-  color: var(--gray-900);
-}
-
-.is-default:disabled {
-  color: var(--gray-500);
-}
-
-.is-primary {
-  background: var(--primary-color);
-  color: #FFFFFF;
-}
-
-.is-primary:hover {
-  text-decoration: none;
-  color: #FFFFFF;
-}
-
 .course-home-page .course-home-outline {
 	padding-bottom: 4rem;
 }
@@ -2144,10 +2097,10 @@ select {
 .lms-card {
 	display: flex;
 	flex-direction: column;
-	border-radius: 0.75rem;
-	/* border: 1px solid var(--gray-200); */
-	box-shadow: var(--shadow-sm);
-	padding: 0.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--gray-300);
+	/* box-shadow: var(--shadow-sm); */
+    padding: 0.5rem;
 	height: 100%;
 	position: relative;
 }
@@ -2194,3 +2147,11 @@ select {
 	background-color: var(--red-50);
 }

+.list-row {
+	border-bottom: 1px solid var(--gray-300);
+	padding: 0.75rem 0;
+}
+
+.list-row:last-child {
+	border-bottom: none;
+}
--- a/lms/www/classes/class.html
+++ b/lms/www/classes/class.html
@@ -31,10 +31,10 @@
 {% macro ClassDetails(class_info) %}
 <div class="class-details" data-class="{{ class_info.name }}">

-	<div class="course-home-headings">
+	<div class="page-title">
 		{{ class_info.title }}
 	</div>
-	<div class="mt-2">
+	<div class="mt-1">
 		<svg class="icon icon-sm">
 			<use href="#icon-calendar"></use>
 		</svg>
@@ -46,7 +46,7 @@
 		</span>
 	</div>
 	{% if class_info.description %}
-	<div class="">
+	<div class="mt-1">
 		{{ class_info.description }}
 	</div>
 	{% endif %}
@@ -62,20 +62,28 @@
 {% macro ClassSections(class_info, class_courses, class_students, published_courses) %}
 <div class="mt-4">

-	<button class="btn btn-secondary btn-sm pull-right" id="create-class">
+	{% if is_moderator %}
+	<button class="btn btn-default btn-sm pull-right" id="create-class">
 		{{ _("Edit") }}
 	</button>
+	{% endif %}

 	<ul class="nav lms-nav" id="classes-tab">
 		<li class="nav-item">
 			<a class="nav-link active" data-toggle="tab" href="#courses">
 				{{ _("Courses") }}
+				<span class="course-list-count">
+					{{ class_courses | length }}
+				</span>
 			</a>
 		</li>

 		<li class="nav-item">
 			<a class="nav-link" data-toggle="tab" href="#students">
 				{{ _("Students") }}
+				<span class="course-list-count">
+					{{ class_students | length }}
+				</span>
 			</a>
 		</li>

@@ -112,84 +120,107 @@


 {% macro CoursesSection(class_info, class_courses, published_courses) %}
-<div class="class-course-list">
-	{% if published_courses | length %}
-	{% for course in published_courses %}
-	{% set checked = course.name in class_courses  %}
-	<label class="class-course" data-course="{{ course.name }}">
-		<input type="checkbox" {% if checked %} checked {% endif %}
-		{% if not is_moderator %} disabled {% endif %}>
-		{{ course.title }}
-	</label>
-	{% endfor %}
+<article>
+	<header class="mb-5">
+		<div class="edit-header">
+			<div class="bold-heading">
+				{{ _("Courses") }}
+			</div>
+			{% if is_moderator %}
+			<button class="btn btn-default btn-sm btn-add-course">
+				{{ _("Add Courses") }}
+			</button>
+			{% endif %}
+		</div>
+	</header>
+
+	{% if class_courses | length %}
+	<div>
+		{% for course in class_courses %}
+		<div class="list-row level">
+			<div {% if is_moderator %} class="clickable" {% endif %}>
+				{{ course.title }}
+			</div>
+			{% if is_moderator %}
+			<div type="button" class="btn-remove-course" data-course="{{ course.course }}">
+				<svg class="icon icon-sm">
+					<use href="#icon-delete"></use>
+				</svg>
+			</div>
+			{% endif %}
+		</div>
+		{% endfor %}
+	</div>
+	{% else %}
+	<div class="">
+		{{ _("No courses") }}
+	</div>
 	{% endif %}
-</div>
+
+
+</article>
+
 {% endmacro %}


 {% macro StudentsSection(class_info, class_students) %}
-<div class="">
-	{% if is_moderator %}
-	{{ AddStudents() }}
-	{% endif %}
+<article>
+	<header>
+		<div class="edit-header mb-5">
+			<div class="bold-heading">
+				{{ _("Students") }}
+			</div>
+			{% if is_moderator %}
+			<button class="btn btn-default btn-sm btn-add-student">
+				{{ _("Add Students") }}
+			</button>
+			{% endif %}
+		</div>
+	</header>

 	{% if class_students | length %}
-	<table class="table">
-		<tr>
-			<th style="width: 70%">
-				{{ _("Student") }}
-			</th>
-			<th style="width: 20%">
-				{{ _("Last Active") }}
-			</th>
-			{% if is_moderator %}
-			<th style="width: 10%"></th>
-			{% endif %}
-		</tr>
+	<div>
 		{% for student in class_students %}
 		{% set last_active = frappe.db.get_value("User", student.student, "last_active") %}
 		{% set allow_progress = is_moderator or student.student == frappe.session.user or (frappe.db.get_single_value("LMS Settings", "allow_student_progress") and
 		is_student) %}
-		<tr>
-			<td>
-				<a class="subheading button-links d-block" {% if allow_progress %} href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
+
+		<div class="list-row level">
+			<div>
+				<a {% if allow_progress %} class="clickable" href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
 					{{ student.student_name }}
 				</a>
-			</td>
-			<td>
-				{{ frappe.utils.format_datetime(last_active, "medium") }}
-			</td>
+			</div>
 			{% if is_moderator %}
-			<td>
-				<svg class="icon icon-md pull-right remove-student" data-student="{{ student.student }}">
+			<div type="button" class="btn-remove-student" data-student="{{ student.student }}">
+				<svg class="icon icon-sm">
 					<use href="#icon-delete"></use>
 				</svg>
-			</td>
+			</div>
 			{% endif %}
-		</tr>
+		</div>
+
 		{% endfor %}
-
-	</table>
+	</div>
 	{% else %}
-	<p class="text-muted mt-3 ml-5"> {{ _("No Students are added to this class.") }} </p>
+	<p class="text-muted mt-3"> {{ _("No Students") }} </p>
 	{% endif %}
-
-</div>
-{% endmacro %}
-
-
-{% macro AddStudents() %}
-<div class="mb-10">
-	<div class="add-students"></div>
-	<button class="btn btn-primary btn-sm ml-5" id="submit-student">
-		{{ _("Add") }}
-	</button>
-</div>
+</article>
 {% endmacro %}


 {% macro LiveClassSection(class_info, live_classes) %}
-<div>
+<article>
+	<header class="edit-header">
+		<div class="bold-heading">
+			{{ _("Live Class") }}
+		</div>
+		{% if is_moderator %}
+		<button class="btn btn-default btn-sm" id="open-class-modal">
+			{{ _("Create a Live Class") }}
+		</button>
+		{% endif %}
+	</header>
 	{{ CreateLiveClass(class_info) }}
 	{{ LiveClassList(class_info, live_classes) }}
 </div>
@@ -199,9 +230,6 @@
 {% macro CreateLiveClass(class_info) %}

 {% if is_moderator %}
-<button class="btn btn-secondary btn-sm" id="open-class-modal">
-	{{ _("Create a Live Class") }}
-</button>

 <div class="modal fade live-class-modal" id="live-class-modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">
@@ -234,7 +262,8 @@


 {% macro LiveClassList(class_info, live_classes) %}
-<div class="lms-card-parent mt-8">
+<div class="lms-card-parent mt-5">
+	{% if live_classes | length %}
 	{% for class in live_classes %}
 	<div class="lms-card">

@@ -280,6 +309,9 @@

 	</div>
 	{% endfor %}
+	{% else %}
+	<p class=""> {{ _("No Live Classes") }} </p>
+	{% endif %}
 </div>
 {% endmacro %}

@@ -303,4 +335,4 @@
 	{% endif %}

    {{ include_script('controls.bundle.js') }}
-{% endblock %}
+{% endblock %}
--- a/lms/www/classes/class.js
+++ b/lms/www/classes/class.js
@@ -1,24 +1,16 @@
 frappe.ready(() => {
-	$("#submit-student").click((e) => {
-		submit_student(e);
+	$(".btn-add-student").click((e) => {
+		show_student_modal(e);
 	});

-	$(".remove-student").click((e) => {
+	$(".btn-remove-student").click((e) => {
 		remove_student(e);
 	});

-	$(".class-course").click((e) => {
-		update_course(e);
-	});
-
 	if ($("#live-class-form").length) {
 		make_live_class_form();
 	}

-	if ($(".add-students").length) {
-		make_add_students_section();
-	}
-
 	$("#open-class-modal").click((e) => {
 		e.preventDefault();
 		$("#live-class-modal").modal("show");
@@ -27,6 +19,14 @@ frappe.ready(() => {
 	$("#create-live-class").click((e) => {
 		create_live_class(e);
 	});
+
+	$(".btn-add-course").click((e) => {
+		show_course_modal(e);
+	});
+
+	$(".btn-remove-course").click((e) => {
+		remove_course(e);
+	});
 });

 const submit_student = (e) => {
@@ -77,17 +77,6 @@ const remove_student = (e) => {
 	);
 };

-const update_course = (e) => {
-	frappe.call({
-		method: "lms.lms.doctype.lms_class.lms_class.update_course",
-		args: {
-			course: $(e.currentTarget).data("course"),
-			value: $(e.currentTarget).children("input").prop("checked") ? 1 : 0,
-			class_name: $(".class-details").data("class"),
-		},
-	});
-};
-
 const create_live_class = (e) => {
 	let class_name = $(".class-details").data("class");
 	frappe.call({
@@ -334,22 +323,133 @@ const get_timezones = () => {
 	];
 };

-const make_add_students_section = () => {
-	this.field_group = new frappe.ui.FieldGroup({
+const show_course_modal = () => {
+	let course_modal = new frappe.ui.Dialog({
+		title: "Add Course",
+		fields: [
+			{
+				fieldtype: "Link",
+				options: "LMS Course",
+				label: __("Course"),
+				fieldname: "course",
+				reqd: 1,
+			},
+			{
+				fieldtype: "HTML",
+				fieldname: "instructions",
+				label: __("Instructions"),
+				options: __("Select a course to add to this class."),
+			},
+		],
+		primary_action_label: __("Add"),
+		primary_action(values) {
+			frappe.call({
+				method: "frappe.client.insert",
+				args: {
+					doc: {
+						doctype: "Class Course",
+						course: values.course,
+						parenttype: "LMS Class",
+						parentfield: "courses",
+						parent: $(".class-details").data("class"),
+					},
+				},
+				callback(r) {
+					frappe.show_alert(
+						{
+							message: __("Course Added"),
+							indicator: "green",
+						},
+						3
+					);
+					window.location.reload();
+				},
+			});
+			course_modal.hide();
+		},
+	});
+	course_modal.show();
+	setTimeout(() => {
+		$(".modal-body").css("min-height", "200px");
+		$(".modal-body input").focus();
+	}, 1000);
+};
+
+const remove_course = (e) => {
+	frappe.confirm("Are you sure you want to remove this course?", () => {
+		frappe.call({
+			method: "lms.lms.doctype.lms_class.lms_class.remove_course",
+			args: {
+				course: $(e.currentTarget).data("course"),
+				parent: $(".class-details").data("class"),
+			},
+			callback(r) {
+				frappe.show_alert(
+					{
+						message: __("Course Removed"),
+						indicator: "green",
+					},
+					3
+				);
+				window.location.reload();
+			},
+		});
+	});
+};
+
+const show_student_modal = () => {
+	let student_modal = new frappe.ui.Dialog({
+		title: "Add Student",
 		fields: [
 			{
-				fieldname: "student_input",
 				fieldtype: "Link",
 				options: "User",
-				label: "Add Student",
+				label: __("Student"),
+				fieldname: "student",
+				reqd: 1,
 				filters: {
 					ignore_user_type: 1,
 				},
 			},
+			{
+				fieldtype: "HTML",
+				fieldname: "instructions",
+				label: __("Instructions"),
+				options: __(
+					"Please ensure a user account exists for the student before adding them to the class. Only users can be enrolled as students."
+				),
+			},
 		],
-		body: $(".add-students").get(0),
+		primary_action_label: __("Add"),
+		primary_action(values) {
+			frappe.call({
+				method: "frappe.client.insert",
+				args: {
+					doc: {
+						doctype: "Class Student",
+						student: values.student,
+						parenttype: "LMS Class",
+						parentfield: "students",
+						parent: $(".class-details").data("class"),
+					},
+				},
+				callback(r) {
+					frappe.show_alert(
+						{
+							message: __("Student Added"),
+							indicator: "green",
+						},
+						3
+					);
+					window.location.reload();
+				},
+			});
+			student_modal.hide();
+		},
 	});
-	this.field_group.make();
-	$(".add-students .form-section:last").removeClass("empty-section");
-	$(".add-students .frappe-control").removeClass("hide-control");
+	student_modal.show();
+	setTimeout(() => {
+		$(".modal-body").css("min-height", "200px");
+		$(".modal-body input").focus();
+	}, 1000);
 };
--- a/lms/www/classes/class.py
+++ b/lms/www/classes/class.py
@@ -32,11 +32,17 @@ def get_context(context):
 	)

 	context.class_courses = frappe.get_all(
-		"Class Course", {"parent": class_name}, pluck="course"
+		"Class Course",
+		{"parent": class_name},
+		["name", "course", "title"],
+		order_by="creation desc",
 	)

 	class_students = frappe.get_all(
-		"Class Student", {"parent": class_name}, ["student", "student_name", "username"]
+		"Class Student",
+		{"parent": class_name},
+		["student", "student_name", "username"],
+		order_by="creation desc",
 	)

 	for student in class_students:
--- a/lms/www/classes/index.html
+++ b/lms/www/classes/index.html
@@ -6,50 +6,79 @@
 {% block page_content %}
 <div class="common-page-style lms-page-style">
 	<div class="container">
-		{% if is_moderator %}
-		<button class="btn btn-secondary btn-sm pull-right" id="create-class">
-			{{ _("Create Class") }}
-		</button>
-		{% endif %}
-		<div class="course-home-headings"> {{ _("All Classes") }} </div>
-		{% if classes %}
-		{{ ClassCards(classes) }}
+		{{ Header() }}
+		{% if past_classes | length or upcoming_classes | length %}
+		{{ ClassTabs(past_classes, upcoming_classes) }}
 		{% else %}
-		<div class="empty-state">
-			<img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
-			<div class="empty-state-text">
-				<div class="empty-state-heading">{{ _("No Classes") }}</div>
-				<div class="course-meta">{{ _("Nothing to see here.") }}</div>
-			</div>
-		</div>
+		{{ EmptyState() }}
 		{% endif %}
 	</div>
 </div>
 {% endblock %}

-{%- block script %}
-    {{ super() }}
-    {{ include_script('controls.bundle.js') }}
+{% macro Header() %}
+<header class="edit-header">
+	<div class="page-title mb-6"> {{ _("All Classes") }} </div>
 	{% if is_moderator %}
-	<script>
-		let class_info = null;
-	</script>
+	<button class="btn btn-default btn-sm pull-right" id="create-class">
+		{{ _("Create Class") }}
+	</button>
 	{% endif %}
-{% endblock %}
+</header>
+{% endmacro %}
+
+{% macro ClassTabs(past_classes, upcoming_classes) %}
+<article>
+	<ul class="nav lms-nav" id="courses-tab">
+
+		<li class="nav-item">
+			<a class="nav-link active" data-toggle="tab" href="#upcoming">
+				{{ _("Upcoming") }}
+				<span class="course-list-count">
+					{{ upcoming_classes | length }}
+				</span>
+			</a>
+		</li>
+
+		<li class="nav-item">
+			<a class="nav-link" data-toggle="tab" href="#past">
+				{{ _("Past Classes") }}
+				<span class="course-list-count">
+					{{ past_classes | length }}
+				</span>
+			</a>
+		</li>
+
+	</ul>
+
+	<div class="border-bottom mb-4"></div>
+
+	<div class="tab-content">
+		<div class="tab-pane active" id="upcoming" role="tabpanel" aria-labelledby="upcoming">
+			{{ ClassCards(upcoming_classes) }}
+		</div>
+
+		<div class="tab-pane" id="past" role="tabpanel" aria-labelledby="past">
+			{{ ClassCards(past_classes) }}
+		</div>
+
+	</div>
+</article>
+{% endmacro %}

 {% macro ClassCards(classes) %}
 <div class="lms-card-parent">
 	{% for class in classes %}
 	{% set course_count = frappe.db.count("Class Course", {"parent": class.name}) %}
-    {% set student_count = frappe.db.count("Class Student", {"parent": class.name}) %}
+	{% set student_count = frappe.db.count("Class Student", {"parent": class.name}) %}

 	<div class="lms-card">

-		<div class="lms-card-title">
+		<div class="lms-card-title mb-4">
 			{{ class.title }}
 		</div>

-		<div class="text-muted small mb-4">
+		<!-- <div class="text-muted small mb-4">
 			{% if course_count %}
 			<span class="mr-3">
 				{{ course_count }} {{ _("Courses") }}
@@ -61,7 +90,7 @@
 				{{ student_count }} {{ _("Students") }}
 			</span>
 			{% endif %}
-		</div>
+		</div> -->

 		<div class="">
 			<svg class="icon icon-sm">
@@ -74,8 +103,29 @@
 				{{ frappe.utils.format_date(class.end_date, "long") }}
 			</span>
 		</div>
+
 		<a class="stretched-link" href="/classes/{{ class.name }}"></a>
 	</div>
 	{% endfor %}
 </div>
 {% endmacro %}
+
+{% macro EmptyState() %}
+<div class="empty-state">
+	<img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
+	<div class="empty-state-text">
+		<div class="empty-state-heading">{{ _("No Classes") }}</div>
+		<div class="course-meta">{{ _("Nothing to see here.") }}</div>
+	</div>
+</div>
+{% endmacro %}
+
+{%- block script %}
+    {{ super() }}
+    {{ include_script('controls.bundle.js') }}
+	{% if is_moderator %}
+	<script>
+		let class_info = null;
+	</script>
+	{% endif %}
+{% endblock %}
--- a/lms/www/classes/index.py
+++ b/lms/www/classes/index.py
@@ -6,8 +6,19 @@ from lms.lms.utils import has_course_moderator_role
 def get_context(context):
 	context.no_cache = 1
 	context.is_moderator = has_course_moderator_role()
-	context.classes = frappe.get_all(
+	classes = frappe.get_all(
 		"LMS Class",
-		{"end_date": [">=", getdate()]},
-		["name", "title", "start_date", "end_date"],
+		fields=["name", "title", "start_date", "end_date", "paid_class", "seat_count"],
 	)
+
+	past_classes, upcoming_classes = [], []
+	for class_ in classes:
+		print(class_.start_date)
+		if getdate(class_.start_date) < getdate():
+			past_classes.append(class_)
+		else:
+			upcoming_classes.append(class_)
+
+	context.past_classes = sorted(past_classes, key=lambda d: d.start_date)
+
+	context.upcoming_classes = sorted(upcoming_classes, key=lambda d: d.start_date)
--- a/lms/www/courses/create.html
+++ b/lms/www/courses/create.html
@@ -64,7 +64,7 @@
                {{ _("Short Introduction") }}
            </div>
            <div class="field-description">
-                {{ _("A one line breif description") }}
+                {{ _("A one line brief description") }}
            </div>
        </div>
        <div class="">
--- a/lms/www/jobs/index.html
+++ b/lms/www/jobs/index.html
@@ -7,7 +7,7 @@

    <div class="container">
        {% if allow_posting %}
-        <a class="button is-primary pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
+        <a class="btn btn-primary btn-sm pull-right" href="/job-opportunity?new=1">{{ _("Post a Job") }}</a>
        {% endif %}

        <div class="course-home-headings mb-2">{{ _("{0}").format(title) }}</div>
--- a/lms/www/jobs/job.html
+++ b/lms/www/jobs/job.html
@@ -35,10 +35,10 @@

                    {% set application_link = job.application_link if frappe.session.user != 'Guest' else '/login?redirect-to=/jobs/' + job.name %}
                    <div class="job-actions">
-                        <a class="button is-primary mr-2" href="{{ application_link }}"> {{ _("Apply") }} </a>
-                        <div class="button is-default mr-2" id="report" data-job="{{ job.name }}"> {{ _("Report") }} </div>
+                        <a class="btn btn-primary btn-sm mr-2" href="{{ application_link }}"> {{ _("Apply") }} </a>
+                        <div class="btn btn-default btn-sm mr-2" id="report" data-job="{{ job.name }}"> {{ _("Report") }} </div>
                        {% if job.owner == frappe.session.user %}
-                        <a class="button is-default button-links" href="/job-opportunity?name={{ job.name }}"> {{ _("Edit") }} </a>
+                        <a class="btn btn-defaultb btn-sm button-links" href="/job-opportunity?name={{ job.name }}"> {{ _("Edit") }} </a>
                        {% endif %}
                    </div>