Merge pull request #1663 from pateljannat/issues-125

fix: show video statistics watch time in minutes

frontend/src/components/AppSidebar.vue

@@ -344,6 +344,22 @@ const addAssignments = () => {
 	}
 }
 
+const addProgrammingExercises = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.splice(3, 0, {
+			label: 'Programming Exercises',
+			icon: 'Code',
+			to: 'ProgrammingExercises',
+			activeFor: [
+				'ProgrammingExercises',
+				'ProgrammingExerciseForm',
+				'ProgrammingExerciseSubmissions',
+				'ProgrammingExerciseSubmission',
+			],
+		})
+	}
+}
+
 const addPrograms = () => {
 	let activeFor = ['Programs', 'ProgramForm']
 	let index = 1
@@ -627,6 +643,7 @@ watch(userResource, () => {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor
 		addPrograms()
+		addProgrammingExercises()
 		addQuizzes()
 		addAssignments()
 		setUpOnboarding()

frontend/src/components/CourseCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col h-full rounded-md border-2 overflow-auto hover:border hover:border-outline-gray-3 text-ink-gray-9"
+		class="flex flex-col h-full rounded-md border-2 overflow-auto text-ink-gray-9"
 		style="min-height: 350px"
 	>
 		<div
@@ -28,7 +28,7 @@
 				<div
 					v-if="course.tags"
 					v-for="tag in course.tags?.split(', ')"
-					class="text-xs bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 mr-1"
+					class="text-xs border bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 mr-1"
 				>
 					{{ tag }}
 				</div>

frontend/src/components/Modals/CourseProgressSummary.vue

@@ -15,7 +15,7 @@
 						</div> -->
 						<FormControl
 							v-model="searchFilter"
-							:placeholder="__('Search by Member Name')"
+							:placeholder="__('Search by Member')"
 							type="text"
 							class="w-full"
 						/>
@@ -149,6 +149,10 @@ import { theme } from '@/utils/theme'
 
 const show = defineModel<boolean | undefined>()
 const searchFilter = ref<string | null>(null)
+type Filters = {
+	course: string | undefined
+	member_name?: string[]
+}
 
 const props = defineProps<{
 	courseName?: string
@@ -184,10 +188,6 @@ const progressList = createListResource({
 
 watch([searchFilter], () => {
 	let filterApplied = false
-	type Filters = {
-		course: string | undefined
-		member_name?: string[]
-	}
 	let filters: Filters = {
 		course: props.courseName,
 	}

frontend/src/components/Modals/VideoStatistics.vue

@@ -8,13 +8,20 @@
 	>
 		<template #body-content>
 			<div class="text-base">
-				<TabButtons
-					v-if="tabs.length > 1"
-					:buttons="tabs"
-					v-model="currentTab"
-					class="w-fit"
-				/>
-				<div v-if="currentTab" class="mt-8">
+				<div class="flex items-center justify-between">
+					<TabButtons
+						v-if="tabs.length > 1"
+						:buttons="tabs"
+						v-model="currentTab"
+						class="w-fit"
+					/>
+					<!-- <FormControl
+						v-model="searchText"
+						:placeholder="__('Search by Member')"
+						class="mt-2 mr-5 w-[25%]"
+					/> -->
+				</div>
+				<div v-if="currentTab" class="mt-4">
 					<div class="grid grid-cols-[55%,40%] gap-5">
 						<div class="space-y-5 border rounded-md p-2 pt-4">
 							<div class="grid grid-cols-[70%,30%] text-sm text-ink-gray-5">
@@ -52,7 +59,7 @@
 											</div>
 										</div>
 										<div class="text-center text-sm">
-											{{ parseFloat(row.watch_time).toFixed(2) }}
+											{{ convertToMinutes(row.watch_time) }}
 										</div>
 									</div>
 								</router-link>
@@ -62,7 +69,7 @@
 							<NumberChart
 								class="border rounded-md"
 								:config="{
-									title: __('Average Watch Time (seconds)'),
+									title: __('Average Watch Time (minutes)'),
 									value: averageWatchTime,
 								}"
 							/>
@@ -73,6 +80,9 @@
 						</div>
 					</div>
 				</div>
+				<div v-else class="text-sm text-ink-gray-5">
+					{{ __('No statistics available for this video.') }}
+				</div>
 			</div>
 		</template>
 	</Dialog>
@@ -82,15 +92,21 @@ import {
 	Avatar,
 	createListResource,
 	Dialog,
+	FormControl,
 	NumberChart,
 	TabButtons,
 } from 'frappe-ui'
 import { computed, ref, watch } from 'vue'
-import { enablePlyr } from '@/utils'
+import { enablePlyr, convertToMinutes } from '@/utils'
 import VideoBlock from '@/components/VideoBlock.vue'
 
 const show = defineModel<boolean | undefined>()
 const currentTab = ref<string>('')
+const searchText = ref<string>('')
+type Filters = {
+	lesson: string | undefined
+	member_name?: string[]
+}
 
 const props = defineProps<{
 	lessonName?: string
@@ -127,6 +143,24 @@ watch(
 	}
 )
 
+watch(searchText, () => {
+	let filterApplied = false
+	let filters: Filters = {
+		lesson: props.lessonName,
+	}
+
+	if (searchText.value) {
+		filters.member_name = ['like', `%${searchText.value}%`]
+		filterApplied = true
+	}
+
+	statistics.update({
+		filters: filters,
+	})
+
+	statistics.reload({})
+})
+
 watch(show, () => {
 	if (show.value) {
 		enablePlyr()
@@ -151,7 +185,7 @@ const averageWatchTime = computed(() => {
 		totalWatchTime += parseFloat(item.watch_time)
 	})
 
-	return totalWatchTime / currentTabData.value.length
+	return convertToMinutes(totalWatchTime / currentTabData.value.length)
 })
 
 const currentTabData = computed(() => {

frontend/src/pages/CertifiedParticipants.vue

@@ -132,6 +132,7 @@ const participants = createListResource({
 	doctype: 'LMS Certificate',
 	url: 'lms.lms.api.get_certified_participants',
 	start: 0,
+	cache: ['certified_participants'],
 	pageLength: 100,
 })
 

frontend/src/utils/index.js

@@ -420,17 +420,6 @@ export function getSidebarLinks() {
 			to: 'Batches',
 			activeFor: ['Batches', 'BatchDetail', 'Batch', 'BatchForm'],
 		},
-		{
-			label: 'Programming Exercises',
-			icon: 'Code',
-			to: 'ProgrammingExercises',
-			activeFor: [
-				'ProgrammingExercises',
-				'ProgrammingExerciseForm',
-				'ProgrammingExerciseSubmissions',
-				'ProgrammingExerciseSubmission',
-			],
-		},
 		{
 			label: 'Certified Members',
 			icon: 'GraduationCap',
@@ -678,3 +667,9 @@ export const formatTimestamp = (seconds) => {
 	const secs = String(date.getUTCSeconds()).padStart(2, '0')
 	return `${minutes}:${secs}`
 }
+
+export const convertToMinutes = (seconds) => {
+	const minutes = Math.floor(seconds / 60)
+	const remainingSeconds = Math.round(seconds % 60)
+	return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
+}

pyproject.toml

@@ -13,7 +13,7 @@ dependencies = [
     "markdown~=3.5.1",
     "beautifulsoup4~=4.12.2",
     "lxml~=4.9.3",
-    "cairocffi~=1.6.1",
+    "cairocffi==1.5.1",
     "razorpay~=1.4.1",
     "fuzzywuzzy~=0.18.0",
 ]