amalia/19-mei-26 #50
@@ -87,11 +87,24 @@ export default function Discussion() {
|
||||
|
||||
const isOpen = (item: Props) => item.status === 1
|
||||
|
||||
const themed = {
|
||||
background: { backgroundColor: colors.background },
|
||||
card: { backgroundColor: colors.card, borderColor: colors.icon + '20' },
|
||||
cardPressed: { backgroundColor: colors.icon + '10' },
|
||||
iconCircle: { backgroundColor: colors.icon + '20' },
|
||||
title: { color: colors.text },
|
||||
dimmed: { color: colors.dimmed },
|
||||
statusOpen: { borderColor: '#10B981' as const },
|
||||
statusClosed: { borderColor: colors.dimmed + '80' },
|
||||
statusTextOpen: { color: '#10B981' as const },
|
||||
statusTextClosed: { color: colors.dimmed },
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<View style={[Styles.flex1, themed.background]}>
|
||||
<GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} />
|
||||
{/* Header controls */}
|
||||
<View style={[Styles.ph15, { paddingTop: 12 }]}>
|
||||
<View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
|
||||
{entityUser.role != "user" && entityUser.role != "coadmin" && (
|
||||
<WrapTab>
|
||||
<ButtonTab
|
||||
@@ -122,13 +135,13 @@ export default function Discussion() {
|
||||
</View>
|
||||
|
||||
{/* List */}
|
||||
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}>
|
||||
<View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
|
||||
{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 }]}>
|
||||
<Text style={[Styles.mt10, Styles.discussionEmptyText, themed.dimmed]}>
|
||||
Tidak ada diskusi
|
||||
</Text>
|
||||
</View>
|
||||
@@ -154,27 +167,25 @@ export default function Discussion() {
|
||||
onPress={() => router.push(`/discussion/${item.id}`)}
|
||||
style={({ pressed }) => [
|
||||
Styles.discussionCard,
|
||||
{
|
||||
backgroundColor: pressed ? colors.icon + '10' : colors.card,
|
||||
borderColor: colors.icon + '20',
|
||||
}
|
||||
themed.card,
|
||||
pressed && themed.cardPressed,
|
||||
]}
|
||||
>
|
||||
{/* Top row: icon + title + status badge */}
|
||||
<View style={[Styles.rowItemsCenter, Styles.mb08]}>
|
||||
{/* Discussion icon */}
|
||||
<View style={[Styles.discussionIconCircle, { backgroundColor: colors.icon + '20' }]}>
|
||||
<View style={[Styles.discussionIconCircle, themed.iconCircle]}>
|
||||
<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}>
|
||||
<View style={[Styles.flex1, Styles.discussionTitleCol]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, themed.title]} 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 }]}>
|
||||
<View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
|
||||
<Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
|
||||
{isOpen(item) ? 'Buka' : 'Tutup'}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -185,7 +196,7 @@ export default function Discussion() {
|
||||
{/* Description */}
|
||||
{item.desc ? (
|
||||
<Text
|
||||
style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]}
|
||||
style={[Styles.textMediumNormal, Styles.discussionCardIndent, Styles.discussionDescMargin, themed.title]}
|
||||
numberOfLines={2}
|
||||
>
|
||||
{item.desc.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
|
||||
@@ -196,11 +207,11 @@ export default function Discussion() {
|
||||
<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 }]}>
|
||||
<Text style={[Styles.discussionCommentText, themed.dimmed]}>
|
||||
{item.total_komentar} Komentar
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[Styles.discussionDateText, { color: colors.dimmed }]}>
|
||||
<Text style={[Styles.discussionDateText, themed.dimmed]}>
|
||||
{item.createdAt}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -98,11 +98,23 @@ export default function DiscussionDivision() {
|
||||
|
||||
const isOpen = (item: Props) => item.status === 1
|
||||
|
||||
const themed = {
|
||||
background: { backgroundColor: colors.background },
|
||||
card: { backgroundColor: colors.card, borderColor: colors.icon + '20' },
|
||||
cardPressed: { backgroundColor: colors.icon + '10' },
|
||||
title: { color: colors.text },
|
||||
dimmed: { color: colors.dimmed },
|
||||
statusOpen: { borderColor: '#10B981' as const },
|
||||
statusClosed: { borderColor: colors.dimmed + '80' },
|
||||
statusTextOpen: { color: '#10B981' as const },
|
||||
statusTextClosed: { color: colors.dimmed },
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
||||
<View style={[Styles.flex1, themed.background]}>
|
||||
<GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DISCUSSION} onDismiss={dismissGuide} />
|
||||
{((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && (
|
||||
<View style={[Styles.ph15, { paddingTop: 12 }]}>
|
||||
<View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
|
||||
<WrapTab>
|
||||
<ButtonTab
|
||||
active={status == "false" ? "false" : "true"}
|
||||
@@ -125,13 +137,13 @@ export default function DiscussionDivision() {
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 8 }]}>
|
||||
<View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
|
||||
{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 }]}>
|
||||
<Text style={[Styles.mt10, Styles.discussionEmptyText, themed.dimmed]}>
|
||||
Tidak ada diskusi
|
||||
</Text>
|
||||
</View>
|
||||
@@ -151,18 +163,19 @@ export default function DiscussionDivision() {
|
||||
onPress={() => router.push(`./discussion/${item.id}`)}
|
||||
style={({ pressed }) => [
|
||||
Styles.discussionCard,
|
||||
{ backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
|
||||
themed.card,
|
||||
pressed && themed.cardPressed,
|
||||
]}
|
||||
>
|
||||
<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}>
|
||||
<View style={[Styles.flex1, Styles.discussionTitleCol]}>
|
||||
<Text style={[Styles.textDefaultSemiBold, themed.title]} 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 }]}>
|
||||
<View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
|
||||
<Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
|
||||
{isOpen(item) ? 'Buka' : 'Tutup'}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -171,7 +184,7 @@ export default function DiscussionDivision() {
|
||||
</View>
|
||||
|
||||
{item.desc ? (
|
||||
<Text style={[Styles.textMediumNormal, Styles.discussionCardIndent, { color: colors.dimmed, marginBottom: 10 }]} numberOfLines={2}>
|
||||
<Text style={[Styles.textMediumNormal, Styles.discussionCardIndent, Styles.discussionDescMargin, themed.title]} numberOfLines={2}>
|
||||
{item.desc}
|
||||
</Text>
|
||||
) : null}
|
||||
@@ -179,11 +192,11 @@ export default function DiscussionDivision() {
|
||||
<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 }]}>
|
||||
<Text style={[Styles.discussionCommentText, themed.dimmed]}>
|
||||
{item.total_komentar} Komentar
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[Styles.discussionDateText, { color: colors.dimmed }]}>
|
||||
<Text style={[Styles.discussionDateText, themed.dimmed]}>
|
||||
{item.createdAt}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
@@ -86,6 +86,11 @@ const ComponentStyles = StyleSheet.create({
|
||||
discussionDateText: { fontSize: 11 },
|
||||
discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
|
||||
discussionEditedText: { fontSize: 10, fontStyle: 'italic' },
|
||||
discussionHeaderPadding: { paddingTop: 12 },
|
||||
discussionListPadding: { paddingTop: 8 },
|
||||
discussionTitleCol: { marginLeft: 10 },
|
||||
discussionDescMargin: { marginBottom: 10 },
|
||||
discussionEmptyText: { fontSize: 14 },
|
||||
|
||||
// guide overlay
|
||||
guideOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' },
|
||||
|
||||
Reference in New Issue
Block a user