upd: req client

Deskripsi: - tampilan tambah file saat tambah data pengumuman - tampilan list file pada halaman detail pengumuman - tampilan tambah file saat edit data pengumuman No Issues
2026-01-12 15:52:48 +08:00
parent 42f245f37c
commit ca3d0d9d19
3 changed files with 177 additions and 5 deletions
--- a/app/(application)/announcement/[id].tsx
+++ b/app/(application)/announcement/[id].tsx
@@ -1,14 +1,20 @@
 import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
+import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import Skeleton from "@/components/skeleton";
 import Text from '@/components/Text';
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo, MaterialIcons } from "@expo/vector-icons";
+import { Entypo, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as FileSystem from 'expo-file-system';
+import { startActivityAsync } from 'expo-intent-launcher';
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import * as Sharing from 'expo-sharing';
 import React, { useEffect, useState } from "react";
-import { Dimensions, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { Alert, Dimensions, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import * as mime from 'react-native-mime-types';
 import RenderHTML from 'react-native-render-html';
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
@@ -24,12 +30,15 @@ export default function DetailAnnouncement() {
   const { token, decryptToken } = useAuthSession()
   const [data, setData] = useState<Props>({ id: '', title: '', desc: '' })
   const [dataMember, setDataMember] = useState<any>({})
+   const [dataFile, setDataFile] = useState<{ idStorage: string; name: string; extension: string }[]>([])
   const update = useSelector((state: any) => state.announcementUpdate)
   const entityUser = useSelector((state: any) => state.user)
   const contentWidth = Dimensions.get('window').width
   const [loading, setLoading] = useState(true)
   const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
   const [refreshing, setRefreshing] = useState(false)
+   const [loadingOpen, setLoadingOpen] = useState(false)
+

   async function handleLoad(loading: boolean) {
      try {
@@ -70,6 +79,37 @@ export default function DetailAnnouncement() {
      setRefreshing(false)
   };

+   const openFile = (item: { idStorage: string; name: string; extension: string }) => {
+      if (Platform.OS == 'android') setLoadingOpen(true)
+      let remoteUrl = ConstEnv.url_storage + '/files/' + item.idStorage;
+      const fileName = item.name + '.' + item.extension;
+      let localPath = `${FileSystem.documentDirectory}/${fileName}`;
+      const mimeType = mime.lookup(fileName)
+
+      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
+         const contentURL = await FileSystem.getContentUriAsync(uri);
+         setLoadingOpen(false)
+         try {
+            if (Platform.OS == 'android') {
+               await startActivityAsync(
+                  'android.intent.action.VIEW',
+                  {
+                     data: contentURL,
+                     flags: 1,
+                     type: mimeType as string,
+                  }
+               );
+            } else if (Platform.OS == 'ios') {
+               Sharing.shareAsync(localPath);
+            }
+         } catch (error) {
+            Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
+         } finally {
+            if (Platform.OS == 'android') setLoadingOpen(false)
+         }
+      });
+   };
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -127,7 +167,26 @@ export default function DetailAnnouncement() {
                  }

               </View>
-               <View style={[Styles.wrapPaper, Styles.mv15]}>
+               {
+                  dataFile.length > 0 && (
+                     <View style={[Styles.wrapPaper, Styles.mt10]}>
+                        <View style={[Styles.mb05]}>
+                           <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        </View>
+                        {dataFile.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType="bottom"
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { openFile({ idStorage: item.idStorage, name: item.name, extension: item.extension }) }}
+                           />
+                        ))}
+                     </View>
+                  )
+               }
+               <View style={[Styles.wrapPaper, Styles.mt10]}>
                  {
                     loading ?
                        arrSkeleton.map((item, index) => {
--- a/app/(application)/announcement/create.tsx
+++ b/app/(application)/announcement/create.tsx
@@ -1,14 +1,18 @@
+import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiCreateAnnouncement } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo } from "@expo/vector-icons";
+import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
@@ -23,6 +27,9 @@ export default function CreateAnnouncement() {
   const [modalDivisi, setModalDivisi] = useState(false);
   const [divisionMember, setDivisionMember] = useState<any>([])
   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [dataForm, setDataForm] = useState({
      title: "",
      desc: "",
@@ -84,6 +91,25 @@ export default function CreateAnnouncement() {
      }
   }

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModalFile(false)
+   }
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -134,6 +160,27 @@ export default function CreateAnnouncement() {
                  onChange={(val) => validationForm("desc", val)}
                  multiline
               />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  fileForm.length > 0
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={fileForm.length > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
+
               <ButtonSelect
                  value="Pilih divisi penerima pengumuman"
                  onPress={() => {
@@ -178,6 +225,16 @@ export default function CreateAnnouncement() {
               setModalDivisi(false)
            }}
         />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
      </SafeAreaView>
   );
 }
--- a/app/(application)/announcement/edit/[id].tsx
+++ b/app/(application)/announcement/edit/[id].tsx
@@ -1,14 +1,18 @@
+import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from '@/components/Text';
 import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiEditAnnouncement, apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo } from "@expo/vector-icons";
+import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -33,6 +37,9 @@ export default function EditAnnouncement() {
   const [modalDivisi, setModalDivisi] = useState(false);
   const [disableBtn, setDisableBtn] = useState(true);
   const [dataMember, setDataMember] = useState<any>([]);
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+   const [isModalFile, setModalFile] = useState(false)
   const [loading, setLoading] = useState(false)
   const [dataForm, setDataForm] = useState({
      title: "",
@@ -127,6 +134,25 @@ export default function EditAnnouncement() {
      }
   }

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModalFile(false)
+   }
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -179,6 +205,26 @@ export default function EditAnnouncement() {
                  value={dataForm.desc}
                  multiline
               />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  fileForm.length > 0
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={fileForm.length > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
               <ButtonSelect
                  value="Pilih divisi penerima pengumuman"
                  onPress={() => {
@@ -223,6 +269,16 @@ export default function EditAnnouncement() {
            }}
            value={dataMember}
         />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
      </SafeAreaView>
   );
 }