wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: load scroll

Browse Source 
Deskripsi:
- kegiatan
- divisi
- tugas divisi
- diskusi
- history kalender

No Issues
This commit is contained in:
amel
2025-06-12 15:10:19 +08:00
parent 6479069f17
commit 055bbe4c0f
9 changed files with 842 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/(application)/announcement/index.tsx
View File

@@ -115,23 +115,6 @@ export default function Announcement() {
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
/> />
// data.map((item, index) => {
// return (
// <BorderBottomItem
// key={index}
// onPress={() => { router.push(`/announcement/${item.id}`) }}
// borderType="bottom"
// icon={
// <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
// <MaterialIcons name="campaign" size={25} color={'#384288'} />
// </View>
// }
// title={item.title}
// desc={item.desc.replace(/<[^>]*>?/gm, '')}
// rightTopInfo={item.createdAt}
// />
// )
// })
: :
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text> <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
} }

39
app/(application)/division/[id]/(fitur-division)/_layout.tsx
View File

@@ -7,22 +7,29 @@ import { StatusBar } from "expo-status-bar"
export default function RootLayout() { export default function RootLayout() {
return ( return (
<> <>
<Stack screenOptions={Headers.shadow}> <Stack screenOptions={Headers.shadow}>
<Stack.Screen name="task/index" options={{ <Stack.Screen name="task/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Tugas Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightTaskList />
}} />
<Stack.Screen name="discussion/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Diskusi Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDiscussionList />
}} />
<Stack.Screen name="calendar/history"
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Tugas Divisi', headerTitle: 'Riwayat Acara',
headerTitleAlign: 'center', headerTitleAlign: 'center',
headerRight: () => <HeaderRightTaskList /> }}
}} /> />
<Stack.Screen name="discussion/index" options={{ </Stack>
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, <StatusBar style="light" />
title: 'Diskusi Divisi', </>
headerTitleAlign: 'center', )
headerRight: () => <HeaderRightDiscussionList />
}} />
</Stack>
<StatusBar style="light" />
</>
)
} }

108
app/(application)/division/[id]/(fitur-division)/calendar/history.tsx
View File

@@ -1,13 +1,12 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
import InputSearch from "@/components/inputSearch"; import InputSearch from "@/components/inputSearch";
import Skeleton from "@/components/skeleton"; import Skeleton from "@/components/skeleton";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetCalendarHistory } from "@/lib/api"; import { apiGetCalendarHistory } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { FlatList, Text, View, VirtualizedList } from "react-native";
type Props = { type Props = {
dateStart: Date dateStart: Date
@@ -21,47 +20,92 @@ export default function CalendarHistory() {
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 }) const arrSkeleton = Array.from({ length: 5 })
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad() { async function handleLoad(loading: boolean, thisPage: number) {
try { try {
setLoading(true) setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current)); const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id }); const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id, page: thisPage });
setData(response.data); if (thisPage == 1) {
setData(response.data)
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data])
} else {
return;
}
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false)
setWaiting(false)
} }
} }
useEffect(() => { useEffect(() => {
handleLoad() handleLoad(true, 1)
}, [search]) }, [search])
return ( const loadMoreData = () => {
<SafeAreaView> if (waiting) return
<Stack.Screen setTimeout(() => {
options={{ handleLoad(false, page + 1)
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, }, 1000);
headerTitle: 'Riwayat Acara', };
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<InputSearch onChange={(val) => setSearch(val)} />
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
))
:
<ItemHistoryEvent data={data} />
}
</View> const getItem = (_data: unknown, index: number): Props => ({
</ScrollView> dateStart: data[index].dateStart,
</SafeAreaView> year: data[index].year,
data: data[index].data,
})
return (
<View style={[Styles.p15, { flex: 1 }]}>
<View>
<InputSearch onChange={(val) => setSearch(val)} />
</View>
<View style={[{ flex: 2, }]}>
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
))
:
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
</View>
<View style={[{ flex: 1 }]}>
<FlatList data={item.data}
renderItem={({ item, index }: { item: { title: string, timeStart: string, timeEnd: string }, index: number }) => (
<View key={index} style={[Styles.mb05, Styles.w80]}>
<Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item.title}</Text>
<Text style={[Styles.textDefault]}>{item.timeStart} | {item.timeEnd}</Text>
</View>
)}
keyExtractor={(item, index) => String(index)}
/>
</View>
</View>
)
}}
keyExtractor={(item, index) => String(index)}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
}
</View>
</View>
) )
} }

