Compare commits
10 Commits
amalia/06-
...
amalia/08-
| Author | SHA1 | Date | |
|---|---|---|---|
| d31a21cc9c | |||
| 4af54980a0 | |||
| 4eebf2f893 | |||
| bc2c89e030 | |||
| d96c954559 | |||
| ca512372dd | |||
| d82f0c5b20 | |||
| fad89fc910 | |||
| e48456ea7f | |||
| d2e1663f9f |
@@ -1,11 +1,9 @@
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
import BorderBottomItem from "@/components/borderBottomItem";
|
||||
import BorderBottomItem2 from "@/components/borderBottomItem2";
|
||||
import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
|
||||
import DrawerBottom from "@/components/drawerBottom";
|
||||
import ImageUser from "@/components/imageNew";
|
||||
import { InputForm } from "@/components/inputForm";
|
||||
import LabelStatus from "@/components/labelStatus";
|
||||
import MenuItemRow from "@/components/menuItemRow";
|
||||
import ModalConfirmation from "@/components/ModalConfirmation";
|
||||
import Skeleton from "@/components/skeleton";
|
||||
@@ -271,29 +269,36 @@ export default function DetailDiscussionGeneral() {
|
||||
borderType="all"
|
||||
bgColor="white"
|
||||
icon={
|
||||
<View style={[Styles.iconContent]}>
|
||||
<MaterialIcons name="chat" size={25} color={'black'} />
|
||||
<View style={[Styles.discussionIconCircleLg, { backgroundColor: colors.icon + '20' }]}>
|
||||
<Feather name="message-circle" size={22} color={colors.icon} />
|
||||
</View>
|
||||
}
|
||||
title={data?.title}
|
||||
titleShowAll={true}
|
||||
subtitle={
|
||||
!data?.isActive ?
|
||||
<LabelStatus category='warning' text='ARSIP' size="small" />
|
||||
:
|
||||
<LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} size="small" />
|
||||
<View style={[Styles.discussionStatusPill, {
|
||||
borderColor: !data?.isActive
|
||||
? '#F59E0B'
|
||||
: data?.status == 1 ? '#10B981' : colors.dimmed + '80',
|
||||
}]}>
|
||||
<Text style={[Styles.discussionStatusText, {
|
||||
color: !data?.isActive
|
||||
? '#F59E0B'
|
||||
: data?.status == 1 ? '#10B981' : colors.dimmed,
|
||||
}]}>
|
||||
{!data?.isActive ? 'Arsip' : data?.status == 1 ? 'Buka' : 'Tutup'}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
desc={data?.desc}
|
||||
leftBottomInfo={
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>{dataKomentar.length} Komentar</Text>
|
||||
<Feather name="message-square" size={14} color={colors.dimmed} style={Styles.mr05} />
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dataKomentar.length} Komentar</Text>
|
||||
</View>
|
||||
}
|
||||
rightBottomInfo={
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>{data?.createdAt}</Text>
|
||||
</View>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{data?.createdAt}</Text>
|
||||
}
|
||||
/>
|
||||
}
|
||||
@@ -306,36 +311,56 @@ export default function DetailDiscussionGeneral() {
|
||||
)
|
||||
})
|
||||
:
|
||||
dataKomentar.map((item, i) => {
|
||||
return (
|
||||
<BorderBottomItem
|
||||
key={i}
|
||||
borderType="all"
|
||||
colorPress
|
||||
icon={
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
|
||||
dataKomentar.map((item, i) => (
|
||||
<Pressable
|
||||
key={i}
|
||||
onPress={() => {
|
||||
setDetailMore((prev: any) =>
|
||||
prev.includes(item.id)
|
||||
? prev.filter((id: string) => id !== item.id)
|
||||
: [...prev, item.id]
|
||||
)
|
||||
}}
|
||||
onLongPress={() => {
|
||||
item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
|
||||
}}
|
||||
style={({ pressed }) => [
|
||||
Styles.discussionCommentCard,
|
||||
{
|
||||
backgroundColor: pressed ? colors.icon + '10' : colors.card,
|
||||
borderColor: colors.icon + '20',
|
||||
}
|
||||
title={item.username}
|
||||
rightTopInfo={item.createdAt}
|
||||
desc={item.comment}
|
||||
rightBottomInfo={item.isEdited ? "Edited" : ""}
|
||||
descEllipsize={detailMore.includes(item.id) ? false : true}
|
||||
bgColor="white"
|
||||
onPress={() => {
|
||||
setDetailMore((prev: any) => {
|
||||
if (prev.includes(item.id)) {
|
||||
return prev.filter((id: string) => id !== item.id)
|
||||
} else {
|
||||
return [...prev, item.id]
|
||||
}
|
||||
})
|
||||
}}
|
||||
onLongPress={() => {
|
||||
item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})
|
||||
]}
|
||||
>
|
||||
<View style={Styles.flex1}>
|
||||
{/* Name + time */}
|
||||
<View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.mb05]}>
|
||||
<View style={[Styles.rowItemsCenter, { gap: 8, flex: 1, marginRight: 8 }]}>
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
|
||||
<Text style={[Styles.textMediumSemiBold, { color: colors.text }]} numberOfLines={1}>
|
||||
{item.username}
|
||||
</Text>
|
||||
{item.isEdited && (
|
||||
<Text style={[Styles.discussionEditedText, { color: colors.dimmed }]}>
|
||||
diedit
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<Text style={[Styles.discussionDateText, { color: colors.dimmed, flexShrink: 0 }]}>
|
||||
{item.createdAt}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Comment text */}
|
||||
<Text
|
||||
style={[Styles.textDefault, { color: colors.text }]}
|
||||
numberOfLines={detailMore.includes(item.id) ? 0 : 3}
|
||||
>
|
||||
{item.comment}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
@@ -372,15 +397,14 @@ export default function DetailDiscussionGeneral() {
|
||||
multiline
|
||||
focus={viewEdit}
|
||||
itemRight={
|
||||
<Pressable onPress={() => {
|
||||
(!loadingSendKomentar && selectKomentar.comment != '' && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
|
||||
&& handleEditKomentar()
|
||||
}}
|
||||
style={[
|
||||
Platform.OS == 'android' && Styles.mb12,
|
||||
]}
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
(!loadingSendKomentar && selectKomentar.comment != '' && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
|
||||
&& handleEditKomentar()
|
||||
}}
|
||||
style={[Platform.OS == 'android' && Styles.mb12]}
|
||||
>
|
||||
<MaterialIcons name="send" size={25} style={(loadingSendKomentar || selectKomentar.comment == '' || regexOnlySpacesOrEnter.test(selectKomentar.comment) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
|
||||
<MaterialIcons name="send" size={25} style={(loadingSendKomentar || selectKomentar.comment == '' || regexOnlySpacesOrEnter.test(selectKomentar.comment) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
|
||||
</Pressable>
|
||||
}
|
||||
/>
|
||||
@@ -398,15 +422,14 @@ export default function DetailDiscussionGeneral() {
|
||||
multiline
|
||||
focus={viewEdit}
|
||||
itemRight={
|
||||
<Pressable onPress={() => {
|
||||
(!loadingSendKomentar && komentar != '' && !regexOnlySpacesOrEnter.test(komentar) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
|
||||
&& handleKomentar()
|
||||
}}
|
||||
style={[
|
||||
Platform.OS == 'android' && Styles.mb12,
|
||||
]}
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
(!loadingSendKomentar && komentar != '' && !regexOnlySpacesOrEnter.test(komentar) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
|
||||
&& handleKomentar()
|
||||
}}
|
||||
style={[Platform.OS == 'android' && Styles.mb12]}
|
||||
>
|
||||
<MaterialIcons name="send" size={25} style={(loadingSendKomentar || komentar == '' || regexOnlySpacesOrEnter.test(komentar) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
|
||||
<MaterialIcons name="send" size={25} style={(loadingSendKomentar || komentar == '' || regexOnlySpacesOrEnter.test(komentar) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
|
||||
</Pressable>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -1,23 +1,20 @@
|
||||
import BorderBottomItem from "@/components/borderBottomItem";
|
||||
import ButtonTab from "@/components/buttonTab";
|
||||
import InputSearch from "@/components/inputSearch";
|
||||
import LabelStatus from "@/components/labelStatus";
|
||||
import SkeletonContent from "@/components/skeletonContent";
|
||||
import Text from "@/components/Text";
|
||||
import WrapTab from "@/components/wrapTab";
|
||||
import { ColorsStatus } from "@/constants/ColorsStatus";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiGetDiscussionGeneral } from "@/lib/api";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
|
||||
import { AntDesign, Feather } from "@expo/vector-icons";
|
||||
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { RefreshControl, View, VirtualizedList } from "react-native";
|
||||
import { FlatList, Pressable, RefreshControl, View } from "react-native";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
title: string
|
||||
@@ -38,7 +35,6 @@ export default function Discussion() {
|
||||
const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
|
||||
// TanStack Query for Discussions with Infinite Scroll
|
||||
const {
|
||||
data,
|
||||
fetchNextPage,
|
||||
@@ -50,12 +46,12 @@ export default function Discussion() {
|
||||
queryKey: ['discussions', { status, search, group }],
|
||||
queryFn: async ({ pageParam = 1 }) => {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiGetDiscussionGeneral({
|
||||
user: hasil,
|
||||
active: status,
|
||||
search: search,
|
||||
group: String(group),
|
||||
page: pageParam
|
||||
const response = await apiGetDiscussionGeneral({
|
||||
user: hasil,
|
||||
active: status,
|
||||
search: search,
|
||||
group: String(group),
|
||||
page: pageParam
|
||||
})
|
||||
return response;
|
||||
},
|
||||
@@ -67,17 +63,14 @@ export default function Discussion() {
|
||||
staleTime: 0,
|
||||
})
|
||||
|
||||
// Flatten pages into a single data array
|
||||
const flatData = useMemo(() => {
|
||||
return data?.pages.flatMap(page => page.data) || [];
|
||||
}, [data])
|
||||
|
||||
// Get nameGroup from the first available page
|
||||
const nameGroup = useMemo(() => {
|
||||
return data?.pages[0]?.filter?.name || "";
|
||||
}, [data])
|
||||
|
||||
// Refetch when manual update state changes
|
||||
useEffect(() => {
|
||||
refetch()
|
||||
}, [update, refetch])
|
||||
@@ -88,113 +81,129 @@ export default function Discussion() {
|
||||
setRefreshing(false)
|
||||
};
|
||||
|
||||
const loadMoreData = () => {
|
||||
if (hasNextPage && !isFetchingNextPage) {
|
||||
fetchNextPage()
|
||||
}
|
||||
};
|
||||
|
||||
const arrSkeleton = [0, 1, 2, 3, 4]
|
||||
|
||||
const getItem = (_data: unknown, index: number): Props => ({
|
||||
id: flatData[index]?.id,
|
||||
title: flatData[index]?.title,
|
||||
desc: flatData[index]?.desc,
|
||||
status: flatData[index]?.status,
|
||||
total_komentar: flatData[index]?.total_komentar,
|
||||
createdAt: flatData[index]?.createdAt,
|
||||
})
|
||||
const isOpen = (item: Props) => item.status === 1
|
||||
|
||||
return (
|
||||
<View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<View>
|
||||
{
|
||||
entityUser.role != "user" && entityUser.role != "coadmin" &&
|
||||
<View style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
{/* Header controls */}
|
||||
<View style={[Styles.ph15, { paddingTop: 12 }]}>
|
||||
{entityUser.role != "user" && entityUser.role != "coadmin" && (
|
||||
<WrapTab>
|
||||
<ButtonTab
|
||||
active={status == "false" ? "false" : "true"}
|
||||
value="true"
|
||||
onPress={() => { setStatus("true") }}
|
||||
onPress={() => setStatus("true")}
|
||||
label="Aktif"
|
||||
icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
|
||||
n={2} />
|
||||
n={2}
|
||||
/>
|
||||
<ButtonTab
|
||||
active={status == "false" ? "false" : "true"}
|
||||
value="false"
|
||||
onPress={() => { setStatus("false") }}
|
||||
onPress={() => setStatus("false")}
|
||||
label="Arsip"
|
||||
icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
|
||||
n={2} />
|
||||
n={2}
|
||||
/>
|
||||
</WrapTab>
|
||||
}
|
||||
|
||||
)}
|
||||
<InputSearch onChange={setSearch} />
|
||||
{
|
||||
(entityUser.role == "supadmin" || entityUser.role == "developer") &&
|
||||
<View style={[Styles.mv05, Styles.rowOnly]}>
|
||||
<Text>Filter :</Text>
|
||||
{(entityUser.role == "supadmin" || entityUser.role == "developer") && (
|
||||
<View style={[Styles.mv05, Styles.rowItemsCenter]}>
|
||||
<Text style={{ color: colors.dimmed, fontSize: 12 }}>Filter:</Text>
|
||||
<LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mh05]} />
|
||||
</View>
|
||||
}
|
||||
)}
|
||||
</View>
|
||||
<View style={[Styles.flex2, Styles.mt05]}>
|
||||
{
|
||||
isLoading ?
|
||||
arrSkeleton.map((item: any, i: number) => {
|
||||
return (
|
||||
<SkeletonContent key={i} />
|
||||
)
|
||||
})
|
||||
:
|
||||
flatData.length > 0
|
||||
?
|
||||
<VirtualizedList
|
||||
data={flatData}
|
||||
getItemCount={() => flatData.length}
|
||||
getItem={getItem}
|
||||
renderItem={({ item, index }: { item: Props, index: number }) => {
|
||||
return (
|
||||
<BorderBottomItem
|
||||
bgColor="transparent"
|
||||
key={index}
|
||||
onPress={() => { router.push(`/discussion/${item.id}`) }}
|
||||
borderType="bottom"
|
||||
icon={
|
||||
<MaterialIcons name="chat" size={25} color={colors.text} />
|
||||
}
|
||||
title={item.title}
|
||||
subtitle={
|
||||
status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
|
||||
}
|
||||
rightTopInfo={item.createdAt}
|
||||
desc={item.desc?.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
|
||||
leftBottomInfo={
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
|
||||
</View>
|
||||
}
|
||||
rightBottomInfo={`${item.total_komentar} Komentar`}
|
||||
|
||||
/>
|
||||
)
|
||||
}}
|
||||
keyExtractor={(item, index) => String(index)}
|
||||
onEndReached={loadMoreData}
|
||||
onEndReachedThreshold={0.5}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
}
|
||||
{/* List */}
|
||||
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}>
|
||||
{isLoading ? (
|
||||
[0, 1, 2, 3, 4].map((_, i) => <SkeletonContent key={i} />)
|
||||
) : flatData.length === 0 ? (
|
||||
<View style={[Styles.contentItemCenter, Styles.mt30]}>
|
||||
<Feather name="message-circle" size={42} color={colors.icon + '40'} />
|
||||
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
|
||||
Tidak ada diskusi
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={flatData}
|
||||
keyExtractor={(_, i) => String(i)}
|
||||
showsVerticalScrollIndicator={false}
|
||||
onEndReached={() => {
|
||||
if (hasNextPage && !isFetchingNextPage) fetchNextPage()
|
||||
}}
|
||||
onEndReachedThreshold={0.5}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
:
|
||||
<Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
|
||||
}
|
||||
}
|
||||
ItemSeparatorComponent={() => <View style={Styles.discussionSeparator} />}
|
||||
renderItem={({ item }: { item: Props }) => (
|
||||
<Pressable
|
||||
onPress={() => router.push(`/discussion/${item.id}`)}
|
||||
style={({ pressed }) => [
|
||||
Styles.discussionCard,
|
||||
{
|
||||
backgroundColor: pressed ? colors.icon + '10' : colors.card,
|
||||
borderColor: colors.icon + '20',
|
||||
}
|
||||
]}
|
||||
>
|
||||
{/* Top row: icon + title + status badge */}
|
||||
<View style={[Styles.rowItemsCenter, Styles.mb08]}>
|
||||
{/* Discussion icon */}
|
||||
<View style={[Styles.discussionIconCircle, { backgroundColor: colors.icon + '20' }]}>
|
||||
<Feather name="message-circle" size={20} color={colors.icon} />
|
||||
</View>
|
||||
|
||||
{/* Title + status badge */}
|
||||
<View style={[Styles.flex1, { marginLeft: 10 }]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]} numberOfLines={1}>
|
||||
{item.title}
|
||||
</Text>
|
||||
{status !== "false" && (
|
||||
<View style={[Styles.discussionStatusPill, { borderColor: isOpen(item) ? '#10B981' : colors.dimmed + '80' }]}>
|
||||
<Text style={[Styles.discussionStatusText, { color: isOpen(item) ? '#10B981' : colors.dimmed }]}>
|
||||
{isOpen(item) ? 'Buka' : 'Tutup'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
{item.desc ? (
|
||||
<Text
|
||||
style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{item.desc.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
|
||||
</Text>
|
||||
) : null}
|
||||
|
||||
{/* Bottom row: comment count + date */}
|
||||
<View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<Feather name="message-square" size={14} color={colors.dimmed} />
|
||||
<Text style={[Styles.discussionCommentText, { color: colors.dimmed }]}>
|
||||
{item.total_komentar} Komentar
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[Styles.discussionDateText, { color: colors.dimmed }]}>
|
||||
{item.createdAt}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
import BorderBottomItem from "@/components/borderBottomItem";
|
||||
import BorderBottomItem2 from "@/components/borderBottomItem2";
|
||||
import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussionDetail";
|
||||
import DrawerBottom from "@/components/drawerBottom";
|
||||
import ImageUser from "@/components/imageNew";
|
||||
import { InputForm } from "@/components/inputForm";
|
||||
import LabelStatus from "@/components/labelStatus";
|
||||
import MenuItemRow from "@/components/menuItemRow";
|
||||
import ModalConfirmation from "@/components/ModalConfirmation";
|
||||
import Skeleton from "@/components/skeleton";
|
||||
@@ -24,7 +22,7 @@ import {
|
||||
import { getDB } from "@/lib/firebaseDatabase";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
|
||||
import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
|
||||
import { ref } from "@react-native-firebase/database";
|
||||
import { useHeaderHeight } from '@react-navigation/elements';
|
||||
import { router, Stack, useLocalSearchParams } from "expo-router";
|
||||
@@ -87,24 +85,15 @@ export default function DiscussionDetail() {
|
||||
const [detailMore, setDetailMore] = useState<any>([])
|
||||
const entities = useSelector((state: any) => state.entities)
|
||||
const [isVisible, setVisible] = useState(false)
|
||||
const [selectKomentar, setSelectKomentar] = useState({
|
||||
id: '',
|
||||
comment: ''
|
||||
})
|
||||
const [selectKomentar, setSelectKomentar] = useState({ id: '', comment: '' })
|
||||
const [viewEdit, setViewEdit] = useState(false)
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const onValueChange = reference.on('value', snapshot => {
|
||||
if (snapshot.val() == null) {
|
||||
reference.set({ trigger: true })
|
||||
}
|
||||
if (snapshot.val() == null) { reference.set({ trigger: true }) }
|
||||
handleLoadComment(false)
|
||||
});
|
||||
|
||||
// Stop listening for updates when no longer required
|
||||
return () => reference.off('value', onValueChange);
|
||||
}, []);
|
||||
|
||||
@@ -115,23 +104,12 @@ export default function DiscussionDetail() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function handleLoad(loading: boolean) {
|
||||
try {
|
||||
setLoading(loading)
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiGetDiscussionOne({
|
||||
id: detail,
|
||||
user: hasil,
|
||||
cat: "data",
|
||||
});
|
||||
|
||||
const responseFile = await apiGetDiscussionOne({
|
||||
id: detail,
|
||||
user: hasil,
|
||||
cat: "file",
|
||||
});
|
||||
|
||||
const response = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "data" });
|
||||
const responseFile = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "file" });
|
||||
setData(response.data);
|
||||
setFileDiscussion(responseFile.data)
|
||||
setIsCreator(response.data.createdBy == hasil);
|
||||
@@ -146,11 +124,7 @@ export default function DiscussionDetail() {
|
||||
try {
|
||||
setLoadingKomentar(loading)
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiGetDiscussionOne({
|
||||
id: detail,
|
||||
user: hasil,
|
||||
cat: "comment",
|
||||
});
|
||||
const response = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "comment" });
|
||||
setDataComment(response.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@@ -162,17 +136,8 @@ export default function DiscussionDetail() {
|
||||
async function handleCheckMember() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiGetDivisionOneFeature({
|
||||
id,
|
||||
user: hasil,
|
||||
cat: "check-member",
|
||||
});
|
||||
|
||||
const response2 = await apiGetDivisionOneFeature({
|
||||
id,
|
||||
user: hasil,
|
||||
cat: "check-admin",
|
||||
});
|
||||
const response = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-member" });
|
||||
const response2 = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-admin" });
|
||||
setIsMemberDivision(response.data);
|
||||
setIsAdminDivision(response2.data);
|
||||
} catch (error) {
|
||||
@@ -180,33 +145,18 @@ export default function DiscussionDetail() {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(false);
|
||||
}, [update.data]);
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(true)
|
||||
handleLoadComment(true);
|
||||
handleCheckMember();
|
||||
}, []);
|
||||
useEffect(() => { handleLoad(false); }, [update.data]);
|
||||
useEffect(() => { handleLoad(true); handleLoadComment(true); handleCheckMember(); }, []);
|
||||
|
||||
async function handleKomentar() {
|
||||
try {
|
||||
setLoadingSend(true);
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiSendDiscussionCommentar({
|
||||
id: detail,
|
||||
data: { comment: komentar, user: hasil },
|
||||
});
|
||||
if (response.success) {
|
||||
setKomentar("")
|
||||
updateTrigger()
|
||||
}
|
||||
const response = await apiSendDiscussionCommentar({ id: detail, data: { comment: komentar, user: hasil } });
|
||||
if (response.success) { setKomentar(""); updateTrigger() }
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal menambahkan komentar"
|
||||
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan komentar" })
|
||||
} finally {
|
||||
setLoadingSend(false);
|
||||
}
|
||||
@@ -216,20 +166,11 @@ export default function DiscussionDetail() {
|
||||
try {
|
||||
setLoadingSend(true);
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiEditDiscussionCommentar({
|
||||
id: selectKomentar.id,
|
||||
data: { comment: selectKomentar.comment, user: hasil },
|
||||
});
|
||||
if (response.success) {
|
||||
updateTrigger()
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error : any ) {
|
||||
const response = await apiEditDiscussionCommentar({ id: selectKomentar.id, data: { comment: selectKomentar.comment, user: hasil } });
|
||||
if (response.success) { updateTrigger() } else { Toast.show({ type: 'small', text1: response.message }) }
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal mengedit komentar"
|
||||
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengedit komentar" })
|
||||
} finally {
|
||||
setLoadingSend(false);
|
||||
handleViewEditKomentar()
|
||||
@@ -240,20 +181,11 @@ export default function DiscussionDetail() {
|
||||
try {
|
||||
setLoadingSend(true);
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiDeleteDiscussionCommentar({
|
||||
id: selectKomentar.id,
|
||||
data: { user: hasil },
|
||||
});
|
||||
if (response.success) {
|
||||
updateTrigger()
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error : any ) {
|
||||
const response = await apiDeleteDiscussionCommentar({ id: selectKomentar.id, data: { user: hasil } });
|
||||
if (response.success) { updateTrigger() } else { Toast.show({ type: 'small', text1: response.message }) }
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal menghapus komentar"
|
||||
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus komentar" })
|
||||
} finally {
|
||||
setLoadingSend(false)
|
||||
setVisible(false)
|
||||
@@ -265,13 +197,11 @@ export default function DiscussionDetail() {
|
||||
setVisible(true)
|
||||
}
|
||||
|
||||
|
||||
function handleViewEditKomentar() {
|
||||
setVisible(false)
|
||||
setViewEdit(!viewEdit)
|
||||
}
|
||||
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true)
|
||||
handleLoad(false)
|
||||
@@ -280,27 +210,15 @@ export default function DiscussionDetail() {
|
||||
setRefreshing(false)
|
||||
};
|
||||
|
||||
const canWrite = data?.status != 2 && data?.isActive && ((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision)
|
||||
const isOpen = data?.status === 1
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
// headerLeft: () => (
|
||||
// <ButtonBackHeader
|
||||
// onPress={() => {
|
||||
// router.back();
|
||||
// }}
|
||||
// />
|
||||
// ),
|
||||
headerTitle: "Diskusi",
|
||||
headerTitleAlign: "center",
|
||||
// headerRight: () =>
|
||||
// (entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision || isCreator ?
|
||||
// <HeaderRightDiscussionDetail
|
||||
// id={detail}
|
||||
// status={data?.status}
|
||||
// isActive={data?.isActive}
|
||||
// /> : (<></>)
|
||||
// ,
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Diskusi"
|
||||
@@ -308,257 +226,177 @@ export default function DiscussionDetail() {
|
||||
onPressLeft={() => router.back()}
|
||||
right={
|
||||
((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision || isCreator) ?
|
||||
<HeaderRightDiscussionDetail
|
||||
id={detail}
|
||||
status={data?.status}
|
||||
isActive={data?.isActive}
|
||||
/> : (<></>)
|
||||
<HeaderRightDiscussionDetail id={detail} status={data?.status} isActive={data?.isActive} /> : undefined
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<View style={{ flex: 1, backgroundColor: colors.background }}>
|
||||
<View style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<ScrollView
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />}
|
||||
>
|
||||
<View style={[Styles.p15, Styles.mb100]}>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonContent />
|
||||
:
|
||||
<BorderBottomItem2
|
||||
dataFile={fileDiscussion}
|
||||
descEllipsize={false}
|
||||
bgColor="white"
|
||||
borderType="all"
|
||||
icon={
|
||||
<ImageUser
|
||||
src={`${ConstEnv.url_storage}/files/${data?.user_img}`}
|
||||
size="sm"
|
||||
/>
|
||||
}
|
||||
title={data?.username}
|
||||
subtitle={
|
||||
data?.isActive ? (
|
||||
data?.status == 1 ? (
|
||||
<LabelStatus category="success" text="BUKA" size="small" />
|
||||
) : (
|
||||
<LabelStatus category="error" text="TUTUP" size="small" />
|
||||
<View style={[Styles.p15]}>
|
||||
{loading ? (
|
||||
<SkeletonContent />
|
||||
) : (
|
||||
<BorderBottomItem2
|
||||
dataFile={fileDiscussion}
|
||||
descEllipsize={false}
|
||||
borderType="all"
|
||||
bgColor="white"
|
||||
icon={
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${data?.user_img}`} size="sm" />
|
||||
}
|
||||
title={data?.username}
|
||||
titleShowAll={true}
|
||||
subtitle={
|
||||
<View style={[Styles.discussionStatusPill, {
|
||||
borderColor: !data?.isActive ? '#F59E0B' : isOpen ? '#10B981' : colors.dimmed + '80',
|
||||
}]}>
|
||||
<Text style={[Styles.discussionStatusText, {
|
||||
color: !data?.isActive ? '#F59E0B' : isOpen ? '#10B981' : colors.dimmed,
|
||||
}]}>
|
||||
{!data?.isActive ? 'Arsip' : isOpen ? 'Buka' : 'Tutup'}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
desc={data?.desc}
|
||||
leftBottomInfo={
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<Feather name="message-square" size={14} color={colors.dimmed} style={Styles.mr05} />
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dataComment.length} Komentar</Text>
|
||||
</View>
|
||||
}
|
||||
rightBottomInfo={<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{data?.createdAt}</Text>}
|
||||
/>
|
||||
)}
|
||||
|
||||
<View style={Styles.mt10}>
|
||||
{loadingKomentar ? (
|
||||
arrSkeleton.map((_, i) => (
|
||||
<Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
|
||||
))
|
||||
) : (
|
||||
dataComment.map((item, i) => (
|
||||
<Pressable
|
||||
key={i}
|
||||
onPress={() => {
|
||||
setDetailMore((prev: any) =>
|
||||
prev.includes(item.id) ? prev.filter((id: string) => id !== item.id) : [...prev, item.id]
|
||||
)
|
||||
) : (
|
||||
<LabelStatus category="secondary" text="ARSIP" size="small" />
|
||||
)
|
||||
}
|
||||
rightTopInfo={data?.createdAt}
|
||||
desc={data?.desc}
|
||||
leftBottomInfo={
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<Ionicons
|
||||
name="chatbox-ellipses-outline"
|
||||
size={18}
|
||||
color="grey"
|
||||
style={Styles.mr05}
|
||||
/>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]} >
|
||||
{dataComment.length} Komentar
|
||||
}}
|
||||
onLongPress={() => {
|
||||
item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
|
||||
}}
|
||||
style={({ pressed }) => [
|
||||
Styles.discussionCommentCard,
|
||||
{ backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
|
||||
]}
|
||||
>
|
||||
<View style={Styles.flex1}>
|
||||
<View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.mb05]}>
|
||||
<View style={[Styles.rowItemsCenter, { gap: 8, flex: 1, marginRight: 8 }]}>
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
|
||||
<Text style={[Styles.textMediumSemiBold, { color: colors.text }]} numberOfLines={1}>
|
||||
{item.username}
|
||||
</Text>
|
||||
{item.isEdited && (
|
||||
<Text style={[Styles.discussionEditedText, { color: colors.dimmed }]}>diedit</Text>
|
||||
)}
|
||||
</View>
|
||||
<Text style={[Styles.discussionDateText, { color: colors.dimmed, flexShrink: 0 }]}>
|
||||
{item.createdAt}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={detailMore.includes(item.id) ? 0 : 3}>
|
||||
{item.comment}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
<View style={[Styles.mt10]}>
|
||||
{
|
||||
loadingKomentar ?
|
||||
arrSkeleton.map((item, index) => (
|
||||
<Skeleton key={index} width={100} widthType="percent" height={40} borderRadius={5} />
|
||||
))
|
||||
:
|
||||
dataComment.map((item, index) => (
|
||||
<BorderBottomItem
|
||||
key={index}
|
||||
borderType="all"
|
||||
colorPress
|
||||
icon={
|
||||
<ImageUser
|
||||
src={`${ConstEnv.url_storage}/files/${item.img}`}
|
||||
size="xs"
|
||||
/>
|
||||
}
|
||||
title={item.username}
|
||||
rightTopInfo={item.createdAt}
|
||||
desc={item.comment}
|
||||
rightBottomInfo={item.isEdited ? "Edited" : ""}
|
||||
descEllipsize={detailMore.includes(item.id) ? false : true}
|
||||
bgColor="white"
|
||||
onPress={() => {
|
||||
setDetailMore((prev: any) => {
|
||||
if (prev.includes(item.id)) {
|
||||
return prev.filter((id: string) => id !== item.id)
|
||||
} else {
|
||||
return [...prev, item.id]
|
||||
}
|
||||
})
|
||||
}}
|
||||
onLongPress={() => {
|
||||
item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
</Pressable>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
keyboardVerticalOffset={headerHeight}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
Styles.contentItemCenter,
|
||||
Styles.w100,
|
||||
{ backgroundColor: colors.background },
|
||||
viewEdit && Styles.borderTop
|
||||
]}
|
||||
>
|
||||
{
|
||||
viewEdit ?
|
||||
<>
|
||||
<View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<Feather name="edit-3" color={colors.text} size={22} style={[Styles.mh05]} />
|
||||
<Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text>
|
||||
</View>
|
||||
<Pressable onPress={() => handleViewEditKomentar()}>
|
||||
<MaterialIcons name="close" color={colors.text} size={22} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<InputForm
|
||||
bg={colors.card}
|
||||
type="default"
|
||||
round
|
||||
multiline
|
||||
placeholder="Kirim Komentar"
|
||||
onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
|
||||
value={selectKomentar.comment}
|
||||
itemRight={
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
selectKomentar.comment != "" &&
|
||||
!regexOnlySpacesOrEnter.test(selectKomentar.comment) &&
|
||||
!loadingSend &&
|
||||
data?.status != 2 &&
|
||||
data?.isActive &&
|
||||
(((entityUser.role == "user" ||
|
||||
entityUser.role == "coadmin") &&
|
||||
isMemberDivision) ||
|
||||
entityUser.role == "admin" ||
|
||||
entityUser.role == "supadmin" ||
|
||||
entityUser.role == "developer" ||
|
||||
entityUser.role == "cosupadmin") &&
|
||||
handleEditKomentar();
|
||||
}}
|
||||
style={[
|
||||
Platform.OS == 'android' && Styles.mb12,
|
||||
]}
|
||||
>
|
||||
<MaterialIcons
|
||||
name="send"
|
||||
size={25}
|
||||
style={
|
||||
[selectKomentar.comment == "" || regexOnlySpacesOrEnter.test(selectKomentar.comment) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
|
||||
? { color: colors.dimmed }
|
||||
: { color: colors.tint },
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Pressable>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
data?.status != 2 && data?.isActive && ((entityUser.role != "user" && entityUser.role != "coadmin") ||
|
||||
isMemberDivision)
|
||||
?
|
||||
<InputForm
|
||||
type="default"
|
||||
round
|
||||
multiline
|
||||
placeholder="Kirim Komentar"
|
||||
onChange={setKomentar}
|
||||
value={komentar}
|
||||
itemRight={
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
komentar != "" &&
|
||||
!regexOnlySpacesOrEnter.test(komentar) &&
|
||||
!loadingSend &&
|
||||
data?.status != 2 &&
|
||||
data?.isActive &&
|
||||
(((entityUser.role == "user" ||
|
||||
entityUser.role == "coadmin") &&
|
||||
isMemberDivision) ||
|
||||
entityUser.role == "admin" ||
|
||||
entityUser.role == "supadmin" ||
|
||||
entityUser.role == "developer" ||
|
||||
entityUser.role == "cosupadmin") &&
|
||||
handleKomentar();
|
||||
}}
|
||||
style={[
|
||||
Platform.OS == 'android' && Styles.mb12,
|
||||
]}
|
||||
>
|
||||
<MaterialIcons
|
||||
name="send"
|
||||
size={25}
|
||||
style={
|
||||
[komentar == "" || regexOnlySpacesOrEnter.test(komentar) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
|
||||
? { color: colors.dimmed }
|
||||
: { color: colors.tint }
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Pressable>
|
||||
}
|
||||
/>
|
||||
:
|
||||
<View style={[Styles.pv20, { alignItems: 'center' }]}>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>
|
||||
{
|
||||
data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota divisi yang dapat memberikan komentar"
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={headerHeight}>
|
||||
<View style={[Styles.contentItemCenter, Styles.w100, { backgroundColor: colors.background }, viewEdit && Styles.borderTop]}>
|
||||
{viewEdit ? (
|
||||
<>
|
||||
<View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<Feather name="edit-3" color={colors.text} size={22} style={Styles.mh05} />
|
||||
<Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
|
||||
</View>
|
||||
<Pressable onPress={() => handleViewEditKomentar()}>
|
||||
<MaterialIcons name="close" color={colors.text} size={22} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<InputForm
|
||||
bg={colors.card}
|
||||
type="default" round multiline
|
||||
placeholder="Kirim Komentar"
|
||||
onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
|
||||
value={selectKomentar.comment}
|
||||
itemRight={
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
selectKomentar.comment != "" && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && !loadingSend && data?.status != 2 && data?.isActive
|
||||
&& (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
|
||||
&& handleEditKomentar();
|
||||
}}
|
||||
style={[Platform.OS == 'android' && Styles.mb12]}
|
||||
>
|
||||
<MaterialIcons name="send" size={25}
|
||||
style={[
|
||||
selectKomentar.comment == "" || regexOnlySpacesOrEnter.test(selectKomentar.comment) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
|
||||
? { color: colors.dimmed } : { color: colors.tint },
|
||||
]}
|
||||
/>
|
||||
</Pressable>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
) : canWrite ? (
|
||||
<InputForm
|
||||
type="default" round multiline
|
||||
placeholder="Kirim Komentar"
|
||||
onChange={setKomentar} value={komentar}
|
||||
itemRight={
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
komentar != "" && !regexOnlySpacesOrEnter.test(komentar) && !loadingSend && data?.status != 2 && data?.isActive
|
||||
&& (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
|
||||
&& handleKomentar();
|
||||
}}
|
||||
style={[Platform.OS == 'android' && Styles.mb12]}
|
||||
>
|
||||
<MaterialIcons name="send" size={25}
|
||||
style={[
|
||||
komentar == "" || regexOnlySpacesOrEnter.test(komentar) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
|
||||
? { color: colors.dimmed } : { color: colors.tint },
|
||||
]}
|
||||
/>
|
||||
</Pressable>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<View style={[Styles.pv20, Styles.itemsCenter]}>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>
|
||||
{data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota divisi yang dapat memberikan komentar"}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
|
||||
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
|
||||
title="Edit"
|
||||
onPress={() => { handleViewEditKomentar() }}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
|
||||
title="Hapus"
|
||||
onPress={() => {
|
||||
setVisible(false)
|
||||
setTimeout(() => {
|
||||
setShowDeleteModal(true)
|
||||
}, 600)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />} title="Edit" onPress={() => handleViewEditKomentar()} />
|
||||
<MenuItemRow icon={<MaterialIcons name="delete-outline" color={colors.text} size={25} />} title="Hapus" onPress={() => { setVisible(false); setTimeout(() => setShowDeleteModal(true), 600) }} />
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
@@ -566,10 +404,7 @@ export default function DiscussionDetail() {
|
||||
visible={showDeleteModal}
|
||||
title="Konfirmasi"
|
||||
message="Apakah anda yakin ingin menghapus komentar?"
|
||||
onConfirm={() => {
|
||||
setShowDeleteModal(false)
|
||||
handleDeleteKomentar()
|
||||
}}
|
||||
onConfirm={() => { setShowDeleteModal(false); handleDeleteKomentar() }}
|
||||
onCancel={() => setShowDeleteModal(false)}
|
||||
confirmText="Hapus"
|
||||
cancelText="Batal"
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import BorderBottomItem from "@/components/borderBottomItem";
|
||||
import ButtonTab from "@/components/buttonTab";
|
||||
import ImageUser from "@/components/imageNew";
|
||||
import InputSearch from "@/components/inputSearch";
|
||||
import LabelStatus from "@/components/labelStatus";
|
||||
import SkeletonContent from "@/components/skeletonContent";
|
||||
import Text from "@/components/Text";
|
||||
import WrapTab from "@/components/wrapTab";
|
||||
@@ -11,13 +9,12 @@ import Styles from "@/constants/Styles";
|
||||
import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
|
||||
import { AntDesign, Feather } from "@expo/vector-icons";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { RefreshControl, View, VirtualizedList } from "react-native";
|
||||
import { FlatList, Pressable, RefreshControl, View } from "react-native";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
type Props = {
|
||||
id: string,
|
||||
title: string,
|
||||
@@ -30,7 +27,6 @@ type Props = {
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
|
||||
export default function DiscussionDivision() {
|
||||
const { colors } = useTheme();
|
||||
const { id, active } = useLocalSearchParams<{ id: string, active?: string }>()
|
||||
@@ -51,17 +47,8 @@ export default function DiscussionDivision() {
|
||||
async function handleCheckMember() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiGetDivisionOneFeature({
|
||||
id,
|
||||
user: hasil,
|
||||
cat: "check-member",
|
||||
});
|
||||
|
||||
const response2 = await apiGetDivisionOneFeature({
|
||||
id,
|
||||
user: hasil,
|
||||
cat: "check-admin",
|
||||
});
|
||||
const response = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-member" });
|
||||
const response2 = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-admin" });
|
||||
setIsMemberDivision(response.data);
|
||||
setIsAdminDivision(response2.data);
|
||||
} catch (error) {
|
||||
@@ -80,8 +67,6 @@ export default function DiscussionDivision() {
|
||||
setData(response.data)
|
||||
} else if (thisPage > 1 && response.data.length > 0) {
|
||||
setData([...data, ...response.data])
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
@@ -91,26 +76,15 @@ export default function DiscussionDivision() {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(false, 1)
|
||||
}, [update.data])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(true, 1)
|
||||
}, [status, search])
|
||||
useEffect(() => { handleLoad(false, 1) }, [update.data])
|
||||
useEffect(() => { handleLoad(true, 1) }, [status, search])
|
||||
useEffect(() => { handleCheckMember() }, [])
|
||||
|
||||
const loadMoreData = () => {
|
||||
if (waiting) return
|
||||
setTimeout(() => {
|
||||
handleLoad(false, page + 1)
|
||||
}, 1000);
|
||||
setTimeout(() => { handleLoad(false, page + 1) }, 1000);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleCheckMember()
|
||||
}, [])
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true)
|
||||
handleLoad(false, 1)
|
||||
@@ -118,100 +92,101 @@ export default function DiscussionDivision() {
|
||||
setRefreshing(false)
|
||||
};
|
||||
|
||||
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,
|
||||
})
|
||||
const isOpen = (item: Props) => item.status === 1
|
||||
|
||||
return (
|
||||
<View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
|
||||
{
|
||||
((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
|
||||
<View>
|
||||
<View style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
{((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && (
|
||||
<View style={[Styles.ph15, { paddingTop: 12 }]}>
|
||||
<WrapTab>
|
||||
<ButtonTab
|
||||
active={status == "false" ? "false" : "true"}
|
||||
value="true"
|
||||
onPress={() => { setStatus("true") }}
|
||||
onPress={() => setStatus("true")}
|
||||
label="Aktif"
|
||||
icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
|
||||
n={2} />
|
||||
n={2}
|
||||
/>
|
||||
<ButtonTab
|
||||
active={status == "false" ? "false" : "true"}
|
||||
value="false"
|
||||
onPress={() => { setStatus("false") }}
|
||||
onPress={() => setStatus("false")}
|
||||
label="Arsip"
|
||||
icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
|
||||
n={2} />
|
||||
n={2}
|
||||
/>
|
||||
</WrapTab>
|
||||
<InputSearch onChange={setSearch} />
|
||||
</View>
|
||||
}
|
||||
)}
|
||||
|
||||
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}>
|
||||
{loading ? (
|
||||
arrSkeleton.map((_, i) => <SkeletonContent key={i} />)
|
||||
) : data.length === 0 ? (
|
||||
<View style={[Styles.contentItemCenter, Styles.mt30]}>
|
||||
<Feather name="message-circle" size={42} color={colors.icon + '40'} />
|
||||
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
|
||||
Tidak ada diskusi
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={data}
|
||||
keyExtractor={(_, i) => String(i)}
|
||||
showsVerticalScrollIndicator={false}
|
||||
onEndReached={loadMoreData}
|
||||
onEndReachedThreshold={0.5}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />
|
||||
}
|
||||
ItemSeparatorComponent={() => <View style={Styles.discussionSeparator} />}
|
||||
renderItem={({ item }: { item: Props }) => (
|
||||
<Pressable
|
||||
onPress={() => router.push(`./discussion/${item.id}`)}
|
||||
style={({ pressed }) => [
|
||||
Styles.discussionCard,
|
||||
{ backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
|
||||
]}
|
||||
>
|
||||
<View style={[Styles.rowItemsCenter, Styles.mb08]}>
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
|
||||
<View style={[Styles.flex1, { marginLeft: 10 }]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]} numberOfLines={1}>
|
||||
{item.user_name}
|
||||
</Text>
|
||||
{status === "true" && (
|
||||
<View style={[Styles.discussionStatusPill, { borderColor: isOpen(item) ? '#10B981' : colors.dimmed + '80' }]}>
|
||||
<Text style={[Styles.discussionStatusText, { color: isOpen(item) ? '#10B981' : colors.dimmed }]}>
|
||||
{isOpen(item) ? 'Buka' : 'Tutup'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[{ flex: 2 }, Styles.mt05]}>
|
||||
{
|
||||
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 (
|
||||
<BorderBottomItem
|
||||
key={index}
|
||||
onPress={() => { router.push(`./discussion/${item.id}`) }}
|
||||
borderType="bottom"
|
||||
icon={
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
|
||||
}
|
||||
title={item.user_name}
|
||||
subtitle={
|
||||
status == "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={colors.dimmed} style={Styles.mr05} />
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
|
||||
</View>
|
||||
}
|
||||
rightBottomInfo={item.total_komentar + ' Komentar'}
|
||||
bgColor="transparent"
|
||||
/>
|
||||
)
|
||||
}}
|
||||
keyExtractor={(item, index) => String(index)}
|
||||
onEndReached={loadMoreData}
|
||||
onEndReachedThreshold={0.5}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
:
|
||||
(<Text style={[Styles.textDefault, Styles.mv10, { textAlign: "center", color: colors.dimmed }]}>Tidak ada diskusi</Text>)
|
||||
}
|
||||
{item.desc ? (
|
||||
<Text style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]} numberOfLines={2}>
|
||||
{item.desc}
|
||||
</Text>
|
||||
) : null}
|
||||
|
||||
<View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<Feather name="message-square" size={14} color={colors.dimmed} />
|
||||
<Text style={[Styles.discussionCommentText, { color: colors.dimmed }]}>
|
||||
{item.total_komentar} Komentar
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[Styles.discussionDateText, { color: colors.dimmed }]}>
|
||||
{item.createdAt}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,7 +154,7 @@ export default function DetailTaskDivision() {
|
||||
}
|
||||
<SectionProgress progress={progress} doneCount={taskStats?.done} totalCount={taskStats?.total} />
|
||||
<SectionReportTask refreshing={refreshing} />
|
||||
<SectionTanggalTugasTask refreshing={refreshing} isMemberDivision={isMemberDivision} />
|
||||
<SectionTanggalTugasTask refreshing={refreshing} isMemberDivision={isMemberDivision} isAdminDivision={isAdminDivision} status={data?.status} />
|
||||
<SectionFileTask refreshing={refreshing} isMemberDivision={isMemberDivision} />
|
||||
<SectionLinkTask refreshing={refreshing} isMemberDivision={isMemberDivision} />
|
||||
<SectionMemberTask refreshing={refreshing} isAdminDivision={isAdminDivision} />
|
||||
|
||||
@@ -21,6 +21,7 @@ import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Pressable, RefreshControl, ScrollView, View, VirtualizedList } from "react-native";
|
||||
import { useSelector } from "react-redux";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
@@ -36,6 +37,18 @@ export default function ListTask() {
|
||||
const { id, status, year } = useLocalSearchParams<{ id: string; status: string; year: string }>()
|
||||
const [isList, setList] = useState(false)
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
|
||||
useEffect(() => {
|
||||
AsyncStorage.getItem('division_view_mode').then((val) => {
|
||||
if (val !== null) setList(val === 'list')
|
||||
})
|
||||
}, [])
|
||||
|
||||
function toggleView() {
|
||||
const next = !isList
|
||||
setList(next)
|
||||
AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
|
||||
}
|
||||
const [data, setData] = useState<Props[]>([])
|
||||
const [search, setSearch] = useState("")
|
||||
const update = useSelector((state: any) => state.taskUpdate)
|
||||
@@ -172,13 +185,9 @@ export default function ListTask() {
|
||||
n={4}
|
||||
/>
|
||||
</ScrollView>
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
|
||||
<InputSearch width={68} onChange={setSearch} />
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setList(!isList);
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={toggleView}>
|
||||
<MaterialCommunityIcons
|
||||
name={isList ? "format-list-bulleted" : "view-grid"}
|
||||
color={colors.text}
|
||||
@@ -219,9 +228,10 @@ export default function ListTask() {
|
||||
router.push(`./task/${item.id}`);
|
||||
}}
|
||||
borderType="bottom"
|
||||
bgColor="transparent"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
|
||||
<AntDesign name="areachart" size={25} color={"#384288"} />
|
||||
<View style={[Styles.iconContent]}>
|
||||
<AntDesign name="areachart" size={25} color={"black"} />
|
||||
</View>
|
||||
}
|
||||
title={item.title}
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
Ionicons,
|
||||
MaterialCommunityIcons
|
||||
} from "@expo/vector-icons";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
@@ -37,6 +38,18 @@ export default function ListDivision() {
|
||||
cat?: string;
|
||||
}>();
|
||||
const [isList, setList] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
AsyncStorage.getItem('division_view_mode').then((val) => {
|
||||
if (val !== null) setList(val === 'list')
|
||||
})
|
||||
}, [])
|
||||
|
||||
function toggleView() {
|
||||
const next = !isList
|
||||
setList(next)
|
||||
AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
|
||||
}
|
||||
const entityUser = useSelector((state: any) => state.user)
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const { colors } = useTheme();
|
||||
@@ -184,11 +197,7 @@ export default function ListDivision() {
|
||||
|
||||
<View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
|
||||
<InputSearch width={68} onChange={setSearch} />
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setList(!isList);
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={toggleView}>
|
||||
<MaterialCommunityIcons
|
||||
name={isList ? "format-list-bulleted" : "view-grid"}
|
||||
color={colors.text}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
import ImageUser from "@/components/imageNew";
|
||||
import ItemDetailMember from "@/components/itemDetailMember";
|
||||
import LabelStatus from "@/components/labelStatus";
|
||||
import HeaderRightMemberDetail from "@/components/member/headerMemberDetail";
|
||||
import Skeleton from "@/components/skeleton";
|
||||
@@ -11,6 +10,7 @@ import { valueRoleUser } from "@/constants/RoleUser";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiGetProfile } from "@/lib/api";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { router, Stack, useLocalSearchParams } from "expo-router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
@@ -30,6 +30,7 @@ type Props = {
|
||||
group: string,
|
||||
img: string,
|
||||
isActive: boolean,
|
||||
isApprover: boolean,
|
||||
role: string
|
||||
}
|
||||
|
||||
@@ -89,7 +90,7 @@ export default function MemberDetail() {
|
||||
showBack={true}
|
||||
onPressLeft={() => router.back()}
|
||||
right={
|
||||
(entityUser.role != "user") && isEdit ? <HeaderRightMemberDetail active={data?.isActive} id={id} /> : <></>
|
||||
(entityUser.role != "user") && isEdit ? <HeaderRightMemberDetail active={data?.isActive} id={id} isApprover={data?.isApprover ?? false} /> : <></>
|
||||
}
|
||||
/>
|
||||
)
|
||||
@@ -109,51 +110,71 @@ export default function MemberDetail() {
|
||||
colors={[colors.header, colors.homeGradient]}
|
||||
style={[Styles.wrapHeadViewMember]}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<>
|
||||
<Skeleton width={100} height={100} borderRadius={100} />
|
||||
<Skeleton width={200} height={10} borderRadius={5} />
|
||||
<Skeleton width={150} height={10} borderRadius={5} />
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<Pressable onPress={() => setPreview(true)}>
|
||||
{loading ? (
|
||||
<>
|
||||
<Skeleton width={100} height={100} borderRadius={100} />
|
||||
<Skeleton width={200} height={10} borderRadius={5} />
|
||||
<Skeleton width={150} height={10} borderRadius={5} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Pressable onPress={() => setPreview(true)}>
|
||||
<View style={[Styles.memberAvatarRing]}>
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" onError={setErrorImg} />
|
||||
</Pressable>
|
||||
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{data?.name}</Text>
|
||||
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
|
||||
</>
|
||||
|
||||
}
|
||||
</View>
|
||||
</Pressable>
|
||||
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{data?.name}</Text>
|
||||
<Text style={[Styles.textMediumNormal, Styles.cWhiteDimmed]}>{data?.role}</Text>
|
||||
<View style={[Styles.memberBadgeRow]}>
|
||||
{data?.isApprover && (
|
||||
<View style={[Styles.memberBadgeApprover]}>
|
||||
<Text style={[Styles.textSmallSemiBold, Styles.cWhite]}>APPROVER</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={[Styles.memberBadgePill, { backgroundColor: data?.isActive ? colors.success : colors.error }]}>
|
||||
<Text style={[Styles.textSmallSemiBold, Styles.cWhite]}>{data?.isActive ? 'AKTIF' : 'TIDAK AKTIF'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</LinearGradient>
|
||||
<View style={[Styles.p15]}>
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
|
||||
<LabelStatus
|
||||
size="small"
|
||||
category={data?.isActive ? 'success' : 'error'}
|
||||
text={data?.isActive ? 'AKTIF' : 'TIDAK AKTIF'}
|
||||
/>
|
||||
</View>
|
||||
{
|
||||
loading ?
|
||||
arrSkeleton.map((item, index) => {
|
||||
return (
|
||||
<Skeleton key={index} width={100} widthType="percent" height={25} borderRadius={5} />
|
||||
)
|
||||
})
|
||||
:
|
||||
<>
|
||||
<ItemDetailMember category="nik" value={data?.nik} />
|
||||
<ItemDetailMember category="group" value={data?.group} />
|
||||
<ItemDetailMember category="position" value={data?.position} />
|
||||
<ItemDetailMember category="phone" value={`+62${data?.phone}`} />
|
||||
<ItemDetailMember category="email" value={data?.email} />
|
||||
<ItemDetailMember category="gender" value={data?.gender == "F" ? "Perempuan" : "Laki-Laki"} />
|
||||
</>
|
||||
}
|
||||
|
||||
<View style={[Styles.p15]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.mb08, { color: colors.dimmed }]}>Informasi</Text>
|
||||
<View>
|
||||
{loading ? (
|
||||
arrSkeleton.map((_, index) => (
|
||||
<View key={index} style={[Styles.pv14, { borderBottomWidth: index < arrSkeleton.length - 1 ? 1 : 0, borderBottomColor: `${colors.dimmed}30` }]}>
|
||||
<Skeleton width={80} height={8} borderRadius={4} />
|
||||
<View style={[Styles.mt05]}>
|
||||
<Skeleton width={60} widthType="percent" height={10} borderRadius={4} />
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
[
|
||||
{ icon: <MaterialCommunityIcons name="card-account-details" size={20} color={colors.icon} />, label: 'NIK', value: data?.nik },
|
||||
{ icon: <MaterialCommunityIcons name="office-building-outline" size={20} color={colors.icon} />, label: 'Lembaga Desa', value: data?.group },
|
||||
{ icon: <MaterialCommunityIcons name="account-tie" size={20} color={colors.icon} />, label: 'Jabatan', value: data?.position },
|
||||
{ icon: <MaterialIcons name="phone" size={20} color={colors.icon} />, label: 'No Telepon', value: `+62${data?.phone}` },
|
||||
{ icon: <MaterialIcons name="email" size={20} color={colors.icon} />, label: 'Email', value: data?.email },
|
||||
{ icon: <MaterialCommunityIcons name="gender-male-female" size={20} color={colors.icon} />, label: 'Jenis Kelamin', value: data?.gender == "F" ? "Perempuan" : "Laki-Laki" },
|
||||
].map((item, index, arr) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[Styles.memberInfoRow, { borderBottomWidth: index < arr.length - 1 ? 1 : 0, borderBottomColor: `${colors.dimmed}30` }]}
|
||||
>
|
||||
<View style={[Styles.memberInfoIcon]}>
|
||||
{item.icon}
|
||||
</View>
|
||||
<View style={[Styles.memberInfoContent]}>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{item.label}</Text>
|
||||
<Text style={[Styles.textDefault, Styles.mt02, { color: colors.text }]} numberOfLines={1}>{item.value ?? '-'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
|
||||
@@ -171,11 +171,9 @@ export default function EditMember() {
|
||||
}
|
||||
|
||||
function checkForm() {
|
||||
if (Object.values(error).some((v) => v == true) || Object.values(data).some((v) => v == "")) {
|
||||
setDisableBtn(true)
|
||||
} else {
|
||||
setDisableBtn(false)
|
||||
}
|
||||
const requiredFields: (keyof Props)[] = ["idPosition", "idUserRole", "nik", "name", "email", "phone", "gender"];
|
||||
const hasEmpty = requiredFields.some((key) => data[key] === "");
|
||||
setDisableBtn(Object.values(error).some((v) => v === true) || hasEmpty);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
import BorderBottomItemVertical from "@/components/borderBottomItemVertical";
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
import ModalConfirmation from "@/components/ModalConfirmation";
|
||||
import SkeletonTwoItem from "@/components/skeletonTwoItem";
|
||||
import Text from "@/components/Text";
|
||||
import { ColorsStatus } from "@/constants/ColorsStatus";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiGetNotification, apiReadOneNotification } from "@/lib/api";
|
||||
import { apiGetNotification, apiReadAllNotification, apiReadOneNotification } from "@/lib/api";
|
||||
import { setUpdateNotification } from "@/lib/notificationSlice";
|
||||
import { pushToPage } from "@/lib/pushToPage";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import { router, Stack } from "expo-router";
|
||||
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { RefreshControl, SafeAreaView, View, VirtualizedList } from "react-native";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { FlatList, Pressable, RefreshControl, SafeAreaView, View } from "react-native";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useState } from "react";
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
@@ -24,6 +26,22 @@ type Props = {
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
type HeaderRow = { _type: 'header'; date: string }
|
||||
type ItemRow = Props & { _type: 'item' }
|
||||
type ListRow = HeaderRow | ItemRow
|
||||
|
||||
function getNotifStyle(category: string): { icon: keyof typeof Feather.glyphMap; color: string } {
|
||||
if (category === 'announcement') return { icon: 'volume-2', color: '#3B82F6' }
|
||||
if (category === 'project') return { icon: 'activity', color: '#10B981' }
|
||||
if (category.includes('/task')) return { icon: 'clipboard', color: '#8B5CF6' }
|
||||
if (category === 'division') return { icon: 'users', color: '#3B82F6' }
|
||||
if (category.includes('/discussion') || category === 'discussion-general') return { icon: 'message-square', color: '#06B6D4' }
|
||||
if (category.includes('/calendar')) return { icon: 'calendar', color: '#F59E0B' }
|
||||
if (category.includes('/document')) return { icon: 'file-text', color: '#FBBF24' }
|
||||
if (category === 'member') return { icon: 'user', color: '#1F3C88' }
|
||||
return { icon: 'bell', color: '#6B7280' }
|
||||
}
|
||||
|
||||
export default function Notification() {
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const { colors } = useTheme();
|
||||
@@ -31,8 +49,9 @@ export default function Notification() {
|
||||
const dispatch = useDispatch()
|
||||
const updateNotification = useSelector((state: any) => state.notificationUpdate)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [markingAll, setMarkingAll] = useState(false)
|
||||
const [showConfirm, setShowConfirm] = useState(false)
|
||||
|
||||
// TanStack Query for Notifications with Infinite Scroll
|
||||
const {
|
||||
data,
|
||||
fetchNextPage,
|
||||
@@ -55,12 +74,31 @@ export default function Notification() {
|
||||
staleTime: 0,
|
||||
})
|
||||
|
||||
// Flatten pages into a single data array
|
||||
const flatData = useMemo(() => {
|
||||
return data?.pages.flatMap(page => page.data) || [];
|
||||
}, [data])
|
||||
|
||||
// Refetch when manual update state changes
|
||||
const listData = useMemo<ListRow[]>(() => {
|
||||
const groups: Record<string, Props[]> = {}
|
||||
const dateOrder: string[] = []
|
||||
|
||||
flatData.forEach((item) => {
|
||||
if (!groups[item.createdAt]) {
|
||||
groups[item.createdAt] = []
|
||||
dateOrder.push(item.createdAt)
|
||||
}
|
||||
groups[item.createdAt].push(item)
|
||||
})
|
||||
|
||||
const result: ListRow[] = []
|
||||
dateOrder.forEach((date) => {
|
||||
result.push({ _type: 'header', date })
|
||||
const sorted = [...groups[date]].sort((a, b) => Number(a.isRead) - Number(b.isRead))
|
||||
sorted.forEach((item) => result.push({ ...item, _type: 'item' }))
|
||||
})
|
||||
return result
|
||||
}, [flatData])
|
||||
|
||||
useEffect(() => {
|
||||
refetch()
|
||||
}, [updateNotification, refetch])
|
||||
@@ -71,16 +109,26 @@ export default function Notification() {
|
||||
setRefreshing(false)
|
||||
};
|
||||
|
||||
const loadMoreData = () => {
|
||||
if (hasNextPage && !isFetchingNextPage) {
|
||||
fetchNextPage()
|
||||
const hasUnread = flatData.some((item) => !item.isRead)
|
||||
|
||||
async function handleReadAll() {
|
||||
try {
|
||||
setMarkingAll(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
await apiReadAllNotification({ user: hasil })
|
||||
await queryClient.invalidateQueries({ queryKey: ['notifications'] })
|
||||
dispatch(setUpdateNotification(!updateNotification))
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setMarkingAll(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function handleReadNotification(id: string, category: string, idContent: string) {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiReadOneNotification({ user: hasil, id: id })
|
||||
await apiReadOneNotification({ user: hasil, id: id })
|
||||
await queryClient.invalidateQueries({ queryKey: ['notifications'] })
|
||||
pushToPage(category, idContent)
|
||||
dispatch(setUpdateNotification(!updateNotification))
|
||||
@@ -89,70 +137,141 @@ export default function Notification() {
|
||||
}
|
||||
}
|
||||
|
||||
const arrSkeleton = [0, 1, 2, 3, 4]
|
||||
|
||||
const getItem = (_data: unknown, index: number): Props => ({
|
||||
id: flatData[index]?.id,
|
||||
title: flatData[index]?.title,
|
||||
desc: flatData[index]?.desc,
|
||||
category: flatData[index]?.category,
|
||||
idContent: flatData[index]?.idContent,
|
||||
isRead: flatData[index]?.isRead,
|
||||
createdAt: flatData[index]?.createdAt,
|
||||
});
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<View style={[Styles.p15]}>
|
||||
{
|
||||
isLoading ?
|
||||
arrSkeleton.map((item, index) => {
|
||||
return (
|
||||
<SkeletonTwoItem key={index} />
|
||||
)
|
||||
})
|
||||
:
|
||||
flatData.length > 0 ?
|
||||
<VirtualizedList
|
||||
data={flatData}
|
||||
getItemCount={() => flatData.length}
|
||||
getItem={getItem}
|
||||
renderItem={({ item, index }: { item: Props, index: number }) => {
|
||||
return (
|
||||
<BorderBottomItemVertical
|
||||
borderType="bottom"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, item.isRead && ColorsStatus.secondary]}>
|
||||
<Feather name="bell" size={25} color="black" />
|
||||
</View>
|
||||
}
|
||||
title={item.title}
|
||||
rightTopInfo={item.createdAt}
|
||||
desc={item.desc}
|
||||
textColor={item.isRead ? 'gray' : colors.text}
|
||||
onPress={() => {
|
||||
handleReadNotification(item.id, item.category, item.idContent)
|
||||
}}
|
||||
bgColor={'transparent'}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
keyExtractor={(item, index) => String(index)}
|
||||
onEndReached={loadMoreData}
|
||||
onEndReachedThreshold={0.5}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
}
|
||||
<Stack.Screen
|
||||
options={{
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Notifikasi"
|
||||
showBack={true}
|
||||
onPressLeft={() => router.back()}
|
||||
right={
|
||||
hasUnread ? (
|
||||
<Pressable
|
||||
onPress={() => setShowConfirm(true)}
|
||||
disabled={markingAll}
|
||||
style={{ opacity: markingAll ? 0.5 : 1, padding: 4 }}
|
||||
>
|
||||
<Feather name="check-square" size={22} color="white" />
|
||||
</Pressable>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
|
||||
<ModalConfirmation
|
||||
visible={showConfirm}
|
||||
title="Tandai Semua Dibaca"
|
||||
message="Semua notifikasi akan ditandai sebagai telah dibaca."
|
||||
confirmText="Tandai"
|
||||
cancelText="Batal"
|
||||
onConfirm={() => {
|
||||
setShowConfirm(false)
|
||||
handleReadAll()
|
||||
}}
|
||||
onCancel={() => setShowConfirm(false)}
|
||||
/>
|
||||
|
||||
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 10 }]}>
|
||||
{isLoading ? (
|
||||
[0, 1, 2, 3, 4].map((_, i) => <SkeletonTwoItem key={i} />)
|
||||
) : flatData.length === 0 ? (
|
||||
<View style={[Styles.contentItemCenter, Styles.mt30]}>
|
||||
<Feather name="bell-off" size={42} color={colors.icon + '40'} />
|
||||
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
|
||||
Tidak ada notifikasi
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={listData}
|
||||
keyExtractor={(item, index) => String(index)}
|
||||
showsVerticalScrollIndicator={false}
|
||||
onEndReached={() => {
|
||||
if (hasNextPage && !isFetchingNextPage) fetchNextPage()
|
||||
}}
|
||||
onEndReachedThreshold={0.5}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
:
|
||||
<Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
|
||||
}
|
||||
}
|
||||
renderItem={({ item }) => {
|
||||
if (item._type === 'header') {
|
||||
return (
|
||||
<View style={[Styles.rowItemsCenter, { marginTop: 16, marginBottom: 8 }]}>
|
||||
<Text style={{ fontSize: 11, fontWeight: '600', color: colors.dimmed, letterSpacing: 0.6, textTransform: 'uppercase' }}>
|
||||
{item.date}
|
||||
</Text>
|
||||
<View style={{ flex: 1, height: 1, backgroundColor: colors.icon + '20', marginLeft: 8 }} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const { icon, color } = getNotifStyle(item.category)
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={() => handleReadNotification(item.id, item.category, item.idContent)}
|
||||
style={({ pressed }) => [{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.icon + '20',
|
||||
backgroundColor: pressed
|
||||
? colors.icon + '10'
|
||||
: item.isRead
|
||||
? colors.icon + '10'
|
||||
: colors.card,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
marginBottom: 6,
|
||||
}]}
|
||||
>
|
||||
{/* Colored icon */}
|
||||
<View style={{
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
backgroundColor: color + '20',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<Feather name={icon} size={20} color={color} />
|
||||
</View>
|
||||
|
||||
{/* Content */}
|
||||
<View style={[Styles.flex1, { marginLeft: 10 }]}>
|
||||
<View style={[Styles.rowSpaceBetween, Styles.itemsCenter]}>
|
||||
<View style={[Styles.flex1, Styles.mr10]}>
|
||||
<Text
|
||||
style={[Styles.textDefaultSemiBold, { color: item.isRead ? colors.dimmed : colors.text }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={[Styles.textMediumNormal, { color: item.isRead ? colors.dimmed : colors.text, opacity: item.isRead ? 0.7 : 1 }]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{item.desc}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
import { ButtonHeader } from "@/components/buttonHeader";
|
||||
import ItemDetailMember from "@/components/itemDetailMember";
|
||||
import Text from "@/components/Text";
|
||||
import { assetUserImage } from "@/constants/AssetsError";
|
||||
import { ConstEnv } from "@/constants/ConstEnv";
|
||||
@@ -9,7 +8,7 @@ import { apiGetProfile } from "@/lib/api";
|
||||
import { setEntities } from "@/lib/entitiesSlice";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import { router, Stack } from "expo-router";
|
||||
import { useState } from "react";
|
||||
@@ -42,6 +41,15 @@ export default function Profile() {
|
||||
setRefreshing(false)
|
||||
};
|
||||
|
||||
const infoRows = [
|
||||
{ icon: <MaterialCommunityIcons name="card-account-details" size={20} color={colors.icon} />, label: 'NIK', value: entities.nik },
|
||||
{ icon: <MaterialCommunityIcons name="office-building-outline" size={20} color={colors.icon} />, label: 'Lembaga Desa', value: entities.group },
|
||||
{ icon: <MaterialCommunityIcons name="account-tie" size={20} color={colors.icon} />, label: 'Jabatan', value: entities.position },
|
||||
{ icon: <MaterialIcons name="phone" size={20} color={colors.icon} />, label: 'No Telepon', value: `0${entities.phone}` },
|
||||
{ icon: <MaterialIcons name="email" size={20} color={colors.icon} />, label: 'Email', value: entities.email },
|
||||
{ icon: <MaterialCommunityIcons name="gender-male-female" size={20} color={colors.icon} />, label: 'Jenis Kelamin', value: entities.gender == "F" ? 'Perempuan' : 'Laki-laki' },
|
||||
]
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<Stack.Screen
|
||||
@@ -56,9 +64,7 @@ export default function Profile() {
|
||||
right={
|
||||
<ButtonHeader
|
||||
item={<Feather name="settings" size={20} color="white" />}
|
||||
onPress={() => {
|
||||
router.push('/setting')
|
||||
}}
|
||||
onPress={() => router.push('/setting')}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@@ -75,32 +81,47 @@ export default function Profile() {
|
||||
}
|
||||
style={[Styles.h100, { backgroundColor: colors.background }]}
|
||||
>
|
||||
<View style={[Styles.flexColumn]}>
|
||||
<LinearGradient
|
||||
colors={[colors.header, colors.homeGradient]}
|
||||
style={[Styles.wrapHeadViewMember]}
|
||||
>
|
||||
<Pressable onPress={() => setPreview(true)}>
|
||||
<LinearGradient
|
||||
colors={[colors.header, colors.homeGradient]}
|
||||
style={[Styles.wrapHeadViewMember]}
|
||||
>
|
||||
<Pressable onPress={() => setPreview(true)}>
|
||||
<View style={[Styles.memberAvatarRing]}>
|
||||
<Image
|
||||
source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
|
||||
onError={() => { setError(true) }}
|
||||
onError={() => setError(true)}
|
||||
style={[Styles.userProfileBig]}
|
||||
/>
|
||||
</Pressable>
|
||||
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{entities.name}</Text>
|
||||
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
|
||||
</LinearGradient>
|
||||
<View style={[Styles.p15]}>
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
|
||||
</View>
|
||||
{/* Note: ItemDetailMember might need updates to support dynamic colors if it uses default text colors */}
|
||||
<ItemDetailMember category="nik" value={entities.nik} />
|
||||
<ItemDetailMember category="group" value={entities.group} />
|
||||
<ItemDetailMember category="position" value={entities.position} />
|
||||
<ItemDetailMember category="phone" value={`0${entities.phone}`} />
|
||||
<ItemDetailMember category="email" value={entities.email} />
|
||||
<ItemDetailMember category="gender" value={entities.gender == "F" ? 'Perempuan' : 'Laki-laki'} />
|
||||
</Pressable>
|
||||
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{entities.name}</Text>
|
||||
<Text style={[Styles.textMediumNormal, Styles.cWhiteDimmed]}>{entities.role}</Text>
|
||||
{entities.isApprover && (
|
||||
<View style={[Styles.memberBadgeRow, { justifyContent: 'center' }]}>
|
||||
<View style={[Styles.memberBadgeApprover]}>
|
||||
<Text style={[Styles.textSmallSemiBold, Styles.cWhite]}>APPROVER</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</LinearGradient>
|
||||
|
||||
<View style={[Styles.p15]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.mb08, { color: colors.dimmed }]}>Informasi</Text>
|
||||
<View>
|
||||
{infoRows.map((item, index, arr) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[Styles.memberInfoRow, { borderBottomWidth: index < arr.length - 1 ? 1 : 0, borderBottomColor: `${colors.dimmed}30` }]}
|
||||
>
|
||||
<View style={[Styles.memberInfoIcon]}>
|
||||
{item.icon}
|
||||
</View>
|
||||
<View style={[Styles.memberInfoContent]}>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{item.label}</Text>
|
||||
<Text style={[Styles.textDefault, Styles.mt02, { color: colors.text }]} numberOfLines={1}>{item.value ?? '-'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
@@ -114,4 +135,4 @@ export default function Profile() {
|
||||
/>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Pressable, RefreshControl, ScrollView, View, VirtualizedList } from "react-native";
|
||||
import { useSelector } from "react-redux";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
@@ -50,6 +51,18 @@ export default function ListProject() {
|
||||
const [search, setSearch] = useState("")
|
||||
const [isList, setList] = useState(false)
|
||||
const update = useSelector((state: any) => state.projectUpdate)
|
||||
|
||||
useEffect(() => {
|
||||
AsyncStorage.getItem('division_view_mode').then((val) => {
|
||||
if (val !== null) setList(val === 'list')
|
||||
})
|
||||
}, [])
|
||||
|
||||
function toggleView() {
|
||||
const next = !isList
|
||||
setList(next)
|
||||
AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
|
||||
}
|
||||
const queryClient = useQueryClient()
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
|
||||
@@ -188,11 +201,7 @@ export default function ListProject() {
|
||||
|
||||
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter]}>
|
||||
<InputSearch width={68} onChange={setSearch} />
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setList(!isList);
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={toggleView}>
|
||||
<MaterialCommunityIcons
|
||||
name={isList ? "format-list-bulleted" : "view-grid"}
|
||||
color={colors.text}
|
||||
|
||||
@@ -9,13 +9,12 @@ import Styles from "@/constants/Styles";
|
||||
import { apiGetSearch } from "@/lib/api";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { AntDesign, MaterialIcons } from "@expo/vector-icons";
|
||||
import { AntDesign, Feather, MaterialIcons } from "@expo/vector-icons";
|
||||
import { router, Stack } from "expo-router";
|
||||
import React, { useState } from "react";
|
||||
import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
|
||||
import { RefreshControl, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
|
||||
import Toast from "react-native-toast-message";
|
||||
|
||||
// ... types ...
|
||||
type PropsUser = {
|
||||
id: string
|
||||
name: string
|
||||
@@ -38,6 +37,27 @@ type PropDivisi = {
|
||||
group: string
|
||||
}
|
||||
|
||||
type FilterType = "all" | "member" | "division" | "project"
|
||||
|
||||
function SectionHeader({ label, count, colors }: { label: string; count: number; colors: any }) {
|
||||
return (
|
||||
<View style={[Styles.rowItemsCenter, Styles.mb08]}>
|
||||
<Text style={{ fontSize: 11, fontWeight: '600', color: colors.dimmed, letterSpacing: 0.8, textTransform: 'uppercase' }}>
|
||||
{label}
|
||||
</Text>
|
||||
<View style={{
|
||||
marginLeft: 6,
|
||||
backgroundColor: colors.icon + '25',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 7,
|
||||
paddingVertical: 1,
|
||||
}}>
|
||||
<Text style={{ fontSize: 11, color: colors.dimmed, fontWeight: '600' }}>{count}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Search() {
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const [dataUser, setDataUser] = useState<PropsUser[]>([])
|
||||
@@ -45,11 +65,16 @@ export default function Search() {
|
||||
const [dataProject, setDataProject] = useState<PropProject[]>([])
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [search, setSearch] = useState('')
|
||||
const [activeFilter, setActiveFilter] = useState<FilterType>("all")
|
||||
const { colors } = useTheme();
|
||||
|
||||
const totalResults = dataUser.length + dataDivisi.length + dataProject.length
|
||||
const hasSearch = search.length >= 3
|
||||
|
||||
async function handleSearch(cari: string) {
|
||||
try {
|
||||
setSearch(cari)
|
||||
setActiveFilter("all")
|
||||
if (cari.length >= 3) {
|
||||
const user = await decryptToken(String(token?.current))
|
||||
const hasil = await apiGetSearch({ text: cari, user: user })
|
||||
@@ -58,7 +83,7 @@ export default function Search() {
|
||||
setDataDivisi(hasil.data.division)
|
||||
setDataProject(hasil.data.project)
|
||||
} else {
|
||||
return Toast.show({ type: 'small', text1: hasil.message, })
|
||||
return Toast.show({ type: 'small', text1: hasil.message })
|
||||
}
|
||||
} else {
|
||||
setDataUser([])
|
||||
@@ -68,15 +93,10 @@ export default function Search() {
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal melakukan pencarian"
|
||||
|
||||
Toast.show({
|
||||
type: 'small',
|
||||
text1: message
|
||||
})
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true)
|
||||
handleSearch(search)
|
||||
@@ -84,114 +104,203 @@ export default function Search() {
|
||||
setRefreshing(false)
|
||||
};
|
||||
|
||||
const filters: { key: FilterType; label: string; count: number }[] = [
|
||||
{ key: "all", label: "Semua", count: totalResults },
|
||||
{ key: "member", label: "Anggota", count: dataUser.length },
|
||||
{ key: "division", label: "Divisi", count: dataDivisi.length },
|
||||
{ key: "project", label: "Kegiatan", count: dataProject.length },
|
||||
]
|
||||
|
||||
const showUser = activeFilter === "all" || activeFilter === "member"
|
||||
const showDivision = activeFilter === "all" || activeFilter === "division"
|
||||
const showProject = activeFilter === "all" || activeFilter === "project"
|
||||
|
||||
const activeFilterEmpty =
|
||||
(activeFilter === "member" && dataUser.length === 0) ||
|
||||
(activeFilter === "division" && dataDivisi.length === 0) ||
|
||||
(activeFilter === "project" && dataProject.length === 0)
|
||||
|
||||
return (
|
||||
<>
|
||||
<SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerTitle: 'Pencarian',
|
||||
headerTitleAlign: 'center',
|
||||
header: () => (
|
||||
<AppHeader title="Pencarian" showBack={true} onPressLeft={() => router.back()} />
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<View style={[Styles.p15]}>
|
||||
<SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerTitle: 'Pencarian',
|
||||
headerTitleAlign: 'center',
|
||||
header: () => (
|
||||
<AppHeader title="Pencarian" showBack={true} onPressLeft={() => router.back()} />
|
||||
)
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={[Styles.flex1]}>
|
||||
{/* Search bar */}
|
||||
<View style={[Styles.ph15, { paddingTop: 15 }]}>
|
||||
<InputSearch onChange={handleSearch} />
|
||||
{
|
||||
dataProject.length + dataDivisi.length + dataUser.length > 0
|
||||
?
|
||||
<ScrollView
|
||||
style={[Styles.h100]}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{
|
||||
dataUser.length > 0 &&
|
||||
<View style={[Styles.mv05, Styles.p10]}>
|
||||
<Text>ANGGOTA</Text>
|
||||
{
|
||||
dataUser.map((item, index) => (
|
||||
<BorderBottomItem
|
||||
key={index}
|
||||
borderType="bottom"
|
||||
icon={<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />}
|
||||
title={item.name}
|
||||
subtitle={`${item.group}-${item.position}`}
|
||||
onPress={() => {
|
||||
router.push(`/member/${item.id}`)
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
}
|
||||
|
||||
{
|
||||
dataDivisi.length > 0 &&
|
||||
<View style={[Styles.mv05, Styles.p10]}>
|
||||
<Text>DIVISI</Text>
|
||||
{
|
||||
dataDivisi.map((item, index) => (
|
||||
<BorderBottomItem
|
||||
key={index}
|
||||
borderType="bottom"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
||||
<MaterialIcons name="group" size={25} color="white" />
|
||||
</View>
|
||||
}
|
||||
title={item.name}
|
||||
subtitle={item.group}
|
||||
onPress={() => {
|
||||
router.push(`/division/${item.id}`)
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
dataProject.length > 0 &&
|
||||
<View style={[Styles.mv05, Styles.p10]}>
|
||||
<Text>KEGIATAN</Text>
|
||||
{
|
||||
dataProject.map((item, index) => (
|
||||
<BorderBottomItem
|
||||
key={index}
|
||||
borderType="bottom"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
||||
<AntDesign name="areachart" size={25} color="white" />
|
||||
</View>
|
||||
}
|
||||
title={item.title}
|
||||
subtitle={item.group}
|
||||
onPress={() => {
|
||||
router.push(`/project/${item.id}`)
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
}
|
||||
</ScrollView>
|
||||
:
|
||||
<View style={[Styles.contentItemCenter, Styles.mt10]}>
|
||||
<Text style={[Styles.textInformation, { color: colors.icon }]}>Tidak ada data</Text>
|
||||
</View>
|
||||
}
|
||||
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</>
|
||||
|
||||
{/* Filter tabs */}
|
||||
{hasSearch && totalResults > 0 && (
|
||||
<View style={{ marginTop: 10, flexShrink: 0 }}>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={[Styles.ph15, { paddingRight: 5, alignItems: 'center' }]}
|
||||
>
|
||||
{filters.map((f) => {
|
||||
const isActive = activeFilter === f.key
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={f.key}
|
||||
onPress={() => setActiveFilter(f.key)}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 20,
|
||||
marginRight: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: isActive ? colors.tabActive : colors.icon + '40',
|
||||
backgroundColor: isActive ? colors.tabActive + '20' : 'transparent',
|
||||
}}
|
||||
>
|
||||
<Text style={{
|
||||
fontSize: 13,
|
||||
color: isActive ? colors.tabActive : colors.dimmed,
|
||||
fontWeight: isActive ? '600' : 'normal',
|
||||
}}>
|
||||
{f.label}
|
||||
</Text>
|
||||
{f.count > 0 && (
|
||||
<View style={{
|
||||
marginLeft: 5,
|
||||
backgroundColor: isActive ? colors.tabActive : colors.icon + '30',
|
||||
borderRadius: 10,
|
||||
minWidth: 18,
|
||||
height: 18,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 4,
|
||||
}}>
|
||||
<Text style={{ fontSize: 11, color: isActive ? 'white' : colors.dimmed, fontWeight: '600' }}>
|
||||
{f.count}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<View style={[Styles.flex1]}>
|
||||
{!hasSearch ? (
|
||||
<View style={[Styles.contentItemCenter, Styles.mt30]}>
|
||||
<Feather name="search" size={42} color={colors.icon + '40'} />
|
||||
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
|
||||
Ketik minimal 3 karakter untuk mencari
|
||||
</Text>
|
||||
</View>
|
||||
) : totalResults === 0 ? (
|
||||
<View style={[Styles.contentItemCenter, Styles.mt30]}>
|
||||
<Feather name="inbox" size={42} color={colors.icon + '40'} />
|
||||
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
|
||||
Tidak ada hasil untuk "{search}"
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView
|
||||
style={[Styles.flex1]}
|
||||
contentContainerStyle={[Styles.ph15, { paddingTop: 14, paddingBottom: 30 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{/* Anggota */}
|
||||
{showUser && dataUser.length > 0 && (
|
||||
<View style={[Styles.mb15]}>
|
||||
<SectionHeader label="Anggota" count={dataUser.length} colors={colors} />
|
||||
{dataUser.map((item, index) => (
|
||||
<View key={index} style={index < dataUser.length - 1 ? Styles.mb05 : undefined}>
|
||||
<BorderBottomItem
|
||||
borderType="all"
|
||||
icon={<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />}
|
||||
title={item.name}
|
||||
subtitle={`${item.group} · ${item.position}`}
|
||||
onPress={() => router.push(`/member/${item.id}`)}
|
||||
colorPress
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Divisi */}
|
||||
{showDivision && dataDivisi.length > 0 && (
|
||||
<View style={[Styles.mb15]}>
|
||||
<SectionHeader label="Divisi" count={dataDivisi.length} colors={colors} />
|
||||
{dataDivisi.map((item, index) => (
|
||||
<View key={index} style={index < dataDivisi.length - 1 ? Styles.mb05 : undefined}>
|
||||
<BorderBottomItem
|
||||
borderType="all"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
||||
<MaterialIcons name="group" size={25} color="white" />
|
||||
</View>
|
||||
}
|
||||
title={item.name}
|
||||
subtitle={item.group}
|
||||
onPress={() => router.push(`/division/${item.id}`)}
|
||||
colorPress
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Kegiatan */}
|
||||
{showProject && dataProject.length > 0 && (
|
||||
<View style={[Styles.mb15]}>
|
||||
<SectionHeader label="Kegiatan" count={dataProject.length} colors={colors} />
|
||||
{dataProject.map((item, index) => (
|
||||
<View key={index} style={index < dataProject.length - 1 ? Styles.mb05 : undefined}>
|
||||
<BorderBottomItem
|
||||
borderType="all"
|
||||
icon={
|
||||
<View style={[Styles.iconContent, ColorsStatus.primary]}>
|
||||
<AntDesign name="areachart" size={25} color="white" />
|
||||
</View>
|
||||
}
|
||||
title={item.title}
|
||||
subtitle={item.group}
|
||||
onPress={() => router.push(`/project/${item.id}`)}
|
||||
colorPress
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Empty state untuk filter aktif */}
|
||||
{activeFilter !== "all" && activeFilterEmpty && (
|
||||
<View style={[Styles.contentItemCenter, Styles.mt30]}>
|
||||
<Feather name="inbox" size={42} color={colors.icon + '40'} />
|
||||
<Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
|
||||
Tidak ada hasil di kategori ini
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
140
components/ModalRiwayatApproval.tsx
Normal file
140
components/ModalRiwayatApproval.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import Styles from "@/constants/Styles"
|
||||
import { useTheme } from "@/providers/ThemeProvider"
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons"
|
||||
import { useRef, useState } from "react"
|
||||
import { ScrollView, View } from "react-native"
|
||||
import DrawerBottom from "./drawerBottom"
|
||||
import Skeleton from "./skeleton"
|
||||
import Text from "./Text"
|
||||
|
||||
type ApprovalRecord = {
|
||||
id: string
|
||||
status: number // 0=pending, 1=approved, 2=rejected
|
||||
note?: string
|
||||
submitter: { name: string }
|
||||
approver?: { name: string }
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isVisible: boolean
|
||||
setVisible: (value: boolean) => void
|
||||
data: ApprovalRecord[]
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
function ApprovalStatusBadge({ status }: { status: number }) {
|
||||
const { colors } = useTheme()
|
||||
const config =
|
||||
status === 1
|
||||
? { label: 'Disetujui', color: colors.success }
|
||||
: status === 2
|
||||
? { label: 'Ditolak', color: colors.error }
|
||||
: { label: 'Menunggu', color: '#FFA94D' }
|
||||
|
||||
return (
|
||||
<View style={{
|
||||
backgroundColor: config.color + '20',
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 3,
|
||||
alignSelf: 'flex-start',
|
||||
}}>
|
||||
<Text style={[Styles.textSmallSemiBold, { color: config.color }]}>
|
||||
{config.label}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ModalRiwayatApproval({ isVisible, setVisible, data, loading }: Props) {
|
||||
const { colors } = useTheme()
|
||||
const arrSkeleton = Array.from({ length: 3 })
|
||||
const scrollRef = useRef<ScrollView>(null)
|
||||
const [scrollOffset, setScrollOffset] = useState(0)
|
||||
|
||||
return (
|
||||
<DrawerBottom
|
||||
isVisible={isVisible}
|
||||
setVisible={setVisible}
|
||||
title="Riwayat Persetujuan"
|
||||
animation="slide"
|
||||
height={60}
|
||||
scrollOffset={scrollOffset}
|
||||
scrollTo={(p) => scrollRef.current?.scrollTo(p)}
|
||||
>
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
showsVerticalScrollIndicator={false}
|
||||
onScroll={({ nativeEvent }) => setScrollOffset(nativeEvent.contentOffset.y)}
|
||||
scrollEventThrottle={16}
|
||||
>
|
||||
{loading ? (
|
||||
arrSkeleton.map((_, i) => (
|
||||
<View key={i} style={[Styles.mb10]}>
|
||||
<Skeleton width={100} widthType="percent" height={80} borderRadius={10} />
|
||||
</View>
|
||||
))
|
||||
) : data.length > 0 ? (
|
||||
data.map((item, index) => (
|
||||
<View
|
||||
key={item.id}
|
||||
style={{
|
||||
borderWidth: 1,
|
||||
borderColor: colors.icon + '30',
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
{/* Status + tanggal */}
|
||||
<View style={[Styles.rowItemsCenter, { justifyContent: 'space-between', marginBottom: 8 }]}>
|
||||
<ApprovalStatusBadge status={item.status} />
|
||||
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
|
||||
{item.createdAt}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Pengaju */}
|
||||
<View style={[Styles.rowItemsCenter, Styles.mb05]}>
|
||||
<MaterialCommunityIcons name="account-arrow-up-outline" size={15} color={colors.dimmed} style={{ marginRight: 6 }} />
|
||||
<Text style={[Styles.textMediumSemiBold, { color: colors.dimmed }]}>Diajukan Oleh: </Text>
|
||||
<Text style={[Styles.textMediumNormal]}>{item.submitter.name}</Text>
|
||||
</View>
|
||||
|
||||
{/* Approver */}
|
||||
<View style={[Styles.rowItemsCenter, item.note ? Styles.mb05 : {}]}>
|
||||
<MaterialCommunityIcons name="account-check-outline" size={15} color={colors.dimmed} style={{ marginRight: 6 }} />
|
||||
<Text style={[Styles.textMediumSemiBold, { color: colors.dimmed }]}>Disetujui Oleh: </Text>
|
||||
<Text style={[Styles.textMediumNormal]}>
|
||||
{item.approver?.name ?? '-'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Catatan penolakan */}
|
||||
{item.note && (
|
||||
<View style={{
|
||||
backgroundColor: colors.error + '12',
|
||||
borderRadius: 8,
|
||||
padding: 8,
|
||||
marginTop: 4,
|
||||
}}>
|
||||
<Text style={[Styles.textSmallSemiBold, { color: colors.error, marginBottom: 2 }]}>
|
||||
Alasan Penolakan
|
||||
</Text>
|
||||
<Text style={[Styles.textMediumNormal, { color: colors.text }]}>
|
||||
{item.note}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>
|
||||
Belum ada riwayat persetujuan
|
||||
</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
</DrawerBottom>
|
||||
)
|
||||
}
|
||||
78
components/ModalTolakApproval.tsx
Normal file
78
components/ModalTolakApproval.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import Styles from "@/constants/Styles"
|
||||
import { useTheme } from "@/providers/ThemeProvider"
|
||||
import { useState } from "react"
|
||||
import { TouchableOpacity, View } from "react-native"
|
||||
import DrawerBottom from "./drawerBottom"
|
||||
import { InputForm } from "./inputForm"
|
||||
import Text from "./Text"
|
||||
|
||||
type Props = {
|
||||
isVisible: boolean
|
||||
setVisible: (value: boolean) => void
|
||||
onTolak: (note: string) => void
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export default function ModalTolakApproval({ isVisible, setVisible, onTolak, loading }: Props) {
|
||||
const { colors } = useTheme()
|
||||
const [note, setNote] = useState('')
|
||||
const [error, setError] = useState(false)
|
||||
|
||||
function handleClose(value: boolean) {
|
||||
setNote('')
|
||||
setError(false)
|
||||
setVisible(value)
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (!note.trim()) {
|
||||
setError(true)
|
||||
return
|
||||
}
|
||||
onTolak(note.trim())
|
||||
setNote('')
|
||||
setError(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<DrawerBottom
|
||||
isVisible={isVisible}
|
||||
setVisible={handleClose}
|
||||
title="Tolak Tugas"
|
||||
animation="slide"
|
||||
height={45}
|
||||
keyboard
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<InputForm
|
||||
label="Alasan Penolakan"
|
||||
placeholder="Tuliskan alasan penolakan..."
|
||||
type="default"
|
||||
multiline
|
||||
bg="transparent"
|
||||
value={note}
|
||||
onChange={setNote}
|
||||
error={error}
|
||||
errorText="Alasan penolakan wajib diisi"
|
||||
required
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleSubmit}
|
||||
disabled={loading}
|
||||
style={{
|
||||
backgroundColor: loading ? colors.error + '60' : colors.error,
|
||||
borderRadius: 30,
|
||||
paddingVertical: 10,
|
||||
alignItems: 'center',
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.cWhite]}>
|
||||
{loading ? 'Memproses...' : 'Tolak Tugas'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</DrawerBottom>
|
||||
)
|
||||
}
|
||||
@@ -14,9 +14,11 @@ type Props = {
|
||||
height?: number
|
||||
backdropPressable?: boolean
|
||||
keyboard?: boolean
|
||||
scrollOffset?: number
|
||||
scrollTo?: (p: any) => void
|
||||
}
|
||||
|
||||
export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false }: Props) {
|
||||
export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false, scrollOffset, scrollTo }: Props) {
|
||||
const tinggiScreen = Dimensions.get("window").height;
|
||||
const { colors } = useTheme();
|
||||
const tinggiInput = height != undefined ? height : 25
|
||||
@@ -38,6 +40,9 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
|
||||
backdropTransitionOutTiming={500}
|
||||
useNativeDriverForBackdrop={true}
|
||||
propagateSwipe={true}
|
||||
scrollTo={scrollTo}
|
||||
scrollOffset={scrollOffset}
|
||||
scrollOffsetMax={200}
|
||||
>
|
||||
{
|
||||
keyboard ?
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
|
||||
async function handleUser() {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiGetProfile({ id: hasil })
|
||||
dispatch(setEntityUser({ role: response.data.idUserRole, admin: false }))
|
||||
dispatch(setEntityUser({ role: response.data.idUserRole, admin: false, isApprover: response.data.isApprover ?? false }))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function CaraouselHome2({ refreshing }: { refreshing: boolean })
|
||||
// Sync User Role to Redux
|
||||
useEffect(() => {
|
||||
if (profile) {
|
||||
dispatch(setEntityUser({ role: profile.idUserRole, admin: false }))
|
||||
dispatch(setEntityUser({ role: profile.idUserRole, admin: false, isApprover: profile.isApprover ?? false }))
|
||||
}
|
||||
}, [profile, dispatch])
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ type FileItem = {
|
||||
}
|
||||
|
||||
type Props = {
|
||||
done?: boolean
|
||||
status?: number // 0=belum selesai, 1=selesai, 2=menunggu persetujuan
|
||||
title: string
|
||||
dateStart: string
|
||||
dateEnd: string
|
||||
@@ -64,7 +64,15 @@ function getFileIcon(extension: string): keyof typeof MaterialCommunityIcons.gly
|
||||
return 'file-outline'
|
||||
}
|
||||
|
||||
export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, files = [], onPress }: Props) {
|
||||
const AMBER = '#FFA94D'
|
||||
|
||||
function getStatusStyle(status: number | undefined, successColor: string, dimmed: string) {
|
||||
if (status === 1) return { accent: successColor, badge: successColor + '25', text: successColor, label: 'Selesai' }
|
||||
if (status === 2) return { accent: AMBER, badge: AMBER + '25', text: AMBER, label: 'Menunggu Persetujuan' }
|
||||
return { accent: dimmed + '80', badge: dimmed + '18', text: dimmed, label: 'Belum Selesai' }
|
||||
}
|
||||
|
||||
export default function ItemSectionTanggalTugas({ status, title, dateStart, dateEnd, files = [], onPress }: Props) {
|
||||
const { colors, activeTheme } = useTheme()
|
||||
const [containerWidth, setContainerWidth] = useState(0)
|
||||
|
||||
@@ -77,7 +85,7 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
|
||||
|
||||
const dimmed = colors.dimmed.slice(0, 7)
|
||||
const successColor = activeTheme === 'dark' ? '#51CF66' : colors.success
|
||||
const accentColor = done === true ? successColor : dimmed + '80'
|
||||
const statusStyle = getStatusStyle(status, successColor, dimmed)
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
@@ -93,8 +101,8 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
|
||||
}}
|
||||
>
|
||||
{/* Accent bar kiri */}
|
||||
{done !== undefined && (
|
||||
<View style={{ width: 4, backgroundColor: accentColor }} />
|
||||
{status !== undefined && (
|
||||
<View style={{ width: 4, backgroundColor: statusStyle.accent }} />
|
||||
)}
|
||||
|
||||
{/* Konten */}
|
||||
@@ -103,16 +111,16 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
|
||||
{/* Judul + badge status */}
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
|
||||
<Text style={[Styles.textDefault, { flex: 1, marginRight: 8 }]}>{title}</Text>
|
||||
{done !== undefined && (
|
||||
{status !== undefined && (
|
||||
<View style={{
|
||||
backgroundColor: done ? successColor + '25' : dimmed + '18',
|
||||
backgroundColor: statusStyle.badge,
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
alignSelf: 'flex-start',
|
||||
}}>
|
||||
<Text style={[Styles.textSmallSemiBold, { color: done ? successColor : colors.dimmed }]}>
|
||||
{done ? 'Selesai' : 'Belum Selesai'}
|
||||
<Text style={[Styles.textSmallSemiBold, { color: statusStyle.text }]}>
|
||||
{statusStyle.label}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Styles from "@/constants/Styles"
|
||||
import { apiDeleteUser } from "@/lib/api"
|
||||
import { apiDeleteUser, apiToggleApprover } from "@/lib/api"
|
||||
import { setUpdateMember } from "@/lib/memberSlice"
|
||||
import { useAuthSession } from "@/providers/AuthProvider"
|
||||
import { useTheme } from "@/providers/ThemeProvider"
|
||||
@@ -16,14 +16,17 @@ import MenuItemRow from "../menuItemRow"
|
||||
|
||||
type Props = {
|
||||
active: any,
|
||||
id: string
|
||||
id: string,
|
||||
isApprover: boolean,
|
||||
}
|
||||
|
||||
export default function HeaderRightMemberDetail({ active, id }: Props) {
|
||||
export default function HeaderRightMemberDetail({ active, id, isApprover }: Props) {
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const [isVisible, setVisible] = useState(false)
|
||||
const update = useSelector((state: any) => state.memberUpdate)
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const entityUser = useSelector((state: any) => state.user)
|
||||
const [showModalActive, setShowModalActive] = useState(false)
|
||||
const [showModalApprover, setShowModalApprover] = useState(false)
|
||||
const { colors } = useTheme();
|
||||
const dispatch = useDispatch()
|
||||
|
||||
@@ -37,17 +40,36 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message, })
|
||||
}
|
||||
} catch (error : any ) {
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal mengupdate data"
|
||||
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
} finally {
|
||||
setVisible(false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function handleToggleApprover() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiToggleApprover({ user: hasil, isApprover: !isApprover }, id)
|
||||
if (response.success) {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
dispatch(setUpdateMember(!update))
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal mengupdate data"
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
} finally {
|
||||
setShowModalApprover(false)
|
||||
}
|
||||
}
|
||||
|
||||
const canManageApprover = ['supadmin', 'developer'].includes(entityUser.role)
|
||||
|
||||
return (
|
||||
<>
|
||||
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
|
||||
@@ -55,12 +77,10 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
|
||||
title={active ? "Non Aktifkan" : "Aktifkan"}
|
||||
title={active ? "Nonaktifkan" : "Aktifkan"}
|
||||
onPress={() => {
|
||||
setVisible(false)
|
||||
setTimeout(() => {
|
||||
setShowModal(true)
|
||||
}, 600)
|
||||
setTimeout(() => setShowModalActive(true), 600)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
@@ -71,18 +91,39 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
|
||||
router.push(`/member/edit/${id}`)
|
||||
}}
|
||||
/>
|
||||
{canManageApprover && (
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="shield-check-outline" color={colors.text} size={25} />}
|
||||
title={isApprover ? "Revoke Approver" : "Jadikan Approver"}
|
||||
color={colors.text}
|
||||
onPress={() => {
|
||||
setVisible(false)
|
||||
setTimeout(() => setShowModalApprover(true), 600)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
<ModalConfirmation
|
||||
visible={showModal}
|
||||
visible={showModalActive}
|
||||
title="Konfirmasi"
|
||||
message={active ? 'Apakah anda yakin ingin menonaktifkan user?' : 'Apakah anda yakin ingin mengaktifkan user?'}
|
||||
message={active ? 'Apakah anda yakin ingin menonaktifkan anggota ini?' : 'Apakah anda yakin ingin mengaktifkan anggota ini?'}
|
||||
onConfirm={() => {
|
||||
setShowModal(false)
|
||||
setShowModalActive(false)
|
||||
handleActive()
|
||||
}}
|
||||
onCancel={() => setShowModal(false)}
|
||||
onCancel={() => setShowModalActive(false)}
|
||||
confirmText="Konfirmasi"
|
||||
cancelText="Batal"
|
||||
/>
|
||||
|
||||
<ModalConfirmation
|
||||
visible={showModalApprover}
|
||||
title="Konfirmasi"
|
||||
message={isApprover ? 'Apakah anda yakin ingin mencabut status approver user ini?' : 'Apakah anda yakin ingin menjadikan user ini sebagai approver?'}
|
||||
onConfirm={handleToggleApprover}
|
||||
onCancel={() => setShowModalApprover(false)}
|
||||
confirmText="Konfirmasi"
|
||||
cancelText="Batal"
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiDeleteProjectTask, apiGetProjectOne, apiUpdateStatusProjectTask } from "@/lib/api";
|
||||
import { apiApproveRejectProjectTask, apiDeleteProjectTask, apiGetProjectOne, apiGetProjectTaskApprovals, apiSubmitProjectTask } from "@/lib/api";
|
||||
import { setUpdateProject } from "@/lib/projectUpdate";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
@@ -13,7 +13,8 @@ import DrawerBottom from "../drawerBottom";
|
||||
import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
|
||||
import MenuItemRow from "../menuItemRow";
|
||||
import ModalConfirmation from "../ModalConfirmation";
|
||||
import ModalSelect from "../modalSelect";
|
||||
import ModalRiwayatApproval from "../ModalRiwayatApproval";
|
||||
import ModalTolakApproval from "../ModalTolakApproval";
|
||||
import SkeletonTask from "../skeletonTask";
|
||||
import Text from "../Text";
|
||||
import ModalListDetailTugasProject from "./modalListDetailTugasProject";
|
||||
@@ -22,41 +23,52 @@ type Props = {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
status: 1;
|
||||
status: number;
|
||||
dateStart: string;
|
||||
dateEnd: string;
|
||||
createdAt: string;
|
||||
files?: { name: string; extension: string }[];
|
||||
};
|
||||
|
||||
type ApprovalRecord = {
|
||||
id: string
|
||||
status: number
|
||||
note?: string
|
||||
submitter: { name: string }
|
||||
approver?: { name: string }
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export default function SectionTanggalTugasProject({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
|
||||
const { colors } = useTheme();
|
||||
const entityUser = useSelector((state: any) => state.user)
|
||||
const dispatch = useDispatch()
|
||||
const update = useSelector((state: any) => state.projectUpdate)
|
||||
const [isModal, setModal] = useState(false);
|
||||
const [isSelect, setSelect] = useState(false);
|
||||
const { token, decryptToken } = useAuthSession();
|
||||
const [modalDetail, setModalDetail] = useState(false)
|
||||
const [modalRiwayat, setModalRiwayat] = useState(false)
|
||||
const [modalTolak, setModalTolak] = useState(false)
|
||||
const [modalKonfirmasiSetujui, setModalKonfirmasiSetujui] = useState(false)
|
||||
const [modalPersetujuan, setModalPersetujuan] = useState(false)
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const [data, setData] = useState<Props[]>([]);
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadingAction, setLoadingAction] = useState(false)
|
||||
const [loadingRiwayat, setLoadingRiwayat] = useState(false)
|
||||
const [riwayatData, setRiwayatData] = useState<ApprovalRecord[]>([])
|
||||
const arrSkeleton = Array.from({ length: 5 });
|
||||
const [tugas, setTugas] = useState({
|
||||
id: '',
|
||||
status: 0,
|
||||
})
|
||||
const [tugas, setTugas] = useState({ id: '', status: 0 })
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
|
||||
const isApprover = entityUser.isApprover || ['supadmin', 'developer'].includes(entityUser.role)
|
||||
const isAdmin = entityUser.role !== 'user' && entityUser.role !== 'coadmin'
|
||||
|
||||
async function handleLoad(loading: boolean) {
|
||||
try {
|
||||
setLoading(loading)
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiGetProjectOne({
|
||||
user: hasil,
|
||||
cat: "task",
|
||||
id: id,
|
||||
});
|
||||
const response = await apiGetProjectOne({ user: hasil, cat: "task", id: id });
|
||||
setData(response.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@@ -65,178 +77,268 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(false);
|
||||
}, [update.task]);
|
||||
useEffect(() => { handleLoad(false) }, [update.task]);
|
||||
useEffect(() => { if (refreshing) handleLoad(false) }, [refreshing]);
|
||||
useEffect(() => { handleLoad(true) }, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (refreshing)
|
||||
handleLoad(false);
|
||||
}, [refreshing]);
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(true);
|
||||
}, []);
|
||||
|
||||
|
||||
async function handleUpdate(status: number) {
|
||||
async function handleLoadRiwayat() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiUpdateStatusProjectTask({
|
||||
user: hasil,
|
||||
idProject: id,
|
||||
status: status,
|
||||
}, tugas.id);
|
||||
setLoadingRiwayat(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiGetProjectTaskApprovals({ user: hasil, id: tugas.id })
|
||||
setRiwayatData(response.data ?? [])
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoadingRiwayat(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmitAjukan() {
|
||||
try {
|
||||
setLoadingAction(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiSubmitProjectTask({ user: hasil, id: tugas.id })
|
||||
if (response.success) {
|
||||
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
|
||||
setSelect(false);
|
||||
Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
|
||||
Toast.show({ type: 'small', text1: 'Berhasil mengajukan task untuk persetujuan' })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal mengubah data"
|
||||
|
||||
const message = error?.response?.data?.message || "Gagal mengajukan persetujuan"
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
} finally {
|
||||
setLoadingAction(false)
|
||||
setModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSetujui() {
|
||||
try {
|
||||
setLoadingAction(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiApproveRejectProjectTask({ user: hasil, id: tugas.id, action: 'approve' })
|
||||
if (response.success) {
|
||||
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
|
||||
Toast.show({ type: 'small', text1: 'Tugas berhasil disetujui' })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
const message = error?.response?.data?.message || "Gagal menyetujui tugas"
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
} finally {
|
||||
setLoadingAction(false)
|
||||
setModalKonfirmasiSetujui(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTolak(note: string) {
|
||||
try {
|
||||
setLoadingAction(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiApproveRejectProjectTask({ user: hasil, id: tugas.id, action: 'reject', note })
|
||||
if (response.success) {
|
||||
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
|
||||
Toast.show({ type: 'small', text1: 'Tugas berhasil ditolak' })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
const message = error?.response?.data?.message || "Gagal menolak tugas"
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
} finally {
|
||||
setLoadingAction(false)
|
||||
setModalTolak(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiDeleteProjectTask({
|
||||
user: hasil,
|
||||
idProject: id,
|
||||
}, tugas.id);
|
||||
const response = await apiDeleteProjectTask({ user: hasil, idProject: id }, tugas.id);
|
||||
if (response.success) {
|
||||
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
|
||||
setModal(false);
|
||||
Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
|
||||
Toast.show({ type: 'small', text1: 'Berhasil menghapus data' })
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal menghapus data"
|
||||
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
}
|
||||
}
|
||||
|
||||
const canTakeAction = member || isAdmin
|
||||
const showAjukan = (member || isApprover) && tugas.status === 0 && status !== 3
|
||||
const showApproverActions = isApprover && tugas.status === 2
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={[Styles.mb15, Styles.mt10]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
|
||||
Tanggal & Tugas
|
||||
</Text>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
|
||||
<View>
|
||||
{
|
||||
loading ?
|
||||
arrSkeleton.map((item, index) => {
|
||||
return (
|
||||
<SkeletonTask key={index} />
|
||||
)
|
||||
})
|
||||
:
|
||||
data.length > 0
|
||||
?
|
||||
data.map((item, index) => {
|
||||
return (
|
||||
<ItemSectionTanggalTugas
|
||||
key={index}
|
||||
done={item.status === 1}
|
||||
title={item.title}
|
||||
dateStart={item.dateStart}
|
||||
dateEnd={item.dateEnd}
|
||||
files={item.files ?? []}
|
||||
onPress={() => {
|
||||
setTugas({ id: item.id, status: item.status })
|
||||
setModal(true)
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
:
|
||||
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
|
||||
{loading
|
||||
? arrSkeleton.map((_, index) => <SkeletonTask key={index} />)
|
||||
: data.length > 0
|
||||
? data.map((item, index) => (
|
||||
<ItemSectionTanggalTugas
|
||||
key={index}
|
||||
status={item.status}
|
||||
title={item.title}
|
||||
dateStart={item.dateStart}
|
||||
dateEnd={item.dateEnd}
|
||||
files={item.files ?? []}
|
||||
onPress={() => {
|
||||
setTugas({ id: item.id, status: item.status })
|
||||
setModal(true)
|
||||
}}
|
||||
/>
|
||||
))
|
||||
: <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<DrawerBottom
|
||||
animation="slide"
|
||||
isVisible={isModal}
|
||||
setVisible={setModal}
|
||||
title="Menu"
|
||||
>
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
{(member || (entityUser.role != "user" && entityUser.role != "coadmin")) && status != 3 && (
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="list-status" color={colors.text} size={25} />}
|
||||
title="Update Status"
|
||||
onPress={() => {
|
||||
setModal(false);
|
||||
setTimeout(() => setSelect(true), 600)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{/* Drawer menu */}
|
||||
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu" height={40}>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
|
||||
|
||||
{/* Baris 1 — selalu tampil */}
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="file-multiple-outline" color={colors.text} size={25} />}
|
||||
title="File Tugas"
|
||||
onPress={() => {
|
||||
setModal(false);
|
||||
router.push(`/project/${id}/tugas-file/${tugas.id}?member=${member}`);
|
||||
setModal(false)
|
||||
router.push(`/project/${id}/tugas-file/${tugas.id}?member=${member}`)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="clock-time-three-outline" color={colors.text} size={25} />}
|
||||
title="Detail Waktu"
|
||||
onPress={() => {
|
||||
setModal(false);
|
||||
setModal(false)
|
||||
setTimeout(() => setModalDetail(true), 600)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
{(member || (entityUser.role != "user" && entityUser.role != "coadmin")) && status != 3 && (
|
||||
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="history" color={colors.text} size={25} />}
|
||||
title="Riwayat"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
handleLoadRiwayat()
|
||||
setTimeout(() => setModalRiwayat(true), 600)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Separator antar baris */}
|
||||
{(showAjukan || showApproverActions || (canTakeAction && isAdmin && status !== 3)) && (
|
||||
<View style={{ width: '100%', height: 15 }} />
|
||||
)}
|
||||
|
||||
{/* Baris 2 — semua aksi kondisional dalam satu baris */}
|
||||
{showAjukan && (
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
|
||||
title="Edit Tugas"
|
||||
onPress={() => {
|
||||
setModal(false);
|
||||
router.push(`/project/update/${tugas.id}`);
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
|
||||
title="Hapus Tugas"
|
||||
icon={<MaterialCommunityIcons name="check-circle-outline" color={colors.text} size={25} />}
|
||||
title="Ajukan Selesai"
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => setShowDeleteModal(true), 600)
|
||||
setTimeout(() => handleSubmitAjukan(), 600)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
)}
|
||||
{showApproverActions && (
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="shield-check-outline" color={colors.text} size={25} />}
|
||||
title="Persetujuan"
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => setModalPersetujuan(true), 600)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{canTakeAction && isAdmin && status !== 3 && (
|
||||
<>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
|
||||
title="Edit Tugas"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
router.push(`/project/update/${tugas.id}`)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
|
||||
title="Hapus Tugas"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => setShowDeleteModal(true), 600)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
{/* Drawer persetujuan */}
|
||||
<DrawerBottom animation="slide" isVisible={modalPersetujuan} setVisible={setModalPersetujuan} title="Persetujuan Tugas" height={25}>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="check-circle" color={colors.success} size={25} />}
|
||||
title="Setujui"
|
||||
color={colors.success}
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModalPersetujuan(false)
|
||||
setTimeout(() => setModalKonfirmasiSetujui(true), 600)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="close-circle-outline" color={colors.error} size={25} />}
|
||||
title="Tolak"
|
||||
color={colors.error}
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModalPersetujuan(false)
|
||||
setTimeout(() => setModalTolak(true), 600)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
<ModalConfirmation
|
||||
visible={showDeleteModal}
|
||||
title="Konfirmasi"
|
||||
message="Apakah anda yakin ingin menghapus data ini?"
|
||||
onConfirm={() => {
|
||||
setShowDeleteModal(false)
|
||||
handleDelete()
|
||||
}}
|
||||
onConfirm={() => { setShowDeleteModal(false); handleDelete() }}
|
||||
onCancel={() => setShowDeleteModal(false)}
|
||||
confirmText="Hapus"
|
||||
cancelText="Batal"
|
||||
/>
|
||||
|
||||
<ModalSelect
|
||||
category="status-task"
|
||||
close={() => { setSelect(false) }}
|
||||
onSelect={(value) => {
|
||||
handleUpdate(Number(value.val))
|
||||
}}
|
||||
title="Status"
|
||||
open={isSelect}
|
||||
valChoose={String(tugas.status)}
|
||||
<ModalConfirmation
|
||||
visible={modalKonfirmasiSetujui}
|
||||
title="Konfirmasi"
|
||||
message="Apakah anda yakin ingin menyetujui tugas ini?"
|
||||
onConfirm={handleSetujui}
|
||||
onCancel={() => setModalKonfirmasiSetujui(false)}
|
||||
confirmText="Setujui"
|
||||
cancelText="Batal"
|
||||
/>
|
||||
|
||||
<ModalRiwayatApproval
|
||||
isVisible={modalRiwayat}
|
||||
setVisible={setModalRiwayat}
|
||||
data={riwayatData}
|
||||
loading={loadingRiwayat}
|
||||
/>
|
||||
|
||||
<ModalTolakApproval
|
||||
isVisible={modalTolak}
|
||||
setVisible={setModalTolak}
|
||||
onTolak={handleTolak}
|
||||
loading={loadingAction}
|
||||
/>
|
||||
|
||||
<ModalListDetailTugasProject
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function SectionProgress({ progress, doneCount, totalCount }: Pro
|
||||
? 'Selesai'
|
||||
: progress > 0
|
||||
? 'Sedang berlangsung'
|
||||
: 'Belum dimulai';
|
||||
: 'Belum ada tugas yang diselesaikan';
|
||||
|
||||
useEffect(() => {
|
||||
animatedWidth.setValue(0);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiDeleteTaskTugas, apiGetTaskOne, apiUpdateStatusTaskDivision } from "@/lib/api";
|
||||
import { apiApproveRejectTaskTugas, apiDeleteTaskTugas, apiGetTaskOne, apiGetTaskTugasApprovals, apiSubmitTaskTugas } from "@/lib/api";
|
||||
import { setUpdateTask } from "@/lib/taskUpdate";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
@@ -13,7 +13,8 @@ import DrawerBottom from "../drawerBottom";
|
||||
import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
|
||||
import MenuItemRow from "../menuItemRow";
|
||||
import ModalConfirmation from "../ModalConfirmation";
|
||||
import ModalSelect from "../modalSelect";
|
||||
import ModalRiwayatApproval from "../ModalRiwayatApproval";
|
||||
import ModalTolakApproval from "../ModalTolakApproval";
|
||||
import SkeletonTask from "../skeletonTask";
|
||||
import Text from "../Text";
|
||||
import ModalListDetailTugasTask from "./modalListDetailTugasTask";
|
||||
@@ -28,25 +29,41 @@ type Props = {
|
||||
files?: { name: string; extension: string }[];
|
||||
}
|
||||
|
||||
export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
|
||||
type ApprovalRecord = {
|
||||
id: string
|
||||
status: number
|
||||
note?: string
|
||||
submitter: { name: string }
|
||||
approver?: { name: string }
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export default function SectionTanggalTugasTask({ refreshing, isMemberDivision, isAdminDivision, status }: { refreshing: boolean, isMemberDivision: boolean, isAdminDivision: boolean, status?: number }) {
|
||||
const { colors } = useTheme()
|
||||
const dispatch = useDispatch()
|
||||
const entityUser = useSelector((state: any) => state.user);
|
||||
const update = useSelector((state: any) => state.taskUpdate)
|
||||
const [isModal, setModal] = useState(false)
|
||||
const [isSelect, setSelect] = useState(false)
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadingAction, setLoadingAction] = useState(false)
|
||||
const [loadingRiwayat, setLoadingRiwayat] = useState(false)
|
||||
const arrSkeleton = Array.from({ length: 5 })
|
||||
const [modalDetail, setModalDetail] = useState(false)
|
||||
const [modalRiwayat, setModalRiwayat] = useState(false)
|
||||
const [modalTolak, setModalTolak] = useState(false)
|
||||
const [modalKonfirmasiSetujui, setModalKonfirmasiSetujui] = useState(false)
|
||||
const [modalPersetujuan, setModalPersetujuan] = useState(false)
|
||||
const [riwayatData, setRiwayatData] = useState<ApprovalRecord[]>([])
|
||||
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
|
||||
const [data, setData] = useState<Props[]>([])
|
||||
const [tugas, setTugas] = useState({
|
||||
id: '',
|
||||
status: 0,
|
||||
})
|
||||
const [tugas, setTugas] = useState({ id: '', status: 0 })
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
|
||||
const isApprover = entityUser.isApprover || ['supadmin', 'developer'].includes(entityUser.role)
|
||||
const isAdmin = entityUser.role !== 'user' && entityUser.role !== 'coadmin'
|
||||
const canTakeAction = isMemberDivision || isAdmin
|
||||
|
||||
async function handleLoad(loading: boolean) {
|
||||
try {
|
||||
setLoading(loading)
|
||||
@@ -60,126 +77,136 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdate(status: number) {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiUpdateStatusTaskDivision({
|
||||
user: hasil,
|
||||
idProject: detail,
|
||||
status: status,
|
||||
}, tugas.id);
|
||||
if (response.success) {
|
||||
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
|
||||
Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message, })
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal mengubah data"
|
||||
useEffect(() => { handleLoad(false) }, [update.task])
|
||||
useEffect(() => { if (refreshing) handleLoad(false) }, [refreshing])
|
||||
useEffect(() => { handleLoad(true) }, [])
|
||||
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
async function handleLoadRiwayat() {
|
||||
try {
|
||||
setLoadingRiwayat(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiGetTaskTugasApprovals({ user: hasil, id: tugas.id })
|
||||
setRiwayatData(response.data ?? [])
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setSelect(false)
|
||||
setLoadingRiwayat(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(false)
|
||||
}, [update.task])
|
||||
async function handleSubmitAjukan() {
|
||||
try {
|
||||
setLoadingAction(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiSubmitTaskTugas({ user: hasil, id: tugas.id })
|
||||
if (response.success) {
|
||||
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
|
||||
Toast.show({ type: 'small', text1: 'Berhasil mengajukan task untuk persetujuan' })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengajukan persetujuan" })
|
||||
} finally {
|
||||
setLoadingAction(false)
|
||||
setModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (refreshing)
|
||||
handleLoad(false);
|
||||
}, [refreshing]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
handleLoad(true)
|
||||
}, [])
|
||||
async function handleSetujui() {
|
||||
try {
|
||||
setLoadingAction(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiApproveRejectTaskTugas({ user: hasil, id: tugas.id, action: 'approve' })
|
||||
if (response.success) {
|
||||
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
|
||||
Toast.show({ type: 'small', text1: 'Tugas berhasil disetujui' })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menyetujui tugas" })
|
||||
} finally {
|
||||
setLoadingAction(false)
|
||||
setModalKonfirmasiSetujui(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTolak(note: string) {
|
||||
try {
|
||||
setLoadingAction(true)
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiApproveRejectTaskTugas({ user: hasil, id: tugas.id, action: 'reject', note })
|
||||
if (response.success) {
|
||||
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
|
||||
Toast.show({ type: 'small', text1: 'Tugas berhasil ditolak' })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menolak tugas" })
|
||||
} finally {
|
||||
setLoadingAction(false)
|
||||
setModalTolak(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const response = await apiDeleteTaskTugas({
|
||||
user: hasil,
|
||||
idProject: detail,
|
||||
}, tugas.id);
|
||||
const response = await apiDeleteTaskTugas({ user: hasil, idProject: detail }, tugas.id);
|
||||
if (response.success) {
|
||||
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
|
||||
Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
|
||||
Toast.show({ type: 'small', text1: 'Berhasil menghapus data' })
|
||||
} else {
|
||||
Toast.show({ type: 'small', text1: response.message, })
|
||||
Toast.show({ type: 'small', text1: response.message })
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
const message = error?.response?.data?.message || "Gagal menghapus data"
|
||||
|
||||
Toast.show({ type: 'small', text1: message })
|
||||
} finally {
|
||||
setModal(false);
|
||||
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus data" })
|
||||
}
|
||||
}
|
||||
|
||||
const canApprove = isApprover || isAdminDivision
|
||||
const showAjukan = (isMemberDivision || canApprove) && tugas.status === 0 && status !== 3
|
||||
const showApproverActions = canApprove && tugas.status === 2
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={[Styles.mb15, Styles.mt10]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
|
||||
<View>
|
||||
{
|
||||
loading ?
|
||||
arrSkeleton.map((item, index) => {
|
||||
return (
|
||||
<SkeletonTask key={index} />
|
||||
)
|
||||
})
|
||||
:
|
||||
data.length > 0
|
||||
?
|
||||
data.map((item, index) => {
|
||||
return (
|
||||
<ItemSectionTanggalTugas
|
||||
key={index}
|
||||
done={item.status === 1}
|
||||
title={item.title}
|
||||
dateStart={item.dateStart}
|
||||
dateEnd={item.dateEnd}
|
||||
files={item.files ?? []}
|
||||
onPress={() => {
|
||||
setTugas({
|
||||
id: item.id,
|
||||
status: item.status
|
||||
})
|
||||
setModal(true)
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
:
|
||||
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
|
||||
{loading
|
||||
? arrSkeleton.map((_, index) => <SkeletonTask key={index} />)
|
||||
: data.length > 0
|
||||
? data.map((item, index) => (
|
||||
<ItemSectionTanggalTugas
|
||||
key={index}
|
||||
status={item.status}
|
||||
title={item.title}
|
||||
dateStart={item.dateStart}
|
||||
dateEnd={item.dateEnd}
|
||||
files={item.files ?? []}
|
||||
onPress={() => {
|
||||
setTugas({ id: item.id, status: item.status })
|
||||
setModal(true)
|
||||
}}
|
||||
/>
|
||||
))
|
||||
: <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
{((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision) && (
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="list-status" color={colors.text} size={25} />}
|
||||
title="Update Status"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => setSelect(true), 600)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{/* Drawer menu */}
|
||||
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu" height={40}>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
|
||||
|
||||
{/* Baris 1 — selalu tampil */}
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="file-multiple-outline" color={colors.text} size={25} />}
|
||||
title="File Tugas"
|
||||
onPress={() => {
|
||||
setModal(false);
|
||||
setModal(false)
|
||||
router.push(`/division/${id}/task/${detail}/tugas-file/${tugas.id}?member=${isMemberDivision}`)
|
||||
}}
|
||||
/>
|
||||
@@ -187,53 +214,129 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
|
||||
icon={<MaterialCommunityIcons name="clock-time-three-outline" color={colors.text} size={25} />}
|
||||
title="Detail Waktu"
|
||||
onPress={() => {
|
||||
setModal(false);
|
||||
setModal(false)
|
||||
setTimeout(() => setModalDetail(true), 600)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="history" color={colors.text} size={25} />}
|
||||
title="Riwayat"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
handleLoadRiwayat()
|
||||
setTimeout(() => setModalRiwayat(true), 600)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Separator */}
|
||||
{(showAjukan || showApproverActions || (canTakeAction && isAdmin && status !== 3)) && (
|
||||
<View style={{ width: '100%', height: 15 }} />
|
||||
)}
|
||||
|
||||
{/* Baris 2 — aksi kondisional */}
|
||||
{showAjukan && (
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="check-circle-outline" color={colors.text} size={25} />}
|
||||
title="Ajukan Selesai"
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => handleSubmitAjukan(), 600)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{showApproverActions && (
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="shield-check-outline" color={colors.text} size={25} />}
|
||||
title="Persetujuan"
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => setModalPersetujuan(true), 600)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{canTakeAction && isAdmin && status !== 3 && (
|
||||
<>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
|
||||
title="Edit Tugas"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
router.push(`./update/${tugas.id}`)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
|
||||
title="Hapus Tugas"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => setShowDeleteModal(true), 600)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
{/* Drawer persetujuan */}
|
||||
<DrawerBottom animation="slide" isVisible={modalPersetujuan} setVisible={setModalPersetujuan} title="Persetujuan Tugas" height={25}>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="check-circle" color={colors.success} size={25} />}
|
||||
title="Setujui"
|
||||
color={colors.success}
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModalPersetujuan(false)
|
||||
setTimeout(() => setModalKonfirmasiSetujui(true), 600)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="close-circle-outline" color={colors.error} size={25} />}
|
||||
title="Tolak"
|
||||
color={colors.error}
|
||||
disabled={loadingAction}
|
||||
onPress={() => {
|
||||
setModalPersetujuan(false)
|
||||
setTimeout(() => setModalTolak(true), 600)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
{((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision) && (
|
||||
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
|
||||
<MenuItemRow
|
||||
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
|
||||
title="Edit Tugas"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
router.push(`./update/${tugas.id}`)
|
||||
}}
|
||||
/>
|
||||
<MenuItemRow
|
||||
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
|
||||
title="Hapus Tugas"
|
||||
onPress={() => {
|
||||
setModal(false)
|
||||
setTimeout(() => setShowDeleteModal(true), 600)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</DrawerBottom>
|
||||
|
||||
<ModalConfirmation
|
||||
visible={showDeleteModal}
|
||||
title="Konfirmasi"
|
||||
message="Apakah anda yakin ingin menghapus data ini?"
|
||||
onConfirm={() => {
|
||||
setShowDeleteModal(false)
|
||||
handleDelete()
|
||||
}}
|
||||
onConfirm={() => { setShowDeleteModal(false); handleDelete() }}
|
||||
onCancel={() => setShowDeleteModal(false)}
|
||||
confirmText="Hapus"
|
||||
cancelText="Batal"
|
||||
/>
|
||||
|
||||
<ModalSelect
|
||||
category="status-task"
|
||||
close={() => setSelect(false)}
|
||||
onSelect={(value) => { handleUpdate(Number(value.val)) }}
|
||||
title="Status"
|
||||
open={isSelect}
|
||||
valChoose={String(tugas.status)}
|
||||
<ModalConfirmation
|
||||
visible={modalKonfirmasiSetujui}
|
||||
title="Konfirmasi"
|
||||
message="Apakah anda yakin ingin menyetujui tugas ini?"
|
||||
onConfirm={handleSetujui}
|
||||
onCancel={() => setModalKonfirmasiSetujui(false)}
|
||||
confirmText="Setujui"
|
||||
cancelText="Batal"
|
||||
/>
|
||||
|
||||
<ModalRiwayatApproval
|
||||
isVisible={modalRiwayat}
|
||||
setVisible={setModalRiwayat}
|
||||
data={riwayatData}
|
||||
loading={loadingRiwayat}
|
||||
/>
|
||||
|
||||
<ModalTolakApproval
|
||||
isVisible={modalTolak}
|
||||
setVisible={setModalTolak}
|
||||
onTolak={handleTolak}
|
||||
loading={loadingAction}
|
||||
/>
|
||||
|
||||
<ModalListDetailTugasTask
|
||||
@@ -243,4 +346,4 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1068,6 +1068,107 @@ const Styles = StyleSheet.create({
|
||||
color: 'white',
|
||||
fontWeight: '500',
|
||||
},
|
||||
pv14: {
|
||||
paddingVertical: 14,
|
||||
},
|
||||
mb08: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
cWhiteDimmed: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
memberAvatarRing: {
|
||||
borderWidth: 3,
|
||||
borderColor: 'rgba(255,255,255,0.4)',
|
||||
borderRadius: 100,
|
||||
},
|
||||
memberBadgeRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
marginTop: 12,
|
||||
},
|
||||
memberBadgeApprover: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.6)',
|
||||
backgroundColor: 'rgba(255,255,255,0.15)',
|
||||
},
|
||||
memberBadgePill: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 20,
|
||||
},
|
||||
memberInfoRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 14,
|
||||
},
|
||||
memberInfoIcon: {
|
||||
width: 36,
|
||||
alignItems: 'center',
|
||||
},
|
||||
memberInfoContent: {
|
||||
flex: 1,
|
||||
marginLeft: 10,
|
||||
},
|
||||
discussionCard: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
padding: 14,
|
||||
},
|
||||
discussionIconCircle: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
},
|
||||
discussionIconCircleLg: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
discussionStatusPill: {
|
||||
alignSelf: 'flex-start',
|
||||
marginTop: 3,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
},
|
||||
discussionStatusText: {
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
},
|
||||
discussionCardIndent: {
|
||||
marginLeft: 50,
|
||||
},
|
||||
discussionSeparator: {
|
||||
height: 8,
|
||||
},
|
||||
discussionCommentText: {
|
||||
fontSize: 12,
|
||||
marginLeft: 5,
|
||||
},
|
||||
discussionDateText: {
|
||||
fontSize: 11,
|
||||
},
|
||||
discussionCommentCard: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 1,
|
||||
padding: 12,
|
||||
marginBottom: 8,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
discussionEditedText: {
|
||||
fontSize: 10,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
})
|
||||
|
||||
export default Styles;
|
||||
40
lib/api.ts
40
lib/api.ts
@@ -166,6 +166,11 @@ export const apiDeleteUser = async (data: { user: string, isActive: boolean }, i
|
||||
return response.data
|
||||
};
|
||||
|
||||
export const apiToggleApprover = async (data: { user: string, isApprover: boolean }, id: string) => {
|
||||
const response = await api.patch(`mobile/user/${id}`, data)
|
||||
return response.data
|
||||
};
|
||||
|
||||
export const apiEditUser = async (data: FormData, id: string) => {
|
||||
const response = await api.put(`/mobile/user/${id}`, data, {
|
||||
headers: {
|
||||
@@ -379,6 +384,21 @@ export const apiDeleteProjectTaskFile = async (data: { user: string }, id: strin
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiGetProjectTaskApprovals = async ({ user, id }: { user: string, id: string }) => {
|
||||
const response = await api.get(`/mobile/project/task/${id}/approval`, { params: { user } })
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiSubmitProjectTask = async ({ user, id }: { user: string, id: string }) => {
|
||||
const response = await api.post(`/mobile/project/task/${id}/approval`, { user })
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiApproveRejectProjectTask = async ({ user, id, action, note }: { user: string, id: string, action: 'approve' | 'reject', note?: string }) => {
|
||||
const response = await api.put(`/mobile/project/task/${id}/approval`, { user, action, note })
|
||||
return response.data;
|
||||
};
|
||||
|
||||
|
||||
export const apiAddMemberProject = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
|
||||
const response = await api.post(`/mobile/project/${id}/member`, data)
|
||||
@@ -686,6 +706,21 @@ export const apiAddFileTask = async ({ data, id }: { data: FormData, id: string
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiGetTaskTugasApprovals = async ({ user, id }: { user: string, id: string }) => {
|
||||
const response = await api.get(`/mobile/task/tugas/${id}/approval`, { params: { user } })
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiSubmitTaskTugas = async ({ user, id }: { user: string, id: string }) => {
|
||||
const response = await api.post(`/mobile/task/tugas/${id}/approval`, { user })
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiApproveRejectTaskTugas = async ({ user, id, action, note }: { user: string, id: string, action: 'approve' | 'reject', note?: string }) => {
|
||||
const response = await api.put(`/mobile/task/tugas/${id}/approval`, { user, action, note })
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiGetTugasTaskFile = async ({ user, id }: { user: string, id: string }) => {
|
||||
const response = await api.get(`/mobile/task/tugas/file/${id}`, { params: { user } })
|
||||
return response.data;
|
||||
@@ -824,6 +859,11 @@ export const apiReadOneNotification = async (data: { user: string, id: string })
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiReadAllNotification = async (data: { user: string }) => {
|
||||
const response = await api.post(`/mobile/home/notification`, data)
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiGetVersion = async () => {
|
||||
const response = await api.get(`mobile/version`);
|
||||
return response.data;
|
||||
|
||||
Reference in New Issue
Block a user