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

upd: image picker

Browse Source 
Deskripsi:
- tambah icon kamera pada image picker > edit profile, tambah anggota dan edit anggota

No Issues
This commit is contained in:
amaliadwiy
2025-08-07 11:34:54 +08:00
parent 81aedb525f
commit 9cb848ddd2
4 changed files with 51 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/(application)/edit-profile.tsx
View File

@@ -8,6 +8,7 @@ import Styles from "@/constants/Styles";
import { apiEditProfile, apiGetProfile } from "@/lib/api"; import { apiEditProfile, apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/entitiesSlice"; import { setEntities } from "@/lib/entitiesSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -229,8 +230,8 @@ export default function EditProfile() {
), ),
}} }}
/> />
<ScrollView> <ScrollView style={[Styles.h100]}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15]}>
<View style={{ justifyContent: "center", alignItems: "center" }}> <View style={{ justifyContent: "center", alignItems: "center" }}>
{ {
selectedImage != undefined ? ( selectedImage != undefined ? (
@@ -244,16 +245,20 @@ export default function EditProfile() {
style={[Styles.userProfileBig]} style={[Styles.userProfileBig]}
onError={() => { setErrorImg(true) }} onError={() => { setErrorImg(true) }}
/> />
<View style={[Styles.absoluteIconPicker]}>
<MaterialCommunityIcons name="image" color={'white'} size={15} />
</View>
</Pressable> </Pressable>
) : ( ) : (
<Pressable onPress={pickImageAsync}> <Pressable onPress={pickImageAsync}>
{ <Image
<Image source={errorImg ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
source={errorImg ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }} style={[Styles.userProfileBig]}
style={[Styles.userProfileBig]} onError={() => { setErrorImg(true) }}
onError={() => { setErrorImg(true) }} />
/> <View style={[Styles.absoluteIconPicker]}>
} <MaterialCommunityIcons name="image" color={'white'} size={15} />
</View>
</Pressable> </Pressable>
) )
} }

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

@@ -10,6 +10,7 @@ import { apiCreateUser } from "@/lib/api";
import { setUpdateMember } from "@/lib/memberSlice"; import { setUpdateMember } from "@/lib/memberSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useHeaderHeight } from '@react-navigation/elements';
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -24,7 +25,6 @@ import {
} from "react-native"; } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
export default function CreateMember() { export default function CreateMember() {
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
@@ -147,7 +147,7 @@ export default function CreateMember() {
}, [error, dataForm]) }, [error, dataForm])
useEffect(() => { useEffect(() => {
if(entityUser.role !="supadmin" && entityUser.role != "developer"){ if (entityUser.role != "supadmin" && entityUser.role != "developer") {
validationForm("group", entities.idGroup, entities.group) validationForm("group", entities.idGroup, entities.group)
} }
}, []) }, [])
@@ -173,7 +173,7 @@ export default function CreateMember() {
fd.append("file", "undefined") fd.append("file", "undefined")
} }
const response = await apiCreateUser({data: fd}) const response = await apiCreateUser({ data: fd })
if (response.success) { if (response.success) {
Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', }) Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
dispatch(setUpdateMember(!update)) dispatch(setUpdateMember(!update))
@@ -184,7 +184,7 @@ export default function CreateMember() {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
Toast.show({ type: 'small', text1: 'Terjadi kesalahan', }) Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
}finally{ } finally {
setLoading(false) setLoading(false)
} }
} }
@@ -227,9 +227,9 @@ export default function CreateMember() {
}} }}
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
style={[Styles.h100]} style={[Styles.h100]}
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={headerHeight} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
@@ -237,17 +237,16 @@ export default function CreateMember() {
{selectedImage != undefined ? ( {selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}> <Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={[Styles.userProfileBig]} /> <Image src={selectedImage} style={[Styles.userProfileBig]} />
<View style={[Styles.absoluteIconPicker]}>
<MaterialCommunityIcons name="image" color={'white'} size={15} />
</View>
</Pressable> </Pressable>
) : ( ) : (
<Pressable <Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]} >
onPress={pickImageAsync} <MaterialCommunityIcons name="account-tie" size={85} color={"gray"} />
style={[Styles.iconContent, ColorsStatus.gray]} <View style={[Styles.absoluteIconPicker]}>
> <MaterialCommunityIcons name="image" color={'white'} size={15} />
<MaterialCommunityIcons </View>
name="account-tie"
size={100}
color={"gray"}
/>
</Pressable> </Pressable>
)} )}
</View> </View>

23
app/(application)/member/edit/[id].tsx
View File

@@ -8,6 +8,8 @@ import Styles from "@/constants/Styles";
import { apiEditUser, apiGetProfile } from "@/lib/api"; import { apiEditUser, apiGetProfile } from "@/lib/api";
import { setUpdateMember } from "@/lib/memberSlice"; import { setUpdateMember } from "@/lib/memberSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useHeaderHeight } from '@react-navigation/elements';
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -22,7 +24,6 @@ import {
} from "react-native"; } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
type Props = { type Props = {
id: string; id: string;
@@ -208,7 +209,7 @@ export default function EditMember() {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
Toast.show({ type: 'small', text1: 'Terjadi kesalahan', }) Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
}finally{ } finally {
setLoading(false) setLoading(false)
} }
} }
@@ -268,13 +269,14 @@ export default function EditMember() {
{ {
errorImg ? errorImg ?
<Pressable onPress={pickImageAsync}> <Pressable onPress={pickImageAsync}>
{ <Image
<Image source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }} style={[Styles.userProfileBig]}
style={[Styles.userProfileBig]} onError={() => { setErrorImg(true) }}
onError={() => { setErrorImg(true) }} />
/> <View style={[Styles.absoluteIconPicker]}>
} <MaterialCommunityIcons name="image" color={'white'} size={15} />
</View>
</Pressable> </Pressable>
: :
selectedImage != undefined ? ( selectedImage != undefined ? (
@@ -288,6 +290,9 @@ export default function EditMember() {
style={[Styles.userProfileBig]} style={[Styles.userProfileBig]}
onError={() => { setErrorImg(true) }} onError={() => { setErrorImg(true) }}
/> />
<View style={[Styles.absoluteIconPicker]}>
<MaterialCommunityIcons name="image" color={'white'} size={15} />
</View>
</Pressable> </Pressable>
) : ( ) : (
<Image <Image

8
constants/Styles.ts
View File

@@ -585,6 +585,14 @@ const Styles = StyleSheet.create({
width: '90%', width: '90%',
borderWidth: 1, borderWidth: 1,
borderColor: '#d6d8f6', borderColor: '#d6d8f6',
},
absoluteIconPicker: {
backgroundColor: '#384288',
padding: 5,
borderRadius: 100,
bottom: 5,
right: 5,
position: 'absolute'
} }
}) })