upd: project

Deskripsi:
- on progress tambah project

No Issues

app/(application)/project/create.tsx

@@ -1,50 +1,173 @@
+import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
+import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
+import { setMemberChoose } from "@/lib/memberChoose";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateProject() {
-   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+   const { token, decryptToken } = useAuthSession();
+   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 [dataForm, setDataForm] = useState({
+      idGroup: "",
+      title: "",
+   });
+   const [error, setError] = useState({
+      group: false,
+      title: false,
+      task: false,
+   });
+   const taskCreate = useSelector((state: any) => state.taskCreate)
+
+   console.log('taskCreate', taskCreate)
+
+   function validationForm(cat: string, val: any, label?: string) {
+      if (cat == "group") {
+         setChooseGroup({ val, label: String(label) });
+         dispatch(setMemberChoose([]));
+         setDataForm({ ...dataForm, idGroup: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, group: true });
+         } else {
+            setError({ ...error, group: false });
+         }
+      } else if (cat == "title") {
+         setDataForm({ ...dataForm, title: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, title: true });
+         } else {
+            setError({ ...error, title: false });
+         }
+      }
+   }
+
+
+   function handleBack() {
+      dispatch(setMemberChoose([]))
+      router.back()
+   }
 
    return (
       <SafeAreaView>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerLeft: () => (
-               headerTitle: 'Tambah Kegiatan',
+                  <ButtonBackHeader
-               headerTitleAlign: 'center',
+                     onPress={() => {
-               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+                        handleBack()
-                  ToastAndroid.show('Berhasil menambah data', ToastAndroid.SHORT)
+                     }}
-                  router.push('/project?status=0')
+                  />
-               }} />
+               ),
+               headerTitle: "Tambah Kegiatan",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disableBtn}
+                     category="create"
+                     onPress={() => {
+                        ToastAndroid.show("Berhasil menambah data", ToastAndroid.SHORT);
+                        router.push("/project?status=0");
+                     }}
+                  />
+               ),
             }}
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
-               <SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
+               <SelectForm
-               <InputForm label="Kegiatan" type="default" placeholder="Nama Kegiatan" required />
+                  label="Lembaga Desa"
-               <ButtonSelect value="Tambah Tanggal & Tugas" />
+                  placeholder="Pilih Lembaga Desa"
-               <ButtonSelect value="Upload File" />
+                  value={chooseGroup.label}
-               <ButtonSelect value="Tambah Anggota" />
+                  required
-               {/* <ButtonForm
-                  text="SIMPAN"
                   onPress={() => {
-                     AlertKonfirmasi({
+                     setValChoose(chooseGroup.val);
-                        title: 'Konfirmasi',
+                     setValSelect("group");
-                        desc: 'Apakah anda yakin ingin menambahkan data?',
+                     setSelect(true);
-                        onPress: () => {
+                  }}
-                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+               />
-                           router.push('/project?status=0')
+               <InputForm
+                  label="Kegiatan"
+                  type="default"
+                  placeholder="Nama Kegiatan"
+                  required
+                  value={dataForm.title}
+                  error={error.title}
+                  errorText="Nama kegiatan tidak boleh kosong"
+                  onChange={(val) => { validationForm("title", val) }}
+               />
+               <ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => {
+                  router.push(`/project/create/task`)
+               }} />
+               <ButtonSelect value="Upload File" />
+               <ButtonSelect
+                  value="Pilih Anggota"
+                  onPress={() => {
+                     if (chooseGroup.val != "") {
+                        setSelect(true);
+                        setValSelect("member");
+                     } else {
+                        ToastAndroid.show(
+                           "Pilih Lembaga Desa terlebih dahulu",
+                           ToastAndroid.SHORT
+                        );
+                     }
+                  }}
+               />
+               {
+                  entitiesMember.length > 0 &&
+                  <View>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text>Anggota</Text>
+                        <Text>Total {entitiesMember.length} Anggota</Text>
+                     </View>
+
+                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                        {
+                           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" />
+                                    }
+                                    title={item.name}
+                                 />
+                              )
+                           })
                         }
-                     })
+                     </View>
-                  }} /> */}
+                  </View>
+               }
             </View>
          </ScrollView>
+
+         <ModalSelect
+            category={valSelect}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm(valSelect, value.val, value.label);
+            }}
+            title={valSelect == "group" ? "Lembaga Desa" : "Pilih Anggota"}
+            open={isSelect}
+            idParent={valSelect == "member" ? chooseGroup.val : ""}
+            valChoose={valChoose}
+         />
       </SafeAreaView>
