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

upd: skeleton

Browse Source 
Deskripsi:
- divisi
- detail divisi
- informasi divisi
- calender list
- calender detail
- history
- diskusi list
- detail diskusi
- list task divisi

NO Issuese
This commit is contained in:
amel
2025-06-04 17:38:36 +08:00
parent 1e6a6d08ae
commit 68c6a745ef
13 changed files with 560 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx
View File

@@ -144,6 +144,7 @@ export default function AddMemberCalendarEvent() {
style={[Styles.itemSelectModal]}
onPress={() => {
!found && onChoose(item.idUser, item.name, item.img)
onChoose(item.idUser, item.name, item.img)
}}
>
<View style={[Styles.rowItemsCenter]}>

68
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
View File

@@ -5,6 +5,7 @@ import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetai
import DrawerBottom from "@/components/drawerBottom"
import ImageUser from "@/components/imageNew"
import MenuItemRow from "@/components/menuItemRow"
import Skeleton from "@/components/skeleton"
import Styles from "@/constants/Styles"
import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
import { setUpdateCalendar } from "@/lib/calendarUpdate"
@@ -49,6 +50,8 @@ export default function DetailEventCalendar() {
const dispatch = useDispatch()
const entityUser = useSelector((state: any) => state.user);
const [isMemberDivision, setIsMemberDivision] = useState(false);
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 })
async function handleCheckMember() {
try {
@@ -67,6 +70,7 @@ export default function DetailEventCalendar() {
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarOne({
user: hasil,
@@ -76,6 +80,8 @@ export default function DetailEventCalendar() {
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -131,7 +137,7 @@ export default function DetailEventCalendar() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Detail Acara',
headerTitleAlign: 'center',
headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} />
headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
}}
/>
<ScrollView>
@@ -139,36 +145,66 @@ export default function DetailEventCalendar() {
<View style={[Styles.wrapPaper, Styles.mb15]}>
<View style={Styles.rowItemsCenter}>
<MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>{data?.title}</Text>
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
: <Text style={[Styles.textDefault]}>{data?.title}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>
{
data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
''
}
</Text>
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>
{
data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
''
}
</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
}
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>{data?.desc}</Text>
{
loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
:
<Text style={[Styles.textDefault]}>{data?.desc}</Text>
}
</View>
</View>

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

@@ -1,6 +1,7 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
import InputSearch from "@/components/inputSearch";
import Skeleton from "@/components/skeleton";
import Styles from "@/constants/Styles";
import { apiGetCalendarHistory } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
@@ -10,7 +11,7 @@ import { SafeAreaView, ScrollView, View } from "react-native";
type Props = {
dateStart: Date
year:string
year: string
data: []
}
export default function CalendarHistory() {
@@ -18,14 +19,19 @@ export default function CalendarHistory() {
const { token, decryptToken } = useAuthSession();
const [data, setData] = useState<Props[]>([])
const [search, setSearch] = useState('')
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 })
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id });
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -45,7 +51,15 @@ export default function CalendarHistory() {
<ScrollView>
<View style={[Styles.p15]}>
<InputSearch onChange={(val) => setSearch(val)} />
<ItemHistoryEvent data={data} />
{
loading ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
))
:
<ItemHistoryEvent data={data} />
}
</View>
</ScrollView>
</SafeAreaView>

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

