From 05d1628e9e97d5aba0f01954613609f305e86501 Mon Sep 17 00:00:00 2001 From: YuJian920 Date: Sun, 10 Apr 2022 13:43:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BB=BB=E5=8A=A1=E7=BB=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hook/useEpic.ts | 37 +++++++++++ src/pages/Epic/CreateEpic/index.tsx | 68 +++++++++++++++++++ src/pages/Epic/index.tsx | 87 +++++++++++++++++++++++++ src/pages/Epic/style.ts | 9 +++ src/pages/Kanban/KanbanColumn/index.tsx | 8 +-- src/pages/Project/index.tsx | 8 +-- src/pages/Project/style.ts | 1 + src/pages/Task/CreateTask.tsx/index.tsx | 11 ---- src/pages/Task/index.tsx | 7 -- src/type/index.ts | 8 +++ 10 files changed, 216 insertions(+), 28 deletions(-) create mode 100644 src/hook/useEpic.ts create mode 100644 src/pages/Epic/CreateEpic/index.tsx create mode 100644 src/pages/Epic/index.tsx create mode 100644 src/pages/Epic/style.ts delete mode 100644 src/pages/Task/CreateTask.tsx/index.tsx delete mode 100644 src/pages/Task/index.tsx diff --git a/src/hook/useEpic.ts b/src/hook/useEpic.ts new file mode 100644 index 0000000..7cc373d --- /dev/null +++ b/src/hook/useEpic.ts @@ -0,0 +1,37 @@ +import { useMutation, useQuery, useQueryClient, QueryKey } from "react-query"; +import { Epic } from "../type"; +import { useProjectIdInUrl } from "./useKanban"; +import useRequest from "./useRequest"; + +export const useEpics = (param?: Partial) => { + const request = useRequest(); + + return useQuery(["epics", param], () => + request("/epics", { data: param }) + ); +}; + +export const useAddEpic = () => { + const request = useRequest(); + const queryClient = useQueryClient(); + + return useMutation( + (params: Partial) => + request(`/epics`, { method: "POST", data: params }), + { onSuccess: () => queryClient.invalidateQueries("epics") } + ); +}; + +export const useDeleteEpic = () => { + const request = useRequest(); + const queryClient = useQueryClient(); + + return useMutation( + ({ id }: { id: number }) => request(`/epics/${id}`, { method: "DELETE" }), + { onSuccess: () => queryClient.invalidateQueries("epics") } + ); +}; + +export const useEpicSearchParams = () => ({ projectId: useProjectIdInUrl() }); + +export const useEpicsQueryKey = () => ["epics", useEpicSearchParams()]; \ No newline at end of file diff --git a/src/pages/Epic/CreateEpic/index.tsx b/src/pages/Epic/CreateEpic/index.tsx new file mode 100644 index 0000000..8fd3715 --- /dev/null +++ b/src/pages/Epic/CreateEpic/index.tsx @@ -0,0 +1,68 @@ +import { Button, Drawer, DrawerProps, Form, Input, Spin } from "antd"; +import React, { useEffect } from "react"; +import { useAddEpic } from "../../../hook/useEpic"; +import { useProjectIdInUrl } from "../../../hook/useKanban"; +import { Container } from "../style"; + +const CreateEpic = ( + props: Pick & { onClose: () => void } +) => { + const { mutate: addEpic, isLoading, error } = useAddEpic(); + const [form] = Form.useForm(); + const projectId = useProjectIdInUrl(); + + const onFinish = async (values: any) => { + await addEpic({ ...values, projectId }); + props.onClose(); + }; + + useEffect(() => { + form.resetFields(); + }, [form, props.visible]); + + return ( + + + {isLoading ? ( + + ) : ( + <> +

创建任务组

+
+ + + + + + + +
+ + )} + + + ); +}; + +export default React.memo(CreateEpic); diff --git a/src/pages/Epic/index.tsx b/src/pages/Epic/index.tsx new file mode 100644 index 0000000..a3ed786 --- /dev/null +++ b/src/pages/Epic/index.tsx @@ -0,0 +1,87 @@ +import { Button, List, Modal } from "antd"; +import dayjs from "dayjs"; +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import { Row, ScreenContainer } from "../../components/lib"; +import { + useDeleteEpic, + useEpics, + useEpicSearchParams, +} from "../../hook/useEpic"; +import { useProjectInUrl } from "../../hook/useKanban"; +import { useTasks } from "../../hook/useTask"; +import CreateEpic from "./CreateEpic"; +import { Epic as EpicType } from "../../type"; + +const Epic = () => { + const { data: currenrProject } = useProjectInUrl(); + const { data: epics } = useEpics(useEpicSearchParams()); + const { data: tasks } = useTasks({ projectId: currenrProject?.id }); + const { mutate: deleteEpic } = useDeleteEpic(); + const [epicCreateOpen, setEpicCreateOpen] = useState(false); + + const confirmDeleteEpic = (epic: EpicType) => { + Modal.confirm({ + title: `确定删除项目组：${epic.name}`, + content: "点击确定删除", + okText: "确定", + onOk() { + deleteEpic({ id: epic.id }); + }, + }); + }; + + return ( + + +

{currenrProject?.name}任务组

+ + + ( + + + {epic.name} + + + } + description={ +
+
开始时间: {dayjs(epic.start).format("YYYY-MM-DD")}
+
结束时间: {dayjs(epic.end).format("YYYY-MM-DD")}
+
+ } + /> +
+ {tasks + ?.filter((task) => task.epicId === epic.id) + .map((task) => ( + + {task.name} + + ))} +
+ + )} + /> + setEpicCreateOpen(false)} + visible={epicCreateOpen} + /> + + ); +}; + +export default Epic; diff --git a/src/pages/Epic/style.ts b/src/pages/Epic/style.ts new file mode 100644 index 0000000..2b314bd --- /dev/null +++ b/src/pages/Epic/style.ts @@ -0,0 +1,9 @@ +import styled from "@emotion/styled"; + +export const Container = styled.div` + height: 80vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +` \ No newline at end of file diff --git a/src/pages/Kanban/KanbanColumn/index.tsx b/src/pages/Kanban/KanbanColumn/index.tsx index 1a5ae67..e4a5140 100644 --- a/src/pages/Kanban/KanbanColumn/index.tsx +++ b/src/pages/Kanban/KanbanColumn/index.tsx @@ -89,12 +89,8 @@ const KanbanColumn = React.forwardRef( - - + + {tasks?.map((task, taskIndex) => ( { @@ -20,15 +20,15 @@ const Project = () => { 看板 - - 任务组 + + 任务组
} /> - } /> + } /> { - const [name, setName] = useState(""); - // const { data, isLoading } = useAddTask(useTasksQueryKey()) - - return
-}; - -export default React.memo(CreateTask); diff --git a/src/pages/Task/index.tsx b/src/pages/Task/index.tsx deleted file mode 100644 index ffb8838..0000000 --- a/src/pages/Task/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const Task = () => { - return
Task
; -}; - -export default Task; diff --git a/src/type/index.ts b/src/type/index.ts index 9511837..7c41d98 100644 --- a/src/type/index.ts +++ b/src/type/index.ts @@ -66,3 +66,11 @@ export interface SortProps { fromKanbanId?: number; toKanbanId?: number; } + +export interface Epic { + id: number; + name: string; + projectId: number; + start: number; + end: number; +} \ No newline at end of file