mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: assignment publishing state switching
This commit is contained in:
swve
parent
175a5a97fa
commit
ccf387cc98
5 changed files with 102 additions and 32 deletions
|
|
@ -3,20 +3,22 @@ import { useAssignmentsTask, useAssignmentsTaskDispatch } from '@components/Cont
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext';
|
||||
import React, { useEffect } from 'react'
|
||||
import TaskQuizObject from './TaskTypes/TaskQuizObject';
|
||||
import TaskFileObject from './TaskTypes/TaskFileObject';
|
||||
|
||||
function AssignmentTaskContentEdit() {
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const assignmentTaskStateHook = useAssignmentsTaskDispatch() as any
|
||||
const assignment = useAssignments() as any
|
||||
const assignment_task = useAssignmentsTask() as any
|
||||
|
||||
useEffect(() => {
|
||||
}
|
||||
, [assignment, assignmentTaskStateHook])
|
||||
, [assignment_task, assignmentTaskStateHook])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TaskQuizObject />
|
||||
{assignment_task?.assignmentTask.assignment_type === 'QUIZ' && <TaskQuizObject />}
|
||||
{assignment_task?.assignmentTask.assignment_type === 'FILE_SUBMISSION' && <TaskFileObject view='teacher' />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import AssignmentBoxUI from '@components/Objects/Assignments/AssignmentBoxUI'
|
||||
import { Info } from 'lucide-react'
|
||||
import React from 'react'
|
||||
|
||||
export default function TaskFileObject({ view }: any) {
|
||||
return (
|
||||
<AssignmentBoxUI view={view} type="file">
|
||||
<div className='flex py-5 text-sm justify-center mx-auto space-x-2 text-slate-500'>
|
||||
<Info size={20} />
|
||||
<p>User will be able to submit a file for this task, you'll be able to review it in the Submissions Tab</p>
|
||||
</div>
|
||||
</AssignmentBoxUI>
|
||||
)
|
||||
}
|
||||
|
|
@ -8,6 +8,11 @@ import { useParams } from 'next/navigation';
|
|||
import { AssignmentsTaskProvider } from '@components/Contexts/Assignments/AssignmentsTaskContext';
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip';
|
||||
import AssignmentTaskEditor from './_components/TaskEditor/TaskEditor';
|
||||
import { updateAssignment } from '@services/courses/assignments';
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext';
|
||||
import { mutate } from 'swr';
|
||||
import { getAPIUrl } from '@services/config/config';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
function AssignmentEdit() {
|
||||
const params = useParams<{ assignmentuuid: string; }>()
|
||||
|
|
@ -17,41 +22,17 @@ function AssignmentEdit() {
|
|||
<div className='pb-5 bg-white z-50 shadow-[0px_4px_16px_rgba(0,0,0,0.06)] nice-shadow'>
|
||||
<div className='flex justify-between mr-10 h-full'>
|
||||
<div className="pl-10 mr-10 tracking-tighter">
|
||||
<BrdCmpx />
|
||||
<BrdCmpx />
|
||||
<div className="w-100 flex justify-between">
|
||||
<div className="flex font-bold text-2xl">Assignment Editor</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col justify-center antialiased'>
|
||||
<div className='flex mx-auto mt-5 items-center space-x-4'>
|
||||
<div className='flex bg-green-200/60 text-xs rounded-full px-3.5 py-2 mx-auto font-bold outline outline-1 outline-green-300'>Published</div>
|
||||
<div><EllipsisVertical className='text-gray-500' size={13} /></div>
|
||||
<ToolTip
|
||||
side='left'
|
||||
slateBlack
|
||||
sideOffset={10}
|
||||
content="Make your Assignment public and available for students" >
|
||||
<div className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-green-800 font-medium from-green-400/50 to-lime-200/80 border border-green-600/10 shadow-green-900/10 shadow-lg'>
|
||||
<BookOpen size={18} />
|
||||
<p className=' text-sm font-bold'>Publish</p>
|
||||
</div>
|
||||
</ToolTip>
|
||||
<ToolTip
|
||||
side='left'
|
||||
slateBlack
|
||||
sideOffset={10}
|
||||
content="Make your Assignment unavailable for students" >
|
||||
<div className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg'>
|
||||
<BookX size={18} />
|
||||
<p className='text-sm font-bold'>Unpublish</p>
|
||||
</div>
|
||||
</ToolTip>
|
||||
</div>
|
||||
<PublishingState />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full w-full">
|
||||
|
||||
<AssignmentsTaskProvider>
|
||||
<div className='flex w-[400px] flex-col h-full custom-dots-bg'>
|
||||
<div className='flex mx-auto px-3.5 py-1 bg-neutral-600/80 space-x-2 my-5 items-center text-sm font-bold text-white rounded-full'>
|
||||
|
|
@ -83,4 +64,59 @@ function BrdCmpx() {
|
|||
return (
|
||||
<BreadCrumbs type="assignments" last_breadcrumb={assignment?.assignment_object?.title} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function PublishingState() {
|
||||
const assignment = useAssignments() as any;
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
|
||||
async function updateAssignmentPublishState(assignmentUUID: string) {
|
||||
const res = await updateAssignment({ published: !assignment?.assignment_object?.published }, assignmentUUID, access_token)
|
||||
if (res.success) {
|
||||
mutate(`${getAPIUrl()}assignments/${assignmentUUID}`)
|
||||
toast.success('The assignment has been updated successfully')
|
||||
}
|
||||
else {
|
||||
toast.error('Error updating assignment, please retry later.')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('assignment', assignment?.assignment_object?.assignment_uuid)
|
||||
}, [assignment])
|
||||
|
||||
return (
|
||||
<div className='flex mx-auto mt-5 items-center space-x-4'>
|
||||
<div className={`flex text-xs rounded-full px-3.5 py-2 mx-auto font-bold outline outline-1 ${!assignment?.assignment_object?.published ? 'outline-gray-300 bg-gray-200/60' : 'outline-green-300 bg-green-200/60'}`}>
|
||||
{assignment?.assignment_object?.published ? 'Published' : 'Unpublished'}
|
||||
</div>
|
||||
<div><EllipsisVertical className='text-gray-500' size={13} /></div>
|
||||
{assignment?.assignment_object?.published && <ToolTip
|
||||
side='left'
|
||||
slateBlack
|
||||
sideOffset={10}
|
||||
content="Make your Assignment unavailable for students" >
|
||||
<div
|
||||
onClick={() => updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)}
|
||||
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-gray-800 font-medium from-gray-400/50 to-gray-200/80 border border-gray-600/10 shadow-gray-900/10 shadow-lg'>
|
||||
<BookX size={18} />
|
||||
<p className='text-sm font-bold'>Unpublish</p>
|
||||
</div>
|
||||
</ToolTip>}
|
||||
{!assignment?.assignment_object?.published &&
|
||||
<ToolTip
|
||||
side='left'
|
||||
slateBlack
|
||||
sideOffset={10}
|
||||
content="Make your Assignment public and available for students" >
|
||||
<div
|
||||
onClick={() => updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)}
|
||||
className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-gradient-to-bl text-green-800 font-medium from-green-400/50 to-lime-200/80 border border-green-600/10 shadow-green-900/10 shadow-lg'>
|
||||
<BookOpen size={18} />
|
||||
<p className=' text-sm font-bold'>Publish</p>
|
||||
</div>
|
||||
</ToolTip>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { BookUser, EllipsisVertical, ListTodo, Save } from 'lucide-react'
|
||||
import { BookUser, EllipsisVertical, File, FileUp, ListTodo, Save } from 'lucide-react'
|
||||
import React from 'react'
|
||||
|
||||
type AssignmentBoxProps = {
|
||||
type: 'quiz' | 'task'
|
||||
type: 'quiz' | 'file'
|
||||
view?: 'teacher' | 'student'
|
||||
saveFC?: () => void
|
||||
children: React.ReactNode
|
||||
|
|
@ -20,6 +20,11 @@ function AssignmentBoxUI({ type, view, saveFC, children }: AssignmentBoxProps) {
|
|||
<ListTodo size={17} />
|
||||
<p>Quiz</p>
|
||||
</div>}
|
||||
{type === 'file' &&
|
||||
<div className='flex space-x-1.5 items-center'>
|
||||
<FileUp size={17} />
|
||||
<p>File Submission</p>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,19 @@ export async function createAssignment(body: any, access_token: string) {
|
|||
return res
|
||||
}
|
||||
|
||||
export async function updateAssignment(
|
||||
body: any,
|
||||
assignmentUUID: string,
|
||||
access_token: string
|
||||
) {
|
||||
const result: any = await fetch(
|
||||
`${getAPIUrl()}assignments/${assignmentUUID}`,
|
||||
RequestBodyWithAuthHeader('PUT', body, null, access_token)
|
||||
)
|
||||
const res = await getResponseMetadata(result)
|
||||
return res
|
||||
}
|
||||
|
||||
export async function getAssignmentFromActivityUUID(
|
||||
activityUUID: string,
|
||||
access_token: string
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue