Merge pull request #1996 from pateljannat/issues-170

fix: misc issues

frontend/src/components/Controls/ChildTable.vue

@@ -3,55 +3,56 @@
 		<div class="text-xs text-ink-gray-5 mb-2">
 			{{ label }}
 		</div>
-		<div class="overflow-x-auto overflow-y-visible border rounded-md">
-			<div
-				class="grid items-center space-x-4 p-2 border-b"
-				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
-			>
+		<div class="overflow-visible border rounded-md">
+			<div class="overflow-x-auto">
 				<div
-					v-for="(column, index) in columns"
-					:key="index"
-					class="text-sm text-ink-gray-5"
+					class="grid items-center space-x-4 p-2 border-b"
+					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
 				>
-					{{ column }}
-				</div>
-				<div></div>
-			</div>
-			<div
-				v-for="(row, rowIndex) in rows"
-				:key="rowIndex"
-				class="grid items-center space-x-4 p-2"
-				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
-			>
-				<template v-for="key in Object.keys(row)" :key="key">
-					<input
-						v-if="showKey(key)"
-						v-model="row[key]"
-						class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
-					/>
-				</template>
-
-				<div class="relative" ref="menuRef">
-					<Button
-						variant="ghost"
-						@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
+					<div
+						v-for="(column, index) in columns"
+						:key="index"
+						class="text-sm text-ink-gray-5"
 					>
-						<template #icon>
-							<Ellipsis
-								class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
-							/>
-						</template>
-					</Button>
+						{{ column }}
+					</div>
+					<div></div>
+				</div>
+				<div
+					v-for="(row, rowIndex) in rows"
+					:key="rowIndex"
+					class="grid items-center space-x-4 p-2"
+					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+				>
+					<template v-for="key in Object.keys(row)" :key="key">
+						<input
+							v-if="showKey(key)"
+							v-model="row[key]"
+							class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
+						/>
+					</template>
+
+					<div class="relative">
+						<Button
+							variant="ghost"
+							@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
+						>
+							<template #icon>
+								<Ellipsis
+									class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
+								/>
+							</template>
+						</Button>
 
-					<Teleport to="body">
 						<div
 							v-if="menuOpenIndex === rowIndex"
-							:style="{
-								position: 'absolute',
-								top: menuTopPosition,
-								left: menuLeftPosition,
-							}"
-							class="top-5 mt-1 w-32 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+							ref="menuRef"
+							class="absolute right-0 w-32 z-50 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+							:class="
+								rowIndex == (rows?.length ?? 0) - 1
+									? 'bottom-full mb-1'
+									: 'top-full mt-1'
+							"
 						>
 							<button
 								@click="deleteRow(rowIndex)"
@@ -63,7 +64,7 @@
 								</span>
 							</button>
 						</div>
-					</Teleport>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -154,10 +155,7 @@ const getGridTemplateColumns = () => {
 }
 
 const toggleMenu = (index: number, event: MouseEvent) => {
-	const rect = (event.target as HTMLElement).getBoundingClientRect()
-	menuOpenIndex.value = index
-	menuTopPosition.value = rect.bottom + 'px'
-	menuLeftPosition.value = rect.right + 'px'
+	menuOpenIndex.value = menuOpenIndex.value === index ? null : index
 }
 
 onClickOutside(menuRef, () => {

frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue

@@ -1,12 +1,17 @@
 <template>
-	<Dialog v-model="show" :options="{ size: '5xl' }">
+	<Dialog v-model="show" :options="{ size: '4xl' }">
 		<template #body-title>
-			<div class="text-xl font-semibold text-ink-gray-9">
-				{{
-					props.exerciseID === 'new'
-						? __('Create Programming Exercise')
-						: __('Edit Programming Exercise')
-				}}
+			<div class="flex items-center space-x-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{
+						props.exerciseID === 'new'
+							? __('Create Programming Exercise')
+							: __('Edit Programming Exercise')
+					}}
+				</div>
+				<Badge v-if="isDirty" theme="orange">
+					{{ __('Not Saved') }}
+				</Badge>
 			</div>
 		</template>
 		<template #body-content>
