feat: redesign halaman detail acara kalender divisi dengan pola sectionCard
This commit is contained in:
@@ -1,12 +1,9 @@
|
||||
import ModalConfirmation from "@/components/ModalConfirmation"
|
||||
import AppHeader from "@/components/AppHeader"
|
||||
import BorderBottomItem from "@/components/borderBottomItem"
|
||||
import ButtonBackHeader from "@/components/buttonBackHeader"
|
||||
import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
|
||||
import DrawerBottom from "@/components/drawerBottom"
|
||||
import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
|
||||
import ImageUser from "@/components/imageNew"
|
||||
import MenuItemRow from "@/components/menuItemRow"
|
||||
import Skeleton from "@/components/skeleton"
|
||||
import ModalConfirmation from "@/components/ModalConfirmation"
|
||||
import Text from "@/components/Text"
|
||||
import { ConstEnv } from "@/constants/ConstEnv"
|
||||
import Styles from "@/constants/Styles"
|
||||
@@ -14,7 +11,7 @@ import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature }
|
||||
import { setUpdateCalendar } from "@/lib/calendarUpdate"
|
||||
import { useAuthSession } from "@/providers/AuthProvider"
|
||||
import { useTheme } from "@/providers/ThemeProvider"
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons"
|
||||
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
|
||||
import Clipboard from "@react-native-clipboard/clipboard"
|
||||
import { router, Stack, useLocalSearchParams } from "expo-router"
|
||||
import { useEffect, useState } from "react"
|
||||
@@ -156,135 +153,142 @@ export default function DetailEventCalendar() {
|
||||
setRefreshing(false)
|
||||
};
|
||||
|
||||
const canManage = !((entityUser.role === "user" || entityUser.role === "coadmin") && !isMemberDivision)
|
||||
|
||||
const repeatLabel: Record<string, string> = {
|
||||
once: 'Acara 1 Kali',
|
||||
daily: 'Setiap Hari',
|
||||
weekly: 'Mingguan',
|
||||
monthly: 'Bulanan',
|
||||
yearly: 'Tahunan',
|
||||
}
|
||||
|
||||
function InfoRow({ icon, label, value, onCopy }: { icon: string, label: string, value?: string, onCopy?: () => void }) {
|
||||
return (
|
||||
<View style={[Styles.sectionActionRow, { paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
|
||||
<View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
|
||||
<MaterialCommunityIcons name={icon as any} size={18} color={colors.dimmed} />
|
||||
</View>
|
||||
<View style={Styles.flex1}>
|
||||
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginBottom: 2 }]}>{label}</Text>
|
||||
{loading
|
||||
? <View style={{ height: 13, borderRadius: 6, backgroundColor: colors.icon + '20', width: '70%' }} />
|
||||
: <Text style={[Styles.textDefault, { color: colors.text }]}>{value || '-'}</Text>
|
||||
}
|
||||
</View>
|
||||
{onCopy && !loading && value && (
|
||||
<Pressable onPress={onCopy} style={{ padding: 4 }}>
|
||||
<MaterialCommunityIcons name="content-copy" size={16} color={colors.dimmed} />
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
|
||||
<SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
|
||||
headerTitle: 'Detail Acara',
|
||||
headerTitleAlign: 'center',
|
||||
// headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Detail Acara"
|
||||
showBack={true}
|
||||
onPressLeft={() => router.back()}
|
||||
right={
|
||||
(entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
|
||||
(entityUser.role === "user" || entityUser.role === "coadmin") && !isMemberDivision
|
||||
? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
|
||||
}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<ScrollView
|
||||
style={[Styles.h100]}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
tintColor={colors.icon}
|
||||
/>
|
||||
}
|
||||
showsVerticalScrollIndicator={false}
|
||||
style={Styles.h100}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />}
|
||||
>
|
||||
<View style={[Styles.p15]}>
|
||||
<View style={[Styles.wrapPaper, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
|
||||
<View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
|
||||
<MaterialCommunityIcons name="calendar-text" size={30} color={colors.text} style={Styles.mr10} />
|
||||
{
|
||||
loading ?
|
||||
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
|
||||
: <Text style={[Styles.textDefault, Styles.w90]}>{data?.title}</Text>
|
||||
}
|
||||
<View style={[Styles.p15, Styles.mb100]}>
|
||||
|
||||
{/* Info acara */}
|
||||
<View style={[Styles.wrapPaper, Styles.sectionCard, Styles.noShadow, Styles.mb15,
|
||||
{ backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
|
||||
<View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }}>
|
||||
<View style={Styles.sectionActionRow}>
|
||||
<View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
|
||||
<MaterialCommunityIcons name="calendar-text" size={18} color={colors.dimmed} />
|
||||
</View>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Detail Acara</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
|
||||
<MaterialCommunityIcons name="calendar-month-outline" size={30} color={colors.text} style={Styles.mr10} />
|
||||
{
|
||||
loading ?
|
||||
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
|
||||
:
|
||||
<Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
|
||||
}
|
||||
<View style={{ paddingHorizontal: 16 }}>
|
||||
<InfoRow icon="format-title" label="Judul" value={data?.title} />
|
||||
<InfoRow icon="calendar-month-outline" label="Tanggal" value={data?.dateStart} />
|
||||
<InfoRow icon="clock-outline" label="Waktu" value={data ? `${data.timeStart} – ${data.timeEnd}` : undefined} />
|
||||
<InfoRow icon="repeat" label="Pengulangan" value={data?.repeatEventTyper ? repeatLabel[data.repeatEventTyper] : undefined} />
|
||||
<InfoRow icon="link-variant" label="Link Meet" value={data?.linkMeet} onCopy={data?.linkMeet ? () => handleCopy(data.linkMeet) : undefined} />
|
||||
<View style={[Styles.sectionActionRow, { paddingVertical: 10, alignItems: 'flex-start' }]}>
|
||||
<View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
|
||||
<MaterialCommunityIcons name="card-text-outline" size={18} color={colors.dimmed} />
|
||||
</View>
|
||||
<View style={Styles.flex1}>
|
||||
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginBottom: 2 }]}>Deskripsi</Text>
|
||||
{loading
|
||||
? <View style={{ height: 13, borderRadius: 6, backgroundColor: colors.icon + '20', width: '80%' }} />
|
||||
: <Text style={[Styles.textDefault, { color: colors.text, lineHeight: 22 }]}>{data?.desc || '-'}</Text>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
|
||||
<MaterialCommunityIcons name="clock-outline" size={30} color={colors.text} style={Styles.mr10} />
|
||||
{
|
||||
loading ?
|
||||
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
|
||||
:
|
||||
<Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
|
||||
}
|
||||
</View>
|
||||
|
||||
{/* Daftar anggota */}
|
||||
<View style={[Styles.wrapPaper, Styles.sectionCard, Styles.noShadow,
|
||||
{ backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
|
||||
|
||||
<View style={[Styles.sectionActionRow, { padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
|
||||
<View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
|
||||
<MaterialIcons name="people" size={18} color={colors.dimmed} />
|
||||
</View>
|
||||
<Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Anggota</Text>
|
||||
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>{member.length} anggota</Text>
|
||||
</View>
|
||||
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
|
||||
<MaterialCommunityIcons name="repeat" size={30} color={colors.text} style={Styles.mr10} />
|
||||
{
|
||||
loading ?
|
||||
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
|
||||
:
|
||||
<Text style={[Styles.textDefault]}>
|
||||
|
||||
{member.length === 0
|
||||
? (
|
||||
<View style={[Styles.contentItemCenter, { paddingVertical: 40 }]}>
|
||||
<MaterialIcons name="people-outline" size={34} color={colors.icon + '50'} />
|
||||
<Text style={[Styles.textMediumNormal, Styles.mt10, { color: colors.dimmed }]}>Belum ada anggota</Text>
|
||||
</View>
|
||||
)
|
||||
: member.map((item, index) => (
|
||||
<Pressable
|
||||
key={index}
|
||||
onPress={() => {
|
||||
if (!canManage) return
|
||||
setMemberChoose({ id: item.idUser, name: item.name })
|
||||
setModalMember(true)
|
||||
}}
|
||||
style={({ pressed }) => [
|
||||
Styles.rowItemsCenter, Styles.ph15,
|
||||
{
|
||||
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={colors.text} style={Styles.mr10} />
|
||||
{
|
||||
loading ?
|
||||
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
|
||||
:
|
||||
data?.linkMeet ?
|
||||
<Pressable onPress={() => { handleCopy(data.linkMeet) }}>
|
||||
<Text style={[Styles.textDefault]}>{data.linkMeet}</Text>
|
||||
</Pressable>
|
||||
: <Text style={[Styles.textDefault]}>-</Text>
|
||||
}
|
||||
</View>
|
||||
<View style={[Styles.rowItemsCenter, Styles.mt10, { alignItems: 'flex-start' }]}>
|
||||
<MaterialCommunityIcons name="card-text-outline" size={30} color={colors.text} style={Styles.mr10} />
|
||||
{
|
||||
loading ?
|
||||
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
|
||||
:
|
||||
<Text style={[Styles.textDefault, Styles.w90]}>{data?.desc}</Text>
|
||||
}
|
||||
</View>
|
||||
paddingVertical: 12, gap: 14,
|
||||
borderBottomWidth: index < member.length - 1 ? 1 : 0,
|
||||
borderBottomColor: colors.icon + '14',
|
||||
backgroundColor: pressed && canManage ? colors.icon + '0E' : 'transparent',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
|
||||
<View style={Styles.flex1}>
|
||||
<Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
|
||||
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]} numberOfLines={1}>{item.email}</Text>
|
||||
</View>
|
||||
{canManage && <MaterialCommunityIcons name="chevron-right" size={18} color={colors.icon + '60'} />}
|
||||
</Pressable>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
|
||||
<View style={[Styles.mb15]}>
|
||||
<View style={[Styles.rowSpaceBetween, Styles.mv05]}>
|
||||
<Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
|
||||
<Text style={[Styles.textDefault]}>Total {member.length} Anggota</Text>
|
||||
</View>
|
||||
|
||||
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
|
||||
{
|
||||
member.map((item, index) => (
|
||||
<BorderBottomItem
|
||||
key={index}
|
||||
borderType="bottom"
|
||||
icon={<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />}
|
||||
title={item.name}
|
||||
subtitle={item.email}
|
||||
onPress={() => {
|
||||
if ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision) {
|
||||
null
|
||||
} else {
|
||||
setMemberChoose({ id: item.idUser, name: item.name })
|
||||
setModalMember(true)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user