From 7ae92448962a3279b2b71f1d9a8922186165dc61 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Mon, 15 Jul 2024 13:45:38 +0530
Subject: [PATCH] feat: batch categories filter

---
 frontend/src/pages/Batches.vue | 119 +++++++++++++++++++++++++--------
 frontend/src/pages/Courses.vue |  23 ++++---
 frontend/src/stores/session.js |   5 +-
 frontend/src/stores/user.js    |   1 -
 lms/lms/api.py                 |  18 +++++
 lms/lms/utils.py               |   1 +
 6 files changed, 129 insertions(+), 38 deletions(-)

diff --git a/frontend/src/pages/Batches.vue b/frontend/src/pages/Batches.vue
index 0964c1ff..b099826c 100644
--- a/frontend/src/pages/Batches.vue
+++ b/frontend/src/pages/Batches.vue
@@ -7,7 +7,15 @@
 				class="h-7"
 				:items="[{ label: __('All Batches'), route: { name: 'Batches' } }]"
 			/>
-			<div class="flex">
+			<div class="flex space-x-2">
+				<div class="w-40">
+					<Select
+						v-if="categories.data?.length"
+						v-model="currentCategory"
+						:options="categories.data"
+						:placeholder="__('Filter')"
+					/>
+				</div>
 				<router-link
 					v-if="user.data?.is_moderator"
 					:to="{
@@ -33,7 +41,7 @@
 			</div>
 			<Tabs
 				v-model="tabIndex"
-				:tabs="tabs"
+				:tabs="makeTabs"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
 			>
 				<template #tab="{ tab, selected }">
@@ -87,13 +95,29 @@
 	</div>
 </template>
 <script setup>
-import { createListResource, Breadcrumbs, Button, Tabs, Badge } from 'frappe-ui'
+import {
+	createListResource,
+	createResource,
+	Breadcrumbs,
+	Button,
+	Tabs,
+	Badge,
+	Select,
+} from 'frappe-ui'
 import { Plus } from 'lucide-vue-next'
 import BatchCard from '@/components/BatchCard.vue'
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, onMounted, watch } from 'vue'
 import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
