upd: project

Deskripsi:
- delete project yg telah dibatalkan
- akses fitur by user role
- tampilan text yg panjang

No Issues

app/(application)/project/[id]/index.tsx

@@ -35,6 +35,8 @@ export default function DetailProject() {
    const [progress, setProgress] = useState(0)
    const [loading, setLoading] = useState(true)
    const update = useSelector((state: any) => state.projectUpdate)
+   const [isMember, setIsMember] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
 
    async function handleLoad() {
       try {
@@ -51,10 +53,25 @@ export default function DetailProject() {
       }
    }
 
+   async function checkMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetProjectOne({ user: hasil, cat: 'member', id: id })
+         const cekMember = response.data.some((i: any) => i.idUser == hasil)
+         setIsMember(cekMember)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
    useEffect(() => {
       handleLoad()
    }, [update.data, update.progress])
 
+   useEffect(() => {
+      checkMember()
+   }, [])
+
 
    return (
       <SafeAreaView>
@@ -63,7 +80,7 @@ export default function DetailProject() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: loading ? '' : data?.title,
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightProjectDetail id={id} />,
+               headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMember ? null : <HeaderRightProjectDetail id={id} status={data?.status} />,
             }}
          />
          <ScrollView>
@@ -72,9 +89,9 @@ export default function DetailProject() {
                   data?.reason != null && data?.reason != "" && <SectionCancel text={data?.reason} />
                }
                <SectionProgress text={`Kemajuan Kegiatan ${progress}%`} progress={progress} />
-               <SectionTanggalTugasProject />
+               <SectionTanggalTugasProject status={data?.status} member={isMember} />
-               <SectionFile />
+               <SectionFile status={data?.status} member={isMember} />
-               <SectionMember />
+               <SectionMember status={data?.status} />
             </View>
          </ScrollView>
       </SafeAreaView>

components/borderBottomItem.tsx

@@ -30,7 +30,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
             {icon}
             <View style={[Styles.rowSpaceBetween, width ? { width: lebar } : { width: '88%' }]}>
                <View style={[Styles.ml10]}>
-                  <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold]}>{title}</Text>
+                  <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode='tail'>{title}</Text>
                   {
                      subtitle &&
                         typeof subtitle == "string"

components/itemSectionTanggalTugas.tsx

@@ -35,7 +35,9 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
          <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10]}>
             <View style={[Styles.rowItemsCenter]}>
                <MaterialCommunityIcons name="file-table-outline" size={25} color="black" style={[Styles.mr10]} />
-               <Text style={[Styles.textDefault]}>{title}</Text>
+               <View style={[Styles.w90]}>
+                  <Text style={[Styles.textDefault]}>{title}</Text>
+               </View>
             </View>
          </View>
          <View style={[Styles.rowSpaceBetween, Styles.mb15]}>

components/menuItemRow.tsx

@@ -7,11 +7,12 @@ type Props = {
    title: string
    column?: 'many' | 'three'
    color?: string
+   disabled?: boolean
 }
 