154
app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
View File

@@ -10,7 +10,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons"; import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, Text, View } from "react-native"; import { Text, View, VirtualizedList } from "react-native";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
@@ -35,61 +35,97 @@ export default function DiscussionDivision() {
const update = useSelector((state: any) => state.discussionUpdate); const update = useSelector((state: any) => state.discussionUpdate);
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 }) const arrSkeleton = Array.from({ length: 5 })
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad(loading: boolean) { async function handleLoad(loading: boolean, thisPage: number) {
try { try {
setWaiting(true)
setLoading(loading) setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current)) const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussion({ user: hasil, search, division: id, active }) const response = await apiGetDiscussion({ user: hasil, search, division: id, active, page: thisPage })
setData(response.data) if (thisPage == 1) {
setData(response.data)
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data])
} else {
return;
}
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} finally { } finally {
setLoading(false) setLoading(false)
setWaiting(false)
} }
} }
useEffect(() => { useEffect(() => {
handleLoad(false) handleLoad(false, 1)
}, [update.data]) }, [update.data])
useEffect(() => { useEffect(() => {
handleLoad(true) handleLoad(true, 1)
}, [active, search]) }, [active, search])
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
}
const getItem = (_data: unknown, index: number): Props => ({
id: data[index].id,
title: data[index].title,
desc: data[index].desc,
status: data[index].status,
user_name: data[index].user_name,
img: data[index].img,
total_komentar: data[index].total_komentar,
createdAt: data[index].createdAt,
isActive: data[index].isActive,
})
return ( return (
<SafeAreaView> <View style={[Styles.p15, { flex: 1 }]}>
<ScrollView> <View>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.wrapBtnTab]}>
<View style={[Styles.wrapBtnTab]}> <ButtonTab
<ButtonTab active={active == "false" ? "false" : "true"}
active={active == "false" ? "false" : "true"} value="true"
value="true" onPress={() => { router.replace('./discussion?active=true') }}
onPress={() => { router.replace('./discussion?active=true') }} label="Aktif"
label="Aktif" icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />} n={2} />
n={2} /> <ButtonTab
<ButtonTab active={active == "false" ? "false" : "true"}
active={active == "false" ? "false" : "true"} value="false"
value="false" onPress={() => { router.replace('./discussion?active=false') }}
onPress={() => { router.replace('./discussion?active=false') }} label="Arsip"
label="Arsip" icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />} n={2} />
n={2} /> </View>
</View> <InputSearch onChange={setSearch} />
<InputSearch onChange={setSearch} /> </View>
<View>
{ <View style={[{ flex: 2 }]}>
loading ? {
arrSkeleton.map((item: any, i: number) => { loading ?
arrSkeleton.map((item: any, i: number) => {
return (
<SkeletonContent key={i} />
)
})
:
data.length > 0 ?
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return ( return (
<SkeletonContent key={i} />
)
})
:
data.length > 0 ?
data.map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
width={55} width={55}
@@ -112,15 +148,43 @@ export default function DiscussionDivision() {
} }
rightBottomInfo={item.total_komentar + ' Komentar'} rightBottomInfo={item.total_komentar + ' Komentar'}
/> />
))
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
) )
} }}
</View> keyExtractor={(item, index) => String(index)}
</View> onEndReached={loadMoreData}
</ScrollView> onEndReachedThreshold={0.5}
</SafeAreaView> showsVerticalScrollIndicator={false}
/>
// data.map((item, index) => (
// <BorderBottomItem
// key={index}
// width={55}
// onPress={() => { router.push(`./discussion/${item.id}`) }}
// borderType="bottom"
// icon={
// <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
// }
// title={item.user_name}
// subtitle={
// active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
// }
// rightTopInfo={item.createdAt}
// desc={item.desc}
// leftBottomInfo={
// <View style={[Styles.rowItemsCenter]}>
// <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
// <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
// </View>
// }
// rightBottomInfo={item.total_komentar + ' Komentar'}
// />
// ))
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
)
}
</View>
</View>
); );
} }

