feat: evaluator unavailability

frontend/src/pages/Profile.vue

@@ -116,7 +116,7 @@ const profile = createResource({
 
 const setActiveTab = () => {
 	let fragments = route.path.split('/')
-	let sections = ['certificates', 'settings', 'evaluator']
+	let sections = ['certificates', 'roles', 'evaluations']
 	sections.forEach((section) => {
 		if (fragments.includes(section)) {
 			activeTab.value = convertToTitleCase(section)
@@ -130,8 +130,8 @@ watchEffect(() => {
 		let route = {
 			About: { name: 'ProfileAbout' },
 			Certificates: { name: 'ProfileCertificates' },
-			Settings: { name: 'ProfileSettings' },
-			Evaluato: { name: 'ProfileEvaluator' },
+			Roles: { name: 'ProfileRoles' },
+			Evaluations: { name: 'ProfileEvaluator' },
 		}[activeTab.value]
 		router.push(route)
 	}
@@ -147,9 +147,9 @@ const isSessionUser = () => {
 
 const getTabButtons = () => {
 	let buttons = [{ label: 'About' }, { label: 'Certificates' }]
-	if ($user.data?.is_moderator) buttons.push({ label: 'Settings' })
+	if ($user.data?.is_moderator) buttons.push({ label: 'Roles' })
 	if (isSessionUser() && $user.data?.is_evaluator)
-		buttons.push({ label: 'Evaluation Slots' })
+		buttons.push({ label: 'Evaluations' })
 
 	return buttons
 }

frontend/src/pages/ProfileCertificates.vue

@@ -9,7 +9,7 @@
 				:key="certificate.name"
 				class="bg-white shadow rounded-lg p-3 cursor-pointer"
 			>
-				<div class="font-medium">
+				<div class="font-medium leading-5">
 					{{ certificate.course_title }}
 				</div>
 				<div class="mt-2">

frontend/src/pages/ProfileEvaluator.vue

@@ -1,2 +1,278 @@
-<template>Evaluator</template>
-<script setup></script>
+<template>
+	<div class="mt-7 mb-20">
+		<h2 class="mb-4 text-lg font-semibold text-gray-900">
+			{{ __('My availability') }}
+		</h2>
+
+		<div class="w-3/4">
+			<div class="grid grid-cols-4 gap-4 text-sm text-gray-700 mb-4">
+				<div>
+					{{ __('Day') }}
+				</div>
+				<div>
+					{{ __('Start Time') }}
+				</div>
+				<div>
+					{{ __('End Time') }}
+				</div>
+			</div>
+
+			<div
+				v-if="slots.data"
+				v-for="slot in slots.data.schedule"
+				class="grid grid-cols-4 gap-4 mb-4 group"
+			>
+				<FormControl
+					type="select"
+					:options="days"
+					v-model="slot.day"
+					@focusout.stop="update(slot.name, 'day', slot.day)"
+				/>
+				<FormControl
+					type="time"
+					v-model="slot.start_time"
+					@focusout.stop="update(slot.name, 'start_time', slot.start_time)"
+				/>
+				<FormControl
+					type="time"
+					v-model="slot.end_time"
+					@focusout.stop="update(slot.name, 'end_time', slot.end_time)"
+				/>
+				<X
+					@click="deleteRow(slot.name)"
+					class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-red-100 hidden group-hover:block"
+				/>
+			</div>
+
+			<div class="grid grid-cols-4 gap-4 mb-4" v-show="showSlotsTemplate">
+				<FormControl
+					type="select"
+					:options="days"
+					v-model="newSlot.day"
+					@focusout.stop="add()"
+				/>
+				<FormControl
+					type="time"
+					v-model="newSlot.start_time"
+					@focusout.stop="add()"
+				/>
+				<FormControl
+					type="time"
+					v-model="newSlot.end_time"
+					@focusout.stop="add()"
+				/>
+			</div>
+
+			<Button @click="showSlotsTemplate = 1">
+				<template #prefix>
+					<Plus class="w-4 h-4 stroke-1.5 text-gray-700" />
+				</template>
+				{{ __('Add Slot') }}
+			</Button>
+		</div>
+		<div class="mt-10 w-3/4">
+			<h2 class="mb-4 text-lg font-semibold text-gray-900">
+				{{ __('I am unavailable') }}
+			</h2>
+			<div class="grid grid-cols-4 gap-4">
+				<FormControl
+					type="date"
+					:label="__('From')"
+					v-model="from"
+					@change.stop="
+						() => {
+							updateUnavailability.submit({
+								field: 'unavailable_from',
+								value: from,
+							})
+						}
+					"
+				/>
+				<FormControl
+					type="date"
+					:label="__('To')"
+					v-model="to"
+					@change.stop="
+						() => {
+							updateUnavailability.submit({
+								field: 'unavailable_to',
+								value: to,
+							})
+						}
+					"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { createResource, FormControl, Button } from 'frappe-ui'
+import { computed, reactive, ref } from 'vue'
+import { showToast, convertToTitleCase } from '@/utils'
+import { Plus, X } from 'lucide-vue-next'
+
+const props = defineProps({
+	profile: {
+		type: Object,
+		required: true,
+	},
+})
+
+const showSlotsTemplate = ref(0)
+const from = ref(null)
+const to = ref(null)
+
+const newSlot = reactive({
+	day: '',
+	start_time: '',
+	end_time: '',
+})
+
+const slots = createResource({
+	url: 'lms.lms.api.get_evaluator_details',
+	params: {
+		evaluator: props.profile.data?.name,
+	},
+	auto: true,
+})
+
+const createSlot = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'Evaluator Schedule',
+				parent: slots.data?.name,
+				parentfield: 'schedule',
+				parenttype: 'Course Evaluator',
+				...newSlot,
+			},
+		}
+	},
+	onSuccess() {
+		showToast('Success', 'Slot added successfully', 'check')
+		slots.reload()
+		showSlotsTemplate.value = 0
+		newSlot.day = ''
+		newSlot.start_time = ''
+		newSlot.end_time = ''
+	},
+	onError(err) {
+		showToast('Error', err.messages?.[0] || err, 'x')
+	},
+})
+
+const updateSlot = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		return {
+			doctype: 'Evaluator Schedule',
+			name: values.name,
+			fieldname: values.field,
+			value: values.value,
+		}
+	},
+	onSuccess() {
+		showToast('Success', 'Availability updated successfully', 'check')
+	},
+	onError(err) {
+		showToast('Error', err.messages?.[0] || err, 'x')
+	},
+})
+
+const deleteSlot = createResource({
+	url: 'frappe.client.delete',
+	makeParams(values) {
+		return {
+			doctype: 'Evaluator Schedule',
+			name: values.name,
+		}
+	},
+	onSuccess() {
+		showToast('Success', 'Slot deleted successfully', 'check')
+		slots.reload()
+	},
+	onError(err) {
+		showToast('Error', err.messages?.[0] || err, 'x')
+	},
+})
+
+const updateUnavailability = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		return {
+			doctype: 'Course Evaluator',
+			name: slots.data?.name,
+			fieldname: values.field,
+			value: values.value,
+		}
+	},
+	onSuccess() {
+		showToast('Success', 'Unavailability updated successfully', 'check')
+	},
+	onError(err) {
+		showToast('Error', err.messages?.[0] || err, 'x')
+	},
+})
+
+const update = (name, field, value) => {
+	updateSlot.submit(
+		{
+			name,
+			field,
+			value,
+		},
+		{
+			validate() {
+				if (!value) {
+					return `Please enter a value for ${convertToTitleCase(field)}`
+				}
+			},
+		}
+	)
+}
+
+const add = () => {
+	if (!newSlot.day || !newSlot.start_time || !newSlot.end_time) {
+		return
+	}
+	createSlot.submit()
+}
+
+const deleteRow = (name) => {
+	deleteSlot.submit({ name })
+}
+
+const days = computed(() => {
+	return [
+		{
+			label: 'Monday',
+			value: 'Monday',
+		},
+		{
+			label: 'Tuesday',
+			value: 'Tuesday',
+		},
+		{
+			label: 'Wednesday',
+			value: 'Wednesday',
+		},
+		{
+			label: 'Thursday',
+			value: 'Thursday',
+		},
+		{
+			label: 'Friday',
+			value: 'Friday',
+		},
+		{
+			label: 'Saturday',
+			value: 'Saturday',
+		},
+		{
+			label: 'Sunday',
+			value: 'Sunday',
+		},
+	]
+})
+</script>