@@ -59,7 +64,6 @@
 					@click="deleteExercise(close)"
 					variant="outline"
 					theme="red"
-					class="invisible group-hover:visible"
 				>
 					<template #prefix>
 						<Trash2 class="size-4 stroke-1.5" />
@@ -108,6 +112,7 @@
 import { computed, ref, watch } from 'vue'
 import { escapeHTML } from '@/utils'
 import {
+	Badge,
 	Button,
 	createListResource,
 	Dialog,
@@ -125,6 +130,8 @@ import ChildTable from '@/components/Controls/ChildTable.vue'
 
 const show = defineModel()
 const exercises = defineModel<ProgrammingExercises>('exercises')
+const isDirty = ref(false)
+const originalTestCaseCount = ref(0)
 
 const exercise = ref<ProgrammingExercise>({
 	title: '',
@@ -172,6 +179,7 @@ const setExerciseData = () => {
 			test_cases: [],
 		}
 	}
+	isDirty.value = false
 }
 
 const testCases = createListResource({
@@ -180,6 +188,14 @@ const testCases = createListResource({
 	cache: ['testCases', props.exerciseID],
 	parent: 'LMS Programming Exercise',
 	orderBy: 'idx',
+	onSuccess(data: TestCase[]) {
+		isDirty.value = false
+		originalTestCaseCount.value = data.length
+	},
+	onError(err: any) {
+		toast.error(__(err.messages?.[0] || err))
+		console.error('Error loading testCases:', err)
+	},
 })
 
 const fetchTestCases = () => {
@@ -191,13 +207,28 @@ const fetchTestCases = () => {
 		},
 	})
 	testCases.reload()
+	originalTestCaseCount.value = testCases.data.length
 }
 
 const validateTitle = () => {
 	exercise.value.title = escapeHTML(exercise.value.title.trim())
 }
 
-const saveExercise = (close: () => void) => {
+watch(
+	exercise,
+	() => {
+		isDirty.value = true
+	},
+	{ deep: true }
+)
+
+watch(testCases, () => {
+	if (testCases.data.length !== originalTestCaseCount.value) {
+		isDirty.value = true
+	}
+})
+
+const updateTestCasesInExercise = () => {
 	exercise.value.test_cases = testCases.data.map(
 		(tc: TestCase, index: number) => ({
 			input: tc.input,
@@ -205,7 +236,11 @@ const saveExercise = (close: () => void) => {
 			idx: index + 1,
 		})
 	)
+}
+
+const saveExercise = (close: () => void) => {
 	validateTitle()
+	updateTestCasesInExercise()
 	if (props.exerciseID == 'new') createNewExercise(close)
 	else updateExercise(close)
 }
@@ -218,6 +253,7 @@ const createNewExercise = (close: () => void) => {
 		{
 			onSuccess() {
 				close()
+				isDirty.value = false
 				exercises.value?.reload()
 				toast.success(__('Programming Exercise created successfully'))
 			},
@@ -237,6 +273,7 @@ const updateExercise = (close: () => void) => {
 		{
 			onSuccess() {
 				close()
+				isDirty.value = false
 				exercises.value?.reload()
 				toast.success(__('Programming Exercise updated successfully'))
 			},

frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue

@@ -6,27 +6,26 @@
 	</header>
 	<div class="p-6">
 		<div class="flex items-center justify-between space-x-32 mb-5">
-			<div class="text-xl font-semibold text-ink-gray-7">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{
 					submissions.data?.length
 						? __('{0} Submissions').format(submissions.data.length)
 						: __('No Submissions')
 				}}
 			</div>
-			<div
-				v-if="submissions.data?.length"
-				class="grid grid-cols-3 gap-5 flex-1"
-			>
+			<div v-if="submissions.data?.length" class="grid grid-cols-3 gap-5">
 				<Link
 					doctype="LMS Programming Exercise"
 					v-model="filters.exercise"
 					:placeholder="__('Filter by Exercise')"
+					class="w-40"
 				/>
 				<Link
 					doctype="User"
 					v-model="filters.member"
 					:placeholder="__('Filter by Member')"
 					:readonly="isStudent"
+					class="w-40"
 				/>
 				<FormControl
 					v-model="filters.status"
@@ -37,6 +36,7 @@
 						{ label: __('Failed'), value: 'Failed' },
 					]"
 					:placeholder="__('Filter by Status')"
+					class="w-40"
 				/>
 			</div>
 		</div>
@@ -47,6 +47,7 @@
 			rowKey="name"
 			:options="{
 				selectable: true,
+				showTooltip: false,
 			}"
 		>
 			<ListHeader
@@ -73,7 +74,7 @@
 						},
 					}"
 				>
-					<ListRow :row="row">
+					<ListRow :row="row" class="hover:bg-surface-gray-1">
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
 								<template #prefix>

frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue

@@ -33,50 +33,80 @@
 			</Button>
 		</div>
 	</header>
-	<div class="md:w-4/5 md:mx-auto p-5">
+	<div class="p-5">
 		<div class="flex items-center justify-between mb-5">
-			<div v-if="exerciseCount" class="text-lg font-semibold text-ink-gray-9">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('{0} Exercises').format(exerciseCount) }}
 			</div>
