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

upd: tambah task divisi

package.json

@@ -19,7 +19,7 @@
     "@mantine/code-highlight": "^7.11.0",
     "@mantine/core": "^7.11.0",
     "@mantine/dates": "^7.11.1",
-    "@mantine/dropzone": "^7.11.0",
+    "@mantine/dropzone": "^7.12.1",
     "@mantine/form": "^7.11.0",
     "@mantine/hooks": "^7.11.0",
     "@mantine/modals": "^7.11.0",

prisma/schema.prisma

@@ -303,8 +303,8 @@ model DivisionProjectFile {
   idDivision            String
   DivisionProject       DivisionProject       @relation(fields: [idProject], references: [id])
   idProject             String
-  name            String
+  ContainerFileDivision ContainerFileDivision @relation(fields: [idFile], references: [id])
-  extension       String
+  idFile                String
   isActive              Boolean               @default(true)
   User                  User                  @relation(fields: [createdBy], references: [id])
   createdBy             String
@@ -424,3 +424,13 @@ model ContainerImage {
   createdAt  DateTime @default(now())
   updatedAt  DateTime @updatedAt
 }
+
+model ContainerFileDivision {
+  id                  String                @id @default(cuid())
+  name                String
+  extension           String
+  isActive            Boolean               @default(true)
+  createdAt           DateTime              @default(now())
+  updatedAt           DateTime              @updatedAt
+  DivisionProjectFile DivisionProjectFile[]
+}

src/app/api/task/route.ts

@@ -1,8 +1,9 @@
-import { prisma } from "@/module/_global";
+import { funUploadFile, prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
 import _, { ceil } from "lodash";
 import { NextResponse } from "next/server";
 
+
 // GET ALL DATA TUGAS DIVISI
 export async function GET(request: Request) {
    try {
@@ -67,10 +68,108 @@ export async function GET(request: Request) {
          member: v.DivisionProjectMember.length
       }))
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data, }, { status: 200 });
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: formatData, }, { status: 200 });
 
    } catch (error) {
       console.log(error);
       return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
    }
 }
+
+
+export async function POST(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const { title, task, member, file, idDivision } = (await request.json());
+
+      const cek = await prisma.division.count({
+         where: {
+            isActive: true,
+            id: idDivision
+         }
+      })
+
+      if (cek == 0) {
+         return NextResponse.json({ success: false, message: "Gagal, data divisi tidak ditemukan", }, { status: 404 });
+      }
+
+      const data = await prisma.divisionProject.create({
+         data: {
+            idDivision: idDivision,
+            title: title,
+            desc: ''
+         },
+         select: {
+            id: true
+         }
+      })
+
+
+      if (task.length > 0) {
+         const dataTask = task.map((v: any) => ({
+            ..._.omit(v, ["dateStart", "dateEnd", "title"]),
+            idDivision: idDivision,
+            idProject: data.id,
+            title: v.title,
+            dateStart: new Date(v.dateStart),
+            dateEnd: new Date(v.dateEnd),
+         }))
+
+         const insertTask = await prisma.divisionProjectTask.createMany({
+            data: dataTask
+         })
+      }
+
+      if (member.length > 0) {
+         const dataMember = member.map((v: any) => ({
+            ..._.omit(v, ["idUser", "name"]),
+            idDivision: idDivision,
+            idProject: data.id,
+            idUser: v.idUser,
+         }))
+
+         const insertMember = await prisma.divisionProjectMember.createMany({
+            data: dataMember
+         })
+      }
+
+      let fileFix: any[] = []
+
+      console.log("amalia",file)
+
+      if (file.length > 0) {
+         file.map((v: any, index: any) => {
+            const f: any = file[index].get('file')
+            const fName = f.name
+            const fExt = fName.split(".").pop()
+            // funUploadFile(fName, f)
+
+            const dataFile = {
+               name: fName,
+               extension: fExt,
+               idDivision: idDivision,
+               idProject: data.id,
+            }
+
+            fileFix.push(dataFile)
+         })
+
+         console.log(fileFix)
+         const insertFile = await prisma.divisionProjectFile.createMany({
+            data: fileFix
+         })
+
+      }
+
+
+      return NextResponse.json({ success: true, message: "Berhasil membuat tugas divisi", }, { status: 200 });
+
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal membuat tugas divisiii, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}

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)
+}

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";
@@ -25,3 +26,4 @@ export { pwd_key_config };
 export { SkeletonSingle }
 export { SkeletonDetailDiscussionComment }
 export { SkeletonDetailDiscussionMember }
+export { funUploadFile }

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);
+};

src/module/task/lib/type_task.ts

@@ -18,3 +18,17 @@ export interface IFormDateTask {
    dateEnd: Date,
    title: string
 }
+
+
+export interface IFormTaskDivision {
+   idDivision: string
+   title: string
+   task: IFormDateTask[] | []
+   member: IFormMemberTask[] | []
+   file: FormData[] | []
+}
+
+export interface IListFileTask {
+   name: string,
+   extension: string
+}

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 { Avatar, Box, Button, Center, Flex, Group, Input, SimpleGrid, Stack, Text } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
-import React, { useState } from "react";
+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,13 +236,31 @@ export default function CreateTask() {
 
 
 
+      {/* Drawer pilih file */}
       <LayoutDrawer
         opened={openDrawer}
         onClose={() => setOpenDrawer(false)}
         title={"Pilih File"}
       >
         <Flex justify={"space-around"}>
-          <Box onClick={() => ""}>
+          <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={{
@@ -180,6 +278,7 @@ export default function CreateTask() {
               </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 >
   );
 }

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.Section value={v.status} color="yellow" striped >
-                                       <Progress.Label>{(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0}%</Progress.Label>
+                                       <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>

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} />
+        {extension == "pdf" && <BsFiletypePdf size={25} />}
-            <Text>Proyek Laporan Permasyarakatan</Text>
+        {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>
-        <Box style={{
-          borderRadius: 10,
-          border: `1px solid ${"#D6D8F6"}`,
-          padding: 10 
-        }}>
-          <Group>
-            <BsFiletypeCsv size={25} />
-            <Text>Proyek Laporan Permasyarakatan</Text>
-          </Group>
-        </Box>
-      </Box>
-    </Box>
   );
 }

yarn.lock

@@ -207,10 +207,10 @@
   dependencies:
     clsx "^2.1.1"
 
-"@mantine/dropzone@^7.11.0":
+"@mantine/dropzone@^7.12.1":
-  version "7.11.1"
+  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@mantine/dropzone/-/dropzone-7.11.1.tgz#cfe10acf0f9761f2e852107b2bb5dbbe48336b39"
+  resolved "https://registry.yarnpkg.com/@mantine/dropzone/-/dropzone-7.12.1.tgz#bd1c3b365261d3e2eb265e7a7bd165ef951271d4"
-  integrity sha512-Jvn+ikhT1GtQq3EMAYWK+1lk6CVDeB1Ykok7oUjTWPZDYAcQkLDNfPpFLqrbPPYSMav0u67zzaq9fUVTYVVhew==
+  integrity sha512-IuAdCnl6PDtkDnGp4vQlHgxr9z3R7s0685khVKpxy/3f+XfdoswUBBY3X7XyirpDXMIjMD4SLpkIzwuUXgZsag==
   dependencies:
     react-dropzone-esm "15.0.1"