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

upd: member

Browse Source 
Deskripsi:
- list member
- ui tambah member
- ui detail member
- ui edit member

No Issues
This commit is contained in:
amel
2025-03-03 14:31:25 +08:00
parent e8ec2278d3
commit 392ef24697
14 changed files with 337 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,47 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemDetailMember from "@/components/itemDetailMember";
import HeaderRightMemberDetail from "@/components/member/headerMemberDetail";
import Styles from "@/constants/Styles";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
export default function MemberDetail() {
const { id } = useLocalSearchParams();
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Anggota',
headerTitleAlign:'center',
headerRight: () => <HeaderRightMemberDetail id={id} />,
headerShadowVisible: false
}}
/>
<ScrollView>
<View style={{ flexDirection: 'column' }}>
<View style={[Styles.wrapHeadViewMember]}>
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileBig]}
/>
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>Putri Ayu Dewi</Text>
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>Super Admin</Text>
</View>
<View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
</View>
<ItemDetailMember category="nik" value="123456789" />
<ItemDetailMember category="group" value="Dinas" />
<ItemDetailMember category="position" value="Sekretaris" />
<ItemDetailMember category="phone" value="08980873782" />
<ItemDetailMember category="email" value="putri@gmail.com" />
<ItemDetailMember category="gender" value="Perempuan" />
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

77
app/(application)/member/create.tsx
View File

@@ -1,7 +1,80 @@
import { Text } from "react-native";
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import { InputForm } from "@/components/inputForm";
import SelectForm from "@/components/selectForm";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from 'expo-image-picker';
import { router, Stack } from "expo-router";
import { useState } from "react";
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
export default function CreateMember() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
const pickImageAsync = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: true,
quality: 1,
});
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
} else {
alert('Tidak ada gambar yang dipilih');
}
};
return (
<Text>Tambah Member</Text>
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Anggota',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
{
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={[Styles.userProfileBig]} />
</Pressable>
) : (
<Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]}>
<MaterialCommunityIcons name="account-tie" size={100} color={'gray'} />
</Pressable>
)
}
</View>
<SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
<SelectForm label="Jabatan" placeholder="Pilih Jabatan" value={chooseGroup.label} required onPress={() => { }} />
<SelectForm label="User Role" placeholder="Pilih Role" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="NIK" type="numeric" placeholder="NIK" required />
<InputForm label="Nama" type="default" placeholder="Nama" required />
<InputForm label="Email" type="default" placeholder="Email" required />
<InputForm label="Nomor Telepon" type="numeric" placeholder="8XX-XXX-XXX" required itemLeft={<Text>+62</Text>} />
<SelectForm label="Jenis Kelamin" placeholder="Pilih Jenis Kelamin" value={chooseGroup.label} required onPress={() => { }} />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('/member?active=true')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

79
app/(application)/member/edit/[id].tsx Normal file
View File

@@ -0,0 +1,79 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import SelectForm from "@/components/selectForm"
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import * as ImagePicker from 'expo-image-picker'
import { router, Stack } from "expo-router"
import { useState } from "react"
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
export default function EditMember() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
const pickImageAsync = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: true,
quality: 1,
});
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
} else {
alert('Tidak ada gambar yang dipilih');
}
};
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Anggota',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
{
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={[Styles.userProfileBig]} />
</Pressable>
) : (
<Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]}>
<MaterialCommunityIcons name="account-tie" size={100} color={'gray'} />
</Pressable>
)
}
</View>
<SelectForm label="Jabatan" placeholder="Pilih Jabatan" value={chooseGroup.label} required onPress={() => { }} />
<SelectForm label="User Role" placeholder="Pilih Role" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="NIK" type="numeric" placeholder="NIK" required />
<InputForm label="Nama" type="default" placeholder="Nama" required />
<InputForm label="Email" type="default" placeholder="Email" required />
<InputForm label="Nomor Telepon" type="numeric" placeholder="8XX-XXX-XXX" required itemLeft={<Text>+62</Text>} />
<SelectForm label="Jenis Kelamin" placeholder="Pilih Jenis Kelamin" value={chooseGroup.label} required onPress={() => { }} />
<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>
)
}

12
app/(application)/member/index.tsx
View File

@@ -35,7 +35,7 @@ export default function Index() {
</View>
<View>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -48,7 +48,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -61,7 +61,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -74,7 +74,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -87,7 +87,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -100,7 +100,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image

59
app/(application)/profile.tsx
View File

@@ -1,8 +1,9 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonHeader } from "@/components/buttonHeader";
import ItemDetailMember from "@/components/itemDetailMember";
import Styles from "@/constants/Styles";
import { AntDesign, MaterialCommunityIcons, MaterialIcons, Octicons } from "@expo/vector-icons";
import { Octicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
@@ -14,6 +15,7 @@ export default function Profile() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Profile',
headerTitleAlign: 'center',
headerShadowVisible: false,
headerRight: () => <ButtonHeader
item={<Octicons name="sign-out" size={20} color="white" />}
onPress={() => {
@@ -41,55 +43,12 @@ export default function Profile() {
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
<Text style={[Styles.textLink]}>Edit</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>NIK</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>123456789</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<AntDesign name="tags" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Lembaga Desa</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="account-tie" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Jabatan</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>Bendahara</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialIcons name="phone" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>No Telepon</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>09482903842</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialIcons name="email" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Email</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>ayu@gmail.com</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="gender-male-female" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Jenis Kelamin</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>Perempuan</Text>
</View>
<ItemDetailMember category="nik" value="123456789" />
<ItemDetailMember category="group" value="Dinas" />
<ItemDetailMember category="position" value="Sekretaris" />
<ItemDetailMember category="phone" value="08980873782" />
<ItemDetailMember category="email" value="putri@gmail.com" />
<ItemDetailMember category="gender" value="Perempuan" />
</View>
</View>
</ScrollView>