Skip to content
Snippets Groups Projects
Commit b5ecebe1 authored by Ahmad Nadil's avatar Ahmad Nadil
Browse files

feat: delete assignment

parent 2972d5e2
Branches
Tags
No related merge requests found
import { ViewIcon } from "@chakra-ui/icons"
import { DeleteIcon, ViewIcon } from "@chakra-ui/icons"
import {
useColorModeValue,
chakra,
Stack,
Button,
Icon,
Box
Box,
IconButton,
Tooltip,
Heading,
Text,
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Button
} from "@chakra-ui/react"
import axios from "axios"
import React from "react"
import { FiEdit } from "react-icons/fi"
import { Link } from "react-router-dom"
......@@ -17,80 +28,157 @@ export interface AssignmentCardsProps {
assignment_id: Number
assignment_name: string
assignment_description: string
onDeleteSuccess: () => void
}
export const AssignmentCards: React.FC<AssignmentCardsProps> = (props) => {
export const AssignmentCards = ({
index,
scholarship_id,
assignment_id,
assignment_name,
assignment_description,
onDeleteSuccess
}: AssignmentCardsProps) => {
// TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
const [applicants, setApplicants] = React.useState(0)
const [submissions, setSubmissions] = React.useState(0)
const {
scholarship_id,
assignment_id,
assignment_name,
assignment_description
} = props
const [isOpen, setIsOpen] = React.useState(false)
const onClose = () => setIsOpen(false)
const onDelete = () => {
setIsOpen(true)
}
const cancelRef = React.useRef<any>()
// TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
function DeleteAlertDialog({ isOpen, onClose }: any) {
return (
<AlertDialog
isOpen={isOpen}
onClose={onClose}
leastDestructiveRef={cancelRef}
isCentered
motionPreset="slideInBottom"
>
<AlertDialogOverlay sx={{ backdropFilter: "blur(10px)" }}>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
Delete Assignment
</AlertDialogHeader>
<AlertDialogBody>
Are you sure? You can't undo this action afterwards.
</AlertDialogBody>
<AlertDialogFooter>
<Button onClick={onClose}>Cancel</Button>
<Button colorScheme="red" ml={3} onClick={DeleteAssignment}>
Delete
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
)
}
async function DeleteAssignment() {
// send delete request to backend
try {
const URL =
process.env.REACT_APP_API_URL +
"/api/assignment/" +
scholarship_id +
"/" +
assignment_id
const response = await axios.delete(URL)
console.log(response)
onClose()
onDeleteSuccess()
} catch (error) {
console.error("Error deleting assignment:", error)
}
}
return (
<Box
boxShadow={"lg"}
width={"full"}
maxW={"1048px"}
rounded={"xl"}
justifyContent={"center"}
alignContent={"center"}
minW={{ base: "90%", md: "450px" }}
maxW={{ base: "90%", md: "900px" }}
mx={"auto"}
p={10}
position={"relative"}
bg={useColorModeValue("white", "gray.800")}
textAlign={"left"}
>
<chakra.h1
<Heading
fontSize={"2xl"}
fontWeight={"bold"}
color={useColorModeValue("gray.800", "white")}
mt={2}
>
{assignment_name}
</chakra.h1>
<chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
</Heading>
<Text
color={useColorModeValue("gray.800", "white")}
fontSize={"sm"}
pt={4}
textAlign={"justify"}
>
{assignment_description}
</chakra.p>
</Text>
<Stack
direction={{ base: "column", md: "row" }}
align="center"
m="1rem"
justifyContent={"center"}
direction={"row"}
align="start"
mt="1rem"
justifyContent={"space-between"}
spacing={"5"}
>
<chakra.p fontWeight={"bold"} fontSize={14}>
Submissions:
<chakra.span fontWeight={"medium"} color={"gray.500"}>
{" "}
<Text fontWeight="bold" fontSize={14}>
Submissions:{" "}
<chakra.span fontWeight="medium" color="gray.500">
{submissions} / {applicants}
</chakra.span>
</chakra.p>
<Link
to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/submissions`}
>
<Button
variant="ghost"
colorScheme="green"
size="sm"
leftIcon={<Icon as={ViewIcon} />}
</Text>
<Stack direction="row" spacing="2">
<Link
to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/submissions`}
>
View Submissions
</Button>
</Link>
<Link
to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`}
>
<Button
variant="ghost"
colorScheme="blue"
size="sm"
leftIcon={<Icon as={FiEdit} />}
<Tooltip label="View Submissions" aria-label="A tooltip">
<IconButton
aria-label="View Submissions"
colorScheme="green"
size="sm"
icon={<Icon as={ViewIcon} />}
/>
</Tooltip>
</Link>
<Link
to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`}
>
Edit Assignment
</Button>
</Link>
<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="Delete Assignment" aria-label="A tooltip">
<IconButton
aria-label="Delete Assignment"
icon={<DeleteIcon />}
colorScheme="red"
size="sm"
onClick={onDelete}
/>
</Tooltip>
<DeleteAlertDialog isOpen={isOpen} onClose={onClose} />
</Stack>
</Stack>
</Box>
)
......
......@@ -31,11 +31,10 @@ import { Field, Form, Formik } from "formik"
import { AssignmentCards, AssignmentCardsProps } from "./AssignmentCards"
interface CreateAssignmentModalProps {
afterCreate: () => void;
afterCreate: () => void
}
const useFetchAssignments = () => {
console.log("useFetchAssignments")
const [assignments, setAssignments] = useState([])
const { scholarshipid } = useParams()
......@@ -47,6 +46,7 @@ const useFetchAssignments = () => {
setAssignments(response.data.data)
} catch (error) {
console.error("Error fetching assignments:", error)
setAssignments([])
}
}
......@@ -176,20 +176,20 @@ function CreateAssignmentModal({ afterCreate }: CreateAssignmentModalProps) {
const AssignmentDetails = () => {
const { assignments, fetchAssignments } = useFetchAssignments()
const [shouldFetchAssignments, setShouldFetchAssignments] = useState(true);
const [shouldFetchAssignments, setShouldFetchAssignments] = useState(true)
useEffect(() => {
if (shouldFetchAssignments) {
fetchAssignments();
setShouldFetchAssignments(false);
fetchAssignments()
setShouldFetchAssignments(false)
}
}, [fetchAssignments, shouldFetchAssignments]);
}, [fetchAssignments, shouldFetchAssignments])
return (
<Flex
textAlign={"center"}
pt={10}
justifyContent={"center"}
pt={10}
direction={"column"}
width={"full"}
overflow={"hidden"}
......@@ -200,7 +200,7 @@ const AssignmentDetails = () => {
</Heading>
</Box>
<SimpleGrid columns={1} spacing={"5"} mt={16} mb={10} mx={"auto"}>
<CreateAssignmentModal
<CreateAssignmentModal
afterCreate={() => setShouldFetchAssignments(true)}
/>
{assignments.length > 0 ? (
......@@ -212,6 +212,9 @@ const AssignmentDetails = () => {
scholarship_id={assignment.scholarship_id}
assignment_name={assignment.assignment_name}
assignment_description={assignment.assignment_description}
onDeleteSuccess={() => {
setShouldFetchAssignments(true)
}}
/>
))
) : (
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment