upd: tab navigation
Deskripsi: - fix tab navigation :: diganti pake useState - group - position - member - diskusi umum - project - divisi - tugas divisi No Issues
This commit is contained in:
amel
@@ -1,6 +1,5 @@
|
||||
import { ColorsStatus } from "@/constants/ColorsStatus"
|
||||
import Styles from "@/constants/Styles"
|
||||
import { AntDesign, Feather } from "@expo/vector-icons"
|
||||
import { Text, TouchableOpacity } from "react-native"
|
||||
|
||||
type Props = {
|
||||
|
||||
35
components/buttonTabExpo.tsx
Normal file
35
components/buttonTabExpo.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { ColorsStatus } from '@/constants/ColorsStatus';
|
||||
import Styles from '@/constants/Styles';
|
||||
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { TabTriggerSlotProps } from 'expo-router/ui';
|
||||
import { ComponentProps, Ref } from 'react';
|
||||
import { Pressable, Text, View } from 'react-native';
|
||||
|
||||
type Feather = ComponentProps<typeof Feather>['name'];
|
||||
type Ionicons = ComponentProps<typeof Ionicons>['name'];
|
||||
type AntDesign = ComponentProps<typeof AntDesign>['name'];
|
||||
type MaterialCommunityIcons = ComponentProps<typeof MaterialCommunityIcons>['name'];
|
||||
|
||||
export type TabButtonProps = TabTriggerSlotProps & {
|
||||
iconType: 'Feather' | 'Ionicons' | 'AntDesign' | 'MaterialCommunityIcons';
|
||||
iconF?: Feather
|
||||
iconI?: Ionicons
|
||||
iconA?: AntDesign
|
||||
iconM?: MaterialCommunityIcons
|
||||
ref: Ref<View>;
|
||||
n: number
|
||||
};
|
||||
|
||||
export function ButtonTabExpo({ iconType, iconF, iconI, iconA, iconM, children, isFocused, n, ...props }: TabButtonProps) {
|
||||
return (
|
||||
<Pressable
|
||||
{...props}
|
||||
style={[Styles.btnTab, (isFocused) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]}>
|
||||
{iconType == 'Feather' && <Feather name={iconF} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
||||
{iconType == 'Ionicons' && <Ionicons name={iconI} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
||||
{iconType == 'AntDesign' && <AntDesign name={iconA} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
||||
{iconType == 'MaterialCommunityIcons' && <MaterialCommunityIcons name={iconM} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
||||
<Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: isFocused ? 'white' : 'black' }]}>{children}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
99
components/group/headerGroupList.tsx
Normal file
99
components/group/headerGroupList.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import Styles from "@/constants/Styles"
|
||||
import { apiCreateGroup } from "@/lib/api"
|
||||
import { setUpdateGroup } from "@/lib/groupSlice"
|
||||
import { useAuthSession } from "@/providers/AuthProvider"
|
||||
import { AntDesign } from "@expo/vector-icons"
|
||||
import { useState } from "react"
|
||||
import { ToastAndroid, View } from "react-native"
|
||||
import { useDispatch, useSelector } from "react-redux"
|
||||
import { ButtonForm } from "../buttonForm"
|
||||
import ButtonMenuHeader from "../buttonMenuHeader"
|
||||
import DrawerBottom from "../drawerBottom"
|
||||
import { InputForm } from "../inputForm"
|
||||
import MenuItemRow from "../menuItemRow"
|
||||
|
||||
export default function HeaderRightGroupList() {
|
||||
const dispatch = useDispatch()
|
||||
const update = useSelector((state: any) => state.groupUpdate)
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const [isVisible, setVisible] = useState(false)
|
||||
const [isVisibleTambah, setVisibleTambah] = useState(false)
|
||||
const [title, setTitle] = useState('')
|
||||
const [error, setError] = useState({
|
||||
title: false,
|
||||
});
|
||||
|
||||
async function handleTambah() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiCreateGroup({ user: hasil, name: title })
|
||||
dispatch(setUpdateGroup(!update))
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setVisibleTambah(false)
|
||||
setVisible(false)
|
||||
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
|
||||
}
|
||||
}
|
||||
|
||||
function onCheck() {
|
||||
if (Object.values(error).some((v) => v == true))
|
||||
return false
|
||||
handleTambah()
|
||||
}
|
||||
|
||||
function validationForm(val: any, cat: 'title') {
|
||||
if (cat === 'title') {
|
||||
setTitle(val)
|
||||
if (val == "" || val.length < 3) {
|
||||
setError({ ...error, title: true })
|
||||
} else {
|
||||
setError({ ...error, title: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
|
||||
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<MenuItemRow
|
||||
icon={<AntDesign name="pluscircle" color="black" size={25} />}
|
||||
title="Tambah Lembaga"
|
||||
onPress={() => {
|
||||
setVisible(false);
|
||||
setTimeout(
|
||||
() => {
|
||||
setVisibleTambah(true)
|
||||
},
|
||||
100,
|
||||
);
|
||||
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
<DrawerBottom animation="none" height={30} isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Lembaga Desa">
|
||||
<View style={{ flex: 1 }}>
|
||||
<View>
|
||||
<InputForm
|
||||
type="default"
|
||||
placeholder="Nama Lembaga Desa"
|
||||
required label="Lembaga Desa"
|
||||
error={error.title}
|
||||
errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
|
||||
onChange={(val) => { validationForm(val, 'title') }}
|
||||
/>
|
||||
</View>
|
||||
<View>
|
||||
<ButtonForm text="SIMPAN" onPress={() => { onCheck() }} />
|
||||
</View>
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -83,11 +83,11 @@ export default function ModalFilter({ open, close, page, category }: Props) {
|
||||
page == 'project' ?
|
||||
category == "filter-data"
|
||||
?
|
||||
router.push(`/${page}?status=0&cat=${chooseGroup}`)
|
||||
router.replace(`/${page}?status=0&cat=${chooseGroup}`)
|
||||
:
|
||||
router.push(`/${page}?status=0&group=${chooseGroup}`)
|
||||
router.replace(`/${page}?status=0&group=${chooseGroup}`)
|
||||
:
|
||||
router.push(`/${page}?active=true&group=${chooseGroup}`)
|
||||
router.replace(`/${page}?active=true&group=${chooseGroup}`)
|
||||
}} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
172
components/position/headerRightPositionList.tsx
Normal file
172
components/position/headerRightPositionList.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import Styles from "@/constants/Styles"
|
||||
import { apiCreatePosition } from "@/lib/api"
|
||||
import { setUpdatePosition } from "@/lib/positionSlice"
|
||||
import { useAuthSession } from "@/providers/AuthProvider"
|
||||
import { AntDesign } from "@expo/vector-icons"
|
||||
import { useState } from "react"
|
||||
import { ToastAndroid, View } from "react-native"
|
||||
import { useDispatch, useSelector } from "react-redux"
|
||||
import { ButtonForm } from "../buttonForm"
|
||||
import ButtonMenuHeader from "../buttonMenuHeader"
|
||||
import DrawerBottom from "../drawerBottom"
|
||||
import { InputForm } from "../inputForm"
|
||||
import MenuItemRow from "../menuItemRow"
|
||||
import ModalFilter from "../modalFilter"
|
||||
import ModalSelect from "../modalSelect"
|
||||
import SelectForm from "../selectForm"
|
||||
|
||||
export default function HeaderRightPositionList() {
|
||||
const dispatch = useDispatch()
|
||||
const update = useSelector((state: any) => state.positionUpdate)
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const entityUser = useSelector((state: any) => state.user)
|
||||
const [isVisible, setVisible] = useState(false)
|
||||
const [isVisibleTambah, setVisibleTambah] = useState(false)
|
||||
const [isFilter, setFilter] = useState(false)
|
||||
const [isSelect, setSelect] = useState(false)
|
||||
const [choose, setChoose] = useState({ val: '', label: '' })
|
||||
const [dataForm, setDataForm] = useState({
|
||||
name: "",
|
||||
idGroup: "",
|
||||
})
|
||||
const [error, setError] = useState({
|
||||
name: false,
|
||||
idGroup: false
|
||||
});
|
||||
|
||||
function validationForm(val: any, cat: 'name' | 'idGroup') {
|
||||
if (cat === 'name') {
|
||||
setDataForm({ ...dataForm, name: val })
|
||||
if (val == "") {
|
||||
setError({ ...error, name: true })
|
||||
} else {
|
||||
setError({ ...error, name: false })
|
||||
}
|
||||
} else if (cat === "idGroup") {
|
||||
setDataForm({ ...dataForm, idGroup: val })
|
||||
if (val == "") {
|
||||
setError({ ...error, idGroup: true })
|
||||
} else {
|
||||
setError({ ...error, idGroup: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkAll() {
|
||||
let nilai = true
|
||||
if (dataForm.name == "") {
|
||||
setError(error => ({ ...error, name: true }))
|
||||
nilai = false
|
||||
}
|
||||
|
||||
if ((entityUser.role == "supadmin" || entityUser.role == "developer") && (dataForm.idGroup == "" || String(dataForm.idGroup) == "null")) {
|
||||
setError(error => ({ ...error, idGroup: true }))
|
||||
nilai = false
|
||||
}
|
||||
|
||||
return nilai
|
||||
}
|
||||
|
||||
function onCheck() {
|
||||
const check = checkAll()
|
||||
if (!check)
|
||||
return false
|
||||
handleTambah()
|
||||
}
|
||||
|
||||
|
||||
async function handleTambah() {
|
||||
try {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const response = await apiCreatePosition({ user: hasil, name: dataForm.name, idGroup: dataForm.idGroup })
|
||||
dispatch(setUpdatePosition(!update))
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setVisibleTambah(false)
|
||||
setVisible(false)
|
||||
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{entityUser.role != 'user' ? <ButtonMenuHeader onPress={() => { setVisible(true) }} /> : <></>}
|
||||
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
|
||||
<View style={Styles.rowItemsCenter}>
|
||||
<MenuItemRow
|
||||
icon={<AntDesign name="pluscircle" color="black" size={25} />}
|
||||
title="Tambah Jabatan"
|
||||
onPress={() => {
|
||||
setVisible(false)
|
||||
setVisibleTambah(true)
|
||||
}}
|
||||
/>
|
||||
{
|
||||
(entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
|
||||
<MenuItemRow
|
||||
icon={<AntDesign name="filter" color="black" size={25} />}
|
||||
title="Filter"
|
||||
onPress={() => { setFilter(true) }}
|
||||
/>
|
||||
}
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
<DrawerBottom animation="slide" height={45} isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Jabatan">
|
||||
<View style={{ flex: 1, justifyContent: 'space-between' }}>
|
||||
<View>
|
||||
{
|
||||
(entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
|
||||
<SelectForm
|
||||
label="Lembaga Desa"
|
||||
placeholder="Pilih Lembaga Desa"
|
||||
value={choose.label}
|
||||
required
|
||||
onPress={() => {
|
||||
setVisibleTambah(false)
|
||||
setSelect(true)
|
||||
}}
|
||||
error={error.idGroup}
|
||||
errorText="Lembaga Desa harus diisi"
|
||||
/>
|
||||
}
|
||||
<InputForm
|
||||
type="default"
|
||||
placeholder="Nama Jabatan"
|
||||
required
|
||||
label="Jabatan"
|
||||
onChange={(value) => { validationForm(value, 'name') }}
|
||||
error={error.name}
|
||||
errorText="Nama jabatan harus diisi"
|
||||
value={dataForm.name}
|
||||
/>
|
||||
</View>
|
||||
<View style={Styles.mb30}>
|
||||
<ButtonForm text="SIMPAN" onPress={() => { onCheck() }} />
|
||||
</View>
|
||||
</View>
|
||||
</DrawerBottom>
|
||||
|
||||
<ModalFilter close={() => {
|
||||
setFilter(false)
|
||||
setVisible(false)
|
||||
}} open={isFilter} page="position" />
|
||||
|
||||
<ModalSelect
|
||||
category="group"
|
||||
close={setSelect}
|
||||
onSelect={(value) => {
|
||||
validationForm(value.val, 'idGroup')
|
||||
setChoose(value)
|
||||
setSelect(false)
|
||||
setVisibleTambah(true)
|
||||
}}
|
||||
title="Lembaga Desa"
|
||||
open={isSelect}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user