Merge pull request #122 from bipproduction/amalia/16-agustus-24

upd: tambah task divisi
2024-08-16 15:56:18 +08:00
parent a2c60cc67a ed12cc087a
commit 75d05e9787
12 changed files with 368 additions and 81 deletions
--- a/src/module/_global/fun/upload-file.ts
+++ b/src/module/_global/fun/upload-file.ts
@@ -0,0 +1,6 @@
+'use server'
+import fs from 'fs'
+export async function funUploadFile(fName: any, f: any) {
+   const filenya = Buffer.from(await f.arrayBuffer())
+   fs.writeFileSync(`./public/assets/file/${fName}`, filenya)
+}
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -3,6 +3,7 @@ import { pwd_key_config } from "./bin/val_global";
 import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
 import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
 import SkeletonSingle from "./components/skeleton_single";
+import { funUploadFile } from "./fun/upload-file";
 import { WARNA } from "./fun/WARNA";
 import LayoutDrawer from "./layout/layout_drawer";
 import LayoutIconBack from "./layout/layout_icon_back";
@@ -24,4 +25,5 @@ export { prisma };
 export { pwd_key_config };
 export { SkeletonSingle }
 export { SkeletonDetailDiscussionComment }
-export { SkeletonDetailDiscussionMember }
+export { SkeletonDetailDiscussionMember }
+export { funUploadFile }
--- a/src/module/task/lib/api_task.ts
+++ b/src/module/task/lib/api_task.ts
@@ -1,4 +1,21 @@
+import { IFormTaskDivision } from "./type_task";
+
 export const funGetAllTask = async (path?: string) => {
   const response = await fetch(`/api/task${(path) ? path : ''}`, { next: { tags: ['task'] } });
   return await response.json().catch(() => null);
-}
+}
+
+
+export const funCreateTask = async (data: IFormTaskDivision) => {
+   if (data.title.length < 3)
+      return { success: false, message: 'Nama proyek minimal 3 karakter' }
+
+   const response = await fetch("/api/task", {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
--- a/src/module/task/lib/type_task.ts
+++ b/src/module/task/lib/type_task.ts
@@ -17,4 +17,18 @@ export interface IFormDateTask {
   dateStart: Date,
   dateEnd: Date,
   title: string
+}
+
+
+export interface IFormTaskDivision {
+   idDivision: string
+   title: string
+   task: IFormDateTask[] | []
+   member: IFormMemberTask[] | []
+   file: FormData[] | []
+}
+
+export interface IListFileTask {
+   name: string,
+   extension: string
 }
--- a/src/module/task/ui/create_task.tsx
+++ b/src/module/task/ui/create_task.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Avatar, Box, Button, Center, Flex, Group, Input, Stack, Text } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import { Avatar, Box, Button, Center, Flex, Group, Input, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+import React, { useRef, useState } from "react";
 import { IoIosArrowDropright } from "react-icons/io";
 import { BsFiletypeCsv } from "react-icons/bs";
 import CreateUsersProject from "./create_users_project";
@@ -11,21 +11,72 @@ import ResultsFile from "./results_file";
 import { useHookstate } from "@hookstate/core";
 import { globalMemberTask } from "../lib/val_task";
 import ViewDateEndTask from "./create_date_end_task";
-import { IFormDateTask } from "../lib/type_task";
+import { IFormDateTask, IFormMemberTask, IListFileTask } from "../lib/type_task";
+import { Dropzone } from '@mantine/dropzone';
+import toast from "react-hot-toast";
+import _ from "lodash";
+import { FaTrash } from "react-icons/fa6";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { funCreateTask } from "../lib/api_task";

 export default function CreateTask() {
-  const router = useRouter();
+  const router = useRouter()
+  const param = useParams<{ id: string }>()
  const [openDrawer, setOpenDrawer] = useState(false)
+  const [openDrawerFile, setOpenDrawerFile] = useState(false)
+  const [openDrawerTask, setOpenDrawerTask] = useState(false)
  const [openMember, setOpenMember] = useState(false)
  const [openTugas, setOpenTugas] = useState(false)
+  const [openModal, setOpenModal] = useState(false)
  const member = useHookstate(globalMemberTask)
+  const memberValue = member.get() as IFormMemberTask[]
  const [dataTask, setDataTask] = useState<IFormDateTask[]>([])
+  const openRef = useRef<() => void>(null)
+  const [fileForm, setFileForm] = useState<FormData[]>([])
+  const [listFile, setListFile] = useState<IListFileTask[]>([])
+  const [indexDelFile, setIndexDelFile] = useState<number>(0)
+  const [indexDelTask, setIndexDelTask] = useState<number>(0)
+  const [title, setTitle] = useState("")
+
+  function deleteFile(index: number) {
+    setListFile([...listFile.filter((val, i) => i !== index)])
+    setFileForm([...fileForm.filter((val, i) => i !== index)])
+    setOpenDrawerFile(false)
+  }
+
+  function deleteTask(index: number) {
+    setDataTask([...dataTask.filter((val, i) => i !== index)])
+    setOpenDrawerTask(false)
+  }
+
+
+  async function onSubmit() {
+    try {
+      console.log("kirim",fileForm)
+      const response = await funCreateTask({ idDivision: param.id, title, task: dataTask, file: fileForm, member: memberValue })
+
+      if (response.success) {
+        toast.success(response.message)
+        setTitle("")
+        member.set([])
+        setFileForm([])
+        setListFile([])
+        setDataTask([])
+      } else {
+        toast.error(response.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal menambahkan tugas divisi, coba lagi nanti");
+    }
+  }


  if (openTugas) return <ViewDateEndTask onClose={(val) => {
    setDataTask([...dataTask, val])
    setOpenTugas(false)
  }} />;
+
  if (openMember) return <CreateUsersProject onClose={() => setOpenMember(false)} />


@@ -43,6 +94,8 @@ export default function CreateTask() {
            }}
            placeholder="Nama Proyek"
            size="md"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
          />
          <Box onClick={() => { setOpenTugas(true) }}>
            <Group
@@ -90,7 +143,10 @@ export default function CreateTask() {
            {
              dataTask.map((v, i) => {
                return (
-                  <Box key={i}>
+                  <Box key={i} onClick={() => {
+                    setIndexDelTask(i)
+                    setOpenDrawerTask(true)
+                  }}>
                    <ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
                  </Box>
                )
@@ -99,7 +155,31 @@ export default function CreateTask() {
          </Box>
        }

-        {/* <ResultsFile /> */}
+        {
+          listFile.length > 0 &&
+          <Box pt={20}>
+            <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+            <Box bg={"white"} style={{
+              borderRadius: 10,
+              border: `1px solid ${"#D6D8F6"}`,
+              padding: 20
+            }}>
+              {
+                listFile.map((v, i) => {
+                  return (
+                    <Box key={i} onClick={() => {
+                      setIndexDelFile(i)
+                      setOpenDrawerFile(true)
+                    }}>
+                      <ResultsFile name={v.name} extension={v.extension} />
+                    </Box>
+                  )
+                })
+              }
+            </Box>
+          </Box>
+        }
+

        {
          member.length > 0 &&
@@ -148,7 +228,7 @@ export default function CreateTask() {


        <Box mt="xl">
-          <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => router.push('/task')}>
+          <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setOpenModal(true)}>
            Simpan
          </Button>
        </Box>
@@ -156,30 +236,49 @@ export default function CreateTask() {



+      {/* Drawer pilih file */}
      <LayoutDrawer
        opened={openDrawer}
        onClose={() => setOpenDrawer(false)}
        title={"Pilih File"}
      >
        <Flex justify={"space-around"}>
-          <Box onClick={() => ""}>
-            <Box
-              bg={"#DCEED8"}
-              style={{
-                border: `1px solid ${"#D6D8F6"}`,
-                padding: 20,
-                borderRadius: 10,
-              }}
-            >
-              <Center>
-                <BsFiletypeCsv size={40} />
-              </Center>
+          <Dropzone
+            openRef={openRef}
+            onDrop={async (files) => {
+              if (!files || _.isEmpty(files))
+                return toast.error('Tidak ada file yang dipilih')
+              const fd = new FormData();
+              fd.append("file", files[0]);
+              setFileForm([...fileForm, fd])
+              setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
+            }}
+            activateOnClick={false}
+            maxSize={3 * 1024 ** 2}
+            accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+            onReject={(files) => {
+              return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
+            }}
+          >
+            <Box onClick={() => openRef.current?.()}>
+              <Box
+                bg={"#DCEED8"}
+                style={{
+                  border: `1px solid ${"#D6D8F6"}`,
+                  padding: 20,
+                  borderRadius: 10,
+                }}
+              >
+                <Center>
+                  <BsFiletypeCsv size={40} />
+                </Center>
+              </Box>
+              <Text mt={10} ta={"center"}>
+                Pilih file
+              </Text>
+              <Text ta={"center"}>diperangkat</Text>
            </Box>
-            <Text mt={10} ta={"center"}>
-              Pilih file
-            </Text>
-            <Text ta={"center"}>diperangkat</Text>
-          </Box>
+          </Dropzone>
          <Box onClick={() => router.push("/task/create?page=file-save")}>
            <Box
              bg={"#DCEED8"}
@@ -200,6 +299,61 @@ export default function CreateTask() {
          </Box>
        </Flex>
      </LayoutDrawer>
+
+
+
+      {/* Drawer hapus file */}
+      <LayoutDrawer
+        opened={openDrawerFile}
+        onClose={() => setOpenDrawerFile(false)}
+        title={""}
+      >
+        <Stack pt={10}>
+          <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
+            <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
+              <Box>
+                <FaTrash size={30} color={WARNA.biruTua} />
+              </Box>
+              <Box>
+                <Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
+              </Box>
+            </Flex>
+          </SimpleGrid>
+        </Stack>
+      </LayoutDrawer>
+
+
+      {/* Drawer hapus tugas */}
+      <LayoutDrawer
+        opened={openDrawerTask}
+        onClose={() => setOpenDrawerTask(false)}
+        title={""}
+      >
+        <Stack pt={10}>
+          <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
+            <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}>
+              <Box>
+                <FaTrash size={30} color={WARNA.biruTua} />
+              </Box>
+              <Box>
+                <Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text>
+              </Box>
+            </Flex>
+          </SimpleGrid>
+        </Stack>
+      </LayoutDrawer>
+
+
+
+
+      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+        description="Apakah Anda yakin ingin menambahkan data?"
+        onYes={(val) => {
+          if (val) {
+            onSubmit()
+          }
+          setOpenModal(false)
+        }} />
    </Box >
  );
 }
--- a/src/module/task/ui/list_division_task.tsx
+++ b/src/module/task/ui/list_division_task.tsx
@@ -166,7 +166,7 @@ export default function ListDivisionTask() {
                  {isData.map((v: any, i: any) => {
                     return (
                        <Box key={i} mb={20}>
-                           <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/task/${v.id}`)}>
+                           <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
                              <Card.Section>
                                 <Box h={120} bg={WARNA.biruTua}>
                                    <Flex justify={'center'} align={'center'} h={"100%"}>
@@ -176,18 +176,17 @@ export default function ListDivisionTask() {
                              </Card.Section>
                              <Box pt={10}>
                                 <Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
-                                    <Progress.Section value={(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0} color="yellow" striped >
-                                       <Progress.Label>{(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0}%</Progress.Label>
+                                    <Progress.Section value={v.status} color="yellow" striped >
+                                       <Progress.Label>{v.status}%</Progress.Label>
                                    </Progress.Section>
                                 </Progress.Root>
                                 <Text my={10}>{v.desc}</Text>
                                 <Group align='center' pt={10} justify='space-between'>
-                                    <Badge color={'dark'}>{status}</Badge>
                                    <Avatar.Group>
                                       <Avatar>
                                          <MdAccountCircle size={32} color={WARNA.biruTua} />
                                       </Avatar>
-                                       <Avatar>+5</Avatar>
+                                       <Avatar>+{v.member-1}</Avatar>
                                    </Avatar.Group>
                                 </Group>
                              </Box>
--- a/src/module/task/ui/results_file.tsx
+++ b/src/module/task/ui/results_file.tsx
@@ -1,38 +1,24 @@
 import { WARNA } from '@/module/_global';
 import { Box, Group, Text } from '@mantine/core';
 import React from 'react';
-import { BsFiletypeCsv } from 'react-icons/bs';
+import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
+import { IListFileTask } from '../lib/type_task';

-export default function ResultsFile() {
+export default function ResultsFile({ name, extension }: IListFileTask) {
  return (
-   <Box pt={20}>
-      <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
-      <Box bg={"white"} style={{
-        borderRadius: 10,
-        border: `1px solid ${"#D6D8F6"}`,
-        padding: 20
-      }}>
-        <Box style={{
-          borderRadius: 10,
-          border: `1px solid ${"#D6D8F6"}`,
-          padding: 10
-        }} mb={10}>
-          <Group>
-            <BsFiletypeCsv size={25} />
-            <Text>Proyek Laporan Permasyarakatan</Text>
-          </Group>
-        </Box>
-        <Box style={{
-          borderRadius: 10,
-          border: `1px solid ${"#D6D8F6"}`,
-          padding: 10 
-        }}>
-          <Group>
-            <BsFiletypeCsv size={25} />
-            <Text>Proyek Laporan Permasyarakatan</Text>
-          </Group>
-        </Box>
-      </Box>
+    <Box style={{
+      borderRadius: 10,
+      border: `1px solid ${"#D6D8F6"}`,
+      padding: 10
+    }} mb={10}>
+      <Group>
+        {extension == "pdf" && <BsFiletypePdf size={25} />}
+        {extension == "csv" && <BsFiletypeCsv size={25} />}
+        {extension == "png" && <BsFiletypePng size={25} />}
+        {extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={25} />}
+        {extension == "heic" && <BsFiletypeHeic size={25} />}
+        <Text>{name}</Text>
+      </Group>
    </Box>
  );
 }