refactor: moved batch feedback to sidebar

frontend/components.d.ts

@@ -52,6 +52,7 @@ declare module 'vue' {
     Evaluators: typeof import('./src/components/Evaluators.vue')['default']
     Event: typeof import('./src/components/Modals/Event.vue')['default']
     ExplanationVideos: typeof import('./src/components/Modals/ExplanationVideos.vue')['default']
+    FeedbackModal: typeof import('./src/components/Modals/FeedbackModal.vue')['default']
     FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
     IconPicker: typeof import('./src/components/Controls/IconPicker.vue')['default']
     IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']

frontend/src/components/BatchFeedback.vue

@@ -1,44 +1,49 @@
 <template>
 	<div v-if="user.data?.is_student">
-		<div
-			v-if="feedbackList.data?.length"
-			class="bg-surface-blue-2 text-blue-700 p-2 rounded-md mb-5"
-		>
-			{{ __('Thank you for providing your feedback!') }}
-		</div>
-		<div v-else class="flex justify-between items-center mb-5">
-			<div class="text-lg font-semibold">
-				{{ __('Help Us Improve') }}
+		<div>
+			<div class="leading-5 mb-4">
+				<div v-if="readOnly">
+					{{ __('Thank you for providing your feedback.') }}
+					<span
+						@click="showFeedbackForm = !showFeedbackForm"
+						class="underline cursor-pointer"
+						>{{ __('Click here') }}</span
+					>
+					{{ __('to view your feedback.') }}
+				</div>
+				<div v-else>
+					{{ __('Help us improve by providing your feedback.') }}
+				</div>
 			</div>
-			<Button @click="submitFeedback()">
-				{{ __('Submit') }}
-			</Button>
-		</div>
-		<div class="space-y-8">
-			<div class="flex items-center justify-between">
-				<Rating
-					v-for="key in ratingKeys"
-					v-model="feedback[key]"
-					:label="__(convertToTitleCase(key))"
+			<div class="space-y-4" :class="showFeedbackForm ? 'block' : 'hidden'">
+				<div class="space-y-4">
+					<Rating
+						v-for="key in ratingKeys"
+						v-model="feedback[key]"
+						:label="__(convertToTitleCase(key))"
+						:readonly="readOnly"
+					/>
+				</div>
+				<FormControl
+					v-model="feedback.feedback"
+					type="textarea"
+					:label="__('Feedback')"
+					:rows="9"
 					:readonly="readOnly"
 				/>
+				<Button v-if="!readOnly" @click="submitFeedback">
+					{{ __('Submit Feedback') }}
+				</Button>
 			</div>
-			<FormControl
-				v-model="feedback.feedback"
-				type="textarea"
-				:label="__('Feedback')"
-				:rows="7"
-				:readonly="readOnly"
-			/>
 		</div>
 	</div>
 
 	<div v-else-if="feedbackList.data?.length">
-		<div class="text-lg font-semibold mb-5">
-			{{ __('Average of Feedback Received') }}
+		<div class="leading-5 text-sm mb-2 mt-5">
+			{{ __('Average Feedback Received') }}
 		</div>
 
-		<div class="flex items-center justify-between mb-10">
+		<div class="space-y-4">
 			<Rating
 				v-for="key in ratingKeys"
 				v-model="average[key]"
@@ -47,81 +52,32 @@
 			/>
 		</div>
 
-		<div class="text-lg font-semibold mb-5">
-			{{ __('All Feedback') }}
-		</div>
-		<ListView
-			:columns="feedbackColumns"
-			:rows="feedbackList.data"
-			row-key="name"
-			:options="{
-				showTooltip: false,
-				rowHeight: 'h-16',
-				selectable: false,
-			}"
-		>
-			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
-			></ListHeader>
-			<ListRows>
-				<ListRow
-					:row="row"
-					v-for="row in feedbackList.data"
-					class="group cursor-pointer feedback-list"
-				>
-					<template #default="{ column, item }">
-						<ListRowItem
-							:item="row[column.key]"
-							:align="column.align"
-							class="text-sm"
-						>
-							<template #prefix>
-								<div v-if="column.key == 'member_name'">
-									<Avatar
-										class="flex"
-										:image="row['member_image']"
-										:label="item"
-										size="sm"
-									/>
-								</div>
-							</template>
-							<div v-if="ratingKeys.includes(column.key)">
-								<Rating v-model="row[column.key]" :readonly="true" />
-							</div>
-							<div v-else class="leading-5">
-								{{ row[column.key] }}
-							</div>
-						</ListRowItem>
-					</template>
-				</ListRow>
-			</ListRows>
-		</ListView>
+		<Button variant="outline" class="mt-5" @click="showAllFeedback = true">
+			{{ __('View all feedback') }}
+		</Button>
 	</div>
