fix: misc issues

frontend/src/components/CourseCard.vue

@@ -10,13 +10,13 @@
 			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
 			<div
-				class="flex items-center flex-wrap space-y-1 space-x-1 relative top-4 px-2 w-fit"
+				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
 			>
 				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
 					{{ __('Featured') }}
 				</Badge>
 				<Badge
-					variant="outline"
+					variant="subtle"
 					theme="gray"
 					size="md"
 					v-for="tag in course.tags"

frontend/src/pages/CourseForm.vue

@@ -7,6 +7,14 @@
 				>
 					<Breadcrumbs class="h-7" :items="breadcrumbs" />
 					<div class="flex items-center mt-3 md:mt-0">
+						<Button v-if="courseResource.data?.name" @click="trashCourse()">
+							<template #prefix>
+								<Trash2 class="w-4 h-4 stroke-1.5" />
+							</template>
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</Button>
 						<Button variant="solid" @click="submitCourse()" class="ml-2">
 							<span>
 								{{ __('Save') }}
@@ -247,10 +255,11 @@ import {
 	ref,
 	reactive,
 	watch,
+	getCurrentInstance,
 } from 'vue'
-import { convertToTitleCase, showToast, updateDocumentTitle } from '@/utils'
+import { showToast, updateDocumentTitle } from '@/utils'
 import Link from '@/components/Controls/Link.vue'
-import { FileText, Image, X } from 'lucide-vue-next'
+import { Image, Trash2, X } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
@@ -262,6 +271,8 @@ const newTag = ref('')
 const router = useRouter()
 const instructors = ref([])
 const settingsStore = useSettings()
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	courseName: {
@@ -434,23 +445,35 @@ const submitCourse = () => {
 	}
 }
 
-const validateMandatoryFields = () => {
-	const mandatory_fields = [
-		'title',
-		'short_introduction',
-		'description',
-		'video_link',
-		'course_image',
-	]
-	for (const field of mandatory_fields) {
-		if (!course[field]) {
-			let fieldLabel = convertToTitleCase(field.split('_').join(' '))
-			return `${fieldLabel} is mandatory`
+const deleteCourse = createResource({
+	url: "lms.lms.api.delete_course",
+	makeParams(values) {
+		return {
+			course: props.courseName,
 		}
-	}
-	if (course.paid_course && (!course.course_price || !course.currency)) {
-		return __('Course price and currency are mandatory for paid courses')
-	}
+	},
+	onSuccess() {
+		showToast(__('Success'), __('Course deleted successfully'), 'check')
+		router.push({ name: 'Courses' })
+	},
+})
+
+const trashCourse = () => {
+	$dialog({
+		title: __('Delete Course'),
+		message: __('Deleting the course will also delete all its chapters and lessons. Are you sure you want to delete this course?'),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteCourse.submit()
+					close()
+				},
+			},
+		],
+	})
 }
 
 watch(

frontend/src/pages/Courses.vue

@@ -145,7 +145,7 @@
 				<div class="text-xl font-medium">
 					{{ __('No courses found') }}
 				</div>
-				<div>
+				<div class="leading-5">
 					{{
 						__(
 							'There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'

frontend/src/pages/Lesson.vue

@@ -239,6 +239,10 @@ const lesson = createResource({
 	},
 	auto: true,
 	onSuccess(data) {
+		if (Object.keys(data).length === 0) {
+			router.push({ name: 'Courses' })
+			return
+		}
 		lessonProgress.value = data.membership?.progress
 		if (data.content) editor.value = renderEditor('editor', data.content)
 		if (

frontend/src/pages/Quizzes.vue

@@ -47,6 +47,19 @@
 			</ListRows>
 		</ListView>
 	</div>
+	<div v-else class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2">
+		<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+		<div class="text-xl font-medium">
+			{{ __('No quizzes found') }}
+		</div>
+		<div class="leading-5">
+			{{
+				__(
+					'You have not created any quizzes yet. To create a new quiz, click on the "New Quiz" button above.'
+				)
+			}}
+		</div>
+	</div>
 </template>
 <script setup>
 import {
@@ -61,7 +74,7 @@ import {
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { computed, inject, onMounted } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { BookOpen, Plus } from 'lucide-vue-next'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')