feat: create and delete assignment activities from UI

apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx

@@ -19,6 +19,7 @@ import { useRouter } from 'next/navigation'
 import React from 'react'
 import { Draggable } from 'react-beautiful-dnd'
 import { mutate } from 'swr'
+import { deleteAssignment, deleteAssignmentUsingActivityUUID } from '@services/courses/assignments'
 
 type ActivitiyElementProps = {
   orgslug: string
@@ -45,6 +46,11 @@ function ActivityElement(props: ActivitiyElementProps) {
   const activityUUID = props.activity.activity_uuid
 
   async function deleteActivityUI() {
+    // Assignments 
+    if(props.activity.activity_type === 'TYPE_ASSIGNMENT') {
+      await deleteAssignmentUsingActivityUUID(props.activity.activity_uuid, access_token)
+    }
+
     await deleteActivity(props.activity.activity_uuid, access_token)
     mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`)
     await revalidateTags(['courses'], props.orgslug)

apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx

@@ -102,9 +102,10 @@ function NewActivityModal({
 
       {selectedView === 'assignments' && (
         <Assignment
-          submitFileActivity={submitFileActivity}
+          submitActivity={submitActivity}
           chapterId={chapterId}
           course={course}
+          closeModal={closeModal}
         />)
       }
     </>

apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx

@@ -1,9 +1,153 @@
 import React from 'react'
+import FormLayout, {
+    ButtonBlack,
+    Flex,
+    FormField,
+    FormLabel,
+    FormMessage,
+    Input,
 
-function Assignment() {
-  return (
-    <div>Assignment</div>
-  )
+} from '@components/StyledElements/Form/Form'
+import * as Form from '@radix-ui/react-form'
+import { BarLoader } from 'react-spinners'
+import { useOrg } from '@components/Contexts/OrgContext'
+import { getAPIUrl } from '@services/config/config'
+import { mutate } from 'swr'
+import { createAssignment } from '@services/courses/assignments'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { createActivity } from '@services/courses/activities'
+
+function NewAssignment({ submitActivity, chapterId, course, closeModal }: any) {
+    const org = useOrg() as any;
+    const session = useLHSession() as any
+    const [activityName, setActivityName] = React.useState('')
+    const [isSubmitting, setIsSubmitting] = React.useState(false)
+    const [activityDescription, setActivityDescription] = React.useState('')
+    const [dueDate, setDueDate] = React.useState('')
+    const [gradingType, setGradingType] = React.useState('ALPHABET')
+
+    const handleNameChange = (e: any) => {
+        setActivityName(e.target.value)
+    }
+
+    const handleDescriptionChange = (e: any) => {
+        setActivityDescription(e.target.value)
+    }
+
+    const handleDueDateChange = (e: any) => {
+        setDueDate(e.target.value)
+    }
+
+    const handleGradingTypeChange = (e: any) => {
+        setGradingType(e.target.value)
+    }
+
+    const handleSubmit = async (e: any) => {
+        e.preventDefault()
+        setIsSubmitting(true)
+        const activity = {
+            name: activityName,
+            chapter_id: chapterId,
+            activity_type: 'TYPE_ASSIGNMENT',
+            activity_sub_type: 'SUBTYPE_ASSIGNMENT_ANY',
+            published: false,
+            course_id: course?.courseStructure.id,
+        }
+
+        const activity_res = await createActivity(activity, chapterId, org?.id, session.data?.tokens?.access_token)
+        console.log(course)
+        console.log(activity_res)
+        await createAssignment({
+            title: activityName,
+            description: activityDescription,
+            due_date: dueDate,
+            grading_type: gradingType,
+            course_id: course?.courseStructure.id,
+            org_id: org?.id,
+            chapter_id: chapterId,
+            activity_id: activity_res?.id,
+        }, session.data?.tokens?.access_token)
+
+        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`)
+        setIsSubmitting(false)
+        closeModal()
+    }
+
+
+    return (
+        <FormLayout onSubmit={handleSubmit}>
+            <FormField name="assignment-activity-title">
+                <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                    <FormLabel>Assignment Title</FormLabel>
+                    <FormMessage match="valueMissing">
+                        Please provide a name for your assignment
+                    </FormMessage>
+                </Flex>
+                <Form.Control asChild>
+                    <Input onChange={handleNameChange} type="text" required />
+                </Form.Control>
+            </FormField>
+
+            {/* Description  */}
+            <FormField name="assignment-activity-description">
+                <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                    <FormLabel>Assignment Description</FormLabel>
+                    <FormMessage match="valueMissing">
+                        Please provide a description for your assignment
+                    </FormMessage>
+                </Flex>
+                <Form.Control asChild>
+                    <Input onChange={handleDescriptionChange} type="text" required />
+                </Form.Control>
+            </FormField>
+
+            {/* Due date  */}
+            <FormField name="assignment-activity-due-date">
+                <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                    <FormLabel>Due Date</FormLabel>
+                    <FormMessage match="valueMissing">
+                        Please provide a due date for your assignment
+                    </FormMessage>
+                </Flex>
+                <Form.Control asChild>
+                    <Input onChange={handleDueDateChange} type="date" required />
+                </Form.Control>
+            </FormField>
+
+            {/* Grading type  */}
+            <FormField name="assignment-activity-grading-type">
+                <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                    <FormLabel>Grading Type</FormLabel>
+                    <FormMessage match="valueMissing">
+                        Please provide a grading type for your assignment
+                    </FormMessage>
+                </Flex>
+                <Form.Control asChild>
+                    <select className='bg-gray-100/40 rounded-lg px-1 py-2 outline outline-1 outline-gray-100' onChange={handleGradingTypeChange} required>
+                        <option value="ALPHABET">Alphabet</option>
+                        <option value="NUMERIC">Numeric</option>
+                        <option value="PERCENTAGE">Percentage</option>
+                    </select>
+                </Form.Control>
+            </FormField>
+
+            <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                <Form.Submit asChild>
+                    <ButtonBlack type="submit" css={{ marginTop: 10 }}>
+                        {isSubmitting ? (
+                            <BarLoader
+                                cssOverride={{ borderRadius: 60 }}
+                                width={60}
+                                color="#ffffff"
+                            />
+                        ) : (
+                            'Create activity'
+                        )}
+                    </ButtonBlack>
+                </Form.Submit>
+            </Flex>
+        </FormLayout>
+    )
 }
 