@@ -2,6 +2,7 @@ import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderRightCalendarList from "@/components/calendar/headerCalendarList";
import ItemDateCalendar from "@/components/calendar/itemDateCalendar";
import EventItem from "@/components/eventItem";
import Skeleton from "@/components/skeleton";
import Styles from "@/constants/Styles";
import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
@@ -15,7 +16,7 @@ import Datepicker, {
CalendarComponents,
CalendarDay
} from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux";
import { useSelector } from "react-redux";
type Props = {
id: string;
@@ -38,10 +39,12 @@ export default function CalendarDivision() {
const [dataIndicator, setDataIndicator] = useState<any>([]);
const [month, setMonth] = useState<number>(new Date().getMonth());
const update = useSelector((state: any) => state.calendarUpdate)
const [loading, setLoading] = useState(true)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetCalendarByDateDivision({
user: hasil,
@@ -51,6 +54,8 @@ export default function CalendarDivision() {
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -70,8 +75,12 @@ export default function CalendarDivision() {
}
useEffect(() => {
handleLoad();
}, [selected, update.data]);
handleLoad(true)
}, [selected])
useEffect(() => {
handleLoad(false);
}, [update.data]);
useEffect(() => {
handleLoadIndicator();
@@ -133,23 +142,31 @@ export default function CalendarDivision() {
<View style={[Styles.mb15, Styles.mt15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
<View style={[Styles.wrapPaper]}>
{data.length > 0 ? (
data.map((item, index) => (
<EventItem
key={index}
category={index % 2 == 0 ? 'purple' : 'orange'}
title={item.title}
user={item.user_name}
jamAwal={item.timeStart}
jamAkhir={item.timeEnd}
onPress={() => {
router.push(`./calendar/${item.id}`);
}}
/>
))
) : (
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
)}
{
loading ?
<>
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
</>
:
data.length > 0 ? (
data.map((item, index) => (
<EventItem
key={index}
category={index % 2 == 0 ? 'purple' : 'orange'}
title={item.title}
user={item.user_name}
jamAwal={item.timeStart}
jamAkhir={item.timeEnd}
onPress={() => {
router.push(`./calendar/${item.id}`);
}}
/>
))
) : (
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
)
}
</View>
</View>
</View>

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

@@ -4,6 +4,8 @@ import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussio
import ImageUser from "@/components/imageNew";
import { InputForm } from "@/components/inputForm";
import LabelStatus from "@/components/labelStatus";
import Skeleton from "@/components/skeleton";
import SkeletonContent from "@/components/skeletonContent";
import Styles from "@/constants/Styles";
import {
apiGetDiscussionOne,
@@ -50,9 +52,13 @@ export default function DiscussionDetail() {
const [isMemberDivision, setIsMemberDivision] = useState(false);
const [isAdminDivision, setIsAdminDivision] = useState(false);
const [isCreator, setIsCreator] = useState(false);
const [loading, setLoading] = useState(true)
const [loadingKomentar, setLoadingKomentar] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDiscussionOne({
id: detail,
@@ -63,11 +69,14 @@ export default function DiscussionDetail() {
setIsCreator(response.data.createdBy == hasil);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
async function handleLoadComment() {
async function handleLoadComment(loading: boolean) {
try {
setLoadingKomentar(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDiscussionOne({
id: detail,
@@ -77,6 +86,8 @@ export default function DiscussionDetail() {
setDataComment(response.data);
} catch (error) {
console.error(error);
} finally {
setLoadingKomentar(false)
}
}
@@ -102,11 +113,12 @@ export default function DiscussionDetail() {
}
useEffect(() => {
handleLoad();
handleLoad(false);
}, [update.data]);
useEffect(() => {
handleLoadComment();
handleLoad(true)
handleLoadComment(true);
handleCheckMember();
}, []);
@@ -120,7 +132,7 @@ export default function DiscussionDetail() {
});
if (response.success) {
setKomentar("");
handleLoadComment();
handleLoadComment(false);
}
} catch (error) {
console.error(error);
@@ -155,64 +167,78 @@ export default function DiscussionDetail() {
<View style={{ flex: 1 }}>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<BorderBottomItem
descEllipsize={false}
width={60}
borderType="bottom"
icon={
<ImageUser
src={`https://wibu-storage.wibudev.com/api/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" />
)
) : (
<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, Styles.cGray, Styles.mb05]}
>
{dataComment.length} Komentar
</Text>
</View>
}
/>
<View style={[Styles.p15]}>
{dataComment.map((item, index) => (
{
loading ?
<SkeletonContent />
:
<BorderBottomItem
key={index}
width={55}
descEllipsize={false}
width={60}
borderType="bottom"
icon={
<ImageUser
src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
size="xs"
src={`https://wibu-storage.wibudev.com/api/files/${data?.user_img}`}
size="sm"
/>
}
title={item.username}
rightTopInfo={item.createdAt}
desc={item.comment}
descEllipsize={false}
title={data?.username}
subtitle={
data?.isActive ? (
data?.status == 1 ? (
<LabelStatus category="success" text="BUKA" size="small" />
) : (
<LabelStatus category="error" text="TUTUP" size="small" />
)
) : (
<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, Styles.cGray, Styles.mb05]}
>
{dataComment.length} Komentar
</Text>
</View>
}
/>
))}
}
<View style={[Styles.p15]}>
{
loadingKomentar ?
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} widthType="percent" height={40} borderRadius={5} />
))
:
dataComment.map((item, index) => (
<BorderBottomItem
key={index}
width={55}
borderType="bottom"
icon={
<ImageUser
src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
size="xs"
/>
}
title={item.username}
rightTopInfo={item.createdAt}
desc={item.comment}
descEllipsize={false}
/>
))
}
</View>
</View>
</ScrollView>

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

@@ -3,8 +3,9 @@ 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 Styles from "@/constants/Styles";
import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
import { apiGetDiscussion } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
@@ -32,21 +33,30 @@ export default function DiscussionDivision() {
const { token, decryptToken } = useAuthSession()
const [search, setSearch] = useState('')
const update = useSelector((state: any) => state.discussionUpdate);
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 5 })
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussion({ user: hasil, search, division: id, active })
setData(response.data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad(false)
}, [update.data])
useEffect(() => {
handleLoad()
}, [active, search, update.data])
handleLoad(true)
}, [active, search])
return (
<SafeAreaView>
@@ -70,35 +80,44 @@ export default function DiscussionDivision() {
</View>
<InputSearch onChange={setSearch} />
<View>
{data.length > 0 ?
data.map((item, index) => (
<BorderBottomItem
key={index}
width={55}
onPress={() => { router.push(`./discussion/${item.id}`) }}
borderType="bottom"
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
}
title={item.user_name}
subtitle={
active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
}
rightTopInfo={item.createdAt}
desc={item.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo={item.total_komentar + ' Komentar'}
/>
))
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
)}
{
loading ?
arrSkeleton.map((item: any, i: number) => {
return (
<SkeletonContent key={i} />
)
})
:
data.length > 0 ?
data.map((item, index) => (
<BorderBottomItem
key={index}
width={55}
onPress={() => { router.push(`./discussion/${item.id}`) }}
borderType="bottom"
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
}
title={item.user_name}
subtitle={
active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
}
rightTopInfo={item.createdAt}
desc={item.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo={item.total_komentar + ' Komentar'}
/>
))
:
(
<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
)
}
</View>
</View>
</ScrollView>

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

@@ -4,6 +4,8 @@ import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import PaperGridContent from "@/components/paperGridContent";
import ProgressBar from "@/components/progressBar";
import Skeleton from "@/components/skeleton";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetTask } from "@/lib/api";
@@ -34,9 +36,12 @@ export default function ListTask() {
const [data, setData] = useState<Props[]>([]);
const [search, setSearch] = useState("");
const update = useSelector((state: any) => state.taskUpdate)
const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 })
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetTask({
user: hasil,
@@ -47,12 +52,18 @@ export default function ListTask() {
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad();
}, [status, search, update.data]);
handleLoad(false)
}, [update.data])
useEffect(() => {
handleLoad(true);
}, [status, search]);
return (
<SafeAreaView>
@@ -138,74 +149,87 @@ export default function ListTask() {
/>
</Pressable>
</View>
{data.length > 0 ? (
<></>
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)}
{isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={"#384288"} />
</View>
}
title={item.title}
/>
))}
</View>
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
content="page"
title={item.title}
headerColor="primary"
>
<ProgressBar category="page" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}>
<Text></Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
{
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
data.length > 0 ? (
isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={"#384288"} />
</View>
}
title={item.title}
/>
))}
</View>
</PaperGridContent>
))}
</View>
)}
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`./task/${item.id}`);
}}
content="page"
title={item.title}
headerColor="primary"
>
<ProgressBar category="page" value={item.progress} />
<View style={[Styles.rowSpaceBetween]}>
<Text></Text>
<LabelStatus
size="default"
category={
item.status === 0 ? 'primary' :
item.status === 1 ? 'warning' :
item.status === 2 ? 'success' :
item.status === 3 ? 'error' :
'primary'
}
text={
item.status === 0 ? 'SEGERA' :
item.status === 1 ? 'DIKERJAKAN' :
item.status === 2 ? 'SELESAI' :
item.status === 3 ? 'DIBATALKAN' :
'SEGERA'
}
/>
</View>
</PaperGridContent>
))}
</View>
)
) : (
<Text
style={[
Styles.textDefault,
Styles.cGray,
{ textAlign: "center" },
]}
>
Tidak ada data
</Text>
)
}
</View>
</ScrollView>
</SafeAreaView>

