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

fix : ios dan tampilan

Browse Source 
Deskripsi:
- modal crash
- input keyboard over lap
- detail pengumuman text color
- Scroll view tinggi 100 persen
- image user

nb : blm selesai semua
This commit is contained in:
amaliadwiy
2025-07-30 17:43:08 +08:00
parent 4394219f2a
commit 5898655fac
28 changed files with 545 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ import Styles from "@/constants/Styles";
import { apiGetProfile } from "@/lib/api";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native";
import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
import { useSelector } from "react-redux";
type Props = {
@@ -34,10 +34,11 @@ export default function MemberDetail() {
const [isEdit, setEdit] = useState(true)
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true)
const [refreshing, setRefreshing] = useState(false)
async function handleLoad() {
async function handleLoad(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const response = await apiGetProfile({ id: id })
setData(response.data)
setEdit(valueRoleUser.filter((v) => v.login == entityUser.role)[0]?.data.some((i: any) => i.id == response.data.idUserRole))
@@ -50,9 +51,17 @@ export default function MemberDetail() {
useEffect(() => {
handleLoad()
handleLoad(true)
}, []);
const handleRefresh = async () => {
setRefreshing(true)
handleLoad(false)
await new Promise(resolve => setTimeout(resolve, 2000));
setRefreshing(false)
};
return (
<SafeAreaView>
<Stack.Screen
@@ -64,48 +73,54 @@ export default function MemberDetail() {
headerShadowVisible: false
}}
/>
<ScrollView>
<View style={{ flexDirection: 'column' }}>
<View style={[Styles.wrapHeadViewMember]}>
{
loading ?
<>
<Skeleton width={100} height={100} borderRadius={100} />
<Skeleton width={200} height={10} borderRadius={5} />
<Skeleton width={150} height={10} borderRadius={5} />
</>
:
<>
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${data?.img}`} size="lg" />
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{data?.name}</Text>
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
</>
<ScrollView
style={[Styles.h100]}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
/>
}
>
<View style={[Styles.wrapHeadViewMember,]}>
{
loading ?
<>
<Skeleton width={100} height={100} borderRadius={100} />
<Skeleton width={200} height={10} borderRadius={5} />
<Skeleton width={150} height={10} borderRadius={5} />
</>
:
<>
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${data?.img}`} size="lg" />
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{data?.name}</Text>
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
</>
}
}
</View>
<View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
</View>
<View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
</View>
{
loading ?
arrSkeleton.map((item, index) => {
return (
<Skeleton key={index} width={100} widthType="percent" height={25} borderRadius={5} />
)
})
:
<>
<ItemDetailMember category="nik" value={data?.nik} />
<ItemDetailMember category="group" value={data?.group} />
<ItemDetailMember category="position" value={data?.position} />
<ItemDetailMember category="phone" value={`+62${data?.phone}`} />
<ItemDetailMember category="email" value={data?.email} />
<ItemDetailMember category="gender" value={data?.gender == "F" ? "Perempuan" : "Laki-Laki"} />
</>
}
{
loading ?
arrSkeleton.map((item, index) => {
return (
<Skeleton key={index} width={100} widthType="percent" height={25} borderRadius={5} />
)
})
:
<>
<ItemDetailMember category="nik" value={data?.nik} />
<ItemDetailMember category="group" value={data?.group} />
<ItemDetailMember category="position" value={data?.position} />
<ItemDetailMember category="phone" value={`+62${data?.phone}`} />
<ItemDetailMember category="email" value={data?.email} />
<ItemDetailMember category="gender" value={data?.gender == "F" ? "Perempuan" : "Laki-Laki"} />
</>
}
</View>
</View>
</ScrollView>
</SafeAreaView>

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

@@ -15,6 +15,8 @@ import { router, Stack } from "expo-router";
import { useEffect, useState } from "react";
import {
Image,
KeyboardAvoidingView,
Platform,
Pressable,
SafeAreaView,
ScrollView,
@@ -213,132 +215,139 @@ export default function CreateMember() {
),
}}
/>
<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"}
<KeyboardAvoidingView
style={[Styles.h100]}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110}
>
<ScrollView>
<View style={[Styles.p15]}>
<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>
{(entityUser.role == "supadmin" ||
entityUser.role == "developer") && (
<SelectForm
label="Lembaga Desa"
placeholder="Pilih Lembaga Desa"
value={chooseGroup.label}
required
onPress={() => {
setValChoose(chooseGroup.val);
setValSelect("group");
setSelect(true);
}}
error={error.group}
errorText="Lembaga Desa tidak boleh kosong"
/>
</Pressable>
)}
)}
<SelectForm
label="Jabatan"
placeholder="Pilih Jabatan"
value={choosePosition.label}
required
onPress={() => {
setValChoose(choosePosition.val);
setValSelect("position");
setSelect(true);
}}
error={error.position}
errorText="Jabatan tidak boleh kosong"
/>
<SelectForm
label="User Role"
placeholder="Pilih Role"
value={chooseRole.label}
required
onPress={() => {
setValChoose(chooseRole.val);
setValSelect("role");
setSelect(true);
}}
error={error.role}
errorText="Role tidak boleh kosong"
/>
<InputForm
label="NIK"
type="numeric"
placeholder="NIK"
required
error={error.nik}
errorText="NIK Harus 16 Karakter"
onChange={val => {
validationForm("nik", val)
}}
/>
<InputForm
label="Nama"
type="default"
placeholder="Nama"
required
error={error.name}
errorText="Nama tidak boleh kosong"
onChange={val => {
validationForm("name", val)
}}
/>
<InputForm
label="Email"
type="default"
placeholder="Email"
required
error={error.email}
errorText="Email tidak valid"
onChange={val => {
validationForm("email", val)
}}
/>
<InputForm
label="Nomor Telepon"
type="numeric"
placeholder="8XX-XXX-XXX"
required
itemLeft={<Text>+62</Text>}
error={error.phone}
errorText="Nomor Telepon tidak valid"
onChange={val => {
validationForm("phone", val)
}}
/>
<SelectForm
label="Jenis Kelamin"
placeholder="Pilih Jenis Kelamin"
value={chooseGender.label}
required
onPress={() => {
setValChoose(chooseGender.val);
setValSelect("gender");
setSelect(true);
}}
error={error.gender}
errorText="Jenis Kelamin tidak boleh kosong"
/>
</View>
{(entityUser.role == "supadmin" ||
entityUser.role == "developer") && (
<SelectForm
label="Lembaga Desa"
placeholder="Pilih Lembaga Desa"
value={chooseGroup.label}
required
onPress={() => {
setValChoose(chooseGroup.val);
setValSelect("group");
setSelect(true);
}}
error={error.group}
errorText="Lembaga Desa tidak boleh kosong"
/>
)}
<SelectForm
label="Jabatan"
placeholder="Pilih Jabatan"
value={choosePosition.label}
required
onPress={() => {
setValChoose(choosePosition.val);
setValSelect("position");
setSelect(true);
}}
error={error.position}
errorText="Jabatan tidak boleh kosong"
/>
<SelectForm
label="User Role"
placeholder="Pilih Role"
value={chooseRole.label}
required
onPress={() => {
setValChoose(chooseRole.val);
setValSelect("role");
setSelect(true);
}}
error={error.role}
errorText="Role tidak boleh kosong"
/>
<InputForm
label="NIK"
type="numeric"
placeholder="NIK"
required
error={error.nik}
errorText="NIK Harus 16 Karakter"
onChange={val => {
validationForm("nik", val)
}}
/>
<InputForm
label="Nama"
type="default"
placeholder="Nama"
required
error={error.name}
errorText="Nama tidak boleh kosong"
onChange={val => {
validationForm("name", val)
}}
/>
<InputForm
label="Email"
type="default"
placeholder="Email"
required
error={error.email}
errorText="Email tidak valid"
onChange={val => {
validationForm("email", val)
}}
/>
<InputForm
label="Nomor Telepon"
type="numeric"
placeholder="8XX-XXX-XXX"
required
itemLeft={<Text>+62</Text>}
error={error.phone}
errorText="Nomor Telepon tidak valid"
onChange={val => {
validationForm("phone", val)
}}
/>
<SelectForm
label="Jenis Kelamin"
placeholder="Pilih Jenis Kelamin"
value={chooseGender.label}
required
onPress={() => {
setValChoose(chooseGender.val);
setValSelect("gender");
setSelect(true);
}}
error={error.gender}
errorText="Jenis Kelamin tidak boleh kosong"
/>
</View>
</ScrollView>
</ScrollView>
</KeyboardAvoidingView>
<ModalSelect
category={valSelect}
close={setSelect}
close={() => { setSelect(false) }}
onSelect={(value) => {
validationForm(valSelect, value.val, value.label);
}}

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

