Merge pull request #905 from pateljannat/search-course

feat: search courses

frontend/src/components/CourseReviews.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="reviews.data" class="mt-20 mb-10">
+	<div v-if="reviews.data?.length || membership" class="mt-20 mb-10">
 		<Button
 			v-if="membership && !hasReviewed.data"
 			@click="openReviewModal()"

frontend/src/pages/CertifiedParticipants.vue

@@ -11,7 +11,7 @@
 				@input="participants.reload()"
 			>
 				<template #prefix>
-					<Search class="w-4" name="search" />
+					<Search class="w-4 stroke-1.5 text-gray-600" name="search" />
 				</template>
 			</FormControl>
 		</div>
@@ -48,7 +48,7 @@
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, FormControl, createResource, debounce } from 'frappe-ui'
+import { Breadcrumbs, FormControl, createResource } from 'frappe-ui'
 import { ref, computed } from 'vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { Search } from 'lucide-vue-next'
@@ -59,8 +59,7 @@ const participants = createResource({
 	url: 'lms.lms.api.get_certified_participants',
 	method: 'GET',
 	debounce: 300,
-	cache: ['certified_participants', searchQuery.value],
-	makeParams() {
+	makeParams(values) {
 		return {
 			search_query: searchQuery.value,
 		}

frontend/src/pages/Courses.vue

@@ -7,7 +7,17 @@
 				class="h-7"
 				:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
 			/>
-			<div class="flex">
+			<div class="flex space-x-2">
+				<FormControl
+					type="text"
+					placeholder="Search Course"
+					v-model="searchQuery"
+					@input="courses.reload()"
+				>
+					<template #prefix>
+						<Search class="w-4 stroke-1.5 text-gray-600" name="search" />
+					</template>
+				</FormControl>
 				<router-link
 					:to="{
 						name: 'CreateCourse',
@@ -97,17 +107,29 @@
 </template>
 
 <script setup>
-import { createListResource, Breadcrumbs, Tabs, Badge, Button } from 'frappe-ui'
+import {
+	Breadcrumbs,
+	Tabs,
+	Badge,
+	Button,
+	FormControl,
+	createResource,
+} from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
-import { Plus } from 'lucide-vue-next'
+import { Plus, Search } from 'lucide-vue-next'
 import { ref, computed, inject } from 'vue'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
-const courses = createListResource({
-	type: 'list',
-	doctype: 'LMS Course',
-	cache: ['courses', user?.data?.email],
+const searchQuery = ref('')
+
+const courses = createResource({
+	debounce: 300,
+	makeParams(values) {
+		return {
+			search_query: searchQuery.value,
+		}
+	},
 	url: 'lms.lms.utils.get_courses',
 	auto: true,
 })

lms/lms/utils.py

@@ -1251,10 +1251,12 @@ def change_currency(amount, currency, country=None):
 
 
 @frappe.whitelist(allow_guest=True)
-def get_courses():
+def get_courses(search_query=""):
 	"""Returns the list of courses."""
 	courses = []
-	course_list = frappe.get_all("LMS Course", pluck="name")
+	course_list = frappe.get_all(
+		"LMS Course", {"title": ["like", f"%{search_query}%"]}, pluck="name"
+	)
 	for course in course_list:
 		courses.append(get_course_details(course))