321
app/(application)/division/[id]/(fitur-division)/task/index.tsx
View File

@@ -17,7 +17,7 @@ import {
} from "@expo/vector-icons"; } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"; import { Pressable, ScrollView, Text, View, VirtualizedList } from "react-native";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
type Props = { type Props = {
@@ -39,125 +39,157 @@ export default function ListTask() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 }) const arrSkeleton = Array.from({ length: 3 })
const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0') const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad(loading: boolean) { async function handleLoad(loading: boolean, thisPage: number) {
try { try {
setWaiting(true)
setLoading(loading) setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current)); const hasil = await decryptToken(String(token?.current));
const response = await apiGetTask({ const response = await apiGetTask({
user: hasil, user: hasil,
division: id, division: id,
status: statusFix, status: statusFix,
search, search,
page: thisPage
}); });
setData(response.data); if (thisPage == 1) {
setData(response.data);
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data]);
} else {
return;
}
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false)
setWaiting(false)
} }
} }
useEffect(() => { useEffect(() => {
handleLoad(false) handleLoad(false, 1)
}, [update.data]) }, [update.data])
useEffect(() => { useEffect(() => {
handleLoad(true); handleLoad(true, 1);
}, [statusFix, search]); }, [statusFix, search]);
return ( const loadMoreData = () => {
<SafeAreaView> if (waiting) return
<ScrollView> setTimeout(() => {
<View style={[Styles.p15, Styles.mb100]}> handleLoad(false, page + 1)
<ScrollView horizontal style={[Styles.mb10]}> }, 1000);
<ButtonTab }
active={statusFix}
value="0"
onPress={() => { setStatusFix("0") }}
label="Segera"
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="1"
onPress={() => { setStatusFix("1") }}
label="Dikerjakan"
icon={
<MaterialCommunityIcons
name="progress-check"
color={statusFix == "1" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="2"
onPress={() => { setStatusFix("2") }}
label="Selesai"
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="3"
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
</ScrollView>
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} onChange={setSearch} />
<Pressable
onPress={() => {
setList(!isList);
}}
>
<MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"}
size={30}
/>
</Pressable>
</View>
{
loading ? const getItem = (_data: unknown, index: number): Props => ({
isList ? id: data[index].id,
arrSkeleton.map((item, index) => ( title: data[index].title,
<SkeletonTwoItem key={index} /> desc: data[index].desc,
)) status: data[index].status,
: progress: data[index].progress,
arrSkeleton.map((item, index) => ( member: data[index].member,
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} /> })
))
return (
<View style={[Styles.p15, { flex: 1 }]}>
<View>
<ScrollView horizontal style={[Styles.mb10]}>
<ButtonTab
active={statusFix}
value="0"
onPress={() => { setStatusFix("0") }}
label="Segera"
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="1"
onPress={() => { setStatusFix("1") }}
label="Dikerjakan"
icon={
<MaterialCommunityIcons
name="progress-check"
color={statusFix == "1" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="2"
onPress={() => { setStatusFix("2") }}
label="Selesai"
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="3"
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
</ScrollView>
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} onChange={setSearch} />
<Pressable
onPress={() => {
setList(!isList);
}}
>
<MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"}
size={30}
/>
</Pressable>
</View>
</View>
<View style={[{ flex: 2 }]}>
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
: :
data.length > 0 ? ( arrSkeleton.map((item, index) => (
isList ? ( <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
<View> ))
{data.map((item, index) => ( :
data.length > 0 ? (
isList ? (
<View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
onPress={() => { onPress={() => {
@@ -171,11 +203,35 @@ export default function ListTask() {
} }
title={item.title} title={item.title}
/> />
))} )}
</View> keyExtractor={(item, index) => index.toString()}
) : ( onEndReached={loadMoreData}
<View> onEndReachedThreshold={0.5}
{data.map((item, index) => ( showsVerticalScrollIndicator={false}
/>
{/* {data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={"#384288"} />
</View>
}
title={item.title}
/>
))} */}
</View>
) : (
<View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }) => (
<PaperGridContent <PaperGridContent
key={index} key={index}
onPress={() => { onPress={() => {
@@ -207,24 +263,55 @@ export default function ListTask() {
/> />
</View> </View>
</PaperGridContent> </PaperGridContent>
))} )}
</View> keyExtractor={(item, index) => index.toString()}
) onEndReached={loadMoreData}
) : ( onEndReachedThreshold={0.5}
<Text showsVerticalScrollIndicator={false}
style={[ />
Styles.textDefault, {/* {data.map((item, index) => (
Styles.cGray, <PaperGridContent
{ textAlign: "center" }, key={index}
]} onPress={() => {
> router.push(`./task/${item.id}`);
Tidak ada data }}
</Text> content="page"
title={item.title}
headerColor="primary"
>
<ProgressBar category="page" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}>
<Text></Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
</View>
</PaperGridContent>
))} */}
</View>
) )
) : (
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: "center" },]} >
Tidak ada data
</Text>
)
} }
</View> </View>
</ScrollView> </View>
</SafeAreaView>
); );
} }