64
app/(application)/division/[id]/info.tsx
View File

@@ -5,6 +5,8 @@ import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
import DrawerBottom from "@/components/drawerBottom"
import ImageUser from "@/components/imageNew"
import SectionCancel from "@/components/sectionCancel"
import Skeleton from "@/components/skeleton"
import SkeletonTwoItem from "@/components/skeletonTwoItem"
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiUpdateStatusAdminDivision } from "@/lib/api"
@@ -41,6 +43,8 @@ export default function InformationDivision() {
const [dataMember, setDataMember] = useState<PropsMember[]>([])
const [refresh, setRefresh] = useState(false)
const update = useSelector((state: any) => state.divisionUpdate)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true)
const [dataMemberChoose, setDataMemberChoose] = useState({
id: '',
name: '',
@@ -91,21 +95,28 @@ export default function InformationDivision() {
}
}
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDivisionOneDetail({ user: hasil, id })
setDataDetail(response.data.division)
setDataMember(response.data.member)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad()
handleLoad(false)
}, [refresh, update])
useEffect(() => {
handleLoad(true)
}, [])
function handleChooseMember(item: PropsMember) {
setDataMemberChoose(item)
setModal(true)
@@ -118,7 +129,7 @@ export default function InformationDivision() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Informasi Divisi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive}/>,
headerRight: () => <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive} />,
}}
/>
<ScrollView>
@@ -131,7 +142,15 @@ export default function InformationDivision() {
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
<View style={[Styles.wrapPaper]}>
<Text>{dataDetail?.desc}</Text>
{loading ?
arrSkeleton.map((item, index) => {
return (
<Skeleton key={index} width={100} height={10} widthType="percent" borderRadius={10} />
)
})
:
<Text>{dataDetail?.desc}</Text>
}
</View>
</View>
<View style={[Styles.mb15]}>
@@ -153,21 +172,28 @@ export default function InformationDivision() {
}
{
dataMember.map((item, index) => {
return (
<BorderBottomItem
width={55}
key={index}
borderType="bottom"
onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
}
title={item.name}
rightTopInfo={item.isAdmin ? "Admin" : "Anggota"}
/>
)
})
loading ?
arrSkeleton.map((item, index) => {
return (
<SkeletonTwoItem key={index} />
)
})
:
dataMember.map((item, index) => {
return (
<BorderBottomItem
width={55}
key={index}
borderType="bottom"
onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
}
title={item.name}
rightTopInfo={item.isAdmin ? "Admin" : "Anggota"}
/>
)
})
}
</View>
</View>

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

