114 lines
4.3 KiB
TypeScript
114 lines
4.3 KiB
TypeScript
import { valueGender } from "@/constants/Gender"
|
|
import { valueRoleUser } from "@/constants/RoleUser"
|
|
import Styles from "@/constants/Styles"
|
|
import { apiGetGroup, apiGetPosition } from "@/lib/api"
|
|
import { setEntityFilterGroup } from "@/lib/filterSlice"
|
|
import { useAuthSession } from "@/providers/AuthProvider"
|
|
import { AntDesign } from "@expo/vector-icons"
|
|
import { useEffect, useState } from "react"
|
|
import { Pressable, ScrollView, Text, View } from "react-native"
|
|
import { useDispatch, useSelector } from "react-redux"
|
|
import DrawerBottom from "./drawerBottom"
|
|
|
|
type Props = {
|
|
open: boolean
|
|
close: (value: boolean) => void
|
|
title: string
|
|
category: 'group' | 'status-task' | 'position' | 'role' | 'gender'
|
|
idParent?: string
|
|
onSelect: (value: { val: string, label: string }) => void
|
|
valChoose?: string
|
|
}
|
|
|
|
export default function ModalSelect({ open, close, title, category, idParent, onSelect, valChoose }: 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: valChoose, label: '' })
|
|
const [data, setData] = useState<any>([])
|
|
|
|
async function handleLoadGroup() {
|
|
const hasil = await decryptToken(String(token?.current))
|
|
const response = await apiGetGroup({ active: 'true', user: hasil, search: '' })
|
|
dispatch(setEntityFilterGroup(response.data))
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
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()
|
|
}
|
|
setChooseValue({ ...chooseValue, val: valChoose })
|
|
}, [dispatch, open]);
|
|
|
|
function onChoose(val: string, label: string) {
|
|
setChooseValue({ val, label })
|
|
onSelect({ val, label })
|
|
close(false)
|
|
}
|
|
|
|
return (
|
|
<DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={category == 'gender' ? 25 : 75}>
|
|
<ScrollView>
|
|
<View>
|
|
{
|
|
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={() => {
|
|
onSelect({ val: 'blm-dikerjakan', label: 'Belum Dikerjakan' })
|
|
close(false)
|
|
}}>
|
|
<Text style={[Styles.textDefaultSemiBold]}>Belum Dikerjakan</Text>
|
|
<AntDesign name="check" size={20} />
|
|
</Pressable>
|
|
<Pressable style={[Styles.itemSelectModal]}>
|
|
<Text>Selesai</Text>
|
|
</Pressable>
|
|
</>
|
|
}
|
|
|
|
</View>
|
|
</ScrollView>
|
|
</DrawerBottom>
|
|
)
|
|
} |