Merge branch 'main' of https://github.com/frappe/lms into lms-frappe-ui

lms/lms/doctype/lms_settings/lms_settings.json

@@ -16,6 +16,7 @@
   "portal_course_creation",
   "section_break_szgq",
   "send_calendar_invite_for_evaluations",
+  "show_day_view",
   "allow_student_progress",
   "column_break_2",
   "show_dashboard",
@@ -341,12 +342,18 @@
   {
    "fieldname": "column_break_uwsp",
    "fieldtype": "Column Break"
+  },
+  {
+   "default": "0",
+   "fieldname": "show_day_view",
+   "fieldtype": "Check",
+   "label": "Show Day View in Timetable"
   }
  ],
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2023-11-07 11:23:14.257687",
+ "modified": "2023-12-12 10:32:13.638368",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Settings",

lms/public/css/style.css

@@ -2387,6 +2387,7 @@ select {
 	border: 1px solid var(--gray-200) !important;
 	border-radius: var(--border-radius-md) !important;
 	background-color: var(--gray-100) !important;
+	overflow: auto;
 }
 
 .toastui-calendar-panel .toastui-calendar-day-names.toastui-calendar-week {
@@ -2442,13 +2443,23 @@ select {
 }
 
 .calendar-legends {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 50%;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	width: 75%;
 	margin: 0 auto 1rem;
 }
 
+@media (max-width: 767px) {
+	.calendar-legends {
+		grid-template-columns: repeat(2, 1fr);
+		width: 100%;
+	}
+
+	.legend-item {
+		margin-bottom: 0.5rem;
+	}
+}
+
 .batch-details {
 	width: 50%;
 	margin: 2rem 0;

lms/www/batches/batch.html

@@ -638,8 +638,10 @@
 		frappe.boot.single_types = []
 		let courses = {{ course_list | json }};
 		const legends = {{ legends | json }};
-		const allow_future = {{ batch_info.allow_future }}
+		const allow_future = {{ batch_info.allow_future }};
+		const is_student = "{{ is_student or '' }}";
 		const evaluation_end_date = "{{ batch_info.evaluation_end_date if batch_info.evaluation_end_date else '' }}"
+		const show_day_view = {{ settings.show_day_view }};
 	</script>
 
 	<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />

lms/www/batches/batch.js

@@ -672,7 +672,7 @@ const get_calendar_options = (element, calendar_id) => {
 	const end_time = element.data("end");
 
 	return {
-		defaultView: "week",
+		defaultView: $(window).width() < 768 || show_day_view ? "day" : "week",
 		usageStatistics: false,
 		week: {
 			narrowWeekend: true,
@@ -692,6 +692,17 @@ const get_calendar_options = (element, calendar_id) => {
 			},
 		],
 		template: {
+			allday: function (event) {
+				let hide = event.raw.completed ? "" : "hide";
+				return `<div class="calendar-event-time" title="${
+					event.title
+				} - ${frappe.datetime.get_time(
+					event.start.d.d
+				)} - ${frappe.datetime.get_time(event.end.d.d)}">
+						<img class='icon icon-sm pull-right ${hide}' src="/assets/lms/icons/check.svg">
+						<div class="calendar-event-title"> ${event.title} </div>
+					</div>`;
+			},
 			time: function (event) {
 				let hide = event.raw.completed ? "" : "hide";
 				return `<div class="calendar-event-time" title="${
@@ -720,6 +731,7 @@ const create_events = (calendar, events, calendar_id) => {
 			start: `${event.date}T${format_time(event.start_time)}`,
 			end: `${event.date}T${format_time(event.end_time)}`,
 			isAllday: event.start_time ? false : true,
+			category: event.start_time ? "time" : "allday",
 			borderColor: clr,
 			backgroundColor: "var(--fg-color)",
 			customStyle: {
@@ -753,13 +765,16 @@ const add_links_to_events = (calendar) => {
 	calendar.on("clickEvent", ({ event }) => {
 		let event_date = event.start.d.d;
 		event_date = moment(event_date).format("YYYY-MM-DD");
-
 		let current_date = moment().format("YYYY-MM-DD");
 
-		if (!moment(event_date).isSameOrBefore(current_date) && !allow_future)
+		if (
+			is_student &&
+			!moment(event_date).isSameOrBefore(current_date) &&
+			!allow_future
+		)
 			return;
 
-		if (event.raw.milestone) {
+		if (is_student && event.raw.milestone) {
 			frappe.call({
 				method: "lms.lms.doctype.lms_batch.lms_batch.is_milestone_complete",
 				args: {
@@ -783,29 +798,49 @@ const add_links_to_events = (calendar) => {
 const scroll_to_date = (calendar, events) => {
 	if (
 		new Date() < new Date(events[0].date) ||
-		new Date() > new Date(events.slice(-1).date)
+		new Date() > new Date(events.slice(-1)[0].date)
 	) {
 		calendar.setDate(new Date(events[0].date));
 	}
 };
 
 const set_calendar_range = (calendar, events) => {
-	let week_start = moment(calendar.getDateRangeStart().d.d);
-	let week_end = moment(calendar.getDateRangeEnd().d.d);
+	let day_view = $(window).width() < 768 || show_day_view ? true : false;
+	if (day_view) {
+		let calendar_date = moment(calendar.getDate().d.d).format(
+			"DD MMMM YYYY"
+		);
+		$(".calendar-range").text(`${calendar_date}`);
 
-	$(".calendar-range").text(
-		`${moment(week_start).format("DD MMMM YYYY")} - ${moment(
-			week_end
-		).format("DD MMMM YYYY")}`
-	);
+		if (moment(events[0].date).isSameOrBefore(moment(calendar)))
+			$("#prev-week").hide();
+		else $("#prev-week").show();
 
-	if (week_start.diff(moment(events[0].date), "days") <= 0)
-		$("#prev-week").hide();
-	else $("#prev-week").show();
+		if (
+			moment(calendar_date).isSameOrAfter(
+				moment(events.slice(-1)[0].date)
+			)
+		)
+			$("#next-week").hide();
+		else $("#next-week").show();
+	} else {
+		let week_start = moment(calendar.getDateRangeStart().d.d);
+		let week_end = moment(calendar.getDateRangeEnd().d.d);
 
-	if (week_end.diff(moment(events.slice(-1)[0].date), "days") > 0)
-		$("#next-week").hide();
-	else $("#next-week").show();
+		$(".calendar-range").text(
+			`${moment(week_start).format("DD MMMM YYYY")} - ${moment(
+				week_end
+			).format("DD MMMM YYYY")}`
+		);
+
+		if (week_start.diff(moment(events[0].date), "days") <= 0)
+			$("#prev-week").hide();
+		else $("#prev-week").show();
+
+		if (week_end.diff(moment(events.slice(-1)[0].date), "days") > 0)
+			$("#next-week").hide();
+		else $("#next-week").show();
+	}
 };
 
 const get_background_color = (doctype) => {