fix: evaluator info and other styles

This commit is contained in:
Jannat Patel
2024-09-11 19:51:14 +05:30
parent 7da608ed44
commit 58369ba65e
10 changed files with 522 additions and 393 deletions

View File

@@ -158,11 +158,11 @@ const setActiveTab = () => {
watchEffect(() => {
if (activeTab.value) {
let route = {
"About": { name: 'ProfileAbout' },
"Certificates": { name: 'ProfileCertificates' },
"Roles": { name: 'ProfileRoles' },
"Slots": { name: 'ProfileEvaluator' },
"Schedule": { name: 'ProfileEvaluationSchedule' },
About: { name: 'ProfileAbout' },
Certificates: { name: 'ProfileCertificates' },
Roles: { name: 'ProfileRoles' },
Slots: { name: 'ProfileEvaluator' },
Schedule: { name: 'ProfileEvaluationSchedule' },
}[activeTab.value]
router.push(route)
}
@@ -186,7 +186,10 @@ const isSessionUser = () => {
const getTabButtons = () => {
let buttons = [{ label: 'About' }, { label: 'Certificates' }]
if ($user.data?.is_moderator) buttons.push({ label: 'Roles' })
if (isSessionUser() && ($user.data?.is_evaluator || $user.data?.is_moderator)) {
if (
isSessionUser() &&
($user.data?.is_evaluator || $user.data?.is_moderator)
) {
buttons.push({ label: 'Slots' })
buttons.push({ label: 'Schedule' })
}

View File

@@ -1,52 +1,49 @@
<template>
<div class="mt-7 mb-20">
<div class="flex h-screen flex-col overflow-hidden">
<Calendar
v-if="evaluations.data?.length"
:config="{
defaultMode: 'Month',
disableModes: ['Day', 'Week'],
redundantCellHeight: 100,
enableShortcuts: false,
}"
:events="evaluations.data"
@click="(event) => openEvent(event)"
>
<template #header="{currentMonthYear,
decrement,
increment,
}">
<div class="mb-2 flex justify-between">
<span class="text-lg font-semibold">
{{ currentMonthYear }}
</span>
<div class="flex gap-x-1">
<Button
@click="decrement()"
variant="ghost"
class="h-4 w-4"
icon="chevron-left"
/>
<Button
@click="increment()"
variant="ghost"
class="h-4 w-4"
icon="chevron-right"
/>
</div>
</div>
</template>
</Calendar>
</div>
</div>
<Event v-model="showEvent" :event="currentEvent"/>
<div class="mt-7 mb-20">
<div class="flex h-screen flex-col overflow-hidden">
<Calendar
v-if="evaluations.data?.length"
:config="{
defaultMode: 'Month',
disableModes: ['Day', 'Week'],
redundantCellHeight: 100,
enableShortcuts: false,
}"
:events="evaluations.data"
@click="(event) => openEvent(event)"
>
<template #header="{ currentMonthYear, decrement, increment }">
<div class="mb-2 flex justify-between">
<span class="text-lg font-semibold">
{{ currentMonthYear }}
</span>
<div class="flex gap-x-1">
<Button
@click="decrement()"
variant="ghost"
class="h-4 w-4"
icon="chevron-left"
/>
<Button
@click="increment()"
variant="ghost"
class="h-4 w-4"
icon="chevron-right"
/>
</div>
</div>
</template>
</Calendar>
</div>
</div>
<Event v-model="showEvent" :event="currentEvent" />
</template>
<script setup>
import { Calendar, createListResource, Button } from "frappe-ui"
import { inject, ref } from "vue"
import Event from "@/components/Modals/Event.vue"
import { Calendar, createListResource, Button } from 'frappe-ui'
import { inject, ref } from 'vue'
import Event from '@/components/Modals/Event.vue'
const user = inject("$user")
const user = inject('$user')
const currentEvent = ref(null)
const showEvent = ref(false)
@@ -58,37 +55,48 @@ const props = defineProps({
})
const evaluations = createListResource({
doctype: "LMS Certificate Request",
filters: {
"evaluator": user.data?.name
},
fields: ["name", "member_name", "member", "course", "course_title", "batch_name", "batch_title", "date", "start_time", "end_time", "google_meet_link"],
auto: true,
cache: ["schedule", user.data?.name],
transform(data) {
return data.map((d) => {
return {
title: `${d.member_name}'s Evaluation`,
participant: d.member_name,
id: d.name,
venue: d.google_meet_link,
fromDate: `${d.date} ${d.start_time}`,
toDate: `${d.date} ${d.end_time}`,
color: "green",
start_time: d.start_time,
end_time: d.end_time,
course: d.course,
course_title: d.course_title,
member: d.member,
batch_name: d.batch_name,
batch_title: d.batch_title
}
})
},
doctype: 'LMS Certificate Request',
filters: {
evaluator: user.data?.name,
},
fields: [
'name',
'member_name',
'member',
'course',
'course_title',
'batch_name',
'batch_title',
'evaluator',
'evaluator_name',
'date',
'start_time',
'end_time',
'google_meet_link',
],
auto: true,
orderBy: 'creation desc',
limit: 100,
cache: ['schedule', user.data?.name],
transform(data) {
return data.map((d) => {
let mappedData = Object.assign({}, d)
mappedData.title = `${d.member_name}'s Evaluation`
mappedData.participant = d.member_name
mappedData.id = d.name
mappedData.venue = d.google_meet_link
mappedData.fromDate = `${d.date} ${d.start_time}`
mappedData.toDate = `${d.date} ${d.end_time}`
mappedData.color = 'green'
return mappedData
})
},
})
const openEvent = (event) => {
currentEvent.value = event.calendarEvent
showEvent.value = true
currentEvent.value = event.calendarEvent
showEvent.value = true
}
</script>
</script>