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

upd: discussion general

Browse Source 
Deskripsi;
- ui tambah diskusi
- ui edit diskusi
- ui  detail diskusi
- ui list anggota diskusi
- ui tutup diskusi
- ui arsip diskusi

No Issues
This commit is contained in:
amel
2025-03-04 12:10:38 +08:00
parent d923d10290
commit 44b1ffaef5
9 changed files with 520 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
app/(application)/discussion/[id].tsx
View File

@@ -1,7 +1,153 @@
import { Text } from "react-native";
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
import { InputForm } from "@/components/inputForm";
import LabelStatus from "@/components/labelStatus";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, ScrollView, Text, View } from "react-native";
export default function DetailDiscussionGeneral() {
const { id } = useLocalSearchParams()
return (
<Text>Detail diskusi general</Text>
<>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Diskusi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} />,
}}
/>
<View style={{ flex: 1 }}>
<View style={{ flex: 5 }}>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<BorderBottomItem
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
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]}>15 Komentar</Text>
</View>
}
/>
<View style={[Styles.p15]}>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="sangat berdampak dari berbagai sisi"
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
</View>
</View>
</ScrollView>
</View>
<View style={[Styles.p15, { flex: 1 }]}>
<InputForm
type="default"
round
placeholder="Kirim Komentar"
itemRight={
<MaterialIcons name="send" size={25} color={'#384288'} />
}
/>
</View>
</View>
</>
)
}

47
app/(application)/discussion/create.tsx
View File

@@ -1,7 +1,46 @@
import { Text } from "react-native";
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import ButtonSelect from "@/components/buttonSelect";
import { InputForm } from "@/components/inputForm";
import SelectForm from "@/components/selectForm";
import Styles from "@/constants/Styles";
import { router, Stack } from "expo-router";
import { useState } from "react";
import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
export default function CreateDiscussionGeneral(){
return(
<Text>Tambah diskusi general</Text>
export default function CreateDiscussionGeneral() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Diskusi',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="Nama" type="default" placeholder="Nama" required />
<InputForm label="Diskusi" type="default" placeholder="Hal yang didiskusikan" required />
<ButtonSelect value="Pilih Anggota"/>
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('/discussion?active=true')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

39
app/(application)/discussion/edit/[id].tsx Normal file
View File

@@ -0,0 +1,39 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import Styles from "@/constants/Styles"
import { router, Stack } from "expo-router"
import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
export default function EditDiscussionGeneral() {
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Diskusi',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<InputForm label="Judul" type="default" placeholder="Judul" required />
<InputForm label="Diskusi" type="default" placeholder="Hal yang didiskusikan" required />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengubah data?',
onPress: () => {
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
router.back()
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

90
app/(application)/discussion/index.tsx
View File

@@ -14,7 +14,7 @@ export default function Discussion() {
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
@@ -58,6 +58,94 @@ export default function Discussion() {
}
rightBottomInfo='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
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='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
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='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
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='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
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='15 Komentar'
/>
</View>
</View>
</ScrollView>

90
app/(application)/discussion/member/[id].tsx Normal file
View File

@@ -0,0 +1,90 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
export default function MemberDiscussionDetail() {
const { id } = useLocalSearchParams()
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Anggota Diskusi',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<Text style={[Styles.textDefault, Styles.mv05]}>5 Anggota</Text>
<View style={[Styles.wrapPaper]}>
<BorderBottomItem
borderType="none"
icon={
<View style={[Styles.iconContent, ColorsStatus.gray]}>
<Feather name="user-plus" size={25} color={'#384288'} />
</View>
}
title="Tambah Anggota"
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../../assets/images/user.jpeg")}
style={[Styles.userProfileSmall]}
/>
}
title="Amalia Dwi"
/>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

8
components/borderBottomItem.tsx
View File

@@ -11,16 +11,14 @@ type Props = {
desc?: string
rightTopInfo?: string
onPress?: () => void
borderType: 'all' | 'bottom'
borderType: 'all' | 'bottom' | 'none'
leftBottomInfo?: React.ReactNode | string
rightBottomInfo?: React.ReactNode | string
}
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo }: Props) {
console.log(typeof rightBottomInfo)
return (
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : Styles.wrapItemBorderAll]} onPressOut={onPress}>
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : borderType == 'all' ? Styles.wrapItemBorderAll : Styles.wrapItemBorderNone]} onPressOut={onPress}>
<View style={[Styles.rowItemsCenter]}>
{icon}
<View style={[Styles.rowSpaceBetween, { width: '85%' }]}>
@@ -43,7 +41,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
</View>
{desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'justify' }]}>{desc}</Text>}
{
leftBottomInfo && rightBottomInfo &&
(leftBottomInfo || rightBottomInfo )&&
(
<View style={[Styles.rowSpaceBetween, Styles.mt10]}>
{

22
components/buttonSelect.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import { Pressable, Text, View } from "react-native";
type Props = {
value: string
onPress?: () => void
round?: boolean
}
export default function ButtonSelect({ value, onPress, round }: Props) {
return (
<View style={[Styles.mv15]}>
<Pressable onPressOut={onPress}>
<View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, round && Styles.round30, Styles.pv10]}>
<Feather name="arrow-right-circle" size={20} color="black" />
<Text style={[Styles.cBlack]}>{value}</Text>
</View>
</Pressable>
</View>
)
}

73
components/discussion_general/headerDiscussionDetail.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { useState } from "react"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import { ToastAndroid, View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import AlertKonfirmasi from "../alertKonfirmasi"
type Props = {
id: string | string[]
}
export default function HeaderRightDiscussionGeneralDetail({ id }: Props) {
const [isVisible, setVisible] = useState(false)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />}
title="Anggota"
onPress={() => {
setVisible(false)
router.push(`/discussion/member/${id}`)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
router.push(`/discussion/edit/${id}`)
}}
/>
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
title="Tutup Diskusi"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menutup diskusi?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
}
})
}}
/>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
title="Arsipkan"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengarsipkan diskusi?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
}
})
}}
/>
</View>
</DrawerBottom>
</>
)
}

15
constants/Styles.ts
View File

@@ -93,6 +93,9 @@ const Styles = StyleSheet.create({
mt10: {
marginTop: 10
},
mt15: {
marginTop: 15
},
mr05: {
marginRight: 5
},
@@ -253,7 +256,7 @@ const Styles = StyleSheet.create({
wrapPaper: {
padding: 15,
backgroundColor: 'white',
borderRadius: 15,
borderRadius: 10,
},
contentItemCenter: {
justifyContent: 'center',
@@ -290,7 +293,15 @@ const Styles = StyleSheet.create({
borderRadius: 10,
marginBottom: 10
},
wrapItemBorderNone: {
padding: 10,
marginBottom: 5
},
userProfileExtraSmall: {
width: 35,
height: 35,
borderRadius: 100
},
userProfileSmall: {
width: 48,
height: 48,