Merge pull request #866 from pateljannat/issues-16

fix: misc issues

frontend/src/components/AppSidebar.vue

@@ -8,7 +8,7 @@
 			:class="isSidebarCollapsed ? 'items-center' : ''"
 		>
 			<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
-			<div class="flex flex-col overflow-y-auto" v-if="sidebarSettings.data">
+			<div class="flex flex-col" v-if="sidebarSettings.data">
 				<SidebarLink
 					v-for="link in sidebarLinks"
 					:link="link"
@@ -22,9 +22,13 @@
 			>
 				<div
 					v-if="isModerator"
-					class="flex items-center justify-between pl-4 pr-2"
+					class="flex items-center justify-between pr-2"
+					:class="isSidebarCollapsed ? 'pl-3' : 'pl-5'"
 				>
-					<span class="text-sm font-medium text-gray-600">
+					<span
+						v-if="!isSidebarCollapsed"
+						class="text-sm font-medium text-gray-600"
+					>
 						{{ __('Web Pages') }}
 					</span>
 					<Button variant="ghost" @click="openPageModal()">
@@ -35,7 +39,7 @@
 				</div>
 				<div
 					v-if="sidebarSettings.data?.web_pages?.length"
-					class="flex flex-col overflow-y-auto"
+					class="flex flex-col"
 				>
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"

frontend/src/components/LiveClass.vue

@@ -16,44 +16,42 @@
 		{{ __('Live Class') }}
 	</div>
 	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5">
-		<div v-for="cls in liveClasses.data">
-			<div class="border rounded-md p-3">
-				<div class="font-semibold text-lg mb-4">
-					{{ cls.title }}
-				</div>
-				<div class="flex items-center mb-2">
-					<Calendar class="w-4 h-4 stroke-1.5" />
-					<span class="ml-2">
-						{{ dayjs(cls.date).format('DD MMMM YYYY') }}
-					</span>
-				</div>
-				<div class="flex items-center mb-5">
-					<Clock class="w-4 h-4 stroke-1.5" />
-					<span class="ml-2">
-						{{ formatTime(cls.time) }}
-					</span>
-				</div>
-				<div class="mb-5">
-					{{ cls.description }}
-				</div>
-				<div class="flex items-center gap-2">
-					<a
-						:href="cls.start_url"
-						target="_blank"
-						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
-					>
-						<Monitor class="h-4 w-4 stroke-1.5" />
-						{{ __('Start') }}
-					</a>
-					<a
-						:href="cls.join_url"
-						target="_blank"
-						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
-					>
-						<Video class="h-4 w-4 stroke-1.5" />
-						{{ __('Join') }}
-					</a>
-				</div>
+		<div v-for="cls in liveClasses.data" class="border rounded-md h-full p-3">
+			<div class="font-semibold text-lg mb-4">
+				{{ cls.title }}
+			</div>
+			<div class="flex items-center mb-2">
+				<Calendar class="w-4 h-4 stroke-1.5" />
+				<span class="ml-2">
+					{{ dayjs(cls.date).format('DD MMMM YYYY') }}
+				</span>
+			</div>
+			<div class="flex items-center mb-5">
+				<Clock class="w-4 h-4 stroke-1.5" />
+				<span class="ml-2">
+					{{ formatTime(cls.time) }}
+				</span>
+			</div>
+			<div class="mb-5">
+				{{ cls.description }}
+			</div>
+			<div class="flex items-center gap-2">
+				<a
+					:href="cls.start_url"
+					target="_blank"
+					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+				>
+					<Monitor class="h-4 w-4 stroke-1.5" />
+					{{ __('Start') }}
+				</a>
+				<a
+					:href="cls.join_url"
+					target="_blank"
+					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+				>
+					<Video class="h-4 w-4 stroke-1.5" />
+					{{ __('Join') }}
+				</a>
 			</div>
 		</div>
 	</div>

frontend/src/components/Quiz.vue

@@ -138,7 +138,27 @@
 							{{ questionDetails.data[`explanation_${index}`] }}
 						</div>
 					</div>