@@ -2,6 +2,8 @@ import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import PaperGridContent from "@/components/paperGridContent";
import Skeleton from "@/components/skeleton";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDivision } from "@/lib/api";
@@ -38,9 +40,12 @@ export default function ListDivision() {
const [nameGroup, setNameGroup] = useState("");
const [data, setData] = useState<Props[]>([]);
const update = useSelector((state: any) => state.divisionUpdate)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
const [loading, setLoading] = useState(false)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDivision({
user: hasil,
@@ -56,12 +61,18 @@ export default function ListDivision() {
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useEffect(() => {
handleLoad();
}, [active, search, group, cat, update]);
handleLoad(false);
}, [update]);
useEffect(() => {
handleLoad(true);
}, [active, search, group, cat]);
return (
<SafeAreaView>
@@ -162,47 +173,57 @@ export default function ListDivision() {
)}
{
data.length == 0 ? (
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
</View>
) : (
isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={"#384288"} />
</View>
}
title={item.name}
titleWeight="normal"
/>
))}
loading ?
isList ?
arrSkeleton.map((item, index) => (
<SkeletonTwoItem key={index} />
))
:
arrSkeleton.map((item, index) => (
<Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
))
:
data.length == 0 ? (
<View style={[Styles.mt15]}>
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
</View>
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`/division/${item.id}`);
}}
content="page"
title={item.name}
headerColor="primary"
contentPosition="top"
>
<Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
</PaperGridContent>
))}
</View>
isList ? (
<View>
{data.map((item, index) => (
<BorderBottomItem
key={index}
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={"#384288"} />
</View>
}
title={item.name}
titleWeight="normal"
/>
))}
</View>
) : (
<View>
{data.map((item, index) => (
<PaperGridContent
key={index}
onPress={() => {
router.push(`/division/${item.id}`);
}}
content="page"
title={item.name}
headerColor="primary"
contentPosition="top"
>
<Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
</PaperGridContent>
))}
</View>
)
)
)
}
</View>
</ScrollView>

