feat: zoom attendance

frontend/components.d.ts

@@ -65,6 +65,7 @@ declare module 'vue' {
     LessonHelp: typeof import('./src/components/LessonHelp.vue')['default']
     Link: typeof import('./src/components/Controls/Link.vue')['default']
     LiveClass: typeof import('./src/components/LiveClass.vue')['default']
+    LiveClassAttendance: typeof import('./src/components/Modals/LiveClassAttendance.vue')['default']
     LiveClassModal: typeof import('./src/components/Modals/LiveClassModal.vue')['default']
     LMSLogo: typeof import('./src/components/Icons/LMSLogo.vue')['default']
     Members: typeof import('./src/components/Settings/Members.vue')['default']

frontend/src/components/LiveClass.vue

@@ -22,10 +22,18 @@
 			</span>
 		</Button>
 	</div>
-	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5 mt-5">
+	<div v-if="liveClasses.data?.length" class="grid grid-cols-3 gap-5 mt-5">
 		<div
 			v-for="cls in liveClasses.data"
 			class="flex flex-col border rounded-md h-full text-ink-gray-7 hover:border-outline-gray-3 p-3"
+			:class="{
+				'cursor-pointer': hasPermission() && cls.attendees > 0,
+			}"
+			@click="
+				() => {
+					openAttendanceModal(cls)
+				}
+			"
 		>
 			<div class="font-semibold text-ink-gray-9 text-lg mb-1">
 				{{ cls.title }}
@@ -33,7 +41,7 @@
 			<div class="short-introduction">
 				{{ cls.description }}
 			</div>
-			<div class="space-y-3">
+			<div class="mt-auto space-y-3">
 				<div class="flex items-center space-x-2">
 					<Calendar class="w-4 h-4 stroke-1.5" />
 					<span>
@@ -43,11 +51,12 @@
 				<div class="flex items-center space-x-2">
 					<Clock class="w-4 h-4 stroke-1.5" />
 					<span>
-						{{ formatTime(cls.time) }}
+						{{ formatTime(cls.time) }} -
+						{{ dayjs(getClassEnd(cls)).format('HH:mm') }}
 					</span>
 				</div>
 				<div
-					v-if="cls.date >= dayjs().format('YYYY-MM-DD')"
+					v-if="canAccessClass(cls)"
 					class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
 				>
 					<a
@@ -69,12 +78,18 @@
 						{{ __('Join') }}
 					</a>
 				</div>
-				<div v-else class="flex items-center space-x-2 text-yellow-700">
-					<Info class="w-4 h-4 stroke-1.5" />
-					<span>
-						{{ __('This class has ended') }}
-					</span>
-				</div>
+				<Tooltip
+					v-else-if="hasClassEnded(cls)"
+					:text="__('This class has ended')"
+					placement="right"
+				>
+					<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
+						<Info class="w-4 h-4 stroke-1.5" />
+						<span>
+							{{ __('Ended') }}
+						</span>
+					</div>
+				</Tooltip>
 			</div>
 		</div>
 	</div>
@@ -88,9 +103,11 @@
 		v-model="showLiveClassModal"
 		v-model:reloadLiveClasses="liveClasses"
 	/>
+
+	<LiveClassAttendance v-model="showAttendance" :live_class="attendanceFor" />
 </template>
 <script setup>