337
app/(application)/division/index.tsx
View File

@@ -17,7 +17,7 @@ import {
} from "@expo/vector-icons"; } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"; import { Pressable, Text, View, VirtualizedList } from "react-native";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
type Props = { type Props = {
@@ -44,10 +44,14 @@ export default function ListDivision() {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [status, setStatus] = useState<'true' | 'false'>('true') const [status, setStatus] = useState<'true' | 'false'>('true')
const [category, setCategory] = useState<'divisi-saya' | 'semua'>('divisi-saya') const [category, setCategory] = useState<'divisi-saya' | 'semua'>('divisi-saya')
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad(loading: boolean) { async function handleLoad(loading: boolean, thisPage: number) {
try { try {
setWaiting(true)
setLoading(loading) setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current)); const hasil = await decryptToken(String(token?.current));
const response = await apiGetDivision({ const response = await apiGetDivision({
user: hasil, user: hasil,
@@ -55,172 +59,217 @@ export default function ListDivision() {
search: search, search: search,
group: String(group), group: String(group),
kategori: category, kategori: category,
page: thisPage
}); });
if (response.success) { if (response.success) {
setData(response.data); if (thisPage == 1) {
setData(response.data);
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data]);
} else {
return;
}
setNameGroup(response.filter.name); setNameGroup(response.filter.name);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false)
setWaiting(false)
} }
} }
useEffect(() => { useEffect(() => {
handleLoad(false); handleLoad(false, 1);
}, [update]); }, [update]);
useEffect(() => { useEffect(() => {
handleLoad(true); handleLoad(true, 1);
}, [status, search, group, category]); }, [status, search, group, category]);
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
};
const getItem = (_data: unknown, index: number): Props => ({
id: data[index].id,
name: data[index].name,
desc: data[index].desc,
jumlah_member: data[index].jumlah_member,
})
return ( return (
<SafeAreaView> <View style={[Styles.p15, { flex: 1 }]}>
<ScrollView> <View>
<View style={[Styles.p15, Styles.mb100]}> {
{ entityUser.role != "user" && entityUser.role != "coadmin" ?
entityUser.role != "user" && entityUser.role != "coadmin" ? <View style={[Styles.wrapBtnTab]}>
<View style={[Styles.wrapBtnTab]}> <ButtonTab
<ButtonTab active={status == "false" ? "false" : "true"}
active={status == "false" ? "false" : "true"} value="true"
value="true" onPress={() => { setStatus("true") }}
onPress={() => { setStatus("true") }} label="Aktif"
label="Aktif" icon={
icon={ <Feather
<Feather name="check-circle"
name="check-circle" color={status == "false" ? "black" : "white"}
color={status == "false" ? "black" : "white"} size={20}
size={20} />
/> }
} n={2}
n={2}
/>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={
<AntDesign
name="closecircleo"
color={status == "true" ? "black" : "white"}
size={20}
/>
}
n={2}
/>
</View>
:
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={category == "semua" ? "false" : "true"}
value="true"
onPress={() => { setCategory("divisi-saya") }}
label="Divisi Saya"
icon={
<Ionicons
name="file-tray-outline"
color={category == "semua" ? "black" : "white"}
size={20}
/>
}
n={2}
/>
<ButtonTab
active={category == "semua" ? "false" : "true"}
value="false"
onPress={() => { setCategory("semua") }}
label="Semua Divisi"
icon={
<Ionicons
name="file-tray-stacked-outline"
color={category == "semua" ? "white" : "black"}
size={20}
/>
}
n={2}
/>
</View>
}
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} onChange={setSearch} />
<Pressable
onPress={() => {
setList(!isList);
}}
>
<MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"}
size={30}
/> />
</Pressable> <ButtonTab
</View> active={status == "false" ? "false" : "true"}
{(entityUser.role == "supadmin" || value="false"
entityUser.role == "developer") && ( onPress={() => { setStatus("false") }}
<View style={[Styles.mv05]}> label="Tidak Aktif"
<Text>Filter : {nameGroup}</Text> icon={
</View> <AntDesign
)} name="closecircleo"
color={status == "true" ? "black" : "white"}
size={20}
/>
}
n={2}
/>
</View>
:
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={category == "semua" ? "false" : "true"}
value="true"
onPress={() => { setCategory("divisi-saya") }}
label="Divisi Saya"
icon={
<Ionicons
name="file-tray-outline"
color={category == "semua" ? "black" : "white"}
size={20}
/>
}
n={2}
/>
<ButtonTab
active={category == "semua" ? "false" : "true"}
value="false"
onPress={() => { setCategory("semua") }}
label="Semua Divisi"
icon={
<Ionicons
name="file-tray-stacked-outline"
color={category == "semua" ? "white" : "black"}
size={20}
/>
}
n={2}
/>
</View>
}
{ <View style={[Styles.rowSpaceBetween]}>
loading ? <InputSearch width={68} onChange={setSearch} />
isList ? <Pressable
arrSkeleton.map((item, index) => ( onPress={() => {
<SkeletonTwoItem key={index} /> setList(!isList);
)) }}
: >
arrSkeleton.map((item, index) => ( <MaterialCommunityIcons
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} /> name={isList ? "format-list-bulleted" : "view-grid"}
)) color={"black"}
size={30}
/>
</Pressable>
</View>
{(entityUser.role == "supadmin" || entityUser.role == "developer") && (
<View style={[Styles.mv05]}>
<Text>Filter : {nameGroup}</Text>
</View>
)}
</View>
<View style={[{ flex: 2 }]}>
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
: :
data.length == 0 ? ( arrSkeleton.map((item, index) => (
<View style={[Styles.mt15]}> <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text> ))
:
data.length == 0 ? (
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
</View>
) : (
isList ? (
<View style={[Styles.mb50]}>
<VirtualizedList
data={data}
style={[{ paddingBottom: 100 }]}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<BorderBottomItem
key={index}
onPress={() => { router.push(`/division/${item.id}`) }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={"#384288"} />
</View>
}
title={item.name}
titleWeight="normal"
/>
)
}}
keyExtractor={(item, index) => String(index)}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
</View> </View>
) : ( ) : (
isList ? ( <View>
<View> <VirtualizedList
{data.map((item, index) => ( data={data}
<BorderBottomItem style={[{ paddingBottom: 100 }]}
key={index} getItemCount={() => data.length}
onPress={() => { router.push(`/division/${item.id}`) }} getItem={getItem}
borderType="bottom" renderItem={({ item, index }: { item: Props, index: number }) => {
icon={ return (
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}> <PaperGridContent
<MaterialIcons name="group" size={25} color={"#384288"} /> key={index}
</View> onPress={() => {
} router.push(`/division/${item.id}`);
title={item.name} }}
titleWeight="normal" content="page"
/> title={item.name}
))} headerColor="primary"
</View> contentPosition="top"
) : ( >
<View> <Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
{data.map((item, index) => ( </PaperGridContent>
<PaperGridContent )
key={index} }}
onPress={() => { keyExtractor={(item, index) => String(index)}
router.push(`/division/${item.id}`); onEndReached={loadMoreData}
}} onEndReachedThreshold={0.5}
content="page" showsVerticalScrollIndicator={false}
title={item.name} />
headerColor="primary" </View>
contentPosition="top"
>
<Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
</PaperGridContent>
))}
</View>
)
) )
} )
</View> }
</ScrollView> </View>
</SafeAreaView> </View>
); );
} }

