From 45813d85413d613a59c35cb12e916acbd6f174ad Mon Sep 17 00:00:00 2001
From: IceTeaXXD <13521024@std.stei.itb.ac.id>
Date: Tue, 14 Nov 2023 22:58:34 +0700
Subject: [PATCH] feat: edit assignment modal
---
src/components/Assignment/AssignmentCards.tsx | 56 +++---
.../Assignment/AssignmentDetails.tsx | 3 +
.../Assignment/EditAssignmentModal.tsx | 175 ++++++++++++++++++
3 files changed, 213 insertions(+), 21 deletions(-)
create mode 100644 src/components/Assignment/EditAssignmentModal.tsx
diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx
index de6b900..320bd5d 100644
--- a/src/components/Assignment/AssignmentCards.tsx
+++ b/src/components/Assignment/AssignmentCards.tsx
@@ -13,7 +13,8 @@ import {
import React from "react"
import { FiEdit } from "react-icons/fi"
import { Link } from "react-router-dom"
-import { DeleteAssignmentDialog } from "./DeletAssignmentDialog"
+import { DeleteAssignmentDialog } from "./DeleteAssignmentDialog"
+import { EditAssignmentModal } from "./EditAssignmentModal"
export interface AssignmentCardsProps {
index: Number
@@ -22,6 +23,7 @@ export interface AssignmentCardsProps {
assignment_name: string
assignment_description: string
onDeleteSuccess: () => void
+ onEditSuccess: () => void
}
export const AssignmentCards = ({
@@ -30,15 +32,22 @@ export const AssignmentCards = ({
assignment_id,
assignment_name,
assignment_description,
- onDeleteSuccess
+ onDeleteSuccess,
+ onEditSuccess
}: AssignmentCardsProps) => {
// TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
const [applicants, setApplicants] = React.useState(0)
const [submissions, setSubmissions] = React.useState(0)
- const [isOpen, setIsOpen] = React.useState(false)
- const onClose = () => setIsOpen(false)
- const onDelete = () => {
- setIsOpen(true)
+ const [isOpenEditAssignment, setIsOpenEditAssignment] = React.useState(false)
+ const [isOpenDeleteAssignment, setIsOpenDeleteAssignment] =
+ React.useState(false)
+ const onCloseEditAssignment = () => setIsOpenEditAssignment(false)
+ const onCloseDeleteAssignment = () => setIsOpenDeleteAssignment(false)
+ const onEditAssignment = () => {
+ setIsOpenEditAssignment(true)
+ }
+ const onDeleteAssignment = () => {
+ setIsOpenDeleteAssignment(true)
}
return (
@@ -98,31 +107,36 @@ export const AssignmentCards = ({
/>
</Tooltip>
</Link>
- <Link
- to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`}
- >
- <Tooltip label="Edit Assignment" aria-label="A tooltip">
- <IconButton
- aria-label="Edit Assignment"
- icon={<Icon as={FiEdit} />}
- colorScheme="blue"
- size="sm"
- />
- </Tooltip>
- </Link>
+ <Tooltip label="Edit Assignment" aria-label="A tooltip">
+ <IconButton
+ aria-label="Edit Assignment"
+ icon={<Icon as={FiEdit} />}
+ colorScheme="blue"
+ size="sm"
+ onClick={onEditAssignment}
+ />
+ </Tooltip>
<Tooltip label="Delete Assignment" aria-label="A tooltip">
<IconButton
aria-label="Delete Assignment"
icon={<DeleteIcon />}
colorScheme="red"
size="sm"
- onClick={onDelete}
+ onClick={onDeleteAssignment}
/>
</Tooltip>
+ <EditAssignmentModal
+ isOpen={isOpenEditAssignment}
+ onClose={onCloseEditAssignment}
+ scholarship_id={scholarship_id}
+ assignment_id={assignment_id}
+ onEditSuccess={onEditSuccess}
+ />
+
<DeleteAssignmentDialog
- isOpen={isOpen}
- onClose={onClose}
+ isOpen={isOpenDeleteAssignment}
+ onClose={onCloseDeleteAssignment}
scholarship_id={scholarship_id}
assignment_id={assignment_id}
onDeleteSuccess={onDeleteSuccess}
diff --git a/src/components/Assignment/AssignmentDetails.tsx b/src/components/Assignment/AssignmentDetails.tsx
index adca44a..9349c7b 100644
--- a/src/components/Assignment/AssignmentDetails.tsx
+++ b/src/components/Assignment/AssignmentDetails.tsx
@@ -65,6 +65,9 @@ const AssignmentDetails = () => {
onDeleteSuccess={() => {
setShouldFetchAssignments(true)
}}
+ onEditSuccess={() => {
+ setShouldFetchAssignments(true)
+ }}
/>
))
) : (
diff --git a/src/components/Assignment/EditAssignmentModal.tsx b/src/components/Assignment/EditAssignmentModal.tsx
new file mode 100644
index 0000000..b682e51
--- /dev/null
+++ b/src/components/Assignment/EditAssignmentModal.tsx
@@ -0,0 +1,175 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from "react"
+import {
+ Button,
+ FormControl,
+ FormErrorMessage,
+ FormLabel,
+ Icon,
+ Input,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+ Textarea
+} from "@chakra-ui/react"
+import axios from "axios"
+import { Form, Formik, Field } from "formik"
+import { FiEdit } from "react-icons/fi"
+interface EditAssignmentModalProps {
+ isOpen: boolean
+ onClose: () => void
+ scholarship_id: Number
+ assignment_id: Number
+ onEditSuccess: () => void
+}
+
+export const EditAssignmentModal: React.FC<EditAssignmentModalProps> = ({
+ isOpen,
+ onClose,
+ scholarship_id,
+ assignment_id,
+ onEditSuccess
+}) => {
+ const [assignmentName, setAssignmentName] = React.useState("")
+ const [assignmentDescription, setAssignmentDescription] = React.useState("")
+
+ async function GetAssignment() {
+ try {
+ const URL =
+ process.env.REACT_APP_API_URL +
+ "/api/assignment/" +
+ scholarship_id +
+ "/" +
+ assignment_id
+ const response = await axios.get(URL)
+ console.log(response)
+ setAssignmentName(response.data.data.assignment_name)
+ setAssignmentDescription(response.data.data.assignment_description)
+ } catch (error) {
+ console.error("Error fetching assignment:", error)
+ }
+ }
+
+ async function EditAssignment() {
+ try {
+ const URL =
+ process.env.REACT_APP_API_URL +
+ "/api/assignment/" +
+ scholarship_id +
+ "/" +
+ assignment_id
+ const response = await axios.patch(URL, {
+ name: assignmentName,
+ desc: assignmentDescription
+ })
+ console.log(response)
+ onClose()
+ onEditSuccess()
+ } catch (error) {
+ console.error("Error deleting assignment:", error)
+ }
+ }
+
+ function validateField(value: any) {
+ if (!value) {
+ return "Field is required"
+ }
+ }
+
+ // when the modal is opened, fetch the assignment
+ useEffect(() => {
+ if (isOpen) {
+ GetAssignment()
+ }
+ }, [isOpen])
+
+ return (
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <Formik
+ initialValues={{
+ name: assignmentName,
+ description: assignmentDescription
+ }}
+ onSubmit={(values, actions) => {
+ EditAssignment()
+ actions.setSubmitting(false)
+ }}
+ >
+ {(props) => (
+ <Form>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>Edit Assignment</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody pb={6}>
+ <Field name="name" validate={validateField}>
+ {({ field, form }: any) => (
+ <FormControl
+ isInvalid={form.errors.name && form.touched.name}
+ >
+ <FormLabel htmlFor="name">Assignment Name</FormLabel>
+ <Input
+ {...field}
+ id="name"
+ placeholder="Assignment Name"
+ onChange={(e) => {
+ setAssignmentName(e.target.value)
+ }}
+ value={assignmentName}
+ />
+ <FormErrorMessage>{form.errors.name}</FormErrorMessage>
+ </FormControl>
+ )}
+ </Field>
+
+ <Field name="description" validate={validateField}>
+ {({ field, form }: any) => (
+ <FormControl
+ isInvalid={
+ form.errors.description && form.touched.description
+ }
+ >
+ <FormLabel htmlFor="description">
+ Assignment Description
+ </FormLabel>
+ <Textarea
+ {...field}
+ id="description"
+ placeholder="Assignment Description"
+ onChange={(e) => {
+ setAssignmentDescription(e.target.value)
+ }}
+ value={assignmentDescription}
+ />
+ <FormErrorMessage>
+ {form.errors.description}
+ </FormErrorMessage>
+ </FormControl>
+ )}
+ </Field>
+ </ModalBody>
+
+ <ModalFooter>
+ <Button
+ colorScheme="blue"
+ mr={3}
+ onClick={() => {
+ props.handleSubmit()
+ }}
+ leftIcon={<Icon as={FiEdit} />}
+ >
+ Edit
+ </Button>
+ <Button onClick={onClose}>Cancel</Button>
+ </ModalFooter>
+ </ModalContent>
+ </Form>
+ )}
+ </Formik>
+ </Modal>
+ )
+}
--
GitLab