Files
lms/frontend/src/utils/assignment.js
2025-06-20 19:59:10 +05:30

95 lines
2.2 KiB
JavaScript

import { Pencil } from 'lucide-vue-next'
import { createApp, h } from 'vue'
import AssessmentPlugin from '@/components/AssessmentPlugin.vue'
import translationPlugin from '../translation'
import { usersStore } from '@/stores/user'
import { call } from 'frappe-ui'
export class Assignment {
constructor({ data, api, readOnly }) {
this.data = data
this.readOnly = readOnly
}
static get toolbox() {
const app = createApp({
render: () =>
h(Pencil, { size: 18, strokeWidth: 1.5, color: 'black' }),
})
const div = document.createElement('div')
app.mount(div)
return {
title: __('Assignment'),
icon: div.innerHTML,
}
}
static get isReadOnlySupported() {
return true
}
render() {
this.wrapper = document.createElement('div')
if (Object.keys(this.data).length) {
this.renderAssignment(this.data.assignment)
} else {
this.renderAssignmentModal()
}
return this.wrapper
}
renderAssignment(assignment) {
if (this.readOnly) {
const { userResource } = usersStore()
call('frappe.client.get_value', {
doctype: 'LMS Assignment Submission',
filters: {
assignment: assignment,
member: userResource.data?.name,
},
fieldname: ['name'],
}).then((data) => {
let submission = data.name || 'new'
this.wrapper.innerHTML = `<iframe src="/lms/assignment-submission/${assignment}/${submission}?fromLesson=1" class="w-full h-[500px]"></iframe>`
})
return
}
call('frappe.client.get_value', {
doctype: 'LMS Assignment',
name: assignment,
fieldname: ['title'],
}).then((data) => {
this.wrapper.innerHTML = `<div class='border rounded-md p-4 text-center bg-surface-menu-bar mb-4'>
<span class="font-medium">
Assignment: ${data.title}
</span>
</div>`
return
})
}
renderAssignmentModal() {
if (this.readOnly) {
return
}
const app = createApp(AssessmentPlugin, {
type: 'assignment',
onAddition: (assignment) => {
this.data.assignment = assignment
this.renderAssignment(assignment)
},
})
app.use(translationPlugin)
app.mount(this.wrapper)
}
save() {
if (Object.keys(this.data).length === 0) return {}
return {
assignment: this.data.assignment,
}
}
}