upd: modal loading saat open file

Deskripsi:
- dokumen divisi
- banner
- project
- kegiatan divisi

No Issues
This commit is contained in:
2025-07-21 18:07:45 +08:00
parent a7655b1cc0
commit 88dd6165f2
4 changed files with 29 additions and 5 deletions

View File

@@ -4,6 +4,7 @@ import BorderBottomItem from "@/components/borderBottomItem"
import ButtonBackHeader from "@/components/buttonBackHeader" import ButtonBackHeader from "@/components/buttonBackHeader"
import DrawerBottom from "@/components/drawerBottom" import DrawerBottom from "@/components/drawerBottom"
import MenuItemRow from "@/components/menuItemRow" import MenuItemRow from "@/components/menuItemRow"
import ModalLoading from "@/components/modalLoading"
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { apiDeleteBanner, apiGetBanner } from "@/lib/api" import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
import { setEntities } from "@/lib/bannerSlice" import { setEntities } from "@/lib/bannerSlice"
@@ -34,6 +35,7 @@ export default function BannerList() {
const [selectFile, setSelectFile] = useState<Props | null>(null) const [selectFile, setSelectFile] = useState<Props | null>(null)
const dispatch = useDispatch() const dispatch = useDispatch()
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
const [loadingOpen, setLoadingOpen] = useState(false)
const handleDeleteEntity = async () => { const handleDeleteEntity = async () => {
try { try {
@@ -66,6 +68,8 @@ export default function BannerList() {
}; };
const openFile = () => { const openFile = () => {
setModal(false)
setLoadingOpen(true)
let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.image; let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.image;
const fileName = selectFile?.name + '.' + selectFile?.extension; const fileName = selectFile?.name + '.' + selectFile?.extension;
let localPath = `${FileSystem.documentDirectory}/${fileName}`; let localPath = `${FileSystem.documentDirectory}/${fileName}`;
@@ -93,6 +97,8 @@ export default function BannerList() {
} }
} catch (error) { } catch (error) {
Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini'); Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
} finally {
setLoadingOpen(false)
} }
}); });
}; };
@@ -108,7 +114,7 @@ export default function BannerList() {
headerRight: () => <HeaderRightBannerList /> headerRight: () => <HeaderRightBannerList />
}} }}
/> />
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
<ScrollView <ScrollView
refreshControl={ refreshControl={
<RefreshControl <RefreshControl

View File

@@ -8,6 +8,7 @@ import DrawerBottom from "@/components/drawerBottom";
import { InputForm } from "@/components/inputForm"; import { InputForm } from "@/components/inputForm";
import MenuItemRow from "@/components/menuItemRow"; import MenuItemRow from "@/components/menuItemRow";
import ModalFloat from "@/components/modalFloat"; import ModalFloat from "@/components/modalFloat";
import ModalLoading from "@/components/modalLoading";
import ModalSelectMultiple from "@/components/modalSelectMultiple"; import ModalSelectMultiple from "@/components/modalSelectMultiple";
import Skeleton from "@/components/skeleton"; import Skeleton from "@/components/skeleton";
import { ColorsStatus } from "@/constants/ColorsStatus"; import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -81,6 +82,7 @@ export default function DocumentDivision() {
const arrSkeleton = Array.from({ length: 3 }) const arrSkeleton = Array.from({ length: 3 })
const update = useSelector((state: any) => state.dokumenUpdate) const update = useSelector((state: any) => state.dokumenUpdate)
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
const [loadingOpen, setLoadingOpen] = useState(false)
const [bodyRename, setBodyRename] = useState({ const [bodyRename, setBodyRename] = useState({
id: "", id: "",
name: "", name: "",
@@ -268,6 +270,7 @@ export default function DocumentDivision() {
const openFile = (item: Props) => { const openFile = (item: Props) => {
setLoadingOpen(true)
let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + item.idStorage; let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + item.idStorage;
const fileName = item.name + '.' + item.extension; const fileName = item.name + '.' + item.extension;
let localPath = `${FileSystem.documentDirectory}/${fileName}`; let localPath = `${FileSystem.documentDirectory}/${fileName}`;
@@ -276,7 +279,6 @@ export default function DocumentDivision() {
FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => { FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
const contentURL = await FileSystem.getContentUriAsync(uri); const contentURL = await FileSystem.getContentUriAsync(uri);
try { try {
if (Platform.OS == 'android') { if (Platform.OS == 'android') {
// open with android intent // open with android intent
await startActivityAsync( await startActivityAsync(
@@ -295,6 +297,8 @@ export default function DocumentDivision() {
} }
} catch (error) { } catch (error) {
Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini'); Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
} finally {
setLoadingOpen(false)
} }
}); });
}; };
@@ -345,6 +349,7 @@ export default function DocumentDivision() {
), ),
}} }}
/> />
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
<ScrollView <ScrollView
style={{ height: "100%" }} style={{ height: "100%" }}
refreshControl={ refreshControl={

View File

@@ -15,6 +15,7 @@ import AlertKonfirmasi from "../alertKonfirmasi";
import BorderBottomItem from "../borderBottomItem"; import BorderBottomItem from "../borderBottomItem";
import DrawerBottom from "../drawerBottom"; import DrawerBottom from "../drawerBottom";
import MenuItemRow from "../menuItemRow"; import MenuItemRow from "../menuItemRow";
import ModalLoading from "../modalLoading";
import Skeleton from "../skeleton"; import Skeleton from "../skeleton";
@@ -36,6 +37,7 @@ export default function SectionFile({ status, member }: { status: number | undef
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 }) const arrSkeleton = Array.from({ length: 3 })
const [selectFile, setSelectFile] = useState<Props | null>(null) const [selectFile, setSelectFile] = useState<Props | null>(null)
const [loadingOpen, setLoadingOpen] = useState(false)
async function handleLoad(loading: boolean) { async function handleLoad(loading: boolean) {
try { try {
@@ -89,6 +91,8 @@ export default function SectionFile({ status, member }: { status: number | undef
const openFile = () => { const openFile = () => {
setModal(false)
setLoadingOpen(true)
let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.idStorage; let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.idStorage;
const fileName = selectFile?.name + '.' + selectFile?.extension; const fileName = selectFile?.name + '.' + selectFile?.extension;
let localPath = `${FileSystem.documentDirectory}/${fileName}`; let localPath = `${FileSystem.documentDirectory}/${fileName}`;
@@ -116,6 +120,8 @@ export default function SectionFile({ status, member }: { status: number | undef
} }
} catch (error) { } catch (error) {
Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini'); Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
} finally {
setLoadingOpen(false)
} }
}); });
}; };
@@ -124,6 +130,7 @@ export default function SectionFile({ status, member }: { status: number | undef
return ( return (
<> <>
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper]}>

View File

@@ -15,6 +15,7 @@ import AlertKonfirmasi from "../alertKonfirmasi";
import BorderBottomItem from "../borderBottomItem"; import BorderBottomItem from "../borderBottomItem";
import DrawerBottom from "../drawerBottom"; import DrawerBottom from "../drawerBottom";
import MenuItemRow from "../menuItemRow"; import MenuItemRow from "../menuItemRow";
import ModalLoading from "../modalLoading";
import Skeleton from "../skeleton"; import Skeleton from "../skeleton";
type Props = { type Props = {
@@ -27,13 +28,14 @@ type Props = {
export default function SectionFileTask() { export default function SectionFileTask() {
const [isModal, setModal] = useState(false) const [isModal, setModal] = useState(false)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { detail } = useLocalSearchParams<{ detail: string }>(); const { detail } = useLocalSearchParams<{ detail: string }>()
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
const update = useSelector((state: any) => state.taskUpdate) const update = useSelector((state: any) => state.taskUpdate)
const dispatch = useDispatch() const dispatch = useDispatch()
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 }) const arrSkeleton = Array.from({ length: 5 })
const [selectFile, setSelectFile] = useState<Props | null>(null) const [selectFile, setSelectFile] = useState<Props | null>(null)
const [loadingOpen, setLoadingOpen] = useState(false)
async function handleLoad(loading: boolean) { async function handleLoad(loading: boolean) {
try { try {
@@ -57,6 +59,8 @@ export default function SectionFileTask() {
}, []) }, [])
const openFile = () => { const openFile = () => {
setModal(false)
setLoadingOpen(true)
let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.idStorage; let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.idStorage;
const fileName = selectFile?.name + '.' + selectFile?.extension; const fileName = selectFile?.name + '.' + selectFile?.extension;
let localPath = `${FileSystem.documentDirectory}/${fileName}`; let localPath = `${FileSystem.documentDirectory}/${fileName}`;
@@ -65,7 +69,6 @@ export default function SectionFileTask() {
FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => { FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
const contentURL = await FileSystem.getContentUriAsync(uri); const contentURL = await FileSystem.getContentUriAsync(uri);
try { try {
if (Platform.OS == 'android') { if (Platform.OS == 'android') {
// open with android intent // open with android intent
await startActivityAsync( await startActivityAsync(
@@ -84,6 +87,8 @@ export default function SectionFileTask() {
} }
} catch (error) { } catch (error) {
Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini'); Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
} finally {
setLoadingOpen(false)
} }
}); });
}; };
@@ -109,6 +114,7 @@ export default function SectionFileTask() {
return ( return (
<> <>
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper]}>