feat: batch announcements
This commit is contained in:
Jannat Patel
117
frontend/src/components/Modals/AnnouncementModal.vue
Normal file
117
frontend/src/components/Modals/AnnouncementModal.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: __('Make an Announcement'),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: 'Submit',
|
||||
variant: 'solid',
|
||||
onClick: (close) => makeAnnouncement(close),
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Subject') }}
|
||||
</div>
|
||||
<Input type="text" v-model="announcement.subject" />
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Reply To') }}
|
||||
</div>
|
||||
<Input type="text" v-model="announcement.replyTo" />
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Announcement') }}
|
||||
</div>
|
||||
<TextEditor
|
||||
:bubbleMenu="true"
|
||||
@change="(val) => (announcement.announcement = val)"
|
||||
editorClass="prose-sm py-2 px-2 min-h-[200px] border-gray-300 hover:border-gray-400 rounded-md bg-gray-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Dialog, Input, TextEditor, createResource } from 'frappe-ui'
|
||||
import { reactive } from 'vue'
|
||||
import { createToast } from '@/utils/'
|
||||
|
||||
const show = defineModel()
|
||||
|
||||
const props = defineProps({
|
||||
batch: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
students: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const announcement = reactive({
|
||||
subject: '',
|
||||
replyTo: '',
|
||||
announcement: '',
|
||||
})
|
||||
|
||||
const announcementResource = createResource({
|
||||
url: 'frappe.core.doctype.communication.email.make',
|
||||
makeParams(values) {
|
||||
return {
|
||||
recipients: props.students.join(', '),
|
||||
cc: announcement.replyTo,
|
||||
subject: announcement.subject,
|
||||
content: announcement.announcement,
|
||||
doctype: 'LMS Batch',
|
||||
name: props.batch,
|
||||
send_email: 1,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const makeAnnouncement = (close) => {
|
||||
announcementResource.submit(
|
||||
{},
|
||||
{
|
||||
validate() {
|
||||
if (!props.students.length) {
|
||||
return 'No students in this batch'
|
||||
}
|
||||
if (!announcement.subject) {
|
||||
return 'Subject is required'
|
||||
}
|
||||
},
|
||||
onSuccess() {
|
||||
close()
|
||||
createToast({
|
||||
title: 'Success',
|
||||
text: 'Announcement has been sent successfully',
|
||||
icon: 'Check',
|
||||
iconClasses: 'bg-green-600 text-white rounded-md p-px',
|
||||
})
|
||||
},
|
||||
onError(err) {
|
||||
createToast({
|
||||
title: 'Error',
|
||||
text: err.messages?.[0] || err,
|
||||
icon: 'x',
|
||||
iconClasses: 'bg-red-600 text-white rounded-md p-px',
|
||||
position: 'top-center',
|
||||
timeout: 10,
|
||||
})
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
185
frontend/src/components/Modals/EvaluationModal.vue
Normal file
185
frontend/src/components/Modals/EvaluationModal.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: __('Schedule Evaluation'),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: 'Submit',
|
||||
variant: 'solid',
|
||||
onClick: (close) => submitEvaluation(close),
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Course') }}
|
||||
</div>
|
||||
<Select v-model="evaluation.course" :options="getCourses()" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Date') }}
|
||||
</div>
|
||||
<DatePicker v-model="evaluation.date" />
|
||||
</div>
|
||||
<div v-if="slots.data">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Select a slot') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div v-for="slot in slots.data">
|
||||
<div
|
||||
class="text-base text-center border rounded-md bg-gray-200 p-2 cursor-pointer"
|
||||
@click="saveSlot(slot)"
|
||||
:class="{
|
||||
'border-gray-900': evaluation.start_time == slot.start_time,
|
||||
}"
|
||||
>
|
||||
{{ formatTime(slot.start_time) }} -
|
||||
{{ formatTime(slot.end_time) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Dialog, createResource, Select, DatePicker } from 'frappe-ui'
|
||||
import { defineModel, reactive, watch, inject } from 'vue'
|
||||
import { createToast, formatTime } from '@/utils/'
|
||||
|
||||
const user = inject('$user')
|
||||
const dayjs = inject('$dayjs')
|
||||
const show = defineModel()
|
||||
const evaluations = defineModel('reloadEvals')
|
||||
|
||||
const props = defineProps({
|
||||
courses: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
batch: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
endDate: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
let evaluation = reactive({
|
||||
course: '',
|
||||
date: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
day: '',
|
||||
batch: props.batch,
|
||||
member: user.data.name,
|
||||
})
|
||||
|
||||
const createEvaluation = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'LMS Certificate Request',
|
||||
batch_name: values.batch,
|
||||
...values,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
function submitEvaluation(close) {
|
||||
createEvaluation.submit(evaluation, {
|
||||
validate() {
|
||||
if (!evaluation.course) {
|
||||
return 'Please select a course.'
|
||||
}
|
||||
if (!evaluation.date) {
|
||||
return 'Please select a date.'
|
||||
}
|
||||
if (!evaluation.start_time) {
|
||||
return 'Please select a slot.'
|
||||
}
|
||||
if (dayjs(evaluation.date).isSameOrBefore(dayjs(), 'day')) {
|
||||
return 'Please select a future date.'
|
||||
}
|
||||
if (dayjs(evaluation.date).isAfter(dayjs(props.endDate), 'day')) {
|
||||
return `Please select a date before the end date ${dayjs(
|
||||
props.endDate
|
||||
).format('DD MMMM YYYY')}.`
|
||||
}
|
||||
},
|
||||
onSuccess() {
|
||||
evaluations.value.reload()
|
||||
close()
|
||||
},
|
||||
onError(err) {
|
||||
createToast({
|
||||
title: 'Error',
|
||||
text: err.messages?.[0] || err,
|
||||
icon: 'x',
|
||||
iconClasses: 'bg-red-600 text-white rounded-md p-px',
|
||||
position: 'top-center',
|
||||
timeout: 10,
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const getCourses = () => {
|
||||
let courses = []
|
||||
for (const course of props.courses) {
|
||||
courses.push({
|
||||
label: course.title,
|
||||
value: course.course,
|
||||
})
|
||||
}
|
||||
return courses
|
||||
}
|
||||
|
||||
const slots = createResource({
|
||||
url: 'lms.lms.doctype.course_evaluator.course_evaluator.get_schedule',
|
||||
makeParams(values) {
|
||||
return {
|
||||
course: values.course,
|
||||
date: values.date,
|
||||
batch: props.batch,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => evaluation.date,
|
||||
(date) => {
|
||||
evaluation.start_time = ''
|
||||
if (date) {
|
||||
slots.submit(evaluation)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => evaluation.course,
|
||||
(course) => {
|
||||
evaluation.date = ''
|
||||
evaluation.start_time = ''
|
||||
slots.reset()
|
||||
}
|
||||
)
|
||||
|
||||
const saveSlot = (slot) => {
|
||||
evaluation.start_time = slot.start_time
|
||||
evaluation.end_time = slot.end_time
|
||||
evaluation.day = slot.day
|
||||
}
|
||||
</script>
|
||||
226
frontend/src/components/Modals/LiveClassModal.vue
Normal file
226
frontend/src/components/Modals/LiveClassModal.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: __('Create a Live Class'),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: 'Submit',
|
||||
variant: 'solid',
|
||||
onClick: (close) => submitLiveClass(close),
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Title') }}
|
||||
</div>
|
||||
<Input type="text" v-model="liveClass.title" />
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
<Tooltip
|
||||
class="flex items-center"
|
||||
:text="
|
||||
__(
|
||||
'Time must be in 24 hour format (HH:mm). Example 11:30 or 22:00'
|
||||
)
|
||||
"
|
||||
>
|
||||
<span>
|
||||
{{ __('Time') }}
|
||||
</span>
|
||||
<Info class="stroke-2 w-3 h-3 ml-1" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Input v-model="liveClass.time" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Timezone') }}
|
||||
</div>
|
||||
<Select
|
||||
v-model="liveClass.timezone"
|
||||
:options="getTimezoneOptions()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Date') }}
|
||||
</div>
|
||||
<DatePicker v-model="liveClass.date" inputClass="w-full" />
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
<Tooltip
|
||||
class="flex items-center"
|
||||
:text="__('Duration of the live class in minutes')"
|
||||
>
|
||||
<span>
|
||||
{{ __('Duration') }}
|
||||
</span>
|
||||
<Info class="stroke-2 w-3 h-3 ml-1" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Input type="number" v-model="liveClass.duration" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Auto Recording') }}
|
||||
</div>
|
||||
<Select
|
||||
v-model="liveClass.auto_recording"
|
||||
:options="getRecordingOptions()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Description') }}
|
||||
</div>
|
||||
<Textarea v-model="liveClass.description" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Input,
|
||||
DatePicker,
|
||||
Select,
|
||||
Textarea,
|
||||
Dialog,
|
||||
createResource,
|
||||
Tooltip,
|
||||
} from 'frappe-ui'
|
||||
import { reactive, inject } from 'vue'
|
||||
import { getTimezones, createToast } from '@/utils/'
|
||||
import { Info } from 'lucide-vue-next'
|
||||
|
||||
const liveClasses = defineModel('reloadLiveClasses')
|
||||
const show = defineModel()
|
||||
const user = inject('$user')
|
||||
const dayjs = inject('$dayjs')
|
||||
|
||||
const props = defineProps({
|
||||
batch: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
let liveClass = reactive({
|
||||
title: '',
|
||||
description: '',
|
||||
date: '',
|
||||
time: '',
|
||||
duration: '',
|
||||
timezone: '',
|
||||
auto_recording: 'No Recording',
|
||||
batch: props.batch,
|
||||
host: user.data.name,
|
||||
})
|
||||
|
||||
const getTimezoneOptions = () => {
|
||||
return getTimezones().map((timezone) => {
|
||||
return {
|
||||
label: timezone,
|
||||
value: timezone,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getRecordingOptions = () => {
|
||||
return [
|
||||
{
|
||||
label: 'No Recording',
|
||||
value: 'No Recording',
|
||||
},
|
||||
{
|
||||
label: 'Local',
|
||||
value: 'Local',
|
||||
},
|
||||
{
|
||||
label: 'Cloud',
|
||||
value: 'Cloud',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const createLiveClass = createResource({
|
||||
url: 'lms.lms.doctype.lms_batch.lms_batch.create_live_class',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: 'LMS Live Class',
|
||||
batch_name: values.batch,
|
||||
...values,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const submitLiveClass = (close) => {
|
||||
createLiveClass.submit(liveClass, {
|
||||
validate() {
|
||||
if (!liveClass.title) {
|
||||
return 'Please enter a title.'
|
||||
}
|
||||
if (!liveClass.date) {
|
||||
return 'Please select a date.'
|
||||
}
|
||||
if (dayjs(liveClass.date).isSameOrBefore(dayjs(), 'day')) {
|
||||
return 'Please select a future date.'
|
||||
}
|
||||
if (!liveClass.time) {
|
||||
return 'Please select a time.'
|
||||
}
|
||||
if (!valideTime()) {
|
||||
return 'Please enter a valid time in the format HH:mm.'
|
||||
}
|
||||
if (!liveClass.duration) {
|
||||
return 'Please select a duration.'
|
||||
}
|
||||
if (!liveClass.timezone) {
|
||||
return 'Please select a timezone.'
|
||||
}
|
||||
},
|
||||
onSuccess() {
|
||||
liveClasses.value.reload()
|
||||
close()
|
||||
},
|
||||
onError(err) {
|
||||
createToast({
|
||||
title: 'Error',
|
||||
text: err.messages?.[0] || err,
|
||||
icon: 'x',
|
||||
iconClasses: 'bg-red-600 text-white rounded-md p-px',
|
||||
position: 'top-center',
|
||||
timeout: 10,
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const valideTime = () => {
|
||||
let time = liveClass.time.split(':')
|
||||
if (time.length != 2) {
|
||||
return false
|
||||
}
|
||||
if (time[0] < 0 || time[0] > 23) {
|
||||
return false
|
||||
}
|
||||
if (time[1] < 0 || time[1] > 59) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
87
frontend/src/components/Modals/ReviewModal.vue
Normal file
87
frontend/src/components/Modals/ReviewModal.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: __('Write a Review'),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: 'Submit',
|
||||
variant: 'solid',
|
||||
onClick: (close) => submitReview(close),
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Rating') }}
|
||||
</div>
|
||||
<Rating v-model="review.rating" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1.5 text-sm text-gray-600">
|
||||
{{ __('Review') }}
|
||||
</div>
|
||||
<Textarea type="text" size="md" rows="5" v-model="review.review" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Dialog, Textarea, createResource } from 'frappe-ui'
|
||||
import { defineModel, reactive } from 'vue'
|
||||
import Rating from '@/components/Controls/Rating.vue'
|
||||
import { createToast } from '@/utils/'
|
||||
|
||||
const show = defineModel()
|
||||
const reviews = defineModel('reloadReviews')
|
||||
let review = reactive({
|
||||
review: '',
|
||||
rating: 0,
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
courseName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const createReview = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'LMS Course Review',
|
||||
course: props.courseName,
|
||||
...values,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
function submitReview(close) {
|
||||
review.rating = review.rating / 5
|
||||
createReview.submit(review, {
|
||||
validate() {
|
||||
if (!review.rating) {
|
||||
return 'Please enter a rating.'
|
||||
}
|
||||
},
|
||||
onSuccess() {
|
||||
reviews.value.reload()
|
||||
},
|
||||
onError(err) {
|
||||
createToast({
|
||||
text: err.messages?.[0] || err,
|
||||
icon: 'x',
|
||||
iconClasses: 'text-red-600 bg-red-300',
|
||||
})
|
||||
},
|
||||
})
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
70
frontend/src/components/Modals/StudentModal.vue
Normal file
70
frontend/src/components/Modals/StudentModal.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: __('Add a Student'),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: 'Submit',
|
||||
variant: 'solid',
|
||||
onClick: (close) => addStudent(close),
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-4">
|
||||
<Link
|
||||
doctype="User"
|
||||
v-model="student"
|
||||
:filters="{ ignore_user_type: 1 }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Dialog, createResource } from 'frappe-ui'
|
||||
import { ref } from 'vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
|
||||
const students = defineModel('reloadStudents')
|
||||
const student = ref()
|
||||
const show = defineModel()
|
||||
|
||||
const props = defineProps({
|
||||
batch: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const studentResource = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'Batch Student',
|
||||
parent: props.batch,
|
||||
parenttype: 'LMS Batch',
|
||||
parentfield: 'students',
|
||||
student: student.value,
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const addStudent = (close) => {
|
||||
studentResource.submit(
|
||||
{},
|
||||
{
|
||||
onSuccess() {
|
||||
students.value.reload()
|
||||
close()
|
||||
student.value = null
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user