-			<div
-				v-if="exercises.data?.length || exerciseCount > 0"
-				class="grid grid-cols-2 gap-5"
-			>
-				<!-- <FormControl
-                    v-model="titleFilter"
-                    :placeholder="__('Search by title')"
-                />
-                <FormControl
-                    v-model="typeFilter"
-                    type="select"
-                    :options="assignmentTypes"
-                    :placeholder="__('Type')"
-                /> -->
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl
+					v-model="titleFilter"
+					:placeholder="__('Search by Title')"
+					@input="updateList"
+				/>
+				<FormControl
+					v-model="languageFilter"
+					type="select"
+					:options="languages"
+					:placeholder="__('Type')"
+					@update:modelValue="updateList"
+				/>
 			</div>
 		</div>
 
-		<div
-			v-if="exercises.data?.length"
-			class="grid grid-cols-1 md:grid-cols-3 gap-4"
-		>
-			<div
-				v-for="exercise in exercises.data"
-				:key="exercise.name"
-				@click="
-					() => {
-						exerciseID = exercise.name
+		<div v-if="exercises.data?.length">
+			<ListView
+				:columns="columns"
+				:rows="exercises.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					selectable: true,
+					onRowClick: (row: any) => {
+						if (readOnlyMode) return
+						exerciseID = row.name
 						showForm = true
-					}
-				"
-				class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3 space-y-2 cursor-pointer"
+					},
+				}"
 			>
-				<div class="text-lg font-semibold text-ink-gray-9">
-					{{ exercise.title }}
-				</div>
-				<div class="text-sm text-ink-gray-7">
-					{{ exercise.language }}
-				</div>
-			</div>
+				<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 exercises.data"
+						class="hover:bg-surface-gray-1"
+					>
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div
+									v-if="column.key == 'modified'"
+									class="text-sm text-ink-gray-5"
+								>
+									{{ dayjs(row[column.key]).format('MMM D, YYYY') }}
+								</div>
+								<div v-else>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="showDeleteConfirmation(selections, unselectAll)"
+							>
+								<FeatherIcon name="trash-2" class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
 		</div>
 		<EmptyState v-else type="Programming Exercises" />
 		<div
@@ -95,12 +125,22 @@
 	/>
 </template>
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
+import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue'
 import {
 	Breadcrumbs,
 	Button,
 	call,
 	createListResource,
+	dayjs,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	FeatherIcon,
+	ListSelectBanner,
+	toast,
 	usePageMeta,
 } from 'frappe-ui'
 import { ClipboardList, Plus } from 'lucide-vue-next'
@@ -114,7 +154,11 @@ const { brand } = sessionStore()
 const showForm = ref<boolean>(false)
 const exerciseID = ref<string | null>('new')
 const user = inject<any>('$user')
+const titleFilter = ref<string>('')
+const languageFilter = ref<string>('')
 const router = useRouter()
