upd: project

Deskripsi: - tambah data project nb : upload file blm selesai No Issuese
2025-05-14 14:19:48 +08:00
parent 9a86ccae56
commit 6b3de4d6b2
8 changed files with 218 additions and 47 deletions
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -5,13 +5,23 @@ import ButtonSelect from "@/components/buttonSelect";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
 import ModalSelect from "@/components/modalSelect";
+import SectionListAddTask from "@/components/project/sectionListAddTask";
 import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
+import { apiCreateProject } from "@/lib/api";
 import { setMemberChoose } from "@/lib/memberChoose";
+import { setUpdateProject } from "@/lib/projectUpdate";
+import { setTaskCreate } from "@/lib/taskCreate";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { router, Stack } from "expo-router";
-import { useState } from "react";
-import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useEffect, useState } from "react";
+import {
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
 import { useDispatch, useSelector } from "react-redux";

 export default function CreateProject() {
@@ -19,10 +29,13 @@ export default function CreateProject() {
   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
   const dispatch = useDispatch();
   const [valSelect, setValSelect] = useState<"group" | "member">("group");
-   const [disableBtn, setDisableBtn] = useState(true);
   const [isSelect, setSelect] = useState(false);
   const [valChoose, setValChoose] = useState("");
-   const entitiesMember = useSelector((state: any) => state.memberChoose)
+   const entitiesMember = useSelector((state: any) => state.memberChoose);
+   const taskCreate = useSelector((state: any) => state.taskCreate);
+   const update = useSelector((state: any) => state.projectUpdate)
+   const [fileForm, setFileForm] = useState([])
+   const [disableBtn, setDisableBtn] = useState(true)
   const [dataForm, setDataForm] = useState({
      idGroup: "",
      title: "",
@@ -31,10 +44,9 @@ export default function CreateProject() {
      group: false,
      title: false,
      task: false,
+      member: false,
   });
-   const taskCreate = useSelector((state: any) => state.taskCreate)
-
-   console.log('taskCreate', taskCreate)
+   const [hitung, setHitung] = useState(0)

   function validationForm(cat: string, val: any, label?: string) {
      if (cat == "group") {
@@ -42,26 +54,81 @@ export default function CreateProject() {
         dispatch(setMemberChoose([]));
         setDataForm({ ...dataForm, idGroup: val });
         if (val == "" || val == "null") {
-            setError({ ...error, group: true });
+            setError(error => ({ ...error, group: true }))
         } else {
-            setError({ ...error, group: false });
+            setError(error => ({ ...error, group: false }))
         }
      } else if (cat == "title") {
         setDataForm({ ...dataForm, title: val });
         if (val == "" || val == "null") {
-            setError({ ...error, title: true });
+            setError(error => ({ ...error, title: true }))
         } else {
-            setError({ ...error, title: false });
+            setError(error => ({ ...error, title: false }))
         }
+      } else if (cat == "task" && hitung > 1) {
+         if (taskCreate.length == 0) {
+            setError(error => ({ ...error, task: true }))
+         } else {
+            setError(error => ({ ...error, task: false }))
+         }
+      } else if (cat == "member") {
+         if (entitiesMember.length == 0) {
+            setError(error => ({ ...error, member: true }))
+         } else {
+            setError(error => ({ ...error, member: false }))
+         }
+      }
+
+      setHitung(hitung => hitung + 1)
+   }
+
+   function handleBack() {
+      dispatch(setTaskCreate([]));
+      dispatch(setMemberChoose([]));
+      router.back();
+   }
+
+   useEffect(() => {
+      validationForm('task', '');
+   }, [taskCreate]);
+
+   async function handleCreate() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, fileForm[i]);
+         }
+         fd.append("data", JSON.stringify(
+            { user: hasil, task: taskCreate, member: entitiesMember, ...dataForm }
+         ))
+         const response = await apiCreateProject(fd)
+         if (response.success) {
+            dispatch(setUpdateProject({ ...update, data: !update.data }))
+            ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+            handleBack()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
      }
   }


-   function handleBack() {
-      dispatch(setMemberChoose([]))
-      router.back()
+   function checkForm() {
+      if (Object.values(error).some((v) => v == true) == true || Object.values(dataForm).some((v) => v == "") == true || entitiesMember.length == 0 || taskCreate.length == 0) {
+         setDisableBtn(true)
+      } else {
+         setDisableBtn(false)
+      }
   }

+   useEffect(() => {
+      checkForm()
+   }, [error, dataForm, entitiesMember, taskCreate])
+
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -69,19 +136,18 @@ export default function CreateProject() {
               headerLeft: () => (
                  <ButtonBackHeader
                     onPress={() => {
-                        handleBack()
+                        handleBack();
                     }}
                  />
               ),
               headerTitle: "Tambah Kegiatan",
               headerTitleAlign: "center",
               headerRight: () => (
-                  <ButtonSaveHeader
+                  <ButtonSaveHeader 
                     disable={disableBtn}
                     category="create"
                     onPress={() => {
-                        ToastAndroid.show("Berhasil menambah data", ToastAndroid.SHORT);
-                        router.push("/project?status=0");
+                        handleCreate()
                     }}
                  />
               ),
@@ -99,6 +165,8 @@ export default function CreateProject() {
                     setValSelect("group");
                     setSelect(true);
                  }}
+                  error={error.group}
+                  errorText="Lembaga Desa tidak boleh kosong"
               />
               <InputForm
                  label="Kegiatan"
@@ -108,11 +176,18 @@ export default function CreateProject() {
                  value={dataForm.title}
                  error={error.title}
                  errorText="Nama kegiatan tidak boleh kosong"
-                  onChange={(val) => { validationForm("title", val) }}
+                  onChange={(val) => {
+                     validationForm("title", val);
+                  }}
+               />
+               <ButtonSelect
+                  value="Tambah Tanggal & Tugas"
+                  onPress={() => {
+                     router.push(`/project/create/task`);
+                  }}
+                  error={error.task}
+                  errorText="Tanggal & Tugas tidak boleh kosong"
               />
-               <ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => {
-                  router.push(`/project/create/task`)
-               }} />
               <ButtonSelect value="Upload File" />
               <ButtonSelect
                  value="Pilih Anggota"
@@ -127,9 +202,11 @@ export default function CreateProject() {
                        );
                     }
                  }}
