refactor: list for programming exercises

frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue

@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model="show" :options="{ size: '5xl' }">
+	<Dialog v-model="show" :options="{ size: '4xl' }">
 		<template #body-title>
 			<div class="flex items-center space-x-2">
 				<div class="text-xl font-semibold text-ink-gray-9">

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