amalia/19-mei-26 #50

Merged
amaliadwiy merged 8 commits from amalia/19-mei-26 into join 2026-05-19 17:18:43 +08:00
16 changed files with 697 additions and 644 deletions
Showing only changes of commit d272b96e53 - Show all commits

View File

@@ -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>

View File

@@ -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>

View File

@@ -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' },