-import { createListResource, Button } from 'frappe-ui'
+import { createListResource, Button, Tooltip } from 'frappe-ui'
 import {
 	Plus,
 	Clock,
@@ -101,13 +118,16 @@ import {
 	AlertCircle,
 } from 'lucide-vue-next'
 import { inject, ref } from 'vue'
-import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
 import { formatTime } from '@/utils/'
+import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
+import LiveClassAttendance from '@/components/Modals/LiveClassAttendance.vue'
 
 const user = inject('$user')
 const showLiveClassModal = ref(false)
 const dayjs = inject('$dayjs')
 const readOnlyMode = window.read_only_mode
+const showAttendance = ref(false)
+const attendanceFor = ref(null)
 
 const props = defineProps({
 	batch: {
@@ -127,6 +147,8 @@ const liveClasses = createListResource({
 		'description',
 		'time',
 		'date',
+		'duration',
+		'attendees',
 		'start_url',
 		'join_url',
 		'owner',
@@ -148,6 +170,31 @@ const canCreateClass = () => {
 const hasPermission = () => {
 	return user.data?.is_moderator || user.data?.is_evaluator
 }
+
+const canAccessClass = (cls) => {
+	if (cls.date < dayjs().format('YYYY-MM-DD')) return false
+	if (cls.date > dayjs().format('YYYY-MM-DD')) return false
+	if (hasClassEnded(cls)) return false
+	return true
+}
+
+const getClassEnd = (cls) => {
+	const classStart = new Date(`${cls.date}T${cls.time}`)
+	return new Date(classStart.getTime() + cls.duration * 60000)
+}
+
+const hasClassEnded = (cls) => {
+	const classEnd = getClassEnd(cls)
+	const now = new Date()
+	return now > classEnd
+}
+
+const openAttendanceModal = (cls) => {
+	if (!hasPermission()) return
+	if (cls.attendees <= 0) return
+	showAttendance.value = true
+	attendanceFor.value = cls
+}
 </script>
 <style>
 .short-introduction {

frontend/src/components/Modals/LiveClassAttendance.vue

@@ -0,0 +1,91 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Attendance for Class - {0}').format(live_class?.title),
+			size: 'xl',
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-5">
+				<div
+					v-for="participant in participants.data"
+					@click="redirectToProfile(participant.member_username)"
+					class="cursor-pointer text-base w-fit"
+				>
+					<Tooltip placement="right">
+						<div class="flex items-center space-x-2">
+							<Avatar
+								:image="participant.member_image"
+								:label="participant.member_name"
+								size="xl"
+							/>
+							<div class="space-y-1">
+								<div class="font-medium">
+									{{ participant.member_name }}
+								</div>
+								<div>
+									{{ participant.member }}
+								</div>
+							</div>
+						</div>
+						<template #body>
+							<div
+								class="max-w-[30ch] rounded bg-surface-gray-7 px-2 py-1 text-p-xs text-ink-white leading-5 shadow-xl"
+							>
+								{{ dayjs(participant.joined_at).format('HH:mm a') }} -
+								{{ dayjs(participant.left_at).format('HH:mm a') }}
+								<br />
+								{{ __('attended for') }} {{ participant.duration }}
+								{{ __('minutes') }}
+							</div>
+						</template>
+					</Tooltip>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Avatar, createListResource, Dialog, Tooltip } from 'frappe-ui'
+import { useRouter } from 'vue-router'
+import { inject } from 'vue'
+
+const show = defineModel()
+const router = useRouter()
+const dayjs = inject('$dayjs')
+
+interface LiveClass {
+	name: String
+	title: String
+}
+
+const props = defineProps<{
+	live_class: LiveClass | null
+}>()
+
+const participants = createListResource({
+	doctype: 'LMS Live Class Participant',
+	filter: {
+		live_class: props.live_class?.name,
+	},
+	fields: [
+		'name',
+		'member',
+		'member_name',
+		'member_image',
+		'member_username',
+		'joined_at',
+		'left_at',
+		'duration',
+	],
+	auto: true,
+})
+
+const redirectToProfile = (username: string) => {
+	router.push({
+		name: 'Profile',
+		params: { username },
+	})
+}
+</script>

frontend/src/components/Modals/LiveClassModal.vue

@@ -16,14 +16,29 @@
 		<template #body-content>
 			<div class="flex flex-col gap-4">
 				<div class="grid grid-cols-2 gap-4">
-					<div>
+					<div class="space-y-4">
 						<FormControl
 							type="text"
 							v-model="liveClass.title"
 							:label="__('Title')"
-							class="mb-4"
 							:required="true"
 						/>
+						<FormControl
+							v-model="liveClass.date"
+							type="date"
+							:label="__('Date')"
+							:required="true"
+						/>
+						<Tooltip :text="__('Duration of the live class in minutes')">
+							<FormControl
+								type="number"
+								v-model="liveClass.duration"
+								:label="__('Duration')"
+								:required="true"
+							/>
+						</Tooltip>
+					</div>
+					<div class="space-y-4">
 						<Tooltip
 							:text="
 								__(
@@ -35,7 +50,6 @@
 								v-model="liveClass.time"
 								type="time"
 								:label="__('Time')"
-								class="mb-4"
 								:required="true"
 							/>
 						</Tooltip>
@@ -52,24 +66,6 @@
 								:required="true"
 							/>
 						</div>
-					</div>
-					<div>
-						<FormControl
-							v-model="liveClass.date"
-							type="date"
-							class="mb-4"
-							:label="__('Date')"
-							:required="true"
-						/>
-						<Tooltip :text="__('Duration of the live class in minutes')">
-							<FormControl
-								type="number"
-								v-model="liveClass.duration"
-								:label="__('Duration')"
-								class="mb-4"
-								:required="true"
-							/>
-						</Tooltip>
 						<FormControl
 							v-model="liveClass.auto_recording"
 							type="select"