-	<div v-else class="text-sm italic text-center text-ink-gray-7 mt-5">
+	<div v-else class="text-ink-gray-7 mt-5 leading-5">
 		{{ __('No feedback received yet.') }}
 	</div>
+	<FeedbackModal
+		v-if="feedbackList.data?.length"
+		v-model="showAllFeedback"
+		:feedbackList="feedbackList.data"
+	/>
 </template>
 <script setup>
-import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
+import { inject, onMounted, reactive, ref, watch } from 'vue'
 import { convertToTitleCase } from '@/utils'
-import {
-	Avatar,
-	Button,
-	createListResource,
-	FormControl,
-	ListView,
-	ListHeader,
-	ListRows,
-	ListRow,
-	ListRowItem,
-	Rating,
-} from 'frappe-ui'
+import { Button, createListResource, FormControl, Rating } from 'frappe-ui'
+import FeedbackModal from '@/components/Modals/FeedbackModal.vue'
 
 const user = inject('$user')
 const ratingKeys = ['content', 'instructors', 'value']
 const readOnly = ref(false)
 const average = reactive({})
 const feedback = reactive({})
+const showFeedbackForm = ref(true)
+const showAllFeedback = ref(false)
 
 const props = defineProps({
 	batch: {
@@ -167,6 +123,7 @@ watch(
 		if (feedbackList.data.length) {
 			let data = feedbackList.data
 			readOnly.value = true
+			showFeedbackForm.value = false
 
 			ratingKeys.forEach((key) => {
 				average[key] = 0
@@ -201,40 +158,11 @@ const submitFeedback = () => {
 		{
 			onSuccess: () => {
 				feedbackList.reload()
+				showFeedbackForm.value = false
 			},
 		}
 	)
 }
-
-const feedbackColumns = computed(() => {
-	return [
-		{
-			label: 'Member',
-			key: 'member_name',
-			width: '10rem',
-		},
-		{
-			label: 'Feedback',
-			key: 'feedback',
-			width: '15rem',
-		},
-		{
-			label: 'Content',
-			key: 'content',
-			width: '9rem',
-		},
-		{
-			label: 'Instructors',
-			key: 'instructors',
-			width: '9rem',
-		},
-		{
-			label: 'Value',
-			key: 'value',
-			width: '9rem',
-		},
-	]
-})
 </script>
 <style>
 .feedback-list > button > div {

frontend/src/components/Modals/FeedbackModal.vue

@@ -0,0 +1,115 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+		}"
+	>
+		<template #body>
+			<div class="p-5 min-h-[300px]">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Training Feedback') }}
+				</div>
+				<ListView
+					:columns="feedbackColumns"
+					:rows="feedbackList"
+					row-key="name"
+					:options="{
+						showTooltip: false,
+						rowHeight: 'h-16',
+						selectable: false,
+					}"
+				>
+					<ListHeader
+						class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					></ListHeader>
+					<ListRows>
+						<ListRow
+							:row="row"
+							v-for="row in feedbackList"
+							class="group feedback-list"
+						>
+							<template #default="{ column, item }">
+								<ListRowItem
+									:item="row[column.key]"
+									:align="column.align"
+									class="text-sm"
+								>
+									<template #prefix>
+										<div v-if="column.key == 'member_name'">
+											<Avatar
+												class="flex"
+												:image="row['member_image']"
+												:label="item"
+												size="sm"
+											/>
+										</div>
+									</template>
+									<div v-if="ratingKeys.includes(column.key)">
+										<Rating v-model="row[column.key]" :readonly="true" />
+									</div>
+									<div v-else class="leading-5">
+										{{ row[column.key] }}
+									</div>
+								</ListRowItem>
+							</template>
+						</ListRow>
+					</ListRows>
+				</ListView>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Dialog,
+	ListView,
+	Avatar,
+	ListHeader,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	Rating,
+} from 'frappe-ui'
+import { reactive, computed } from 'vue'
+
+const show = defineModel()
+const ratingKeys = ['content', 'instructors', 'value']
+
+const props = defineProps({
+	feedbackList: {
+		type: Array,
+		required: true,
+	},
+})
+
+const feedbackColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member_name',
+			width: '10rem',
+		},
+		{
+			label: 'Feedback',
+			key: 'feedback',
+			width: '15rem',
+		},
+		{
+			label: 'Content',
+			key: 'content',
+			width: '9rem',
+		},
+		{
+			label: 'Instructors',
+			key: 'instructors',
+			width: '9rem',
+		},
+		{
+			label: 'Value',
+			key: 'value',
+			width: '9rem',
+		},
+	]
+})
+</script>

