fix: programming exercise test case deletion

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' }">
 		<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'))
 			},