-   )
+   );
 }

app/(application)/project/create/task.tsx

@@ -0,0 +1,153 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { setTaskCreate } from "@/lib/taskCreate";
+import dayjs from "dayjs";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   SafeAreaView,
+   ScrollView,
+   Text,
+   View
+} from "react-native";
+import DateTimePicker, {
+   DateType
+} from "react-native-ui-datepicker";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function CreateProjectAddTask() {
+   const dispatch = useDispatch()
+   const [disable, setDisable] = useState(true);
+   const [range, setRange] = useState<{
+      startDate: DateType;
+      endDate: DateType;
+   }>({ startDate: undefined, endDate: undefined });
+   const [error, setError] = useState({
+      startDate: false,
+      endDate: false,
+      title: false,
+   })
+   const [title, setTitle] = useState('');
+   const taskCreate = useSelector((state: any) => state.taskCreate)
+
+   const from = range.startDate
+      ? dayjs(range.startDate).format("DD-MM-YYYY")
+      : "";
+   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
+
+   function checkAll() {
+      if (from == "" || to == "" || title == "" || title == "null" || error.startDate || error.endDate || error.title) {
+         setDisable(true)
+      } else {
+         setDisable(false)
+      }
+   }
+
+   function onValidation(cat: string, val: string) {
+      if (cat == "title") {
+         setTitle(val)
+         if (val == "" || val == "null") {
+            setError(error => ({ ...error, title: true }))
+         } else {
+            setError(error => ({ ...error, title: false }))
+         }
+      }
+   }
+
+   useEffect(() => {
+      checkAll()
+   }, [from, to, title, error])
+
+   async function handleCreate() {
+      try {
+         dispatch(setTaskCreate([...taskCreate, {
+            name: title,
+            dateStart: from,
+            dateEnd: to,
+         }]))
+         router.back();
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Tugas",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disable}
+                     category="create"
+                     onPress={() => { handleCreate() }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <DateTimePicker
+                     mode="range"
+                     startDate={range.startDate}
+                     endDate={range.endDate}
+                     onChange={(param) => setRange(param)}
+                     styles={{
+                        selected: Styles.selectedDate,
+                        selected_label: Styles.cWhite,
+                        range_fill: Styles.selectRangeDate,
+                     }}
+                  />
+               </View>
+               <View style={[Styles.mv10]}>
+                  <View style={[Styles.rowSpaceBetween]}>
+                     <View style={[{ width: "48%" }]}>
+                        <Text style={[Styles.mb05]}>
+                           Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                        </Text>
+                        <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <Text style={{ textAlign: "center" }}>{from}</Text>
+                        </View>
+                     </View>
+                     <View style={[{ width: "48%" }]}>
+                        <Text style={[Styles.mb05]}>
+                           Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                        </Text>
+                        <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <Text style={{ textAlign: "center" }}>{to}</Text>
+                        </View>
+                     </View>
+                  </View>
+                  {
+                     (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                  }
+               </View>
+               <InputForm
+                  label="Judul Tugas"
+                  type="default"
+                  placeholder="Judul Tugas"
+                  required
+                  bg="white"
+                  value={title}
+                  error={error.title}
+                  errorText="Judul tidak boleh kosong"
+                  onChange={(e) => {
+                     onValidation("title", e)
+                  }}
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

lib/store.ts

@@ -9,6 +9,7 @@ import memberChoose from './memberChoose';
 import memberUpdate from './memberSlice';
 import positionUpdate from './positionSlice';
 import projectUpdate from './projectUpdate';
+import taskCreate from './taskCreate';
 import userReducer from './userSlice';
 
 const store = configureStore({
@@ -24,6 +25,7 @@ const store = configureStore({
       memberChoose: memberChoose,
       announcementUpdate: announcementUpdate,
       projectUpdate: projectUpdate,
+      taskCreate: taskCreate,
    }
 });
 

lib/taskCreate.ts

@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const taskCreate = createSlice({
+   name: 'taskCreate',
+   initialState: [],
+   reducers: {
+      setTaskCreate: (state, action) => {
+         return action.payload;
+      },
+   },
+});
+
+export const { setTaskCreate } = taskCreate.actions;
+export default taskCreate.reducer;