upd: task

Deskripsi:
- tambah detail task divisi

No Issues

src/module/task/index.ts

@@ -1,3 +1,4 @@
+import AddDetailTask from "./ui/add_detail_task";
 import ViewDateEndTask from "./ui/create_date_end_task";
 import CreateTask from "./ui/create_task";
 import CreateUsersProject from "./ui/create_users_project";
@@ -22,4 +23,5 @@ export { ListTugasDetailTask }
 export { ProgressDetailTask }
 export { ListFileDetailTask }
 export { ListAnggotaDetailTask }
-export { EditDetailTask }
+export { EditDetailTask }
+export { AddDetailTask }

src/module/task/lib/api_task.ts

@@ -1,4 +1,4 @@
-import { IFormDateTask, IFormTaskDivision } from "./type_task";
+import { IFormAddDetailTask, IFormDateTask, IFormTaskDivision } from "./type_task";
 
 export const funGetAllTask = async (path?: string) => {
    const response = await fetch(`/api/task${(path) ? path : ''}`, { next: { tags: ['task'] } });
@@ -64,4 +64,16 @@ export const funEditDetailTask = async (path: string, data: IFormDateTask) => {
       body: JSON.stringify(data),
    });
    return await response.json().catch(() => null);
+};
+
+
+export const funCreateDetailTask = async (path: string, data: IFormAddDetailTask) => {
+   const response = await fetch(`/api/task/${path}`, {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
 };

src/module/task/lib/type_task.ts

@@ -19,6 +19,13 @@ export interface IFormDateTask {
    title: string
 }
 
+export interface IFormAddDetailTask {
+   dateStart: Date,
+   dateEnd: Date,
+   title: string
+   idDivision: string
+}
+
 
 export interface IFormTaskDivision {
    idDivision: string

src/module/task/ui/add_detail_task.tsx

@@ -0,0 +1,147 @@
+"use client";
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import {
+   Avatar,
+   Box,
+   Button,
+   Flex,
+   Group,
+   Input,
+   SimpleGrid,
+   Stack,
+   Text,
+} from "@mantine/core";
+import React, { useState } from "react";
+import { DatePicker } from "@mantine/dates";
+import { useParams, useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import { IFormDateTask } from "../lib/type_task";
+import moment from "moment";
+import { funCreateDetailTask } from "../lib/api_task";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+
+
+export default function AddDetailTask() {
+   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+   const router = useRouter()
+   const [title, setTitle] = useState("")
+   const [openModal, setOpenModal] = useState(false)
+   const param = useParams<{ id: string, detail: string }>()
+
+   function onVerification() {
+      if (value[0] == null || value[1] == null)
+         return toast.error("Error! harus memilih tanggal")
+
+      if (title == "")
+         return toast.error("Error! harus memasukkan judul tugas")
+
+      setOpenModal(true)
+   }
+
+   async function onSubmit() {
+      try {
+         const res = await funCreateDetailTask(param.detail, {
+            title,
+            dateStart: (value[0] != null) ? value[0] : new Date,
+            dateEnd: (value[1] != null) ? value[1] : new Date,
+            idDivision: param.id
+         })
+
+         if (res.success) {
+            toast.success(res.message)
+            setOpenModal(false)
+            router.push(`/division/${param.id}/task/${param.detail}`)
+         } else {
+            toast.error(res.message)
+         }
+      } catch (error) {
+         console.log(error)
+         toast.error("Gagal menambahkan tugas, coba lagi nanti")
+      }
+   }
+
+
+
+   return (
+      <Box>
+         <LayoutNavbarNew back="" title={"Tambah Tugas"} menu />
+         <Box p={20}>
+            <Group
+               justify="center"
+               bg={"white"}
+               py={20}
+               style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+            >
+               <DatePicker
+                  styles={{}}
+                  type="range"
+                  value={value}
+                  onChange={setValue}
+                  size="md"
+                  c={WARNA.biruTua}
+               />
+            </Group>
+            <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+               <Box>
+                  <Text>Tanggal Mulai</Text>
+                  <Group
+                     justify="center"
+                     bg={"white"}
+                     h={45}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                  >
+                     <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                  </Group>
+               </Box>
+               <Box>
+                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  <Group
+                     justify="center"
+                     bg={"white"}
+                     h={45}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                  >
+                     <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                  </Group>
+               </Box>
+            </SimpleGrid>
+            <Stack pt={15}>
+               <Input
+                  styles={{
+                     input: {
+                        border: `1px solid ${"#D6D8F6"}`,
+                        borderRadius: 10,
+                     },
+                  }}
+                  placeholder="Input Nama Tahapan"
+                  size="md"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+               />
+            </Stack>
+            <Box mt={"xl"}>
+               <Button
+                  c={"white"}
+                  bg={WARNA.biruTua}
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => { onVerification() }}
+               >
+                  Simpan
+               </Button>
+            </Box>
+         </Box>
+
+
+         <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin menambahkan tugas?"
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               }
+               setOpenModal(false)
+            }} />
+      </Box>
+   );
+}

src/module/task/ui/navbar_detail_division_task.tsx

@@ -45,7 +45,7 @@ export default function NavbarDetailDivisionTask() {
                size="lg"
                radius="lg"
                aria-label="Settings"
-               onClick={() => { }}
+               onClick={() => { setOpen(true) }}
             >
                <HiMenu size={20} color="white" />
             </ActionIcon>
@@ -63,14 +63,14 @@ export default function NavbarDetailDivisionTask() {
                            cursor: 'pointer'
                         }}
                         onClick={() => {
-                           router.push('/announcement/create')
+                           router.push(param.detail + '/create-task')
                         }}
                      >
                         <Box>
                            <IoAddCircle size={30} color={WARNA.biruTua} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
+                           <Text c={WARNA.biruTua} ta='center'>Tambah Tugas</Text>
                         </Box>
                      </Flex>