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>