feat: assignments list and form
This commit is contained in:
Jannat Patel
183
frontend/src/pages/AssignmentForm.vue
Normal file
183
frontend/src/pages/AssignmentForm.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
<div class="space-x-2">
|
||||
<router-link
|
||||
v-if="assignment.doc?.name"
|
||||
:to="{
|
||||
name: 'AssignmentSubmissionList',
|
||||
params: {
|
||||
assignmentID: assignment.doc.name,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Button>
|
||||
{{ __('Submission List') }}
|
||||
</Button>
|
||||
</router-link>
|
||||
<Button variant="solid" @click="saveAssignment()">
|
||||
{{ __('Save') }}
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="w-3/4 mx-auto py-5">
|
||||
<div class="font-semibold mb-4">
|
||||
{{ __('Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-5 mt-4 mb-8">
|
||||
<FormControl
|
||||
v-model="model.title"
|
||||
:label="__('Title')"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="model.type"
|
||||
type="select"
|
||||
:options="assignmentOptions"
|
||||
:label="__('Type')"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-600 mb-2">
|
||||
{{ __('Question') }}
|
||||
<span class="text-ink-red-3">*</span>
|
||||
</div>
|
||||
<TextEditor
|
||||
:content="model.question"
|
||||
@change="(val) => (model.question = 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>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
createDocumentResource,
|
||||
createResource,
|
||||
FormControl,
|
||||
TextEditor,
|
||||
} from 'frappe-ui'
|
||||
import { computed, inject, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { showToast } from '@/utils'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const user = inject('$user')
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
assignmentID: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const model = reactive({
|
||||
title: '',
|
||||
type: 'PDF',
|
||||
question: '',
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (
|
||||
props.assignmentID == 'new' &&
|
||||
!user.data?.is_moderator &&
|
||||
!user.data?.is_instructor
|
||||
) {
|
||||
router.push({ name: 'Courses' })
|
||||
}
|
||||
if (props.assignmentID !== 'new') {
|
||||
assignment.reload()
|
||||
}
|
||||
window.addEventListener('keydown', keyboardShortcut)
|
||||
})
|
||||
|
||||
const keyboardShortcut = (e) => {
|
||||
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
|
||||
saveAssignment()
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', keyboardShortcut)
|
||||
})
|
||||
|
||||
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({
|
||||
url: 'frappe.client.insert',
|
||||
makeParams(values) {
|
||||
return {
|
||||
doc: {
|
||||
doctype: 'LMS Assignment',
|
||||
...values,
|
||||
},
|
||||
}
|
||||
},
|
||||
onSuccess(data) {
|
||||
router.push({ name: 'AssignmentForm', params: { assignmentID: data.name } })
|
||||
},
|
||||
onError(err) {
|
||||
showToast(__('Error'), __(err.messages?.[0] || err), 'x')
|
||||
},
|
||||
})
|
||||
|
||||
const saveAssignment = () => {
|
||||
if (props.assignmentID == 'new') {
|
||||
newAssignment.submit({
|
||||
...model,
|
||||
})
|
||||
} else {
|
||||
assignment.setValue.submit(
|
||||
{
|
||||
...model,
|
||||
},
|
||||
{
|
||||
onSuccess(data) {
|
||||
showToast(__('Success'), __('Assignment saved successfully'), 'check')
|
||||
assignment.reload()
|
||||
},
|
||||
onError(err) {
|
||||
showToast(__('Error'), __(err.messages?.[0] || err), 'x')
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const breadcrumbs = computed(() => [
|
||||
{
|
||||
label: __('Assignments'),
|
||||
route: { name: 'Assignments' },
|
||||
},
|
||||
{
|
||||
label: assignment.doc ? assignment.doc.title : __('New Assignment'),
|
||||
},
|
||||
])
|
||||
|
||||
const assignmentOptions = computed(() => {
|
||||
return [
|
||||
{ label: 'PDF', value: 'PDF' },
|
||||
{ label: 'Image', value: 'Image' },
|
||||
{ label: 'Document', value: 'Document' },
|
||||
{ label: 'Text', value: 'Text' },
|
||||
{ label: 'URL', value: 'URL' },
|
||||
]
|
||||
})
|
||||
</script>
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="container py-5">
|
||||
<div
|
||||
v-if="submissionResource.data"
|
||||
class="bg-blue-100 p-2 rounded-md leading-5 text-sm italic"
|
||||
class="bg-blue-100 p-2 rounded-md leading-5 text-sm mb-4"
|
||||
>
|
||||
{{ __("You've successfully submitted the assignment.") }}
|
||||
{{
|
||||
@@ -133,7 +133,7 @@ const answer = ref(null)
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
assignmentName: {
|
||||
assignmentID: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
@@ -147,7 +147,7 @@ const assignment = createResource({
|
||||
url: 'frappe.client.get',
|
||||
params: {
|
||||
doctype: 'LMS Assignment',
|
||||
name: props.assignmentName,
|
||||
name: props.assignmentID,
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
@@ -191,7 +191,7 @@ const newSubmission = createResource({
|
||||
makeParams(values) {
|
||||
let doc = {
|
||||
doctype: 'LMS Assignment Submission',
|
||||
assignment: props.assignmentName,
|
||||
assignment: props.assignmentID,
|
||||
member: user.data?.name,
|
||||
}
|
||||
if (showUploader()) {
|
||||
@@ -256,7 +256,7 @@ const addNewSubmission = () => {
|
||||
router.push({
|
||||
name: 'AssignmentSubmission',
|
||||
params: {
|
||||
assignmentName: props.assignmentName,
|
||||
assignmentID: props.assignmentID,
|
||||
submissionName: data.name,
|
||||
},
|
||||
})
|
||||
@@ -278,7 +278,7 @@ const breadcrumbs = computed(() => {
|
||||
route: {
|
||||
name: 'AssignmentSubmission',
|
||||
params: {
|
||||
assignmentName: assignment.data?.name,
|
||||
assignmentID: assignment.data?.name,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
202
frontend/src/pages/AssignmentSubmissionList.vue
Normal file
202
frontend/src/pages/AssignmentSubmissionList.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
</header>
|
||||
<div
|
||||
v-if="submissions.loading || submissions.data?.length"
|
||||
class="md:w-3/4 md:mx-auto py-5 mx-5"
|
||||
>
|
||||
<div class="grid grid-cols-4 gap-5 mb-5">
|
||||
<Link
|
||||
doctype="LMS Assignment"
|
||||
v-model="assignmentID"
|
||||
:placeholder="__('Assignment')"
|
||||
/>
|
||||
<Link doctype="User" v-model="member" :placeholder="__('Member')" />
|
||||
</div>
|
||||
<ListView
|
||||
:columns="submissionColumns"
|
||||
:rows="submissions.data"
|
||||
rowKey="name"
|
||||
>
|
||||
<ListHeader
|
||||
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
|
||||
>
|
||||
<ListHeaderItem :item="item" v-for="item in submissionColumns" />
|
||||
</ListHeader>
|
||||
<ListRows>
|
||||
<router-link
|
||||
v-for="row in submissions.data"
|
||||
:to="{
|
||||
name: 'AssignmentSubmission',
|
||||
params: {
|
||||
assignmentID: row.assignment,
|
||||
submissionName: row.name,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<ListRow :row="row">
|
||||
<template #default="{ column, item }">
|
||||
<ListRowItem :item="row[column.key]" :align="column.align">
|
||||
<div v-if="column.key == 'status'">
|
||||
<Badge :theme="getStatusTheme(row[column.key])">
|
||||
{{ row[column.key] }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ row[column.key] }}
|
||||
</div>
|
||||
</ListRowItem>
|
||||
</template>
|
||||
</ListRow>
|
||||
</router-link>
|
||||
</ListRows>
|
||||
</ListView>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
|
||||
>
|
||||
<Pencil class="size-8 mx-auto stroke-1 text-gray-500" />
|
||||
<div class="text-xl font-medium">
|
||||
{{ __('No submissions') }}
|
||||
</div>
|
||||
<!-- <div class="leading-5">
|
||||
{{
|
||||
__(
|
||||
'There are no submissions for the assignment {0}.',
|
||||
).format(assignmentTitle.data?.title)
|
||||
}}
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
Badge,
|
||||
Breadcrumbs,
|
||||
createListResource,
|
||||
createResource,
|
||||
ListView,
|
||||
ListHeader,
|
||||
ListHeaderItem,
|
||||
ListRows,
|
||||
ListRow,
|
||||
ListRowItem,
|
||||
} from 'frappe-ui'
|
||||
import { computed, inject, onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Pencil } from 'lucide-vue-next'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
|
||||
const user = inject('$user')
|
||||
const dayjs = inject('$dayjs')
|
||||
const router = useRouter()
|
||||
const assignmentID = ref('')
|
||||
const member = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
if (!user.data?.is_instructor && !user.data?.is_moderator) {
|
||||
router.push({ name: 'Courses' })
|
||||
}
|
||||
|
||||
assignmentID.value = router.currentRoute.value.params.assignmentID
|
||||
submissions.reload()
|
||||
})
|
||||
|
||||
const getAssignmentFilters = () => {
|
||||
let filters = {}
|
||||
if (assignmentID.value) {
|
||||
console.log(assignmentID.value)
|
||||
filters.assignment = assignmentID.value
|
||||
}
|
||||
if (member.value) {
|
||||
console.log(member.value)
|
||||
filters.member = member.value
|
||||
}
|
||||
console.log(filters)
|
||||
return filters
|
||||
}
|
||||
|
||||
const submissions = createListResource({
|
||||
doctype: 'LMS Assignment Submission',
|
||||
filters: getAssignmentFilters(),
|
||||
fields: [
|
||||
'name',
|
||||
'assignment',
|
||||
'assignment_title',
|
||||
'member_name',
|
||||
'creation',
|
||||
'status',
|
||||
],
|
||||
orderBy: 'creation desc',
|
||||
transform(data) {
|
||||
return data.map((row) => {
|
||||
return {
|
||||
...row,
|
||||
creation: dayjs(row.creation).fromNow(),
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
watch([assignmentID, member], () => {
|
||||
console.log('watch called')
|
||||
submissions.reload()
|
||||
})
|
||||
|
||||
/* const assignmentTitle = createResource({
|
||||
url: "frappe.client.get_value",
|
||||
params: {
|
||||
doctype: "LMS Assignment",
|
||||
fieldname: "title",
|
||||
filters: { name: props.assignmentID },
|
||||
},
|
||||
}) */
|
||||
|
||||
const submissionColumns = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: 'Member',
|
||||
key: 'member_name',
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: 'Assignment',
|
||||
key: 'assignment_title',
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: 'Submitted',
|
||||
key: 'creation',
|
||||
width: 1,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
key: 'status',
|
||||
width: 1,
|
||||
align: 'center',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const getStatusTheme = (status) => {
|
||||
if (status === 'Pass') {
|
||||
return 'green'
|
||||
} else if (status === 'Not Graded') {
|
||||
return 'orange'
|
||||
} else {
|
||||
return 'red'
|
||||
}
|
||||
}
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: 'Assignment Submissions',
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
123
frontend/src/pages/Assignments.vue
Normal file
123
frontend/src/pages/Assignments.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs :items="breadcrumbs" />
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'AssignmentForm',
|
||||
params: {
|
||||
assignmentID: 'new',
|
||||
},
|
||||
}"
|
||||
>
|
||||
<Button variant="solid">
|
||||
<template #prefix>
|
||||
<Plus class="w-4 h-4" />
|
||||
</template>
|
||||
{{ __('New') }}
|
||||
</Button>
|
||||
</router-link>
|
||||
</header>
|
||||
|
||||
<div v-if="assignments.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
|
||||
<ListView
|
||||
:columns="assignmentColumns"
|
||||
:rows="assignments.data"
|
||||
row-key="name"
|
||||
:options="{
|
||||
showTooltip: false,
|
||||
selectable: false,
|
||||
getRowRoute: (row) => ({
|
||||
name: 'AssignmentForm',
|
||||
params: {
|
||||
assignmentID: row.name,
|
||||
},
|
||||
}),
|
||||
}"
|
||||
>
|
||||
</ListView>
|
||||
<div class="flex justify-center my-5">
|
||||
<Button v-if="assignments.hasNextPage" @click="assignments.next()">
|
||||
{{ __('Load More') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
|
||||
>
|
||||
<Pencil class="size-10 mx-auto stroke-1 text-gray-500" />
|
||||
<div class="text-xl font-medium">
|
||||
{{ __('No assignments found') }}
|
||||
</div>
|
||||
<div class="leading-5">
|
||||
{{
|
||||
__(
|
||||
'You have not created any assignments yet. To create a new assignment, click on the "New" button above.'
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Breadcrumbs, Button, createListResource, ListView } from 'frappe-ui'
|
||||
import { computed, inject } from 'vue'
|
||||
import { Plus, Pencil } from 'lucide-vue-next'
|
||||
|
||||
const user = inject('$user')
|
||||
const dayjs = inject('$dayjs')
|
||||
|
||||
const assignmentFilter = computed(() => {
|
||||
if (user.data?.is_moderator) return {}
|
||||
return {
|
||||
owner: user.data?.name,
|
||||
}
|
||||
})
|
||||
|
||||
const assignments = createListResource({
|
||||
doctype: 'LMS Assignment',
|
||||
fields: ['name', 'title', 'type', 'creation'],
|
||||
filters: assignmentFilter,
|
||||
orderBy: 'modified desc',
|
||||
auto: true,
|
||||
cache: ['assignments'],
|
||||
transform(data) {
|
||||
return data.map((row) => {
|
||||
return {
|
||||
...row,
|
||||
creation: dayjs(row.creation).fromNow(),
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
const assignmentColumns = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: __('Title'),
|
||||
key: 'title',
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: __('Type'),
|
||||
key: 'type',
|
||||
width: 1,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
label: __('Created'),
|
||||
key: 'creation',
|
||||
width: 1,
|
||||
align: 'center',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const breadcrumbs = computed(() => [
|
||||
{
|
||||
label: 'Assignments',
|
||||
route: { name: 'Assignments' },
|
||||
},
|
||||
])
|
||||
</script>
|
||||
@@ -42,8 +42,11 @@
|
||||
</div>
|
||||
</header>
|
||||
<div v-if="jobsList?.length">
|
||||
<div class="divide-y lg:w-3/4 mx-auto p-5">
|
||||
<div v-for="job in jobsList">
|
||||
<div class="lg:w-3/4 mx-auto p-5">
|
||||
<div class="text-xl font-semibold mb-5">
|
||||
{{ __('Find the perfect job for you') }}
|
||||
</div>
|
||||
<div v-for="job in jobsList" class="divide-y">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'JobDetail',
|
||||
|
||||
@@ -256,11 +256,7 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
const keyboardShortcut = (e) => {
|
||||
if (
|
||||
e.key === 's' &&
|
||||
(e.ctrlKey || e.metaKey) &&
|
||||
!e.target.classList.contains('ProseMirror')
|
||||
) {
|
||||
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
|
||||
submitQuiz()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user