feat: assignment in lesson
This commit is contained in:
Jannat Patel
333
frontend/src/components/Assignment.vue
Normal file
333
frontend/src/components/Assignment.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div v-if="assignment.data" class="grid grid-cols-2 gap-5">
|
||||
<div class="p-5 border rounded-md overflow-y-auto h-[calc(100vh-6rem)]">
|
||||
<div class="font-medium mb-2">
|
||||
{{ __('Question') }}
|
||||
</div>
|
||||
<div
|
||||
v-html="assignment.data.question"
|
||||
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="p-5 border rounded-md">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="font-medium">
|
||||
{{ __('Submission') }}
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Badge
|
||||
v-if="submissionResource.doc?.status || !submissionResource.doc"
|
||||
:theme="statusTheme"
|
||||
size="lg"
|
||||
>
|
||||
{{ submissionResource.doc?.status || 'Not Saved' }}
|
||||
</Badge>
|
||||
<Button variant="solid" @click="submitAssignment()">
|
||||
{{ __('Save') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="submissionName != 'new'"
|
||||
class="bg-blue-100 p-2 rounded-md leading-5 text-sm mb-4"
|
||||
>
|
||||
{{ __("You've successfully submitted the assignment.") }}
|
||||
{{
|
||||
__(
|
||||
"Once the moderator grades your submission, you'll find the details here."
|
||||
)
|
||||
}}
|
||||
{{ __('Feel free to make edits to your submission if needed.') }}
|
||||
</div>
|
||||
<div v-if="showUploader()">
|
||||
<div class="text-xs text-gray-600 mt-1 mb-2">
|
||||
{{ __('Add your assignment as {0}').format(assignment.data.type) }}
|
||||
</div>
|
||||
<FileUploader
|
||||
v-if="!submissionFile"
|
||||
:fileTypes="getType()"
|
||||
:validateFile="validateFile"
|
||||
@success="(file) => saveSubmission(file)"
|
||||
>
|
||||
<template #default="{ uploading, progress, openFileSelector }">
|
||||
<Button @click="openFileSelector" :loading="uploading">
|
||||
{{
|
||||
uploading
|
||||
? __('Uploading {0}%').format(progress)
|
||||
: __('Upload File')
|
||||
}}
|
||||
</Button>
|
||||
</template>
|
||||
</FileUploader>
|
||||
<div v-else>
|
||||
<div class="flex items-center">
|
||||
<div class="border rounded-md p-2 mr-2">
|
||||
<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span>
|
||||
{{ submissionFile.file_name }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-500 mt-1">
|
||||
{{ getFileSize(submissionFile.file_size) }}
|
||||
</span>
|
||||
</div>
|
||||
<X
|
||||
v-if="
|
||||
!submissionResource.doc ||
|
||||
submissionResource.doc?.owner == user.data?.name
|
||||
"
|
||||
@click="removeSubmission()"
|
||||
class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="assignment.data.type == 'URL'" class="mt-5">
|
||||
<div class="text-xs text-gray-600 mb-1">
|
||||
{{ __('Enter a URL') }}
|
||||
</div>
|
||||
<FormControl v-model="answer" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="text-sm mb-4">
|
||||
{{ __('Write your answer here') }}
|
||||
</div>
|
||||
<TextEditor
|
||||
:content="answer"
|
||||
@change="(val) => (answer = val)"
|
||||
:editable="true"
|
||||
:fixedMenu="true"
|
||||
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grading -->
|
||||
<div
|
||||
v-if="canGradeSubmission"
|
||||
class="p-3 border rounded-md mt-5 space-y-4"
|
||||
>
|
||||
<div class="text-sm text-gray-600 font-medium mb-5">
|
||||
{{ __('Grading') }}
|
||||
</div>
|
||||
<FormControl
|
||||
v-if="submissionResource.doc"
|
||||
v-model="submissionResource.doc.status"
|
||||
:label="__('Grade')"
|
||||
type="select"
|
||||
:options="submissionStatusOptions"
|
||||
/>
|
||||
<FormControl
|
||||
v-if="submissionResource.doc"
|
||||
v-model="submissionResource.doc.comments"
|
||||
:label="__('Comments')"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
createResource,
|
||||
createDocumentResource,
|
||||
FileUploader,
|
||||
FormControl,
|
||||
TextEditor,
|
||||
} from 'frappe-ui'
|
||||
import { computed, inject, ref } from 'vue'
|
||||
import { FileText, X } from 'lucide-vue-next'
|
||||
import { showToast, getFileSize } from '@/utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const submissionFile = ref(null)
|
||||
const answer = ref(null)
|
||||
const router = useRouter()
|
||||
const user = inject('$user')
|
||||
|
||||
const props = defineProps({
|
||||
assignmentID: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
submissionName: {
|
||||
type: String,
|
||||
default: 'new',
|
||||
},
|
||||
})
|
||||
|
||||
const assignment = createResource({
|
||||
url: 'frappe.client.get',
|
||||
params: {
|
||||
doctype: 'LMS Assignment',
|
||||
name: props.assignmentID,
|
||||
},
|
||||
auto: true,
|
||||
onSuccess(data) {
|
||||
if (props.submissionName != 'new') {
|
||||
submissionResource.reload()
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const newSubmission = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
let doc = {
|
||||
doctype: 'LMS Assignment Submission',
|
||||
assignment: props.assignmentID,
|
||||
member: user.data?.name,
|
||||
}
|
||||
if (showUploader()) {
|
||||
doc.assignment_attachment = submissionFile.value.file_url
|
||||
} else {
|
||||
doc.answer = answer.value
|
||||
}
|
||||
return {
|
||||
doc: doc,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const imageResource = createResource({
|
||||
url: 'lms.lms.api.get_file_info',
|
||||
makeParams(values) {
|
||||
return {
|
||||
file_url: values.image,
|
||||
}
|
||||
},
|
||||
auto: false,
|
||||
onSuccess(data) {
|
||||
submissionFile.value = data
|
||||
},
|
||||
})
|
||||
|
||||
const submissionResource = createDocumentResource({
|
||||
doctype: 'LMS Assignment Submission',
|
||||
name: props.submissionName,
|
||||
auto: false,
|
||||
onSuccess(data) {
|
||||
if (data.assignment_attachment) {
|
||||
imageResource.reload({ image: data.assignment_attachment })
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const submitAssignment = () => {
|
||||
if (props.submissionName != 'new') {
|
||||
let evaluator =
|
||||
submissionResource.doc && submissionResource.doc.owner != user.data?.name
|
||||
? user.data?.name
|
||||
: null
|
||||
submissionResource.setValue.submit({
|
||||
...submissionResource.doc,
|
||||
evaluator: evaluator,
|
||||
})
|
||||
} else {
|
||||
addNewSubmission()
|
||||
}
|
||||
}
|
||||
|
||||
const addNewSubmission = () => {
|
||||
newSubmission.submit(
|
||||
{},
|
||||
{
|
||||
onSuccess(data) {
|
||||
showToast('Success', 'Assignment submitted successfully.', 'check')
|
||||
if (router.currentRoute.value.name == 'AssignmentSubmission') {
|
||||
router.push({
|
||||
name: 'AssignmentSubmission',
|
||||
params: {
|
||||
assignmentID: props.assignmentID,
|
||||
submissionName: data.name,
|
||||
},
|
||||
})
|
||||
} else {
|
||||
router.go()
|
||||
}
|
||||
},
|
||||
onError(err) {
|
||||
showToast('Error', err.messages?.[0] || err, 'x')
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const saveSubmission = (file) => {
|
||||
submissionFile.value = file
|
||||
}
|
||||
|
||||
const getType = () => {
|
||||
const type = assignment.data?.type
|
||||
if (type == 'Image') {
|
||||
return ['image/*']
|
||||
} else if (type == 'Document') {
|
||||
return [
|
||||
'.doc',
|
||||
'.docx',
|
||||
'.xml',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
]
|
||||
} else if (type == 'PDF') {
|
||||
return ['.pdf']
|
||||
}
|
||||
}
|
||||
|
||||
const validateFile = (file) => {
|
||||
let type = assignment.data?.type
|
||||
let extension = file.name.split('.').pop().toLowerCase()
|
||||
if (type == 'Image' && !['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
return 'Only image file is allowed.'
|
||||
} else if (
|
||||
type == 'Document' &&
|
||||
!['doc', 'docx', 'xml'].includes(extension)
|
||||
) {
|
||||
return 'Only document file is allowed.'
|
||||
} else if (type == 'PDF' && !['pdf'].includes(extension)) {
|
||||
return 'Only PDF file is allowed.'
|
||||
}
|
||||
}
|
||||
|
||||
const removeSubmission = () => {
|
||||
submissionFile.value = null
|
||||
}
|
||||
|
||||
const canGradeSubmission = computed(() => {
|
||||
return (
|
||||
(user.data?.is_moderator ||
|
||||
user.data?.is_evaluator ||
|
||||
user.data?.is_instructor) &&
|
||||
props.submissionName != 'new' &&
|
||||
router.currentRoute.value.name == 'AssignmentSubmission'
|
||||
)
|
||||
})
|
||||
|
||||
const submissionStatusOptions = computed(() => {
|
||||
return [
|
||||
{ label: 'Not Graded', value: 'Not Graded' },
|
||||
{ label: 'Pass', value: 'Pass' },
|
||||
{ label: 'Fail', value: 'Fail' },
|
||||
]
|
||||
})
|
||||
|
||||
const statusTheme = computed(() => {
|
||||
if (!submissionResource.doc) {
|
||||
return 'orange'
|
||||
} else if (submissionResource.doc.status == 'Pass') {
|
||||
return 'green'
|
||||
} else if (submissionResource.doc.status == 'Not Graded') {
|
||||
return 'blue'
|
||||
} else {
|
||||
return 'red'
|
||||
}
|
||||
})
|
||||
|
||||
const showUploader = () => {
|
||||
return ['PDF', 'Image', 'Document'].includes(assignment.data?.type)
|
||||
}
|
||||
</script>
|
||||
46
frontend/src/components/AssignmentBlock.vue
Normal file
46
frontend/src/components/AssignmentBlock.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<Assignment
|
||||
v-if="user.data && submission.data"
|
||||
:assignmentID="assignmentID"
|
||||
:submissionName="submission.data?.name || 'new'"
|
||||
/>
|
||||
<div v-else class="border rounded-md text-center py-20">
|
||||
<div>
|
||||
{{ __('Please login to access the assignment.') }}
|
||||
</div>
|
||||
<Button @click="redirectToLogin()" class="mt-2">
|
||||
<span>
|
||||
{{ __('Login') }}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { inject, watch } from 'vue'
|
||||
import { Button, createResource } from 'frappe-ui'
|
||||
import Assignment from '@/components/Assignment.vue'
|
||||
|
||||
const user = inject('$user')
|
||||
|
||||
const props = defineProps({
|
||||
assignmentID: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const submission = createResource({
|
||||
url: 'frappe.client.get_value',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doctype: 'LMS Assignment Submission',
|
||||
fieldname: 'name',
|
||||
filters: {
|
||||
assignment: props.assignmentID,
|
||||
member: user.data?.name,
|
||||
},
|
||||
}
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
</script>
|
||||
@@ -64,7 +64,14 @@ import {
|
||||
FormControl,
|
||||
TextEditor,
|
||||
} from 'frappe-ui'
|
||||
import { computed, inject, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import {
|
||||
computed,
|
||||
inject,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
reactive,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { showToast } from '@/utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
@@ -113,11 +120,6 @@ const assignment = createDocumentResource({
|
||||
doctype: 'LMS Assignment',
|
||||
name: props.assignmentID,
|
||||
auto: false,
|
||||
onSuccess(data) {
|
||||
Object.keys(data).forEach((key) => {
|
||||
model[key] = data[key]
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const newAssignment = createResource({
|
||||
@@ -161,6 +163,12 @@ const saveAssignment = () => {
|
||||
}
|
||||
}
|
||||
|
||||
watch(assignment, () => {
|
||||
Object.keys(assignment.doc).forEach((key) => {
|
||||
model[key] = assignment.doc[key]
|
||||
})
|
||||
})
|
||||
|
||||
const breadcrumbs = computed(() => [
|
||||
{
|
||||
label: __('Assignments'),
|
||||
|
||||
@@ -3,154 +3,22 @@
|
||||
class="flex justify-between sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
<div class="flex items-center space-x-2">
|
||||
<Badge
|
||||
v-if="submissionResource.doc?.status"
|
||||
:theme="statusTheme"
|
||||
size="lg"
|
||||
>
|
||||
{{ submissionResource.doc.status }}
|
||||
</Badge>
|
||||
<Button variant="solid" @click="submitAssignment()">
|
||||
{{ __('Save') }}
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-5 overflow-hidden h-[calc(100vh-3.2rem)]">
|
||||
<div v-if="assignment.data" class="grid grid-cols-2 gap-5">
|
||||
<div class="p-5 border rounded-md overflow-y-auto h-[calc(100vh-6rem)]">
|
||||
<div class="text-sm text-gray-600 font-medium mb-2">
|
||||
{{ __('Question') }}
|
||||
</div>
|
||||
<div
|
||||
v-html="assignment.data.question"
|
||||
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="p-5 border rounded-md">
|
||||
<div class="text-sm text-gray-600 font-medium mb-4">
|
||||
{{ __('Submission') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="submissionName != 'new'"
|
||||
class="bg-blue-100 p-2 rounded-md leading-5 text-sm mb-4"
|
||||
>
|
||||
{{ __("You've successfully submitted the assignment.") }}
|
||||
{{
|
||||
__(
|
||||
"Once the moderator grades your submission, you'll find the details here."
|
||||
)
|
||||
}}
|
||||
{{ __('Feel free to make edits to your submission if needed.') }}
|
||||
</div>
|
||||
<div v-if="showUploader()">
|
||||
<div class="text-xs text-gray-600 mt-1 mb-2">
|
||||
{{
|
||||
__('Add your assignment as {0}').format(assignment.data.type)
|
||||
}}
|
||||
</div>
|
||||
<FileUploader
|
||||
v-if="!submissionFile"
|
||||
:fileTypes="getType()"
|
||||
:validateFile="validateFile"
|
||||
@success="(file) => saveSubmission(file)"
|
||||
>
|
||||
<template #default="{ uploading, progress, openFileSelector }">
|
||||
<Button @click="openFileSelector" :loading="uploading">
|
||||
{{
|
||||
uploading
|
||||
? __('Uploading {0}%').format(progress)
|
||||
: __('Upload File')
|
||||
}}
|
||||
</Button>
|
||||
</template>
|
||||
</FileUploader>
|
||||
<div v-else>
|
||||
<div class="flex items-center">
|
||||
<div class="border rounded-md p-2 mr-2">
|
||||
<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span>
|
||||
{{ submissionFile.file_name }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-500 mt-1">
|
||||
{{ getFileSize(submissionFile.file_size) }}
|
||||
</span>
|
||||
</div>
|
||||
<X
|
||||
v-if="submissionResource.doc.owner == user.data?.name"
|
||||
@click="removeSubmission()"
|
||||
class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="assignment.data.type == 'URL'" class="mt-5">
|
||||
<div class="text-xs text-gray-600 mb-1">
|
||||
{{ __('Enter a URL') }}
|
||||
</div>
|
||||
<FormControl v-model="answer" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="text-sm mb-4">
|
||||
{{ __('Write your answer here') }}
|
||||
</div>
|
||||
<TextEditor
|
||||
:content="answer"
|
||||
@change="(val) => (answer = val)"
|
||||
:editable="true"
|
||||
:fixedMenu="true"
|
||||
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grading -->
|
||||
<div
|
||||
v-if="canGradeSubmission"
|
||||
class="p-3 border rounded-md mt-5 space-y-4"
|
||||
>
|
||||
<div class="text-sm text-gray-600 font-medium mb-5">
|
||||
{{ __('Grading') }}
|
||||
</div>
|
||||
<FormControl
|
||||
v-model="submissionResource.doc.status"
|
||||
:label="__('Grade')"
|
||||
type="select"
|
||||
:options="submissionStatusOptions"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="submissionResource.doc.comments"
|
||||
:label="__('Comments')"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Assignment
|
||||
:assignmentID="assignmentID"
|
||||
:submissionName="submissionName"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Breadcrumbs,
|
||||
createResource,
|
||||
FileUploader,
|
||||
Button,
|
||||
Badge,
|
||||
FormControl,
|
||||
TextEditor,
|
||||
createDocumentResource,
|
||||
} from 'frappe-ui'
|
||||
import { FileText, X } from 'lucide-vue-next'
|
||||
import { computed, inject, onMounted, ref } from 'vue'
|
||||
import { showToast, getFileSize } from '../utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Breadcrumbs, createResource } from 'frappe-ui'
|
||||
import { computed, inject, onMounted } from 'vue'
|
||||
import Assignment from '@/components/Assignment.vue'
|
||||
|
||||
const user = inject('$user')
|
||||
const submissionFile = ref(null)
|
||||
const answer = ref(null)
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
assignmentID: {
|
||||
@@ -163,107 +31,24 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const title = createResource({
|
||||
url: 'frappe.client.get_value',
|
||||
params: {
|
||||
doctype: 'LMS Assignment',
|
||||
fieldname: 'title',
|
||||
filters: {
|
||||
name: props.assignmentID,
|
||||
},
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!user.data) {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
})
|
||||
|
||||
const assignment = createResource({
|
||||
url: 'frappe.client.get',
|
||||
params: {
|
||||
doctype: 'LMS Assignment',
|
||||
name: props.assignmentID,
|
||||
},
|
||||
auto: true,
|
||||
onSuccess(data) {
|
||||
if (props.submissionName != 'new') {
|
||||
submissionResource.reload()
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const showUploader = () => {
|
||||
return ['PDF', 'Image', 'Document'].includes(assignment.data?.type)
|
||||
}
|
||||
|
||||
const imageResource = createResource({
|
||||
url: 'lms.lms.api.get_file_info',
|
||||
makeParams(values) {
|
||||
return {
|
||||
file_url: values.image,
|
||||
}
|
||||
},
|
||||
auto: false,
|
||||
onSuccess(data) {
|
||||
submissionFile.value = data
|
||||
},
|
||||
})
|
||||
|
||||
const newSubmission = createResource({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
let doc = {
|
||||
doctype: 'LMS Assignment Submission',
|
||||
assignment: props.assignmentID,
|
||||
member: user.data?.name,
|
||||
}
|
||||
if (showUploader()) {
|
||||
doc.assignment_attachment = submissionFile.value.file_url
|
||||
} else {
|
||||
doc.answer = answer.value
|
||||
}
|
||||
return {
|
||||
doc: doc,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const submissionResource = createDocumentResource({
|
||||
doctype: 'LMS Assignment Submission',
|
||||
name: props.submissionName,
|
||||
auto: false,
|
||||
onSuccess(data) {
|
||||
if (data.assignment_attachment) {
|
||||
imageResource.reload({ image: data.assignment_attachment })
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const submitAssignment = () => {
|
||||
if (props.submissionName != 'new') {
|
||||
let evaluator =
|
||||
submissionResource.doc.owner != user.data?.name ? user.data?.name : null
|
||||
submissionResource.setValue.submit({
|
||||
...submissionResource.doc,
|
||||
evaluator: evaluator,
|
||||
})
|
||||
} else {
|
||||
addNewSubmission()
|
||||
}
|
||||
}
|
||||
|
||||
const addNewSubmission = () => {
|
||||
newSubmission.submit(
|
||||
{},
|
||||
{
|
||||
onSuccess(data) {
|
||||
showToast('Success', 'Assignment submitted successfully.', 'check')
|
||||
router.push({
|
||||
name: 'AssignmentSubmission',
|
||||
params: {
|
||||
assignmentID: props.assignmentID,
|
||||
submissionName: data.name,
|
||||
},
|
||||
})
|
||||
},
|
||||
onError(err) {
|
||||
showToast('Error', err.messages?.[0] || err, 'x')
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
let crumbs = [
|
||||
{
|
||||
@@ -271,82 +56,15 @@ const breadcrumbs = computed(() => {
|
||||
route: { name: 'AssignmentSubmissionList' },
|
||||
},
|
||||
{
|
||||
label: assignment.data?.title,
|
||||
label: title.data?.title,
|
||||
route: {
|
||||
name: 'AssignmentSubmission',
|
||||
params: {
|
||||
assignmentID: assignment.data?.name,
|
||||
assignmentID: props.assignmentID,
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
return crumbs
|
||||
})
|
||||
|
||||
const saveSubmission = (file) => {
|
||||
submissionFile.value = file
|
||||
}
|
||||
|
||||
const getType = () => {
|
||||
const type = assignment.data?.type
|
||||
if (type == 'Image') {
|
||||
return ['image/*']
|
||||
} else if (type == 'Document') {
|
||||
return [
|
||||
'.doc',
|
||||
'.docx',
|
||||
'.xml',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
]
|
||||
} else if (type == 'PDF') {
|
||||
return ['.pdf']
|
||||
}
|
||||
}
|
||||
|
||||
const validateFile = (file) => {
|
||||
let type = assignment.data?.type
|
||||
let extension = file.name.split('.').pop().toLowerCase()
|
||||
if (type == 'Image' && !['jpg', 'jpeg', 'png'].includes(extension)) {
|
||||
return 'Only image file is allowed.'
|
||||
} else if (
|
||||
type == 'Document' &&
|
||||
!['doc', 'docx', 'xml'].includes(extension)
|
||||
) {
|
||||
return 'Only document file is allowed.'
|
||||
} else if (type == 'PDF' && !['pdf'].includes(extension)) {
|
||||
return 'Only PDF file is allowed.'
|
||||
}
|
||||
}
|
||||
|
||||
const removeSubmission = () => {
|
||||
submissionFile.value = null
|
||||
}
|
||||
|
||||
const canGradeSubmission = computed(() => {
|
||||
return (
|
||||
(user.data?.is_moderator ||
|
||||
user.data?.is_evaluator ||
|
||||
user.data?.is_instructor) &&
|
||||
props.submissionName != 'new'
|
||||
)
|
||||
})
|
||||
|
||||
const submissionStatusOptions = computed(() => {
|
||||
return [
|
||||
{ label: 'Not Graded', value: 'Not Graded' },
|
||||
{ label: 'Pass', value: 'Pass' },
|
||||
{ label: 'Fail', value: 'Fail' },
|
||||
]
|
||||
})
|
||||
|
||||
const statusTheme = computed(() => {
|
||||
if (submissionResource.doc.status == 'Pass') {
|
||||
return 'green'
|
||||
} else if (submissionResource.doc.status == 'Not Graded') {
|
||||
return 'orange'
|
||||
} else {
|
||||
return 'red'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -195,6 +195,7 @@ import {
|
||||
SendIcon,
|
||||
MessageCircle,
|
||||
Globe,
|
||||
ShieldCheck,
|
||||
} from 'lucide-vue-next'
|
||||
import { formatTime, updateDocumentTitle } from '@/utils'
|
||||
import BatchDashboard from '@/components/BatchDashboard.vue'
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { Pencil } from 'lucide-vue-next'
|
||||
import { createApp, h } from 'vue'
|
||||
import AssessmentPlugin from '@/components/AssessmentPlugin.vue'
|
||||
import AssignmentBlock from '@/components/AssignmentBlock.vue'
|
||||
import translationPlugin from '../translation'
|
||||
import { usersStore } from '../stores/user'
|
||||
import { usersStore } from '@/stores/user'
|
||||
import router from '../router'
|
||||
|
||||
export class Assignment {
|
||||
constructor({ data, api, readOnly }) {
|
||||
@@ -42,9 +44,10 @@ export class Assignment {
|
||||
renderAssignment(assignment) {
|
||||
if (this.readOnly) {
|
||||
const app = createApp(AssignmentBlock, {
|
||||
assignment: assignment,
|
||||
assignmentID: assignment,
|
||||
})
|
||||
app.use(translationPlugin)
|
||||
app.use(router)
|
||||
const { userResource } = usersStore()
|
||||
app.provide('$user', userResource)
|
||||
app.mount(this.wrapper)
|
||||
|
||||
Reference in New Issue
Block a user