7
components/calendar/headerCalendarDetail.tsx
View File

@@ -13,10 +13,11 @@ import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
type Props = {
id: string | string[]
id: string | string[],
idReminder?: string
}
export default function HeaderRightCalendarDetail({ id }: Props) {
export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession()
const update = useSelector((state: any) => state.calendarUpdate)
@@ -51,7 +52,7 @@ export default function HeaderRightCalendarDetail({ id }: Props) {
title="Tambah Anggota"
onPress={() => {
setVisible(false)
router.push(`./${id}/add-member`)
router.push(`./${idReminder}/add-member`)
}}
/>
<MenuItemRow

52
components/division/discussionDivisionDetail.tsx
View File

@@ -5,6 +5,7 @@ import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import DiscussionItem from "../discussionItem";
import Skeleton from "../skeleton";
type Props = {
id: string;
@@ -18,9 +19,11 @@ export default function DiscussionDivisionDetail() {
const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>();
const [data, setData] = useState<Props[]>([]);
const [loading, setLoading] = useState(true)
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetDivisionOneFeature({
user: hasil,
@@ -30,6 +33,8 @@ export default function DiscussionDivisionDetail() {
setData(response.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
@@ -40,25 +45,34 @@ export default function DiscussionDivisionDetail() {
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper]}>
{data.length > 0 ? (
data.map((item, index) => (
<DiscussionItem
key={index}
title={item.desc}
user={item.user}
date={item.date}
onPress={() => {
router.push(`/division/${id}/discussion/${item.id}`);
}}
/>
))
) : (
<Text
style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
>
Tidak ada diskusi
</Text>
)}
{
loading ?
<>
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
</>
:
data.length > 0 ? (
data.map((item, index) => (
<DiscussionItem
key={index}
title={item.desc}
user={item.user}
date={item.date}
onPress={() => {
router.push(`/division/${id}/discussion/${item.id}`);
}}
/>
))
) : (
<Text
style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
>
Tidak ada diskusi
</Text>
)
}
</View>
</View>
);

84
components/division/fileDivisionDetail.tsx
View File

@@ -1,11 +1,12 @@
import Styles from "@/constants/Styles";
import { apiGetDivisionOneFeature } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { Feather } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react";
import { Dimensions, Text, View } from "react-native";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
import { useAuthSession } from "@/providers/AuthProvider";
import { useLocalSearchParams } from "expo-router";
import { apiGetDivisionOneFeature } from "@/lib/api";
import Skeleton from "../skeleton";
type Props = {
id: string
@@ -21,14 +22,18 @@ export default function FileDivisionDetail() {
const [data, setData] = useState<Props[]>([])
const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>()
const [loading, setLoading] = useState(true)
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'new-file' })
setData(response.data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
@@ -40,40 +45,47 @@ export default function FileDivisionDetail() {
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
{
data.length > 0 ?
<Carousel
ref={ref}
width={width}
height={115}
data={data}
loop={true}
autoPlay={false}
autoPlayReverse={false}
pagingEnabled={true}
snapEnabled={true}
vertical={false}
style={{
width: width,
}}
mode="parallax"
modeConfig={{
parallaxScrollingScale: 1,
parallaxScrollingOffset: 280,
}}
renderItem={({ index }) => (
<View style={{ margin: 'auto', width: '28%' }}>
<View style={{ alignItems: 'center' }}>
<View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
<Feather name="file-text" size={50} color="black" style={Styles.mr05} />
</View>
</View>
<Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
</View>
)}
/>
loading ?
<View style={[Styles.rowSpaceBetween]}>
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
</View>
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
data.length > 0 ?
<Carousel
ref={ref}
width={width}
height={115}
data={data}
loop={true}
autoPlay={false}
autoPlayReverse={false}
pagingEnabled={true}
snapEnabled={true}
vertical={false}
style={{
width: width,
}}
mode="parallax"
modeConfig={{
parallaxScrollingScale: 1,
parallaxScrollingOffset: 280,
}}
renderItem={({ index }) => (
<View style={{ margin: 'auto', width: '28%' }}>
<View style={{ alignItems: 'center' }}>
<View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
<Feather name="file-text" size={50} color="black" style={Styles.mr05} />
</View>
</View>
<Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
</View>
)}
/>
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
}
</View>
)

57
components/division/taskDivisionDetail.tsx
View File

@@ -6,6 +6,7 @@ import { useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react";
import { Dimensions, Text, View } from "react-native";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
import Skeleton from "../skeleton";
type Props = {
id: string
@@ -22,14 +23,18 @@ export default function TaskDivisionDetail() {
const [data, setData] = useState<Props[]>([])
const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width;
const [loading, setLoading] = useState(true)
async function handleLoad() {
try {
setLoading(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDivisionOneFeature({ user: hasil, id, cat: 'today-task' })
setData(response.data)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
@@ -40,32 +45,36 @@ export default function TaskDivisionDetail() {
return (
<View>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tugas Hari Ini</Text>
{
data.length > 0 ?
<Carousel
ref={ref}
style={{ width: "100%" }}
width={width * 0.8}
height={100}
data={data}
loop={true}
autoPlay={false}
autoPlayReverse={false}
pagingEnabled={true}
snapEnabled={true}
vertical={false}
renderItem={({ index }) => (
<View style={[Styles.wrapPaper, { width: '95%' }]}>
<Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{data[index].title} - {data[index].projectTitle}</Text>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<Feather name="clock" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{data[index].dateStart} - {data[index].dateEnd}</Text>
</View>
</View>
)}
/>
loading ?
<Skeleton width={100} widthType="percent" height={60} borderRadius={10} />
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
data.length > 0 ?
<Carousel
ref={ref}
style={{ width: "100%" }}
width={width * 0.8}
height={100}
data={data}
loop={true}
autoPlay={false}
autoPlayReverse={false}
pagingEnabled={true}
snapEnabled={true}
vertical={false}
renderItem={({ index }) => (
<View style={[Styles.wrapPaper, { width: '95%' }]}>
<Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{data[index].title} - {data[index].projectTitle}</Text>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<Feather name="clock" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{data[index].dateStart} - {data[index].dateEnd}</Text>
</View>
</View>
)}
/>
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
}
</View>
)