@@ -13,6 +13,8 @@ import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import {
Image,
KeyboardAvoidingView,
Platform,
Pressable,
SafeAreaView,
ScrollView,
@@ -249,131 +251,138 @@ export default function EditMember() {
),
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={{ justifyContent: "center", alignItems: "center" }}>
{
errorImg ?
<Pressable onPress={pickImageAsync}>
{
<Image
source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
style={[Styles.userProfileBig]}
onError={() => { setErrorImg(true) }}
/>
}
</Pressable>
:
selectedImage != undefined ? (
<KeyboardAvoidingView
style={[Styles.h100]}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110}
>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={{ justifyContent: "center", alignItems: "center" }}>
{
errorImg ?
<Pressable onPress={pickImageAsync}>
<Image
src={
typeof selectedImage === "string"
? selectedImage
: selectedImage.uri
}
style={[Styles.userProfileBig]}
onError={() => { setErrorImg(true) }}
/>
{
<Image
source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
style={[Styles.userProfileBig]}
onError={() => { setErrorImg(true) }}
/>
}
</Pressable>
) : (
<Image
source={require("../../../../assets/images/user.jpg")}
style={[Styles.userProfileBig]}
/>
)
}
:
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image
src={
typeof selectedImage === "string"
? selectedImage
: selectedImage.uri
}
style={[Styles.userProfileBig]}
onError={() => { setErrorImg(true) }}
/>
</Pressable>
) : (
<Image
source={require("../../../../assets/images/user.jpg")}
style={[Styles.userProfileBig]}
/>
)
}
</View>
<SelectForm
label="Jabatan"
placeholder="Pilih Jabatan"
value={choosePosition.label}
required
onPress={() => {
setValChoose(choosePosition.val);
setValSelect("position");
setSelect(true);
}}
error={error.position}
errorText="Jabatan tidak boleh kosong"
/>
<SelectForm
label="User Role"
placeholder="Pilih Role"
value={chooseRole.label}
required
onPress={() => {
setValChoose(chooseRole.val);
setValSelect("role");
setSelect(true);
}}
error={error.role}
errorText="Role tidak boleh kosong"
/>
<InputForm
label="NIK"
type="numeric"
placeholder="NIK"
required
value={data?.nik}
error={error.nik}
errorText="NIK Harus 16 Karakter"
onChange={val => {
validationForm("nik", val)
}}
/>
<InputForm
label="Nama"
type="default"
placeholder="Nama"
required
value={data?.name}
error={error.name}
errorText="Nama tidak boleh kosong"
onChange={val => {
validationForm("name", val)
}}
/>
<InputForm
label="Email"
type="default"
placeholder="Email"
required
value={data?.email}
error={error.email}
errorText="Email tidak valid"
onChange={val => {
validationForm("email", val)
}}
/>
<InputForm
label="Nomor Telepon"
type="numeric"
placeholder="8XX-XXX-XXX"
required
itemLeft={<Text>+62</Text>}
value={data?.phone}
error={error.phone}
errorText="Nomor Telepon tidak valid"
onChange={val => {
validationForm("phone", val)
}}
/>
<SelectForm
label="Jenis Kelamin"
placeholder="Pilih Jenis Kelamin"
value={chooseGender.label}
required
onPress={() => {
setValChoose(chooseGender.val);
setValSelect("gender");
setSelect(true);
}}
error={error.gender}
errorText="Jenis Kelamin tidak boleh kosong"
/>
</View>
<SelectForm
label="Jabatan"
placeholder="Pilih Jabatan"
value={choosePosition.label}
required
onPress={() => {
setValChoose(choosePosition.val);
setValSelect("position");
setSelect(true);
}}
error={error.position}
errorText="Jabatan tidak boleh kosong"
/>
<SelectForm
label="User Role"
placeholder="Pilih Role"
value={chooseRole.label}
required
onPress={() => {
setValChoose(chooseRole.val);
setValSelect("role");
setSelect(true);
}}
error={error.role}
errorText="Role tidak boleh kosong"
/>
<InputForm
label="NIK"
type="numeric"
placeholder="NIK"
required
value={data?.nik}
error={error.nik}
errorText="NIK Harus 16 Karakter"
onChange={val => {
validationForm("nik", val)
}}
/>
<InputForm
label="Nama"
type="default"
placeholder="Nama"
required
value={data?.name}
error={error.name}
errorText="Nama tidak boleh kosong"
onChange={val => {
validationForm("name", val)
}}
/>
<InputForm
label="Email"
type="default"
placeholder="Email"
required
value={data?.email}
error={error.email}
errorText="Email tidak valid"
onChange={val => {
validationForm("email", val)
}}
/>
<InputForm
label="Nomor Telepon"
type="numeric"
placeholder="8XX-XXX-XXX"
required
itemLeft={<Text>+62</Text>}
value={data?.phone}
error={error.phone}
errorText="Nomor Telepon tidak valid"
onChange={val => {
validationForm("phone", val)
}}
/>
<SelectForm
label="Jenis Kelamin"
placeholder="Pilih Jenis Kelamin"
value={chooseGender.label}
required
onPress={() => {
setValChoose(chooseGender.val);
setValSelect("gender");
setSelect(true);
}}
error={error.gender}
errorText="Jenis Kelamin tidak boleh kosong"
/>
</View>
</ScrollView>
</ScrollView>
</KeyboardAvoidingView>
<ModalSelect
category={valSelect}