+const currentCategory = ref(null)
+
+onMounted(() => {
+	let queries = new URLSearchParams(location.search)
+	if (queries.has('category')) {
+		currentCategory.value = queries.get('category')
+	}
+})
 
 const batches = createListResource({
 	doctype: 'LMS Batch',
@@ -102,35 +126,76 @@ const batches = createListResource({
 	auto: true,
 })
 
-const tabIndex = ref(0)
-const tabs = [
-	{
-		label: 'Upcoming',
-		batches: computed(() => batches.data?.upcoming || []),
-		count: computed(() => batches.data?.upcoming?.length),
+const categories = createResource({
+	url: 'lms.lms.api.get_categories',
+	makeParams() {
+		return {
+			doctype: 'LMS Batch',
+			filters: {
+				published: 1,
+			},
+		}
 	},
-]
+	cache: ['batchCategories'],
+	auto: true,
+	transform(data) {
+		data.unshift({
+			label: '',
+			value: null,
+		})
+	},
+})
 
-if (user.data?.is_moderator) {
+const tabIndex = ref(0)
+let tabs
+
+const makeTabs = computed(() => {
+	tabs = []
+	addToTabs('Upcoming')
+
+	if (user.data?.is_moderator) {
+		addToTabs('Archived')
+		addToTabs('Private')
+	}
+
+	if (user.data) {
+		addToTabs('Enrolled')
+	}
+
+	return tabs
+})
+
+const getBatches = (type) => {
+	if (currentCategory.value && currentCategory.value != '') {
+		return batches.data[type].filter(
+			(batch) => batch.category == currentCategory.value
+		)
+	}
+	return batches.data[type]
+}
+
+const addToTabs = (label) => {
+	let batches = getBatches(label.toLowerCase().split(' ').join('_'))
 	tabs.push({
-		label: 'Archived',
-		batches: computed(() => batches.data?.archived),
-		count: computed(() => batches.data?.archived?.length),
-	})
-	tabs.push({
-		label: 'Private',
-		batches: computed(() => batches.data?.private),
-		count: computed(() => batches.data?.private?.length),
-	})
-}
-if (user.data) {
-	tabs.push({
-		label: 'Enrolled',
-		batches: computed(() => batches.data?.enrolled),
-		count: computed(() => batches.data?.enrolled?.length),
+		label,
+		batches: computed(() => batches),
+		count: computed(() => batches.length),
 	})
 }
 
+watch(
+	() => currentCategory.value,
+	() => {
+		let queries = new URLSearchParams(location.search)
+		if (currentCategory.value) {
+			queries.set('category', currentCategory.value)
+		} else {
+			queries.delete('category')
+		}
+		history.pushState(null, '', `${location.pathname}?${queries.toString()}`)
+	}
+)
+
 const pageMeta = computed(() => {
 	return {
 		title: 'Batches',
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index 20726810..6ae9ef4e 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -134,29 +134,30 @@ let tabs
 
 const makeTabs = computed(() => {
 	tabs = []
-	addToTabs('Live', getCourses('live'))
-	addToTabs('New', getCourses('new'))
-	addToTabs('Upcoming', getCourses('upcoming'))
+	addToTabs('Live')
+	addToTabs('New')
+	addToTabs('Upcoming')
 
 	if (user.data) {
-		addToTabs('Enrolled', getCourses('enrolled'))
+		addToTabs('Enrolled')
 
 		if (
 			user.data.is_moderator ||
 			user.data.is_instructor ||
 			courses.data?.created?.length
 		) {
-			addToTabs('Created', getCourses('created'))
+			addToTabs('Created')
 		}
 
 		if (user.data.is_moderator) {
-			addToTabs('Under Review', getCourses('under_review'))
+			addToTabs('Under Review')
 		}
 	}
 	return tabs
 })
 
-const addToTabs = (label, courses) => {
+const addToTabs = (label) => {
+	let courses = getCourses(label.toLowerCase().split(' ').join('_'))
 	tabs.push({
 		label,
 		courses: computed(() => courses),
@@ -166,8 +167,12 @@ const addToTabs = (label, courses) => {
 
 const getCourses = (type) => {
 	if (searchQuery.value) {
-		return courses.data[type].filter((course) =>
-			course.title.toLowerCase().includes(searchQuery.value.toLowerCase())
+		let query = searchQuery.value.toLowerCase()
+		return courses.data[type].filter(
+			(course) =>
+				course.title.toLowerCase().includes(query) ||
+				course.short_introduction.toLowerCase().includes(query) ||
+				course.tags.filter((tag) => tag.toLowerCase().includes(query)).length
 		)
 	}
 	return courses.data[type]
diff --git a/frontend/src/stores/session.js b/frontend/src/stores/session.js
index 77596a53..dd1d1a25 100644
--- a/frontend/src/stores/session.js
+++ b/frontend/src/stores/session.js
@@ -5,7 +5,7 @@ import router from '@/router'
 import { ref, computed } from 'vue'
 
 export const sessionStore = defineStore('lms-session', () => {
-	let { userResource } = usersStore()
+	let { userResource, allUsers } = usersStore()
 
 	function sessionUser() {
 		let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
@@ -17,6 +17,9 @@ export const sessionStore = defineStore('lms-session', () => {
 	}
 
 	let user = ref(sessionUser())
+	if (user) {
+		allUsers.reload()
+	}
 	const isLoggedIn = computed(() => !!user.value)
 
 	const login = createResource({
diff --git a/frontend/src/stores/user.js b/frontend/src/stores/user.js
index 6133b8a5..1c1c6c02 100644
--- a/frontend/src/stores/user.js
+++ b/frontend/src/stores/user.js
@@ -15,7 +15,6 @@ export const usersStore = defineStore('lms-users', () => {
 	const allUsers = createResource({
 		url: 'lms.lms.api.get_all_users',
 		cache: ['allUsers'],
-		auto: true,
 	})
 
 	return {
diff --git a/lms/lms/api.py b/lms/lms/api.py
index 77c0f992..9934758b 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -542,3 +542,21 @@ def update_index(lessons, chapter):
 		frappe.db.set_value(
 			"Lesson Reference", {"lesson": row, "parent": chapter}, "idx", lessons.index(row) + 1
 		)
+
+
+@frappe.whitelist(allow_guest=True)
+def get_categories(doctype, filters):
+	categoryOptions = []
+
+	categories = frappe.get_all(
+		doctype,
+		filters,
+		pluck="category",
+	)
+	categories = list(set(categories))
+
+	for category in categories:
+		if category:
+			categoryOptions.append({"label": category, "value": category})
+
+	return categoryOptions
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 672c205f..a421e394 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1456,6 +1456,7 @@ def get_batch_details(batch):
 			"evaluation_end_date",
 			"allow_self_enrollment",
 			"timezone",
+			"category",
 		],
 		as_dict=True,
 	)