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}
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>
}

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() {
return (
<>
<Stack screenOptions={Headers.shadow}>
<Stack.Screen name="task/index" options={{
<>
<Stack screenOptions={Headers.shadow}>
<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() }} />,
title: 'Tugas Divisi',
headerTitle: 'Riwayat Acara',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightTaskList />
}} />
<Stack.Screen name="discussion/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Diskusi Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDiscussionList />
}} />
</Stack>
<StatusBar style="light" />
</>
)
}}
/>
</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 Skeleton from "@/components/skeleton";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetCalendarHistory } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native";
import { FlatList, Text, View, VirtualizedList } from "react-native";
type Props = {
dateStart: Date
@@ -21,47 +20,92 @@ export default function CalendarHistory() {
const [search, setSearch] = useState('')
const [loading, setLoading] = useState(true)
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 {
setLoading(true)
setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id });
setData(response.data);
const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id, page: thisPage });
if (thisPage == 1) {
setData(response.data)
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data])
} else {
return;
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad()
handleLoad(true, 1)
}, [search])
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
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} />
}
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
};
</View>
</ScrollView>
</SafeAreaView>
const getItem = (_data: unknown, index: number): Props => ({
dateStart: data[index].dateStart,
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 { router, useLocalSearchParams } from "expo-router";
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";
@@ -35,61 +35,97 @@ export default function DiscussionDivision() {
const update = useSelector((state: any) => state.discussionUpdate);
const [loading, setLoading] = useState(true)
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 {
setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussion({ user: hasil, search, division: id, active })
setData(response.data)
const response = await apiGetDiscussion({ user: hasil, search, division: id, active, page: thisPage })
if (thisPage == 1) {
setData(response.data)
} else if (thisPage > 1 && response.data.length > 0) {
setData([...data, ...response.data])
} else {
return;
}
} catch (error) {
console.error(error)
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad(false)
handleLoad(false, 1)
}, [update.data])
useEffect(() => {
handleLoad(true)
handleLoad(true, 1)
}, [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 (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace('./discussion?active=true') }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace('./discussion?active=false') }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />
<View>
{
loading ?
arrSkeleton.map((item: any, i: number) => {
<View style={[Styles.p15, { flex: 1 }]}>
<View>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.replace('./discussion?active=true') }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => { router.replace('./discussion?active=false') }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
n={2} />
</View>
<InputSearch onChange={setSearch} />
</View>
<View style={[{ flex: 2 }]}>
{
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 (
<SkeletonContent key={i} />
)
})
:
data.length > 0 ?
data.map((item, index) => (
<BorderBottomItem
key={index}
width={55}
@@ -112,15 +148,43 @@ export default function DiscussionDivision() {
}
rightBottomInfo={item.total_komentar + ' Komentar'}
/>
))
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
)
}
</View>
</View>
</ScrollView>
</SafeAreaView>
}}
keyExtractor={(item, index) => String(index)}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
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";
import { router, useLocalSearchParams } from "expo-router";
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";
type Props = {
@@ -39,125 +39,157 @@ export default function ListTask() {
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
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 {
setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetTask({
user: hasil,
division: id,
status: statusFix,
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) {
console.error(error);
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad(false)
handleLoad(false, 1)
}, [update.data])
useEffect(() => {
handleLoad(true);
handleLoad(true, 1);
}, [statusFix, search]);
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<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>
{
const loadMoreData = () => {
if (waiting) return
setTimeout(() => {
handleLoad(false, page + 1)
}, 1000);
}
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
const getItem = (_data: unknown, index: number): Props => ({
id: data[index].id,
title: data[index].title,
desc: data[index].desc,
status: data[index].status,
progress: data[index].progress,
member: data[index].member,
})
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 ? (
isList ? (
<View>
{data.map((item, index) => (
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
data.length > 0 ? (
isList ? (
<View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }) => (
<BorderBottomItem
key={index}
onPress={() => {
@@ -171,11 +203,35 @@ export default function ListTask() {
}
title={item.title}
/>
))}
</View>
) : (
<View>
{data.map((item, index) => (
)}
keyExtractor={(item, index) => index.toString()}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
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
key={index}
onPress={() => {
@@ -207,24 +263,55 @@ export default function ListTask() {
/>
</View>
</PaperGridContent>
))}
</View>
)
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)}
keyExtractor={(item, index) => index.toString()}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
{/* {data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
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>
</ScrollView>
</SafeAreaView>
}
</View>
</View>
);
}

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

@@ -17,7 +17,7 @@ import {
} from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
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";
type Props = {
@@ -44,10 +44,14 @@ export default function ListDivision() {
const [loading, setLoading] = useState(false)
const [status, setStatus] = useState<'true' | 'false'>('true')
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 {
setWaiting(true)
setLoading(loading)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDivision({
user: hasil,
@@ -55,172 +59,217 @@ export default function ListDivision() {
search: search,
group: String(group),
kategori: category,
page: thisPage
});
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);
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad(false);
handleLoad(false, 1);
}, [update]);
useEffect(() => {
handleLoad(true);
handleLoad(true, 1);
}, [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 (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
{
entityUser.role != "user" && entityUser.role != "coadmin" ?
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { setStatus("true") }}
label="Aktif"
icon={
<Feather
name="check-circle"
color={status == "false" ? "black" : "white"}
size={20}
/>
}
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}
<View style={[Styles.p15, { flex: 1 }]}>
<View>
{
entityUser.role != "user" && entityUser.role != "coadmin" ?
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { setStatus("true") }}
label="Aktif"
icon={
<Feather
name="check-circle"
color={status == "false" ? "black" : "white"}
size={20}
/>
}
n={2}
/>
</Pressable>
</View>
{(entityUser.role == "supadmin" ||
entityUser.role == "developer") && (
<View style={[Styles.mv05]}>
<Text>Filter : {nameGroup}</Text>
</View>
)}
<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>
}
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
<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>
{(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 ? (
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
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>
) : (
isList ? (
<View>
{data.map((item, index) => (
<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"
/>
))}
</View>
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`/division/${item.id}`);
}}
content="page"
title={item.name}
headerColor="primary"
contentPosition="top"
>
<Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
</PaperGridContent>
))}
</View>
)
<View>
<VirtualizedList
data={data}
style={[{ paddingBottom: 100 }]}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<PaperGridContent
key={index}
onPress={() => {
router.push(`/division/${item.id}`);
}}
content="page"
title={item.name}
headerColor="primary"
contentPosition="top"
>
<Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
</PaperGridContent>
)
}}
keyExtractor={(item, index) => String(index)}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
</View>
)
}
</View>
</ScrollView>
</SafeAreaView>
)
}
</View>
</View>
);
}

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

@@ -17,7 +17,7 @@ import {
} from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
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";
type Props = {
@@ -46,10 +46,14 @@ export default function ListProject() {
const update = useSelector((state: any) => state.projectUpdate)
const [loading, setLoading] = useState(true)
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 {
setLoading(loading)
setWaiting(true)
setPage(thisPage)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetProject({
user: hasil,
@@ -57,132 +61,187 @@ export default function ListProject() {
search: search,
group: String(group),
kategori: String(cat),
page: thisPage
});
if (response.success) {
setData(response.data);
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) {
console.error(error);
} finally {
setLoading(false)
setWaiting(false)
}
}
useEffect(() => {
handleLoad(false);
handleLoad(false, 1);
}, [update.data]);
useEffect(() => {
handleLoad(true);
handleLoad(true, 1);
}, [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 (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<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);
}}
>
<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={isList ? "format-list-bulleted" : "view-grid"}
color={"black"}
size={30}
name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"}
size={20}
/>
</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>
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
}
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 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
?
isList ? (
<View>
{data.map((item, index) => {
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
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 (
<BorderBottomItem
key={index}
@@ -202,11 +261,16 @@ export default function ListProject() {
title={item.title}
/>
);
})}
</View>
) : (
<View>
{data.map((item, index) => {
})
} */}
</View>
) : (
<View>
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<PaperGridContent
key={index}
@@ -242,16 +306,57 @@ export default function ListProject() {
</View>
</PaperGridContent>
);
})}
</View>
)
:
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada kegiatan</Text>
}}
keyExtractor={(item, index) => index.toString()}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
showsVerticalScrollIndicator={false}
/>
{/* {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>
</ScrollView>
</SafeAreaView>
)
:
<View style={[Styles.mt15]}>
<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 { Pressable, Text, TouchableWithoutFeedback, View } from "react-native";
import { Pressable, View } from "react-native";
type PropsBtnHeader = {
onPress: () => void;
@@ -8,7 +8,7 @@ type PropsBtnHeader = {
export function ButtonHeader({ onPress, item }: PropsBtnHeader) {
return (
<Pressable onPress={() => {onPress()}}>
<Pressable onPress={() => { onPress() }}>
<View style={[Styles.btnIconHeader]}>
{item}
</View>

20
lib/api.ts
View File

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