diff --git a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx index 861af9fc..5b630c5e 100644 --- a/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx +++ b/apps/web/app/orgs/[orgslug]/dash/assignments/[assignmentuuid]/page.tsx @@ -1,6 +1,6 @@ 'use client'; import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs' -import { BookOpen, BookX, EllipsisVertical, Eye, Layers2, Monitor, UserRoundPen } from 'lucide-react' +import { ArrowRight, BookOpen, BookX, EllipsisVertical, Eye, Layers2, Monitor, Pencil, UserRoundPen } from 'lucide-react' import React, { useEffect } from 'react' import { AssignmentProvider, useAssignments } from '@components/Contexts/Assignments/AssignmentContext'; import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'; @@ -16,6 +16,7 @@ import { updateActivity } from '@services/courses/activities'; import dynamic from 'next/dynamic'; import AssignmentEditorSubPage from './subpages/AssignmentEditorSubPage'; import { useMediaQuery } from 'usehooks-ts'; +import EditAssignmentModal from '@components/Objects/Modals/Activities/Assignments/EditAssignmentModal'; const AssignmentSubmissionsSubPage = dynamic(() => import('./subpages/AssignmentSubmissionsSubPage')) function AssignmentEdit() { @@ -46,7 +47,9 @@ function AssignmentEdit() {
-
Assignment Tools
+
+ +
@@ -106,6 +109,7 @@ function PublishingState() { const assignment = useAssignments() as any; const session = useLHSession() as any; const access_token = session?.data?.tokens?.access_token; + const [isEditModalOpen, setIsEditModalOpen] = React.useState(false); async function updateAssignmentPublishState(assignmentUUID: string) { const res = await updateAssignment({ published: !assignment?.assignment_object?.published }, assignmentUUID, access_token) @@ -125,50 +129,83 @@ function PublishingState() { }, [assignment]) return ( -
-
- {assignment?.assignment_object?.published ? 'Published' : 'Unpublished'} -
-
- - - - -

Preview

- -
- {assignment?.assignment_object?.published && -
updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)} - className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-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'> - -

Unpublish

+ <> +
+
+ {assignment?.assignment_object?.published ? 'Published' : 'Unpublished'}
- } - {!assignment?.assignment_object?.published && +
+ + content="Edit Assignment Details"> +
setIsEditModalOpen(true)} + className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-to-bl text-blue-800 font-medium from-blue-400/50 to-blue-200/80 border border-blue-600/10 shadow-blue-900/10 shadow-lg'> + +

Edit

+
+
+ + + + +

Preview

+ +
+ {assignment?.assignment_object?.published &&
updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)} - className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-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'> - -

Publish

+ className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-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'> + +

Unpublish

} -
+ {!assignment?.assignment_object?.published && + +
updateAssignmentPublishState(assignment?.assignment_object?.assignment_uuid)} + className='flex px-3 py-2 cursor-pointer rounded-md space-x-2 items-center bg-linear-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'> + +

Publish

+
+
} +
+ {isEditModalOpen && ( + setIsEditModalOpen(false)} + assignment={assignment?.assignment_object} + accessToken={access_token} + /> + )} + ) } + +function AssignmentTitle() { + const assignment = useAssignments() as any; + + return ( +
+ Assignment Tools +
+ ); +} diff --git a/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx b/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx index 30f5bfd8..a5420330 100644 --- a/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx +++ b/apps/web/components/Objects/Activities/Assignment/AssignmentStudentActivity.tsx @@ -40,7 +40,22 @@ function AssignmentStudentActivity() {
-
+ + + {assignments?.assignment_object?.description && ( +
+
+
+ +

Assignment Description

+
+
+

{assignments.assignment_object.description}

+
+
+
+ )} + {assignments && assignments?.assignment_tasks?.sort((a: any, b: any) => a.id - b.id).map((task: any, index: number) => { return ( diff --git a/apps/web/components/Objects/Modals/Activities/Assignments/EditAssignmentModal.tsx b/apps/web/components/Objects/Modals/Activities/Assignments/EditAssignmentModal.tsx new file mode 100644 index 00000000..9f4e9453 --- /dev/null +++ b/apps/web/components/Objects/Modals/Activities/Assignments/EditAssignmentModal.tsx @@ -0,0 +1,194 @@ +import React from 'react'; +import { updateAssignment } from '@services/courses/assignments'; +import { mutate } from 'swr'; +import { getAPIUrl } from '@services/config/config'; +import toast from 'react-hot-toast'; +import FormLayout, { + FormField, + FormLabelAndMessage, + Input, + Textarea, + Flex, + FormLabel, + FormMessage +} from '@components/Objects/StyledElements/Form/Form'; +import * as Form from '@radix-ui/react-form'; +import { useFormik } from 'formik'; +import Modal from '@components/Objects/StyledElements/Modal/Modal'; + +interface Assignment { + assignment_uuid: string; + title: string; + description: string; + due_date?: string; + grading_type?: 'ALPHABET' | 'NUMERIC' | 'PERCENTAGE'; +} + +interface EditAssignmentFormProps { + onClose: () => void; + assignment: Assignment; + accessToken: string; +} + +interface EditAssignmentModalProps { + isOpen: boolean; + onClose: () => void; + assignment: Assignment; + accessToken: string; +} + +const EditAssignmentForm: React.FC = ({ + onClose, + assignment, + accessToken +}) => { + const formik = useFormik({ + initialValues: { + title: assignment.title || '', + description: assignment.description || '', + due_date: assignment.due_date || '', + grading_type: assignment.grading_type || 'ALPHABET' + }, + enableReinitialize: true, + onSubmit: async (values, { setSubmitting }) => { + const toast_loading = toast.loading('Updating assignment...'); + try { + const res = await updateAssignment(values, assignment.assignment_uuid, accessToken); + if (res.success) { + mutate(`${getAPIUrl()}assignments/${assignment.assignment_uuid}`); + toast.success('Assignment updated successfully'); + onClose(); + } else { + toast.error('Failed to update assignment'); + } + } catch (error) { + toast.error('An error occurred while updating the assignment'); + } finally { + toast.dismiss(toast_loading); + setSubmitting(false); + } + } + }); + + return ( + + + + Assignment Title + + Please provide a name for your assignment + + + + + + + + + + Assignment Description + + Please provide a description for your assignment + + + +