upd: member

Deskripsi:
- load member
- search member
- filter member
- active member
- tambah member

nb: blm bisa upload gambar

No Issues
This commit is contained in:
amel
2025-05-02 17:36:18 +08:00
parent 3379ea736c
commit be56495383
12 changed files with 616 additions and 169 deletions

View File

@@ -1,6 +1,6 @@
import { Feather } from "@expo/vector-icons"
import { ButtonHeader } from "./buttonHeader"
import AlertKonfirmasi from "./alertKonfirmasi"
import { ButtonHeader } from "./buttonHeader"
type Props = {
category: 'create' | 'update' | 'cancel'
@@ -12,19 +12,21 @@ export default function ButtonSaveHeader({ category, onPress, disable }: Props)
return (
<>
<ButtonHeader
item={<Feather name="check" size={20} color={disable == false ? "grey" : "white"} />}
item={<Feather name="check" size={20} color={disable ? "grey" : "white"} />}
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: category == 'create'
? 'Apakah anda yakin ingin menambahkan data?'
: category == 'cancel'
? 'Apakah anda yakin ingin membatalkan kegiatan? Pembatalan bersifat permanen'
: 'Apakah anda yakin mengubah data?',
onPress: () => {
onPress && onPress()
}
})
if (!disable) {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: category == 'create'
? 'Apakah anda yakin ingin menambahkan data?'
: category == 'cancel'
? 'Apakah anda yakin ingin membatalkan kegiatan? Pembatalan bersifat permanen'
: 'Apakah anda yakin mengubah data?',
onPress: () => {
onPress && onPress()
}
})
}
}
}

20
components/imageNew.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Styles from "@/constants/Styles";
import { useState } from "react";
import { Image } from "react-native";
type Props = {
src: string
}
export default function ImageUser({ src }: Props) {
const [error, setError] = useState(false)
return (
<Image
source={error ? require('../assets/images/user.jpg') : { uri: src }}
style={[Styles.userProfileSmall]}
onError={() =>
setError(true)
}
/>
)
}

View File

@@ -3,6 +3,7 @@ import { AntDesign } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
import { View } from "react-native"
import { useSelector } from "react-redux"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
@@ -11,6 +12,8 @@ import ModalFilter from "../modalFilter"
export default function HeaderMemberList() {
const [isVisible, setVisible] = useState(false)
const [isFilter, setFilter] = useState(false)
const entityUser = useSelector((state: any) => state.user)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
@@ -24,14 +27,17 @@ export default function HeaderMemberList() {
router.push('/member/create')
}}
/>
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => {
setVisible(false)
setFilter(true)
}}
/>
{
(entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => {
setVisible(false)
setFilter(true)
}}
/>
}
</View>
</DrawerBottom>
<ModalFilter close={() => { setFilter(false) }} open={isFilter} page="member" />

View File

@@ -1,5 +1,7 @@
import { valueGender } from "@/constants/Gender"
import { valueRoleUser } from "@/constants/RoleUser"
import Styles from "@/constants/Styles"
import { apiGetGroup } from "@/lib/api"
import { apiGetGroup, apiGetPosition } from "@/lib/api"
import { setEntityFilterGroup } from "@/lib/filterSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { AntDesign } from "@expo/vector-icons"
@@ -12,17 +14,18 @@ type Props = {
open: boolean
close: (value: boolean) => void
title: string
category: 'group' | 'status-task'
category: 'group' | 'status-task' | 'position' | 'role' | 'gender'
idParent?: string
onSelect: (value: { val: string, label: string }) => void
}
export default function ModalSelect({ open, close, title, category, onSelect }: Props) {
// const [isChoose, setChoose] = useState(choose)
export default function ModalSelect({ open, close, title, category, idParent, onSelect }: Props) {
const { token, decryptToken } = useAuthSession()
const entityUser = useSelector((state: any) => state.user)
const dispatch = useDispatch()
const entitiesGroup = useSelector((state: any) => state.filterGroup)
const [chooseValue, setChooseValue] = useState({ val: '', label: '' })
const [data, setData] = useState<any>([])
async function handleLoadGroup() {
const hasil = await decryptToken(String(token?.current))
@@ -30,11 +33,39 @@ export default function ModalSelect({ open, close, title, category, onSelect }:
dispatch(setEntityFilterGroup(response.data))
}
useEffect(() => {
if (entitiesGroup.length == 0 && category == 'group') {
handleLoadGroup()
async function handleLoadPosition() {
const hasil = await decryptToken(String(token?.current))
if (idParent == undefined || idParent == '' || idParent == null) {
setData([])
} else {
const response = await apiGetPosition({ active: 'true', user: hasil, search: '', group: idParent })
setData(response.data)
}
}, [dispatch]);
}
function handleLoadUserRole() {
const filter = valueRoleUser.filter((v) => v.login == entityUser.role)[0]?.data
setData(filter)
}
function handleLoadGender() {
setData(valueGender)
}
useEffect(() => {
if (category == 'group') {
if (entitiesGroup.length == 0)
handleLoadGroup()
setData(entitiesGroup)
} else if (category == 'position') {
handleLoadPosition()
} else if (category == "role") {
handleLoadUserRole()
} else if (category == "gender") {
handleLoadGender()
}
}, [dispatch, open]);
function onChoose(val: string, label: string) {
setChooseValue({ val, label })
@@ -43,19 +74,22 @@ export default function ModalSelect({ open, close, title, category, onSelect }:
}
return (
<DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={75}>
<DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={category == 'gender' ? 25 : 75}>
<ScrollView>
<View>
{
category == 'group' ?
entitiesGroup.map((item: any, index: any) => (
<Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name) }}>
<Text style={[chooseValue.val == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
{
chooseValue.val == item.id && <AntDesign name="check" size={20} />
}
</Pressable>
))
category != 'status-task' ?
data.length > 0 ?
data.map((item: any, index: any) => (
<Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name) }}>
<Text style={[chooseValue.val == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
{
chooseValue.val == item.id && <AntDesign name="check" size={20} />
}
</Pressable>
))
:
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
:
<>
<Pressable style={[Styles.itemSelectModal]} onPress={() => {