frontend/src/pages/Batch.vue

@@ -88,56 +88,61 @@
 									:scrollToBottom="false"
 								/>
 							</div>
-							<div v-else-if="tab.label == 'Feedback'">
-								<BatchFeedback :batch="batch.data.name" />
-							</div>
 						</div>
 					</template>
 				</Tabs>
 			</div>
 			<div class="p-5">
-				<div class="text-ink-gray-7 font-semibold mb-4">
-					{{ __('About this batch') }}:
-				</div>
-				<div
-					v-html="batch.data.description"
-					class="leading-5 mb-4 text-ink-gray-7"
-				></div>
-
-				<div class="flex items-center avatar-group overlap mb-5">
-					<div
-						class="h-6 mr-1"
-						:class="{
-							'avatar-group overlap': batch.data.instructors.length > 1,
-						}"
-					>
-						<UserAvatar
-							v-for="instructor in batch.data.instructors"
-							:user="instructor"
-						/>
+				<div class="mb-10">
+					<div class="text-ink-gray-7 font-semibold mb-2">
+						{{ __('About this batch') }}
+					</div>
+					<div
+						v-html="batch.data.description"
+						class="leading-5 mb-4 text-ink-gray-7"
+					></div>
+
+					<div class="flex items-center avatar-group overlap mb-5">
+						<div
+							class="h-6 mr-1"
+							:class="{
+								'avatar-group overlap': batch.data.instructors.length > 1,
+							}"
+						>
+							<UserAvatar
+								v-for="instructor in batch.data.instructors"
+								:user="instructor"
+							/>
+						</div>
+						<CourseInstructors :instructors="batch.data.instructors" />
+					</div>
+					<DateRange
+						:startDate="batch.data.start_date"
+						:endDate="batch.data.end_date"
+						class="mb-3"
+					/>
+					<div class="flex items-center mb-4 text-ink-gray-7">
+						<Clock class="h-4 w-4 stroke-1.5 mr-2" />
+						<span>
+							{{ formatTime(batch.data.start_time) }} -
+							{{ formatTime(batch.data.end_time) }}
+						</span>
+					</div>
+					<div
+						v-if="batch.data.timezone"
+						class="flex items-center mb-4 text-ink-gray-7"
+					>
+						<Globe class="h-4 w-4 stroke-1.5 mr-2" />
+						<span>
+							{{ batch.data.timezone }}
+						</span>
 					</div>
-					<CourseInstructors :instructors="batch.data.instructors" />
 				</div>
-				<DateRange
-					:startDate="batch.data.start_date"
-					:endDate="batch.data.end_date"
-					class="mb-3"
-				/>
-				<div class="flex items-center mb-4 text-ink-gray-7">
-					<Clock class="h-4 w-4 stroke-1.5 mr-2" />
-					<span>
-						{{ formatTime(batch.data.start_time) }} -
-						{{ formatTime(batch.data.end_time) }}
-					</span>
-				</div>
-				<div
-					v-if="batch.data.timezone"
-					class="flex items-center mb-4 text-ink-gray-7"
-				>
-					<Globe class="h-4 w-4 stroke-1.5 mr-2" />
-					<span>
-						{{ batch.data.timezone }}
-					</span>
+				<div v-if="batch.data?.start_date <= dayjs().format('YYYY-MM-DD')">
+					<div class="text-ink-gray-7 font-semibold mb-2">
+						{{ __('Feedback') }}
+					</div>
+					<BatchFeedback :batch="batch.data?.name" />
 				</div>
 			</div>
 			<AnnouncementModal