+                  error={error.member}
+                  errorText="Anggota tidak boleh kosong"
               />
-               {
-                  entitiesMember.length > 0 &&
+               <SectionListAddTask />
+               {entitiesMember.length > 0 && (
                  <View>
                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
                        <Text>Anggota</Text>
@@ -137,23 +214,26 @@ export default function CreateProject() {
                     </View>

                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
-                        {
-                           entitiesMember.map((item: { img: any; name: any; }, index: any) => {
+                        {entitiesMember.map(
+                           (item: { img: any; name: any }, index: any) => {
                              return (
                                 <BorderBottomItem
                                    key={index}
                                    borderType="bottom"
                                    icon={
-                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                       <ImageUser
+                                          src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                          size="sm"
+                                       />
                                    }
                                    title={item.name}
                                 />
-                              )
-                           })
-                        }
+                              );
+                           }
+                        )}
                     </View>
                  </View>
-               }
+               )}
            </View>
         </ScrollView>

--- a/app/(application)/project/create/task.tsx
+++ b/app/(application)/project/create/task.tsx
@@ -63,9 +63,11 @@ export default function CreateProjectAddTask() {
   async function handleCreate() {
      try {
         dispatch(setTaskCreate([...taskCreate, {
-            name: title,
+            title: title,
            dateStart: from,
            dateEnd: to,
+            dateStartFix: dayjs(range.startDate).format("YYYY-MM-DD"),
+            dateEndFix: dayjs(range.endDate).format("YYYY-MM-DD"),
         }]))
         router.back();
      } catch (error) {
--- a/app/(application)/project/index.tsx
+++ b/app/(application)/project/index.tsx
@@ -40,6 +40,7 @@ export default function ListProject() {
   const [nameGroup, setNameGroup] = useState("");
   const [data, setData] = useState<Props[]>([]);
   const [isList, setList] = useState(false);
+   const update = useSelector((state: any) => state.projectUpdate)

   async function handleLoad() {
      try {
@@ -63,7 +64,7 @@ export default function ListProject() {

   useEffect(() => {
      handleLoad();
-   }, [status, search, group, cat]);
+   }, [status, search, group, cat, update.data]);

   return (
      <SafeAreaView>
--- a/components/buttonSelect.tsx
+++ b/components/buttonSelect.tsx
@@ -6,17 +6,20 @@ type Props = {
   value: string
   onPress?: () => void
   round?: boolean
+   error?: boolean
+   errorText?: string
 }

-export default function ButtonSelect({ value, onPress, round }: Props) {
+export default function ButtonSelect({ value, onPress, round, error, errorText }: Props) {
   return (
-      <View style={[Styles.mv15]}>
+      <View style={[Styles.mv05]}>
         <Pressable onPress={onPress}>
-            <View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, round && Styles.round30, Styles.pv10]}>
+            <View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, round && Styles.round30, Styles.pv10, error && { borderColor: "red" }]}>
               <Feather name="arrow-right-circle" size={20} color="black" />
               <Text style={[Styles.cBlack]}>{value}</Text>
            </View>
         </Pressable>
+         {error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}
      </View>
   )
 }
--- a/components/itemSectionTanggalTugas.tsx
+++ b/components/itemSectionTanggalTugas.tsx
@@ -4,7 +4,7 @@ import { Pressable, Text, View } from "react-native";


 type Props = {
-   done: boolean
+   done?: boolean
   title: string
   dateStart: string
   dateEnd: string
@@ -16,16 +16,19 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
      <Pressable style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]} onPress={onPress}>
         <View style={[Styles.rowItemsCenter]}>
            {
-               done ?
-                  <>
-                     <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
-                     <Text style={[Styles.cGray]}>Selesai</Text>
-                  </>
+               done != undefined ?
+                  done ?
+                     <>
+                        <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
+                        <Text style={[Styles.cGray]}>Selesai</Text>
+                     </>
+                     :
+                     <>
+                        <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
+                        <Text style={[Styles.cGray]}>Belum Selesai</Text>
+                     </>
                  :
-                  <>
-                     <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
-                     <Text style={[Styles.cGray]}>Belum Selesai</Text>
-                  </>
+                  <></>
            }

         </View>
--- a/components/project/sectionListAddTask.tsx
+++ b/components/project/sectionListAddTask.tsx
@@ -0,0 +1,70 @@
+import Styles from "@/constants/Styles";
+import { deleteTaskCreate } from "@/lib/taskCreate";
+import { Ionicons } from "@expo/vector-icons";
+import { Key, useState } from "react";
+import { Text, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+import DrawerBottom from "../drawerBottom";
+import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
+import MenuItemRow from "../menuItemRow";
+
+export default function SectionListAddTask() {
+   const taskCreate = useSelector((state: any) => state.taskCreate)
+   const [select, setSelect] = useState<any>(null)
+   const [isModal, setModal] = useState(false)
+   const dispatch = useDispatch()
+
+   function handleDelete() {
+      dispatch(deleteTaskCreate(select))
+      setModal(false)
+   }
+
+   return (
+      <>
+         {
+            taskCreate.length > 0
+            &&
+            <>
+               <View style={[Styles.mb15, Styles.mt10]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
+                     Tanggal & Tugas
+                  </Text>
+                  <View style={[Styles.wrapPaper]}>
+                     {
+                        taskCreate.map((item: { status: number; title: string; dateStart: string; dateEnd: string; }, index: Key | null | undefined) => {
+                           return (
+                              <ItemSectionTanggalTugas
+                                 key={index}
+                                 title={item.title}
+                                 dateStart={item.dateStart}
+                                 dateEnd={item.dateEnd}
+                                 onPress={() => {
+                                    setSelect(index)
+                                    setModal(true)
+                                 }}
+                              />
+                           );
+                        })
+                     }
+
+                  </View>
+               </View>
+               <DrawerBottom
+                  animation="slide"
+                  isVisible={isModal}
+                  setVisible={setModal}
+                  title="Menu"
+               >
+                  <View style={Styles.rowItemsCenter}>
+                     <MenuItemRow
+                        icon={<Ionicons name="trash" color="black" size={25} />}
+                        title="Hapus Tugas"
+                        onPress={() => { handleDelete() }}
+                     />
+                  </View>
+               </DrawerBottom>
+            </>
+         }
+      </>
+   )
+}
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -287,4 +287,13 @@ export const apiDeleteProjectMember = async (data: { user: string, idUser: strin
 export const apiAddMemberProject = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
   const response = await api.post(`/mobile/project/${id}/member`, data)
   return response.data;
+};
+
+export const apiCreateProject = async (data: FormData) => {
+   const response = await api.post(`/mobile/project`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
+   return response.data;
 };
--- a/lib/taskCreate.ts
+++ b/lib/taskCreate.ts
@@ -7,8 +7,11 @@ const taskCreate = createSlice({
      setTaskCreate: (state, action) => {
         return action.payload;
      },
+      deleteTaskCreate: (state, action) => {
+         return state.filter((item: any, index: number) => index != action.payload);
+      },
   },
 });

-export const { setTaskCreate } = taskCreate.actions;
+export const { setTaskCreate, deleteTaskCreate } = taskCreate.actions;
 export default taskCreate.reducer;