-export default Assignment
+export default NewAssignment

apps/web/services/courses/assignments.ts

@@ -0,0 +1,33 @@
+import { getAPIUrl } from '@services/config/config'
+import {
+  RequestBodyWithAuthHeader,
+  getResponseMetadata,
+} from '@services/utils/ts/requests'
+
+export async function createAssignment(body: any, access_token: string) {
+  const result: any = await fetch(
+    `${getAPIUrl()}assignments`,
+    RequestBodyWithAuthHeader('POST', body, null, access_token)
+  )
+  const res = await getResponseMetadata(result)
+  return res
+}
+
+// Delete an assignment
+export async function deleteAssignment(assignmentUUID: string, access_token: string) {
+  const result: any = await fetch(
+    `${getAPIUrl()}assignments/${assignmentUUID}`,
+    RequestBodyWithAuthHeader('DELETE', null, null, access_token)
+  )
+  const res = await getResponseMetadata(result)
+  return res
+}
+
+export async function deleteAssignmentUsingActivityUUID(activityUUID: string, access_token: string) {
+    const result: any = await fetch(
+      `${getAPIUrl()}assignments/activity/${activityUUID}`,
+      RequestBodyWithAuthHeader('DELETE', null, null, access_token)
+    )
+    const res = await getResponseMetadata(result)
+    return res
+  }