From dbd6de0988bb2eb3cb7365a62638f29ea8e212c7 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 15 Mar 2023 11:00:05 +0530 Subject: [PATCH] feat: views template created (#439) --- .../components/views/delete-view-modal.tsx | 152 ++++++++++++++++++ apps/app/components/views/form.tsx | 101 ++++++++++++ apps/app/components/views/index.ts | 3 + apps/app/components/views/modal.tsx | 148 +++++++++++++++++ apps/app/constants/fetch-keys.ts | 10 +- .../projects/[projectId]/views/[viewId].tsx | 98 +++++++++++ apps/app/services/views.service.ts | 85 ++++++++++ apps/app/types/index.d.ts | 1 + apps/app/types/views.d.ts | 35 ++++ 9 files changed, 630 insertions(+), 3 deletions(-) create mode 100644 apps/app/components/views/delete-view-modal.tsx create mode 100644 apps/app/components/views/form.tsx create mode 100644 apps/app/components/views/index.ts create mode 100644 apps/app/components/views/modal.tsx create mode 100644 apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx create mode 100644 apps/app/services/views.service.ts create mode 100644 apps/app/types/views.d.ts diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx new file mode 100644 index 000000000..a9688b4f5 --- /dev/null +++ b/apps/app/components/views/delete-view-modal.tsx @@ -0,0 +1,152 @@ +import React, { useRef, useState } from "react"; + +import { useRouter } from "next/router"; + +import { mutate } from "swr"; + +// headless ui +import { Dialog, Transition } from "@headlessui/react"; +// services +import viewsService from "services/views.service"; +// hooks +import useToast from "hooks/use-toast"; +// ui +import { Button } from "components/ui"; +// icons +import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; +// types +import type { IView } from "types"; +// fetch-keys +import { VIEWS_LIST } from "constants/fetch-keys"; + +type Props = { + isOpen: boolean; + setIsOpen: React.Dispatch>; + data?: IView; +}; + +export const DeleteViewModal: React.FC = ({ isOpen, setIsOpen, data }) => { + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; + + const { setToastAlert } = useToast(); + + const cancelButtonRef = useRef(null); + + const handleClose = () => { + setIsOpen(false); + setIsDeleteLoading(false); + }; + + const handleDeletion = async () => { + setIsDeleteLoading(true); + + if (!workspaceSlug || !data) return; + await viewsService + .deleteView(projectId as string, data.id) + .then(() => { + mutate(VIEWS_LIST(projectId as string)); + router.push(`/${workspaceSlug}/projects/${projectId}/issues`); + handleClose(); + + setToastAlert({ + type: "success", + title: "Success!", + message: "View deleted successfully.", + }); + }) + .catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "View could not be deleted. Please try again.", + }); + setIsDeleteLoading(false); + }); + }; + + return ( + + + +
+ + +
+
+ + +
+
+
+
+
+ + Delete View + +
+

+ Are you sure you want to delete view - {`"`} + {data?.name} + {`?"`} All of the data related to the view will be permanently removed. + This action cannot be undone. +

+
+
+
+
+
+ + +
+
+
+
+
+
+
+ ); +}; diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx new file mode 100644 index 000000000..d331b17c3 --- /dev/null +++ b/apps/app/components/views/form.tsx @@ -0,0 +1,101 @@ +import { useEffect } from "react"; + +// react-hook-form +import { useForm } from "react-hook-form"; +// ui +import { Button, Input, TextArea } from "components/ui"; +// types +import { IView } from "types"; + +type Props = { + handleFormSubmit: (values: IView) => Promise; + handleClose: () => void; + status: boolean; + data?: IView; +}; + +const defaultValues: Partial = { + name: "", + description: "", +}; + +export const ViewForm: React.FC = ({ handleFormSubmit, handleClose, status, data }) => { + const { + register, + formState: { errors, isSubmitting }, + handleSubmit, + reset, + } = useForm({ + defaultValues, + }); + + const handleCreateUpdateView = async (formData: IView) => { + await handleFormSubmit(formData); + + reset({ + ...defaultValues, + }); + }; + + useEffect(() => { + reset({ + ...defaultValues, + ...data, + }); + }, [data, reset]); + + return ( +
+
+

+ {status ? "Update" : "Create"} View +

+
+
+ +
+
+