+const app = getCurrentInstance()
+const { $dialog } = app?.appContext.config.globalProperties
 
 onMounted(() => {
 	validatePermissions()
@@ -133,9 +177,10 @@ const validatePermissions = () => {
 	}
 }
 
-const getExerciseCount = () => {
+const getExerciseCount = (filters: any = {}) => {
 	call('frappe.client.get_count', {
 		doctype: 'LMS Programming Exercise',
+		filters: filters,
 	})
 		.then((count: number) => {
 			exerciseCount.value = count
@@ -148,11 +193,98 @@ const getExerciseCount = () => {
 const exercises = createListResource({
 	doctype: 'LMS Programming Exercise',
 	cache: ['programmingExercises'],
-	fields: ['name', 'title', 'language', 'problem_statement'],
+	fields: ['name', 'title', 'language', 'problem_statement', 'modified'],
 	auto: true,
 	orderBy: 'modified desc',
 })
 
+const updateList = () => {
+	let filters = getFilters()
+	exercises.update({
+		filters: filters,
+	})
+	exercises.reload()
+	getExerciseCount(filters)
+}
+
+const getFilters = () => {
+	let filters: any = {}
+	if (titleFilter.value) {
+		filters['title'] = ['like', `%${titleFilter.value}%`]
+	}
+	if (languageFilter.value && languageFilter.value.trim() !== '') {
+		filters['language'] = languageFilter.value
+	}
+	return filters
+}
+
+const showDeleteConfirmation = (
+	selections: Set<string>,
+	unselectAll: () => void
+) => {
+	$dialog({
+		title: __('Confirm Your Action'),
+		message: __(
+			'Deleting these exercises will permanently remove them from the system, along with all associated submissions. This action is irreversible. Are you sure you want to proceed?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close: () => void) {
+					deleteExercises(selections, unselectAll)
+					close()
+				},
+			},
+		],
+	})
+}
+
+const deleteExercises = (selections: Set<string>, unselectAll: () => void) => {
+	Array.from(selections).forEach(async (exerciseName) => {
+		call('lms.lms.api.delete_programming_exercise', {
+			exercise: exerciseName,
+		})
+			.then(() => {
+				toast.success(__('Exercise deleted successfully'))
+				updateList()
+			})
+			.catch((error: any) => {
+				toast.error(__(error.message || error))
+				console.error('Error deleting exercise:', error)
+			})
+	})
+	unselectAll()
+}
+
+const languages = [
+	{ label: ' ', value: ' ' },
+	{ label: 'Python', value: 'Python' },
+	{ label: 'JavaScript', value: 'JavaScript' },
+]
+
+const columns = computed(() => {
+	return [
+		{
+			label: __('Title'),
+			key: 'title',
+			width: 3,
+		},
+		{
+			label: __('Language'),
+			key: 'language',
+			width: 2,
+			align: 'left',
+		},
+		{
+			label: __('Updated On'),
+			key: 'modified',
+			width: 1,
+		},
+	]
+})
+
 usePageMeta(() => {
 	return {
 		title: __('Programming Exercises'),

frontend/src/utils/index.js

@@ -529,6 +529,13 @@ const getSidebarItems = () => {
 					condition: () => {
 						return isAdmin()
 					},
+					activeFor: [
+						'Quizzes',
+						'QuizForm',
+						'QuizPage',
+						'QuizSubmissionList',
+						'QuizSubmission',
+					],
 				},
 				{
 					label: 'Assignments',
@@ -537,6 +544,11 @@ const getSidebarItems = () => {
 					condition: () => {
 						return isAdmin()
 					},
+					activeFor: [
+						'Assignments',
+						'AssignmentSubmissionList',
+						'AssignmentSubmission',
+					],
 				},
 				{
 					label: 'Programming Exercises',
@@ -545,6 +557,11 @@ const getSidebarItems = () => {
 					condition: () => {
 						return isAdmin()
 					},
+					activeFor: [
+						'ProgrammingExercises',
+						'ProgrammingExerciseSubmissions',
+						'ProgrammingExerciseSubmission',
+					],
 				},
 			],
 		},