upd: fitur tambahan project

Deskripsi:
- tampilan list detail waktu task project
- integrasi api mobile list detail
- tampilan tambah detail task project > blm selesai

No Issues

app/(application)/project/[id]/add-task.tsx

@@ -6,14 +6,16 @@ import Styles from "@/constants/Styles";
 import { apiCreateProjectTask } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
-import 'intl';
+import { useHeaderHeight } from '@react-navigation/elements';
-import 'intl/locale-data/jsonp/id';
 import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
+   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -23,7 +25,6 @@ import DateTimePicker, {
    DateType
 } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
-import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function ProjectAddTask() {
    const headerHeight = useHeaderHeight();
@@ -162,6 +163,10 @@ export default function ProjectAddTask() {
                      {
                         (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
+                     {/* TODO */}
+                     <Pressable style={[Styles.btnTab, Styles.btnLainnya]}>
+                        <Text style={[Styles.cWhite]}>Detail</Text>
+                     </Pressable>
                   </View>
                   <InputForm
                      label="Judul Tugas"

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

@@ -4,6 +4,7 @@ import { InputForm } from "@/components/inputForm";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { setTaskCreate } from "@/lib/taskCreate";
+import { useHeaderHeight } from '@react-navigation/elements';
 import dayjs from "dayjs";
 import { router, Stack } from "expo-router";
 import 'intl';
@@ -20,7 +21,6 @@ import DateTimePicker, {
    DateType
 } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
-import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function CreateProjectAddTask() {
    const headerHeight = useHeaderHeight();

components/modalFloat.tsx

@@ -8,7 +8,7 @@ type Props = {
    setVisible: (value: boolean) => void
    title?: string
    children: React.ReactNode
-   onSubmit: () => void
+   onSubmit?: () => void
    disableSubmit?: boolean
    buttonHide?: boolean
 }

components/project/modalListDetailTugasProject.tsx

@@ -0,0 +1,116 @@
+import Styles from "@/constants/Styles";
+import { apiGetProjectTask } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useEffect, useState } from "react";
+import { Dimensions, View, VirtualizedList } from "react-native";
+import { InputDate } from "../inputDate";
+import ModalFloat from "../modalFloat";
+import Skeleton from "../skeleton";
+import Text from "../Text";
+
+interface Props {
+   id: string;
+   date: string;
+   timeStart: string;
+   timeEnd: string;
+}
+
+export default function ModalListDetailTugasProject({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
+   const [data, setData] = useState([])
+   const [loading, setLoading] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
+   const tinggiScreen = Dimensions.get("window").height;
+   const tinggiFix = tinggiScreen * 70 / 100;
+
+
+
+   async function getData() {
+      try {
+         setLoading(true)
+         const hasil = await decryptToken(String(token?.current));
+         const res = await apiGetProjectTask({ user: hasil, id: idTask, cat: "detailTask" })
+         setData(res.data)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      if (isVisible) {
+         getData()
+      }
+   }, [isVisible, idTask])
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      date: data[index].date,
+      timeStart: data[index].timeStart,
+      timeEnd: data[index].timeEnd,
+   })
+
+   return (
+      <ModalFloat
+         title="Detail Tanggal dan Waktu Tugas"
+         isVisible={isVisible}
+         setVisible={setVisible}
+         buttonHide
+      >
+         <View style={[{ height: tinggiFix }]} >
+            {
+               loading ?
+                  arrSkeleton.map((item: any, i: number) => {
+                     return (
+                        <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
+                     )
+                  })
+                  :
+                  data.length > 0 ?
+                     (
+                        <VirtualizedList
+                           data={data}
+                           getItemCount={() => data.length}
+                           getItem={getItem}
+                           renderItem={({ item, index }: { item: Props, index: number }) => {
+                              return (
+                                 <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
+                                    <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
+                                    <View style={[Styles.rowSpaceBetween]}>
+                                       <View style={[{ width: "48%" }]}>
+                                          <InputDate
+                                             mode="time"
+                                             disable
+                                             onChange={(val) => { }}
+                                             value={item.timeStart}
+                                             label="Waktu Awal"
+                                             placeholder="--:--"
+                                          />
+                                       </View>
+                                       <View style={[{ width: "48%" }]}>
+                                          <InputDate
+                                             onChange={(val) => { }}
+                                             mode="time"
+                                             value={item.timeEnd}
+                                             label="Waktu Akhir"
+                                             placeholder="--:--"
+                                             disable
+                                          />
+                                       </View>
+                                    </View>
+                                 </View>
+                              )
+                           }}
+                           keyExtractor={(item, index) => String(index)}
+                           showsVerticalScrollIndicator={false}
+                        />
+                     )
+                     :
+                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]} >Tidak ada data</Text>
+            }
+         </View>
+
+      </ModalFloat>
+   )
+}

components/project/sectionTanggalTugas.tsx

@@ -15,6 +15,7 @@ import MenuItemRow from "../menuItemRow";
 import ModalSelect from "../modalSelect";
 import SkeletonTask from "../skeletonTask";
 import Text from "../Text";
+import ModalListDetailTugasProject from "./modalListDetailTugasProject";
 
 type Props = {
    id: string;
@@ -33,6 +34,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
    const [isModal, setModal] = useState(false);
    const [isSelect, setSelect] = useState(false);
    const { token, decryptToken } = useAuthSession();
+   const [modalDetail, setModalDetail] = useState(false)
    const { id } = useLocalSearchParams<{ id: string }>();
    const [data, setData] = useState<Props[]>([]);
    const [loading, setLoading] = useState(true)
@@ -188,6 +190,24 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
                   }}
                />
 
+               <MenuItemRow
+                  icon={
+                     <MaterialCommunityIcons
+                        name="clock-time-three-outline"
+                        color="black"
+                        size={25}
+                     />
+                  }
+                  title="Detail Waktu"
+                  onPress={() => {
+                     setModal(false);
+                     setTimeout(() => {
+                        setModalDetail(true)
+                     }, 600)
+                  }}
+               />
+            </View>
+            <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                <MenuItemRow
                   icon={<Ionicons name="trash" color="black" size={25} />}
                   title="Hapus Tugas"
@@ -213,6 +233,12 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
             open={isSelect}
             valChoose={String(tugas.status)}
          />
+
+         <ModalListDetailTugasProject
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            idTask={tugas.id}
+         />
       </>
    );
 }

constants/Styles.ts

@@ -269,6 +269,12 @@ const Styles = StyleSheet.create({
       flexDirection: 'row',
       justifyContent: 'center'
    },
+   btnLainnya: {
+      alignSelf: 'flex-start',
+      backgroundColor: '#19345E',
+      paddingVertical: 5,
+      marginVertical: 5
+   },
    btnMenuRow: {
       width: '33%',
       alignItems: 'center'

lib/api.ts

@@ -301,8 +301,8 @@ export const apiDeleteProjectTask = async (data: { user: string, idProject: stri
    return response.data
 };
 
-export const apiGetProjectTask = async ({ user, id }: { user: string, id: string }) => {
+export const apiGetProjectTask = async ({ user, id, cat }: { user: string, id: string, cat?: string }) => {
-   const response = await api.get(`mobile/project/detail/${id}?user=${user}`);
+   const response = await api.get(`mobile/project/detail/${id}?user=${user}${cat ? `&cat=${cat}` : ""}`);
    return response.data;
 };