fix: ui improvements in batch feedback and evaluator slots

frontend/src/components/Modals/FeedbackModal.vue

@@ -2,7 +2,7 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			size: '4xl',
+			size: '5xl',
 		}"
 	>
 		<template #body>
@@ -19,10 +19,17 @@
 						rowHeight: 'h-16',
 						selectable: false,
 					}"
+					class="border rounded-lg py-2 px-3"
 				>
 					<ListHeader
-						class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
-					></ListHeader>
+						class="mb-2 grid items-center rounded bg-surface-white border-b rounded-none !px-0"
+					>
+						<ListHeaderItem :item="item" v-for="item in feedbackColumns">
+							<template #prefix="{ item }">
+								<FeatherIcon :name="item.icon?.toString()" class="h-4 w-4" />
+							</template>
+						</ListHeaderItem>
+					</ListHeader>
 					<ListRows>
 						<ListRow
 							:row="row"
@@ -41,7 +48,7 @@
 												class="flex"
 												:image="row['member_image']"
 												:label="item"
-												size="sm"
+												size="xl"
 											/>
 										</div>
 									</template>
@@ -63,9 +70,11 @@
 <script setup lang="ts">
 import {
 	Dialog,
-	ListView,
 	Avatar,
+	FeatherIcon,
+	ListView,
 	ListHeader,
+	ListHeaderItem,
 	ListRows,
 	ListRow,
 	ListRowItem,
@@ -89,27 +98,43 @@ const feedbackColumns = computed(() => {
 			label: 'Member',
 			key: 'member_name',
 			width: '10rem',
+			align: 'left',
+			icon: 'user',
 		},
 		{
 			label: 'Feedback',
 			key: 'feedback',
 			width: '15rem',
+			align: 'left',
+			icon: 'message-square',
 		},
 		{
 			label: 'Content',
 			key: 'content',
-			width: '9rem',
+			width: '10rem',
+			align: 'center',
+			icon: 'book',
 		},
 		{
 			label: 'Instructors',
 			key: 'instructors',
-			width: '9rem',
+			width: '10rem',
+			align: 'center',
+			icon: 'users',
 		},
 		{
 			label: 'Value',
 			key: 'value',
-			width: '9rem',
+			width: '10rem',
+			align: 'center',
+			icon: 'dollar-sign',
 		},
 	]
 })
 </script>
+<style>
+.feedback-list > button > div {
+	padding: 0.2rem 0;
+	margin-bottom: 0.2rem;
+}
+</style>

frontend/src/pages/Batches/components/BatchFeedback.vue

@@ -183,9 +183,3 @@ const isAdmin = computed(() => {
 	return user.data?.is_moderator || user.data?.is_evaluator
 })
 </script>
-<style>
-.feedback-list > button > div {
-	align-items: start;
-	padding: 0.15rem 0;
-}
-</style>

frontend/src/pages/ProfileEvaluator.vue

@@ -151,7 +151,7 @@
 </template>
 <script setup>
 import { createResource, FormControl, Button, Badge, toast } from 'frappe-ui'
-import { computed, reactive, ref, onMounted, inject } from 'vue'
+import { computed, reactive, ref, onMounted, inject, watch } from 'vue'
 import { convertToTitleCase } from '@/utils'
 import { Plus, X, Check, CircleAlert } from 'lucide-vue-next'
 
@@ -195,16 +195,30 @@ const evaluator = createResource({
 		evaluator: props.profile.data?.name,
 	},
 	auto: true,
-	onSuccess(data) {
-		if (data.slots.unavailable_from) from.value = data.slots.unavailable_from
-		if (data.slots.unavailable_to) to.value = data.slots.unavailable_to
-	},
 	onError(err) {
 		toast.error(err.messages?.[0] || err)
 		console.error(err)
 	},
 })
 
+watch(evaluator, () => {
+	if (evaluator.data?.slots?.unavailable_from)
+		from.value = evaluator.data.slots.unavailable_from
+	if (evaluator.data?.slots?.unavailable_to)
+		to.value = evaluator.data.slots.unavailable_to
+
+	evaluator.data?.slots?.schedule.forEach((slot) => {
+		slot.start_time = formatTime(slot.start_time)
+		slot.end_time = formatTime(slot.end_time)
+	})
+})
+
+const formatTime = (time) => {
+	if (!time) return ''
+	const [hour, minute] = time.split(':')
+	return `${hour.padStart(2, '0')}:${minute.padStart(2, '0')}`
+}
+
 const createSlot = createResource({
 	url: 'frappe.client.insert',
 	makeParams(values) {

frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue

@@ -71,8 +71,13 @@
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					class="mb-2 grid items-center rounded bg-surface-gray-2 p-2"
 				>
+					<ListHeaderItem :item="item" v-for="item in columns">
+						<template #prefix="{ item }">
+							<FeatherIcon :name="item.icon?.toString()" class="h-4 w-4" />
+						</template>
+					</ListHeaderItem>
 				</ListHeader>
 				<ListRows>
 					<ListRow
@@ -134,13 +139,14 @@ import {
 	call,
 	createListResource,
 	dayjs,
+	FeatherIcon,
 	FormControl,
 	ListView,
 	ListHeader,
+	ListHeaderItem,
 	ListRows,
 	ListRow,
 	ListRowItem,
-	FeatherIcon,
 	ListSelectBanner,
 	toast,
 	usePageMeta,
@@ -272,17 +278,20 @@ const columns = computed(() => {
 			label: __('Title'),
 			key: 'title',
 			width: 3,
+			icon: 'file-text',
 		},
 		{
 			label: __('Language'),
 			key: 'language',
 			width: 2,
 			align: 'left',
+			icon: 'code',
 		},
 		{
 			label: __('Updated On'),
 			key: 'modified',
 			width: 1,
+			icon: 'clock',
 		},
 	]
 })