345
app/(application)/project/index.tsx
View File

@@ -17,7 +17,7 @@ import {
} from "@expo/vector-icons"; } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"; import { Pressable, ScrollView, Text, View, VirtualizedList } from "react-native";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
type Props = { type Props = {
@@ -46,10 +46,14 @@ export default function ListProject() {
const update = useSelector((state: any) => state.projectUpdate) const update = useSelector((state: any) => state.projectUpdate)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index) const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
const [page, setPage] = useState(1)
const [waiting, setWaiting] = useState(false)
async function handleLoad(loading: boolean) { async function handleLoad(loading: boolean, thisPage: number) {
try { try {
setLoading(loading) setLoading(loading)
setWaiting(true)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current)); const hasil = await decryptToken(String(token?.current));
const response = await apiGetProject({ const response = await apiGetProject({
user: hasil, user: hasil,
@@ -57,132 +61,187 @@ export default function ListProject() {
search: search, search: search,
group: String(group), group: String(group),
kategori: String(cat), kategori: String(cat),
page: thisPage
}); });
if (response.success) { if (response.success) {
setData(response.data);
setNameGroup(response.filter.name); setNameGroup(response.filter.name);
if (thisPage == 1) {
setData(response.data);
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data])
} else {
return;
}
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false)
setWaiting(false)
} }
} }
useEffect(() => { useEffect(() => {
handleLoad(false); handleLoad(false, 1);
}, [update.data]); }, [update.data]);
useEffect(() => { useEffect(() => {
handleLoad(true); handleLoad(true, 1);
}, [statusFix, search, group, cat]); }, [statusFix, search, group, cat]);
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
};
const getItem = (_data: unknown, index: number): Props => ({
id: data[index].id,
title: data[index].title,
desc: data[index].desc,
status: data[index].status,
member: data[index].member,
progress: data[index].progress,
createdAt: data[index].createdAt,
})
return ( return (
<SafeAreaView> <View style={[Styles.p15, { flex: 1 }]}>
<ScrollView> <View>
<View style={[Styles.p15, Styles.mb100]}> <ScrollView horizontal style={[Styles.mb10]}>
<ScrollView horizontal style={[Styles.mb10]}> <ButtonTab
<ButtonTab active={statusFix}
active={statusFix} value="0"
value="0" onPress={() => { setStatusFix("0") }}
onPress={() => { setStatusFix("0") }} label="Segera"
label="Segera" icon={
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="1"
onPress={() => { setStatusFix("1") }}
label="Dikerjakan"
icon={
<MaterialCommunityIcons
name="progress-check"
color={statusFix == "1" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="2"
onPress={() => { setStatusFix("2") }}
label="Selesai"
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="3"
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
</ScrollView>
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} onChange={setSearch} />
<Pressable
onPress={() => {
setList(!isList);
}}
>
<MaterialCommunityIcons <MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"} name="clock-alert-outline"
color={"black"} color={statusFix == "0" ? "white" : "black"}
size={30} size={20}
/> />
</Pressable> }
</View> n={4}
<View style={[Styles.mv05]}> />
<Text>Filter : <ButtonTab
{ active={statusFix}
(entityUser.role == "supadmin" || entityUser.role == "developer") && nameGroup value="1"
} onPress={() => { setStatusFix("1") }}
{ label="Dikerjakan"
(entityUser.role == 'user' || entityUser.role == 'coadmin') icon={
? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? 'Kegiatan Saya' : 'Semua Kegiatan' <MaterialCommunityIcons
: '' name="progress-check"
} color={statusFix == "1" ? "white" : "black"}
</Text> size={20}
</View> />
{ }
loading ? n={4}
isList ? />
arrSkeleton.map((item, index) => ( <ButtonTab
<SkeletonTwoItem key={index} /> active={statusFix}
)) value="2"
: onPress={() => { setStatusFix("2") }}
arrSkeleton.map((item, index) => ( label="Selesai"
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} /> icon={
)) <Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
<ButtonTab
active={statusFix}
value="3"
onPress={() => { setStatusFix("3") }}
label="Batal"
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : "black"}
size={20}
/>
}
n={4}
/>
</ScrollView>
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} onChange={setSearch} />
<Pressable
onPress={() => {
setList(!isList);
}}
>
<MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"}
size={30}
/>
</Pressable>
</View>
<View style={[Styles.mv05]}>
<Text>Filter :
{
(entityUser.role == "supadmin" || entityUser.role == "developer") && nameGroup
}
{
(entityUser.role == 'user' || entityUser.role == 'coadmin')
? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? 'Kegiatan Saya' : 'Semua Kegiatan'
: ''
}
</Text>
</View>
</View>
<View style={[{ flex: 2}]}>
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
: :
data.length > 0 arrSkeleton.map((item, index) => (
? <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
isList ? ( ))
<View> :
{data.map((item, index) => { data.length > 0
?
isList ? (
<View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<BorderBottomItem
key={index}
onPress={() => { router.push(`/project/${item.id}`); }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]} >
<AntDesign
name="areachart"
size={25}
color={"#384288"}
/>
</View>
}
title={item.title}
/>
);
}}
keyExtractor={(item, index) => index.toString()}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
{/* {
data.map((item, index) => {
return ( return (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
@@ -202,11 +261,16 @@ export default function ListProject() {
title={item.title} title={item.title}
/> />
); );
})} })
</View> } */}
) : ( </View>
<View> ) : (
{data.map((item, index) => { <View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return ( return (
<PaperGridContent <PaperGridContent
key={index} key={index}
@@ -242,16 +306,57 @@ export default function ListProject() {
</View> </View>
</PaperGridContent> </PaperGridContent>
); );
})} }}
</View> keyExtractor={(item, index) => index.toString()}
) onEndReached={loadMoreData}
: onEndReachedThreshold={0.5}
<View style={[Styles.mt15]}> showsVerticalScrollIndicator={false}
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada kegiatan</Text> />
{/* {data.map((item, index) => {
return (
<PaperGridContent
key={index}
onPress={() => {
router.push(`/project/${item.id}`);
}}
content="page"
title={item.title}
headerColor="primary"
>
<ProgressBar value={item.progress} category="page" />
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}>
{item.createdAt}
</Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
</View>
</PaperGridContent>
);
})} */}
</View> </View>
} )
</View> :
</ScrollView> <View style={[Styles.mt15]}>
</SafeAreaView> <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada kegiatan</Text>
</View>
}
</View>
</View>
); );
} }

