upd: dokumen divisi
Deskripsi: -get all dokumen - select dokumen - tambah folder - upload file - rename dokumen - hapus dokumen - informasi dokumen - move blm selsai NO Issues
This commit is contained in:
amel
@@ -1,52 +1,453 @@
|
||||
import ButtonBackHeader from "@/components/buttonBackHeader"
|
||||
import { ButtonHeader } from "@/components/buttonHeader"
|
||||
import HeaderRightDocument from "@/components/document/headerDocument"
|
||||
import ItemFile from "@/components/document/itemFile"
|
||||
import MenuBottomSelectDocument from "@/components/document/menuBottomSelectDocument"
|
||||
import Styles from "@/constants/Styles"
|
||||
import { AntDesign, MaterialIcons } from "@expo/vector-icons"
|
||||
import { router, Stack, useLocalSearchParams } from "expo-router"
|
||||
import { useState } from "react"
|
||||
import { SafeAreaView, ScrollView, Text, View } from "react-native"
|
||||
import AlertKonfirmasi from "@/components/alertKonfirmasi";
|
||||
import ButtonBackHeader from "@/components/buttonBackHeader";
|
||||
import { ButtonHeader } from "@/components/buttonHeader";
|
||||
import HeaderRightDocument from "@/components/document/headerDocument";
|
||||
import ItemFile from "@/components/document/itemFile";
|
||||
import ModalMore from "@/components/document/modalMore";
|
||||
import DrawerBottom from "@/components/drawerBottom";
|
||||
import { InputForm } from "@/components/inputForm";
|
||||
import MenuItemRow from "@/components/menuItemRow";
|
||||
import ModalFloat from "@/components/modalFloat";
|
||||
import { ColorsStatus } from "@/constants/ColorsStatus";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiDocumentDelete, apiDocumentRename, apiGetDocument } from "@/lib/api";
|
||||
import { setUpdateDokumen } from "@/lib/dokumenUpdate";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import {
|
||||
AntDesign,
|
||||
MaterialCommunityIcons,
|
||||
MaterialIcons,
|
||||
} from "@expo/vector-icons";
|
||||
import { router, Stack, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Pressable,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
Text,
|
||||
ToastAndroid,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
category: string;
|
||||
name: string;
|
||||
extension: string;
|
||||
idStorage: string;
|
||||
path: string;
|
||||
createdBy: string;
|
||||
share: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
type PropsPath = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export default function DocumentDivision() {
|
||||
const { path } = useLocalSearchParams<{ path?: string }>()
|
||||
const [isChecked, setIsChecked] = useState(false)
|
||||
const { token, decryptToken } = useAuthSession();
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const [path, setPath] = useState("home");
|
||||
const [data, setData] = useState<Props[]>([]);
|
||||
const [dataJalur, setDataJalur] = useState<PropsPath[]>([]);
|
||||
const [dariSelectAll, setDariSelectAll] = useState(false);
|
||||
const [selectedFiles, setSelectedFiles] = useState<any>([]);
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [shareSelected, setShareSelected] = useState(false);
|
||||
const [copyAllowed, setCopyAllowed] = useState(true);
|
||||
const [modalMore, setModalMore] = useState(false);
|
||||
const [isRename, setRename] = useState(false);
|
||||
const dispatch = useDispatch()
|
||||
const update = useSelector((state: any) => state.dokumenUpdate);
|
||||
const [bodyRename, setBodyRename] = useState({
|
||||
id: "",
|
||||
name: "",
|
||||
path: "",
|
||||
idDivision: id,
|
||||
extension: "",
|
||||
});
|
||||
|
||||
async function handleLoad() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiGetDocument({
|
||||
user: hasil,
|
||||
path,
|
||||
division: id,
|
||||
category: "all",
|
||||
});
|
||||
setData(response.data);
|
||||
setDataJalur(response.jalur);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad();
|
||||
}, [path, update]);
|
||||
|
||||
const handleCheckboxChange = (index: number) => {
|
||||
setDariSelectAll(false);
|
||||
if (selectedFiles.some((i: any) => i.id == data[index].id)) {
|
||||
setSelectedFiles(
|
||||
selectedFiles.filter((i: any) => i.id != data[index].id)
|
||||
);
|
||||
} else {
|
||||
setSelectedFiles([
|
||||
...selectedFiles,
|
||||
{
|
||||
id: data[index].id,
|
||||
name: data[index].name,
|
||||
path: data[index].path,
|
||||
extension: data[index].extension,
|
||||
category: data[index].category,
|
||||
share: data[index].share,
|
||||
idStorage: data[index].idStorage,
|
||||
},
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
function cek() {
|
||||
if (selectedFiles.length == data.length) {
|
||||
setSelectAll(true);
|
||||
} else {
|
||||
setSelectAll(false);
|
||||
}
|
||||
|
||||
const shareSelected = selectedFiles.some((i: any) => i?.share == true);
|
||||
if (shareSelected) {
|
||||
setShareSelected(true);
|
||||
} else {
|
||||
setShareSelected(false);
|
||||
}
|
||||
|
||||
const cek = selectedFiles.some((i: any) => i?.category == "FOLDER");
|
||||
if (cek || selectedFiles.length > 1) {
|
||||
setCopyAllowed(false);
|
||||
} else {
|
||||
setCopyAllowed(true);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
cek();
|
||||
}, [selectedFiles]);
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (!selectAll) {
|
||||
setDariSelectAll(false);
|
||||
for (let index = 0; index < data.length; index++) {
|
||||
if (!selectedFiles.some((i: any) => i.id == data[index].id)) {
|
||||
const newArr = {
|
||||
id: data[index].id,
|
||||
name: data[index].name,
|
||||
path: data[index].path,
|
||||
extension: data[index].extension,
|
||||
category: data[index].category,
|
||||
share: data[index].share,
|
||||
idStorage: data[index].idStorage,
|
||||
};
|
||||
setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setDariSelectAll(true);
|
||||
setSelectedFiles([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBatal = () => {
|
||||
setSelectedFiles([]);
|
||||
setSelectAll(false);
|
||||
setDariSelectAll(false);
|
||||
};
|
||||
|
||||
function onChooseRename() {
|
||||
setBodyRename({
|
||||
...bodyRename,
|
||||
id: selectedFiles[0].id,
|
||||
name: selectedFiles[0].name,
|
||||
path: selectedFiles[0].path,
|
||||
extension: selectedFiles[0].extension,
|
||||
});
|
||||
setRename(true);
|
||||
}
|
||||
|
||||
async function handleRename() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiDocumentRename({ user: hasil, ...bodyRename })
|
||||
if (response.success) {
|
||||
ToastAndroid.show("Berhasil mengubah nama", ToastAndroid.SHORT)
|
||||
dispatch(setUpdateDokumen(!update))
|
||||
handleBatal()
|
||||
} else {
|
||||
ToastAndroid.show(response.message, ToastAndroid.SHORT)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT)
|
||||
} finally {
|
||||
setRename(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiDocumentDelete({ user: hasil, data: selectedFiles })
|
||||
if (response.success) {
|
||||
ToastAndroid.show("Berhasil menghapus", ToastAndroid.SHORT)
|
||||
dispatch(setUpdateDokumen(!update))
|
||||
handleBatal()
|
||||
} else {
|
||||
ToastAndroid.show(response.message, ToastAndroid.SHORT)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerLeft: () =>
|
||||
isChecked
|
||||
? <ButtonHeader item={<MaterialIcons name="close" size={20} color="white" />} onPress={() => { setIsChecked(false) }} />
|
||||
: <ButtonBackHeader onPress={() => { router.back() }} />,
|
||||
headerTitle: isChecked ? '1 item terpilih' : 'Dokumen Divisi',
|
||||
headerTitleAlign: 'center',
|
||||
selectedFiles.length > 0 || dariSelectAll ? (
|
||||
<ButtonHeader
|
||||
item={<MaterialIcons name="close" size={20} color="white" />}
|
||||
onPress={() => {
|
||||
handleBatal();
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ButtonBackHeader
|
||||
onPress={() => {
|
||||
router.back();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
headerTitle:
|
||||
selectedFiles.length > 0 || dariSelectAll
|
||||
? `${selectedFiles.length} item terpilih`
|
||||
: "Dokumen Divisi",
|
||||
headerTitleAlign: "center",
|
||||
headerRight: () =>
|
||||
isChecked
|
||||
? <ButtonHeader item={<MaterialIcons name="checklist-rtl" size={20} color="white" />} onPress={() => { }} />
|
||||
: <HeaderRightDocument id={path} />
|
||||
selectedFiles.length > 0 || dariSelectAll ? (
|
||||
<ButtonHeader
|
||||
item={
|
||||
<MaterialIcons name="checklist-rtl" size={20} color="white" />
|
||||
}
|
||||
onPress={() => {
|
||||
handleSelectAll();
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<HeaderRightDocument path={path} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<ScrollView style={{ height: '100%' }}>
|
||||
<ScrollView style={{ height: "100%" }}>
|
||||
<View style={[Styles.p15, Styles.mb100]}>
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<Text> home </Text>
|
||||
<AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
|
||||
<Text> folder 1 </Text>
|
||||
{dataJalur.map((item, index) => (
|
||||
<Pressable
|
||||
key={index}
|
||||
style={[Styles.rowItemsCenter]}
|
||||
onPress={() => {
|
||||
setPath(item.id);
|
||||
}}
|
||||
>
|
||||
{item.id != "home" && (
|
||||
<AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
|
||||
)}
|
||||
<Text> {item.name} </Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
<View>
|
||||
<ItemFile category="folder" title="Folder Pertama" dateTime="05-02-2025 07:54" onChecked={() => { setIsChecked(!isChecked) }} checked={isChecked} />
|
||||
<ItemFile category="file" title="Images.jpg" dateTime="05-11-2024 07:54" />
|
||||
<ItemFile category="folder-shared" title="Folder shared" dateTime="05-11-2024 07:54" />
|
||||
<ItemFile category="file-shared" title="images-shared.pdf" dateTime="05-11-2024 07:54" />
|
||||
{data.length > 0 ? (
|
||||
data.map((item, index) => {
|
||||
const isSelected = selectedFiles.some(
|
||||
(i: any) => i?.id == item.id
|
||||
);
|
||||
return (
|
||||
<ItemFile
|
||||
key={index}
|
||||
category={
|
||||
item.category == "FOLDER"
|
||||
? item.share
|
||||
? "folder-shared"
|
||||
: "folder"
|
||||
: item.share
|
||||
? "file-shared"
|
||||
: "file"
|
||||
}
|
||||
title={
|
||||
item.category == "FOLDER"
|
||||
? item.name
|
||||
: `${item.name}.${item.extension}`
|
||||
}
|
||||
dateTime={item.createdAt}
|
||||
onChecked={() => {
|
||||
handleCheckboxChange(index);
|
||||
}}
|
||||
checked={isSelected}
|
||||
onPress={() => {
|
||||
setPath(item.id);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Text
|
||||
style={[
|
||||
Styles.textDefault,
|
||||
Styles.cGray,
|
||||
Styles.mt15,
|
||||
{ textAlign: "center" },
|
||||
]}
|
||||
>
|
||||
Tidak ada dokumen
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
{
|
||||
isChecked && <MenuBottomSelectDocument onDone={() => { setIsChecked(false) }} />
|
||||
}
|
||||
{(selectedFiles.length > 0 || dariSelectAll) && (
|
||||
<View style={[ColorsStatus.primary, Styles.bottomMenuSelectDocument]}>
|
||||
<View style={[Styles.rowItemsCenter, { justifyContent: "center" }]}>
|
||||
<MenuItemRow
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="download-outline"
|
||||
color="white"
|
||||
size={25}
|
||||
/>
|
||||
}
|
||||
title="Unduh"
|
||||
onPress={() => { }}
|
||||
column="many"
|
||||
color="white"
|
||||
disabled={selectedFiles.length == 0 || !copyAllowed}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="trash-can-outline"
|
||||
color="white"
|
||||
size={25}
|
||||
/>
|
||||
}
|
||||
title="Hapus"
|
||||
onPress={() => {
|
||||
AlertKonfirmasi({
|
||||
title: "Konfirmasi",
|
||||
desc: "Apakah anda yakin ingin menghapus dokumen?",
|
||||
onPress: () => {
|
||||
handleDelete()
|
||||
},
|
||||
});
|
||||
}}
|
||||
column="many"
|
||||
color="white"
|
||||
disabled={selectedFiles.length == 0 || shareSelected}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="pencil-outline"
|
||||
color="white"
|
||||
size={25}
|
||||
/>
|
||||
}
|
||||
title="Ganti Nama"
|
||||
onPress={() => {
|
||||
onChooseRename();
|
||||
}}
|
||||
column="many"
|
||||
color="white"
|
||||
disabled={selectedFiles.length != 1 || shareSelected}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="share-variant-outline"
|
||||
color="white"
|
||||
size={25}
|
||||
/>
|
||||
}
|
||||
title="Bagikan"
|
||||
onPress={() => { }}
|
||||
column="many"
|
||||
color="white"
|
||||
disabled={selectedFiles.length != 1 || shareSelected}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="dots-vertical"
|
||||
color="white"
|
||||
size={25}
|
||||
/>
|
||||
}
|
||||
title="Lainnya"
|
||||
onPress={() => {
|
||||
setModalMore(true);
|
||||
}}
|
||||
column="many"
|
||||
color="white"
|
||||
disabled={
|
||||
selectedFiles.length == 1 ||
|
||||
(selectedFiles.length > 0 && !shareSelected)
|
||||
? false
|
||||
: true
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<DrawerBottom
|
||||
animation="slide"
|
||||
isVisible={modalMore}
|
||||
setVisible={setModalMore}
|
||||
title=""
|
||||
>
|
||||
<ModalMore
|
||||
onClose={() => {
|
||||
setModalMore(false);
|
||||
}}
|
||||
data={selectedFiles}
|
||||
share={shareSelected}
|
||||
/>
|
||||
</DrawerBottom>
|
||||
|
||||
<ModalFloat
|
||||
title="Ganti Nama"
|
||||
isVisible={isRename}
|
||||
setVisible={setRename}
|
||||
onSubmit={() => { handleRename() }}
|
||||
disableSubmit={bodyRename.name == ""}
|
||||
>
|
||||
<View>
|
||||
<InputForm
|
||||
type="default"
|
||||
placeholder="Nama File"
|
||||
value={bodyRename.name}
|
||||
onChange={(text) => {
|
||||
setBodyRename({ ...bodyRename, name: text });
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</ModalFloat>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user