feat: cancel evaluations

frontend/src/components/UpcomingEvaluations.vue

@@ -9,7 +9,7 @@
 			</Button>
 		</div>
 		<div v-if="upcoming_evals.data?.length">
-			<div class="grid grid-cols-2 gap-4">
+			<div class="grid grid-cols-3 gap-4">
 				<div v-for="evl in upcoming_evals.data">
 					<div class="border rounded-md p-3">
 						<div class="font-semibold mb-3">
@@ -28,11 +28,33 @@
 							</span>
 						</div>
 						<div class="flex items-center">
-							<UserCog2 class="w-4 h-4 stroke-1.5" />
-							<span class="ml-2 font-medium">
+							<GraduationCap class="w-4 h-4 stroke-1.5" />
+							<span class="ml-2">
 								{{ evl.evaluator_name }}
 							</span>
 						</div>
+						<div class="flex items-center justify-between space-x-2 mt-4">
+							<Button
+								v-if="evl.google_meet_link"
+								@click="openEvalCall(evl)"
+								class="w-full"
+							>
+								<template #prefix>
+									<HeadsetIcon class="w-4 h-4 stroke-1.5" />
+								</template>
+								{{ __('Join Call') }}
+							</Button>
+							<Button
+								v-if="evl.date > dayjs().format()"
+								@click="cancelEvaluation(evl)"
+								class="w-full"
+							>
+								<template #prefix>
+									<Ban class="w-4 h-4 stroke-1.5" />
+								</template>
+								{{ __('Cancel') }}
+							</Button>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -50,15 +72,23 @@
 	/>
 </template>
 <script setup>
-import { Calendar, Clock, UserCog2 } from 'lucide-vue-next'
-import { inject, ref } from 'vue'
+import {
+	Ban,
+	Calendar,
+	Clock,
+	GraduationCap,
+	HeadsetIcon,
+} from 'lucide-vue-next'
+import { inject, ref, getCurrentInstance } from 'vue'
 import { formatTime } from '../utils'
-import { Button, createResource } from 'frappe-ui'
+import { Button, createResource, call } from 'frappe-ui'
 import EvaluationModal from '@/components/Modals/EvaluationModal.vue'
 
 const dayjs = inject('$dayjs')
 const user = inject('$user')
 const showEvalModal = ref(false)
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	batch: {
@@ -88,4 +118,32 @@ const upcoming_evals = createResource({
 function openEvalModal() {
 	showEvalModal.value = true
 }
+
+const openEvalCall = (evl) => {
+	window.open(evl.google_meet_link, '_blank')
+}
+
+const cancelEvaluation = (evl) => {
+	$dialog({
+		title: __('Cancel this evaluation?'),
+		message: __(
+			'Are you sure you want to cancel this evaluation? This action cannot be undone.'
+		),
+		actions: [
+			{
+				label: __('Cancel'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					call('lms.lms.api.cancel_evaluation', { evaluation: evl }).then(
+						() => {
+							upcoming_evals.reload()
+						}
+					)
+					close()
+				},
+			},
+		],
+	})
+}
 </script>