-					<div class="flex items-center justify-between mt-8">
+					<div v-else>
+						<FormControl
+							v-model="possibleAnswer"
+							type="textarea"
+							:disabled="showAnswers.length ? true : false"
+							class="my-2"
+						/>
+						<div v-if="showAnswers.length">
+							<Badge v-if="showAnswers[0]" :label="__('Correct')" theme="green">
+								<template #prefix>
+									<CheckCircle class="w-4 h-4 text-green-500 mr-1" />
+								</template>
+							</Badge>
+							<Badge v-else theme="red" :label="__('Incorrect')">
+								<template #prefix>
+									<XCircle class="w-4 h-4 text-red-500 mr-1" />
+								</template>
+							</Badge>
+						</div>
+					</div>
+					<div class="flex items-center justify-between mt-5">
 						<div>
 							{{
 								__('Question {0} of {1}').format(
@@ -215,22 +235,19 @@
 	</div>
 </template>
 <script setup>
-import {
-	createDocumentResource,
-	Button,
-	createResource,
-	ListView,
-} from 'frappe-ui'
+import { Badge, Button, createResource, ListView } from 'frappe-ui'
 import { ref, watch, reactive, inject } from 'vue'
 import { createToast } from '@/utils/'
 import { CheckCircle, XCircle, MinusCircle } from 'lucide-vue-next'
 import { timeAgo } from '@/utils'
+import FormControl from 'frappe-ui/src/components/FormControl.vue'
 const user = inject('$user')
 
 const activeQuestion = ref(0)
 const currentQuestion = ref('')
 const selectedOptions = reactive([0, 0, 0, 0])
 const showAnswers = reactive([])
+const possibleAnswer = ref(null)
 
 const props = defineProps({
 	quizName: {
@@ -342,10 +359,17 @@ const markAnswer = (index) => {
 
 const getAnswers = () => {
 	let answers = []
-	selectedOptions.forEach((value, index) => {
-		if (selectedOptions[index])
-			answers.push(questionDetails.data[`option_${index + 1}`])
-	})
+	const type = questionDetails.data.type
+
+	if (type == 'Choices') {
+		selectedOptions.forEach((value, index) => {
+			if (selectedOptions[index])
+				answers.push(questionDetails.data[`option_${index + 1}`])
+		})
+	} else {
+		answers.push(possibleAnswer.value)
+	}
+
 	return answers
 }
 
@@ -370,15 +394,20 @@ const checkAnswer = () => {
 		},
 		auto: true,
 		onSuccess(data) {
-			selectedOptions.forEach((option, index) => {
-				if (option) {
-					showAnswers[index] = option && data[index]
-				} else if (questionDetails.data[`is_correct_${index + 1}`]) {
-					showAnswers[index] = 0
-				} else {
-					showAnswers[index] = undefined
-				}
-			})
+			let type = questionDetails.data.type
+			if (type == 'Choices') {
+				selectedOptions.forEach((option, index) => {
+					if (option) {
+						showAnswers[index] = option && data[index]
+					} else if (questionDetails.data[`is_correct_${index + 1}`]) {
+						showAnswers[index] = 0
+					} else {
+						showAnswers[index] = undefined
+					}
+				})
+			} else {
+				showAnswers.push(data)
+			}
 			addToLocalStorage()
 			if (!quiz.data.show_answers) {
 				resetQuestion()
@@ -413,6 +442,7 @@ const resetQuestion = () => {
 	activeQuestion.value = activeQuestion.value + 1
 	selectedOptions.splice(0, selectedOptions.length, ...[0, 0, 0, 0])
 	showAnswers.length = 0
+	possibleAnswer.value = null
 }
 
 const submitQuiz = () => {

frontend/src/components/SidebarLink.vue

@@ -33,7 +33,7 @@
 				{{ link.count }}
 			</span>
 			<div
-				v-if="showControls"
+				v-if="showControls && !isCollapsed"
 				class="flex items-center space-x-2 !ml-auto block text-xs text-gray-600 group-hover:visible invisible"
 			>
 				<component
@@ -77,7 +77,7 @@ const props = defineProps({
 function handleClick() {
 	if (router.hasRoute(props.link.to)) {
 		router.push({ name: props.link.to })
-	} else {
+	} else if (props.link.to) {
 		window.location.href = `/${props.link.to}`
 	}
 }