-export default function MenuItemRow({ onPress, icon, title, column, color }: Props) {
+export default function MenuItemRow({ onPress, icon, title, column, color,  disabled }: Props) {
    return (
-      <Pressable onPress={() => { onPress() }} style={[column == 'many' ? Styles.btnMenuRowMany : Styles.btnMenuRow]}>
+      <Pressable onPress={() => { onPress() }} style={[column == 'many' ? Styles.btnMenuRowMany : Styles.btnMenuRow, disabled && { opacity: 0.5 }]}>
          <View style={{ alignItems: 'center' }}>
             {icon}
             <Text style={[Styles.mt05, { textAlign: 'center' }, color && { color: color }]}>{title}</Text>

components/paperGridContent.tsx

@@ -15,7 +15,7 @@ export default function PaperGridContent({ content, children, title, headerColor
       <Pressable onPress={onPress}>
          <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
             <View style={[Styles.headerPaperGrid]}>
-               <Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
+               <Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, {textAlign: 'center' }]}>{title}</Text>
             </View>
             <View style={[contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid]}>
                {children}

components/project/headerProjectDetail.tsx

@@ -1,18 +1,46 @@
 import Styles from "@/constants/Styles"
-import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+import { apiDeleteProject } from "@/lib/api"
+import { setUpdateProject } from "@/lib/projectUpdate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { AntDesign, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
-import { View } from "react-native"
+import { ToastAndroid, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+import AlertKonfirmasi from "../alertKonfirmasi"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 type Props = {
    id: string | string[]
+   status: number | undefined
 }
 
-export default function HeaderRightProjectDetail({ id }: Props) {
+export default function HeaderRightProjectDetail({ id, status }: Props) {
+   const entityUser = useSelector((state: any) => state.user)
+   const { token, decryptToken } = useAuthSession()
    const [isVisible, setVisible] = useState(false)
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.projectUpdate)
+
+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiDeleteProject({ user: hasil }, String(id))
+         if (response.success) {
+            dispatch(setUpdateProject({ ...update, data: !update.data }))
+            ToastAndroid.show('Berhasil menghapus kegiatan', ToastAndroid.SHORT)
+            router.back()
+         } else {
+            ToastAndroid.show('Gagal menghapus kegiatan', ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setVisible(false)
+      }
+   }
 
    return (
       <>
@@ -23,47 +51,75 @@ export default function HeaderRightProjectDetail({ id }: Props) {
                   icon={<AntDesign name="pluscircle" color="black" size={25} />}
                   title="Tambah Tugas"
                   onPress={() => {
+                     if (status == 3) return
                      setVisible(false)
                      router.push(`/project/${id}/add-task`)
                   }}
+                  disabled={status == 3}
                />
                <MenuItemRow
                   icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
                   title="Tambah File"
                   onPress={() => {
+                     if (status == 3) return
                      setVisible(false)
                      router.push(`/project/${id}/add-file`)
                   }}
+                  disabled={status == 3}
                />
-
+               {
-               <MenuItemRow
+                  entityUser.role != "user" && entityUser.role != "coadmin" &&
-                  icon={<MaterialIcons name="groups" color="black" size={25} />}
+                  <MenuItemRow
-                  title="Tambah Anggota"
+                     icon={<MaterialIcons name="groups" color="black" size={25} />}
-                  onPress={() => {
+                     title="Tambah Anggota"
-                     setVisible(false)
+                     onPress={() => {
-                     router.push(`/project/${id}/add-member`)
+                        if (status == 3) return
-                  }}
+                        setVisible(false)
-               />
+                        router.push(`/project/${id}/add-member`)
-
+                     }}
-            </View>
+                     disabled={status == 3}
-            <View style={[Styles.rowItemsCenter, Styles.mt15]}>
+                  />
-               <MenuItemRow
+               }
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
-                  title="Edit"
-                  onPress={() => {
-                     setVisible(false)
-                     router.push(`/project/${id}/edit`)
-                  }}
-               />
-               <MenuItemRow
-                  icon={<MaterialIcons name="close" color="black" size={25} />}
-                  title="Batal"
-                  onPress={() => {
-                     setVisible(false)
-                     router.push(`/project/${id}/cancel`)
-                  }}
-               />
             </View>
+            {
+               entityUser.role != "user" && entityUser.role != "coadmin" &&
+               <View style={[Styles.rowItemsCenter, Styles.mt15]}>
+                  <MenuItemRow
+                     icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                     title="Edit"
+                     onPress={() => {
+                        if (status == 3) return
+                        setVisible(false)
+                        router.push(`/project/${id}/edit`)
+                     }}
+                     disabled={status == 3}
+                  />
+                  {
+                     status == 3
+                        ?
+                        <MenuItemRow
+                           icon={<Ionicons name="trash" color="black" size={25} />}
+                           title="Hapus"
+                           onPress={() => {
+                              AlertKonfirmasi({
+                                 title: 'Konfirmasi',
+                                 desc: 'Apakah Anda yakin ingin menghapus kegiatan ini? Kegiatan yang dihapus tidak dapat dikembalikan',
+                                 onPress: () => { handleDelete() }
+                              })
+                           }}
+                        />
+                        :
+                        <MenuItemRow
+                           icon={<MaterialIcons name="close" color="black" size={25} />}
+                           title="Batal"
+                           onPress={() => {
+                              setVisible(false)
+                              router.push(`/project/${id}/cancel`)
+                           }}
+                        />
+                  }
+               </View>
+            }
          </DrawerBottom>
       </>
    )

components/project/sectionFile.tsx

@@ -5,6 +5,7 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Text, ToastAndroid, View } from "react-native";
+import { useSelector } from "react-redux";
 import AlertKonfirmasi from "../alertKonfirmasi";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
@@ -17,7 +18,8 @@ type Props = {
    idStorage: string
 }
 
-export default function SectionFile() {
+export default function SectionFile({ status, member }: { status: number | undefined, member: boolean }) {
+   const entityUser = useSelector((state: any) => state.user)
    const [isModal, setModal] = useState(false)
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
@@ -82,22 +84,27 @@ export default function SectionFile() {
                      setModal(false)
                   }}
                />
+               {
+                  !member && (entityUser.role == "user" || entityUser.role == "coadmin") ? <></>
+                     :
+                     <MenuItemRow
+                        icon={<Ionicons name="trash" color="black" size={25} />}
+                        title="Hapus"
+                        disabled={status == 3}
+                        onPress={() => {
+                           if (status == 3) return
+                           AlertKonfirmasi({
+                              title: 'Konfirmasi',
+                              desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
+                              onPress: () => {
+                                 setModal(false)
+                                 ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
+                              }
+                           })
 
-               <MenuItemRow
+                        }}
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                     />
-                  title="Hapus"
+               }
-                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
-                        onPress: () => {
-                           setModal(false)
-                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
-                        }
-                     })
-
-                  }}
-               />
             </View>
          </DrawerBottom>
       </>

components/project/sectionMember.tsx

@@ -22,8 +22,9 @@ type Props = {
    position: string;
 };
 
-export default function SectionMember() {
+export default function SectionMember({ status }: { status: number | undefined }) {
    const dispatch = useDispatch()
+   const entityUser = useSelector((state: any) => state.user)
    const update = useSelector((state: any) => state.projectUpdate)
    const [isModal, setModal] = useState(false);
    const { token, decryptToken } = useAuthSession();
@@ -89,9 +90,8 @@ export default function SectionMember() {
                               borderType="bottom"
                               icon={<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} />}
                               title={item.name}
-                              subtitle={item.position}
-                              rightTopInfo="Anggota"
                               onPress={() => {
+                                 if (status == 3) return
                                  setMemberChoose({
                                     id: item.idUser,
                                     name: item.name,
@@ -128,24 +128,26 @@ export default function SectionMember() {
                      router.push(`/member/${memberChoose.id}`);
                   }}
                />
-
+               {
-               <MenuItemRow
+                  entityUser.role != "user" && entityUser.role != "coadmin" &&
-                  icon={
+                  <MenuItemRow
-                     <MaterialCommunityIcons
+                     icon={
-                        name="account-remove"
+                        <MaterialCommunityIcons
-                        color="black"
+                           name="account-remove"
-                        size={25}
+                           color="black"
-                     />
+                           size={25}
-                  }
+                        />
-                  title="Keluarkan"
+                     }
-                  onPress={() => {
+                     title="Keluarkan"
-                     AlertKonfirmasi({
+                     onPress={() => {
-                        title: "Konfirmasi",
+                        AlertKonfirmasi({
-                        desc: "Apakah Anda yakin ingin mengeluarkan anggota?",
+                           title: "Konfirmasi",
-                        onPress: () => { handleDeleteMember() },
+                           desc: "Apakah Anda yakin ingin mengeluarkan anggota?",
-                     });
+                           onPress: () => { handleDeleteMember() },
-                  }}
+                        });
-               />
+                     }}
+                  />
+               }
             </View>
          </DrawerBottom>
       </>

components/project/sectionTanggalTugas.tsx

@@ -23,7 +23,8 @@ type Props = {
    createdAt: string;
 };
 
-export default function SectionTanggalTugasProject() {
+export default function SectionTanggalTugasProject({ status, member }: { status: number | undefined, member: boolean }) {
+   const entityUser = useSelector((state: any) => state.user)
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
    const [isModal, setModal] = useState(false);
@@ -110,6 +111,7 @@ export default function SectionTanggalTugasProject() {
                               dateStart={item.dateStart}
                               dateEnd={item.dateEnd}
                               onPress={() => {
+                                 if (status == 3 || (!member && (entityUser.role == "user" || entityUser.role == "coadmin"))) return
                                  setTugas({
                                     id: item.id,
                                     status: item.status

constants/Styles.ts

@@ -161,6 +161,9 @@ const Styles = StyleSheet.create({
    w100: {
       width: '100%'
    },
+   w95: {
+      width: '95%'
+   },
    w90: {
       width: '90%'
    },
@@ -300,6 +303,7 @@ const Styles = StyleSheet.create({
    },
    headerPaperGrid: {
       paddingVertical: 25,
+      paddingHorizontal: 20,
       alignItems: 'center',
       borderTopStartRadius: 15,
       borderTopEndRadius: 15

lib/api.ts

@@ -32,13 +32,11 @@ export const apiGetBanner = async ({ user }: { user: string }) => {
 
 
 export const apiCreateBanner = async (data: FormData) => {
-   console.log('jalan', data)
    const response = await api.post('mobile/banner', data, {
       headers: {
          'Content-Type': 'multipart/form-data',
       },
    })
-   console.log('api',response.data)
    return response.data;
 };
 
@@ -294,4 +292,9 @@ export const apiCreateProject = async (data: FormData) => {
       },
    })
    return response.data;
+};
+
+export const apiDeleteProject = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/project/${id}/lainnya`, { data })
+   return response.data;
 };