4
components/buttonHeader.tsx
View File

@@ -1,5 +1,5 @@
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { Pressable, Text, TouchableWithoutFeedback, View } from "react-native"; import { Pressable, View } from "react-native";
type PropsBtnHeader = { type PropsBtnHeader = {
onPress: () => void; onPress: () => void;
@@ -8,7 +8,7 @@ type PropsBtnHeader = {
export function ButtonHeader({ onPress, item }: PropsBtnHeader) { export function ButtonHeader({ onPress, item }: PropsBtnHeader) {
return ( return (
<Pressable onPress={() => {onPress()}}> <Pressable onPress={() => { onPress() }}>
<View style={[Styles.btnIconHeader]}> <View style={[Styles.btnIconHeader]}>
{item} {item}
</View> </View>

20
lib/api.ts
View File

@@ -249,8 +249,8 @@ export const apiDeleteAnnouncement = async (data: { user: string }, id: string)
return response.data return response.data
}; };
export const apiGetProject = async ({ user, status, search, group, kategori }: { user: string, status: string, search: string, group?: string, kategori?: string }) => { export const apiGetProject = async ({ user, status, search, group, kategori, page }: { user: string, status: string, search: string, group?: string, kategori?: string, page?: number }) => {
const response = await api.get(`mobile/project?user=${user}&status=${status}&group=${group}&search=${search}&cat=${kategori}`); const response = await api.get(`mobile/project?user=${user}&status=${status}&group=${group}&search=${search}&cat=${kategori}&page=${page}`);
return response.data; return response.data;
}; };
@@ -346,8 +346,8 @@ export const apiDeleteFileProject = async (data: { user: string }, id: string) =
return response.data; return response.data;
}; };
export const apiGetDivision = async ({ user, search, group, kategori, active }: { user: string, search: string, group?: string, kategori?: string, active?: string }) => { export const apiGetDivision = async ({ user, search, group, kategori, active, page }: { user: string, search: string, group?: string, kategori?: string, active?: string, page?: number }) => {
const response = await api.get(`mobile/division?user=${user}&active=${active}&group=${group}&search=${search}&cat=${kategori}`); const response = await api.get(`mobile/division?user=${user}&active=${active}&group=${group}&search=${search}&cat=${kategori}&page=${page}`);
return response.data; return response.data;
}; };
@@ -407,8 +407,8 @@ export const apiCreateDivision = async (data: { data: { idGroup: string, name: s
}; };
export const apiGetDiscussion = async ({ user, search, division, active }: { user: string, search: string, division: string, active?: string }) => { export const apiGetDiscussion = async ({ user, search, division, active, page }: { user: string, search: string, division: string, active?: string, page?: number }) => {
const response = await api.get(`mobile/discussion?user=${user}&active=${active}&search=${search}&division=${division}`); const response = await api.get(`mobile/discussion?user=${user}&active=${active}&search=${search}&division=${division}&page=${page}`);
return response.data; return response.data;
}; };
@@ -472,13 +472,13 @@ export const apiDeleteCalendar = async (data: { user: string }, id: string) => {
return response.data return response.data
}; };
export const apiGetCalendarHistory = async ({ user, search, division }: { user: string, search: string, division: string, }) => { export const apiGetCalendarHistory = async ({ user, search, division, page }: { user: string, search: string, division: string, page?: number }) => {
const response = await api.get(`mobile/calendar/history?user=${user}&search=${search}&division=${division}`); const response = await api.get(`mobile/calendar/history?user=${user}&search=${search}&division=${division}&page=${page}`);
return response.data; return response.data;
}; };
export const apiGetTask = async ({ user, status, search, division }: { user: string, status: string, search: string, division: string }) => { export const apiGetTask = async ({ user, status, search, division, page }: { user: string, status: string, search: string, division: string, page?: number }) => {
const response = await api.get(`mobile/task?user=${user}&status=${status}&division=${division}&search=${search}`); const response = await api.get(`mobile/task?user=${user}&status=${status}&division=${division}&search=${search}&page=${page}`);
return response.data; return response.data;
}; };