@@ -234,6 +239,7 @@ import Discussions from '@/components/Discussions.vue'
 import DateRange from '@/components/Common/DateRange.vue'
 import BulkCertificates from '@/components/Modals/BulkCertificates.vue'
 import BatchFeedback from '@/components/BatchFeedback.vue'
+import dayjs from 'dayjs/esm'
 
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
@@ -277,11 +283,6 @@ const tabs = computed(() => {
 		label: 'Discussions',
 		icon: MessageCircle,
 	})
-
-	batchTabs.push({
-		label: 'Feedback',
-		icon: ClipboardPen,
-	})
 	return batchTabs
 })
 

frontend/src/pages/Batches.vue

@@ -20,14 +20,12 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
-			v-if="batchCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Batches') }}
 			</div>
 			<div
-				v-if="batches.data?.length || batchCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons
@@ -115,12 +113,10 @@ const is_student = computed(() => user.data?.is_student)
 const currentTab = ref(is_student.value ? 'All' : 'Upcoming')
 const orderBy = ref('start_date')
 const readOnlyMode = window.read_only_mode
-const batchCount = ref(0)
 
 onMounted(() => {
 	setFiltersFromQuery()
 	updateBatches()
-	getBatchCount()
 	categories.value = [
 		{
 			label: '',
@@ -298,14 +294,6 @@ const canCreateBatch = () => {
 	return false
 }
 
-const getBatchCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'LMS Batch',
-	}).then((data) => {
-		batchCount.value = data
-	})
-}
-
 const breadcrumbs = computed(() => [
 	{
 		label: __('Batches'),

frontend/src/pages/Courses.vue

@@ -20,14 +20,12 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
-			v-if="courseCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Courses') }}
 			</div>
 			<div
-				v-if="courses.data?.length || courseCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons :buttons="courseTabs" v-model="currentTab" />
@@ -172,6 +170,8 @@ const identifyUserPersona = async () => {
 }
 
 const getCourseCount = () => {
+	if (!user.data) return
+
 	call('frappe.client.get_count', {
 		doctype: 'LMS Course',
 	}).then((data) => {

lms/lms/doctype/lms_batch/lms_batch.json

@@ -356,6 +356,7 @@
    "fieldtype": "Section Break"
   }
  ],
+ "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [
   {
@@ -371,8 +372,8 @@
    "link_fieldname": "batch_name"
   }
  ],
- "modified": "2025-02-18 15:43:18.512504",
- "modified_by": "Administrator",
+ "modified": "2025-05-21 13:30:28.904260",
+ "modified_by": "sayali@frappe.io",
  "module": "LMS",
  "name": "LMS Batch",
  "owner": "Administrator",
@@ -412,12 +413,22 @@
    "role": "Batch Evaluator",
    "share": 1,
    "write": 1
+  },
+  {
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "LMS Student",
+   "share": 1
   }
  ],
+ "row_format": "Dynamic",
  "show_title_field_in_link": 1,
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": [],
  "title_field": "title",
  "track_changes": 1
-}
+}

lms/lms/doctype/lms_batch_feedback/lms_batch_feedback.json

@@ -73,10 +73,11 @@
    "read_only": 1
   }
  ],
+ "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-01-13 19:02:58.259908",
- "modified_by": "Administrator",
+ "modified": "2025-05-21 15:58:51.667270",
+ "modified_by": "sayali@frappe.io",
  "module": "LMS",
  "name": "LMS Batch Feedback",
  "owner": "Administrator",
@@ -106,7 +107,9 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "creation",
  "sort_order": "DESC",
- "states": []
-}
+ "states": [],
+ "title_field": "member"
+}