957812fb49
Deskripsi: - detail anggota diskusi umum - edit diskusi umum - mengeluarkan anggota - mengubah status diskusi umum - mengarsipkan diskusi umum - on proses tambah diskusi umum No Issues
369 lines
12 KiB
TypeScript
369 lines
12 KiB
TypeScript
import ButtonBackHeader from "@/components/buttonBackHeader";
|
|
import ButtonSaveHeader from "@/components/buttonSaveHeader";
|
|
import { InputForm } from "@/components/inputForm";
|
|
import ModalSelect from "@/components/modalSelect";
|
|
import SelectForm from "@/components/selectForm";
|
|
import Styles from "@/constants/Styles";
|
|
import { apiEditUser, apiGetProfile } from "@/lib/api";
|
|
import { setUpdateMember } from "@/lib/memberSlice";
|
|
import { useAuthSession } from "@/providers/AuthProvider";
|
|
import * as ImagePicker from "expo-image-picker";
|
|
import { router, Stack, useLocalSearchParams } from "expo-router";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
Image,
|
|
Pressable,
|
|
SafeAreaView,
|
|
ScrollView,
|
|
Text,
|
|
ToastAndroid,
|
|
View,
|
|
} from "react-native";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
type Props = {
|
|
id: string;
|
|
name: string;
|
|
nik: string;
|
|
email: string;
|
|
phone: string;
|
|
gender: string;
|
|
img: string;
|
|
isActive: boolean;
|
|
idGroup: string;
|
|
idPosition: string;
|
|
idUserRole: string;
|
|
};
|
|
|
|
export default function EditMember() {
|
|
const dispatch = useDispatch()
|
|
const update = useSelector((state: any) => state.memberUpdate)
|
|
const { token, decryptToken } = useAuthSession()
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
const [errorImg, setErrorImg] = useState(false)
|
|
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
|
|
const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
|
|
const [chooseRole, setChooseRole] = useState({ val: "", label: "" });
|
|
const [chooseGender, setChooseGender] = useState({ val: "", label: "" });
|
|
const [valSelect, setValSelect] = useState<"group" | "position" | "role" | "gender">("group");
|
|
const [isSelect, setSelect] = useState(false);
|
|
const [disableBtn, setDisableBtn] = useState(false)
|
|
const [valChoose, setValChoose] = useState("")
|
|
const [data, setData] = useState<Props>({
|
|
id: "",
|
|
name: "",
|
|
nik: "",
|
|
email: "",
|
|
phone: "",
|
|
gender: "",
|
|
img: "",
|
|
isActive: false,
|
|
idGroup: "",
|
|
idPosition: "",
|
|
idUserRole: "",
|
|
});
|
|
const [error, setError] = useState({
|
|
position: false,
|
|
nik: false,
|
|
name: false,
|
|
phone: false,
|
|
email: false,
|
|
gender: false,
|
|
role: false,
|
|
});
|
|
|
|
async function handleLoad() {
|
|
try {
|
|
const response = await apiGetProfile({ id: id });
|
|
setData(response.data);
|
|
setChoosePosition({
|
|
val: response.data.idPosition,
|
|
label: response.data.position,
|
|
});
|
|
setChooseRole({
|
|
val: response.data.idUserRole,
|
|
label: response.data.role,
|
|
});
|
|
setChooseGender({
|
|
val: response.data.gender,
|
|
label: response.data.gender == "M" ? "Laki-laki" : "Perempuan",
|
|
})
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
handleLoad();
|
|
}, []);
|
|
|
|
function validationForm(cat: string, val: any, label?: string) {
|
|
if (cat == "position") {
|
|
setChoosePosition({ val, label: String(label) });
|
|
setData({ ...data, idPosition: val });
|
|
if (val == "" || val == "null") {
|
|
setError({ ...error, position: true });
|
|
} else {
|
|
setError({ ...error, position: false });
|
|
}
|
|
} else if (cat == "role") {
|
|
setChooseRole({ val, label: String(label) });
|
|
setData({ ...data, idUserRole: val });
|
|
if (val == "" || val == "null") {
|
|
setError({ ...error, role: true });
|
|
} else {
|
|
setError({ ...error, role: false });
|
|
}
|
|
} else if (cat == "nik") {
|
|
setData({ ...data, nik: val });
|
|
if (val == "" || val.length !== 16) {
|
|
setError({ ...error, nik: true });
|
|
} else {
|
|
setError({ ...error, nik: false });
|
|
}
|
|
} else if (cat == "name") {
|
|
setData({ ...data, name: val });
|
|
if (val == "") {
|
|
setError({ ...error, name: true });
|
|
} else {
|
|
setError({ ...error, name: false });
|
|
}
|
|
} else if (cat == "email") {
|
|
setData({ ...data, email: val });
|
|
if (
|
|
val == "" ||
|
|
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)
|
|
) {
|
|
setError({ ...error, email: true });
|
|
} else {
|
|
setError({ ...error, email: false });
|
|
}
|
|
} else if (cat == "phone") {
|
|
setData({ ...data, phone: val });
|
|
if (val == "" || !(val.length >= 10 && val.length <= 15)) {
|
|
setError({ ...error, phone: true });
|
|
} else {
|
|
setError({ ...error, phone: false });
|
|
}
|
|
} else if (cat == "gender") {
|
|
setChooseGender({ val, label: String(label) });
|
|
setData({ ...data, gender: val });
|
|
if (val == "" || val == "null") {
|
|
setError({ ...error, gender: true });
|
|
} else {
|
|
setError({ ...error, gender: false });
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function checkForm() {
|
|
if (Object.values(error).some((v) => v == true) || Object.values(data).some((v) => v == "")) {
|
|
setDisableBtn(true)
|
|
} else {
|
|
setDisableBtn(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
checkForm()
|
|
}, [error, data])
|
|
|
|
async function handleEdit() {
|
|
try {
|
|
const hasil = await decryptToken(String(token?.current))
|
|
const fd = new FormData()
|
|
fd.append("data", JSON.stringify(
|
|
{ user: hasil, ...data }
|
|
))
|
|
const response = await apiEditUser(fd, id)
|
|
if (response.success) {
|
|
ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
|
|
dispatch(setUpdateMember(!update))
|
|
router.replace(`/member/${id}`);
|
|
} else {
|
|
ToastAndroid.show(response.message, ToastAndroid.SHORT)
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
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",
|
|
headerRight: () => (
|
|
<ButtonSaveHeader
|
|
disable={disableBtn}
|
|
category="update"
|
|
onPress={() => {
|
|
handleEdit()
|
|
}}
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
<ScrollView>
|
|
<View style={[Styles.p15, Styles.mb100]}>
|
|
<View style={{ justifyContent: "center", alignItems: "center" }}>
|
|
<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 ? (
|
|
<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={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>
|
|
|
|
<ModalSelect
|
|
category={valSelect}
|
|
close={setSelect}
|
|
onSelect={(value) => {
|
|
validationForm(valSelect, value.val, value.label);
|
|
}}
|
|
title={
|
|
valSelect == "group"
|
|
? "Lembaga Desa"
|
|
: valSelect == "position"
|
|
? "Jabatan"
|
|
: valSelect == "role"
|
|
? "User Role"
|
|
: "Jenis Kelamin"
|
|
}
|
|
open={isSelect}
|
|
idParent={valSelect == "position" ? data?.idGroup : ""}
|
|
valChoose={valChoose}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
}
|