upd: task division
Deskripsi: - tambah task division - hapus task division yg telah dibatalkan - akses user sesuai dengan role No Issuese
This commit is contained in:
amel
@@ -0,0 +1,139 @@
|
||||
import ButtonBackHeader from "@/components/buttonBackHeader";
|
||||
import ButtonSaveHeader from "@/components/buttonSaveHeader";
|
||||
import ImageUser from "@/components/imageNew";
|
||||
import ImageWithLabel from "@/components/imageWithLabel";
|
||||
import InputSearch from "@/components/inputSearch";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiGetDivisionMember } from "@/lib/api";
|
||||
import { setMemberChoose } from "@/lib/memberChoose";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import { router, Stack, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
type Props = {
|
||||
idUser: string,
|
||||
name: string,
|
||||
img: string
|
||||
}
|
||||
|
||||
export default function AddMemberCreateTask() {
|
||||
const dispatch = useDispatch()
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const { id } = useLocalSearchParams<{ id: string, detail: string }>()
|
||||
const [dataOld, setDataOld] = useState<Props[]>([])
|
||||
const [data, setData] = useState<Props[]>([])
|
||||
const [selectMember, setSelectMember] = useState<any[]>([])
|
||||
const [search, setSearch] = useState('')
|
||||
const entitiesMember = useSelector((state: any) => state.memberChoose)
|
||||
|
||||
async function handleLoadMemberDivision() {
|
||||
const hasil = await decryptToken(String(token?.current))
|
||||
const responMemberDivision = await apiGetDivisionMember({ id: id, user: hasil, search: search })
|
||||
setData(responMemberDivision.data)
|
||||
if (entitiesMember.length > 0) {
|
||||
setSelectMember(entitiesMember)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleLoadMemberDivision()
|
||||
}, [search]);
|
||||
|
||||
function onChoose(val: string, label: string, img?: string) {
|
||||
if (selectMember.some((i: any) => i.idUser == val)) {
|
||||
setSelectMember(selectMember.filter((i: any) => i.idUser != val))
|
||||
} else {
|
||||
setSelectMember([...selectMember, { idUser: val, name: label, img }])
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddMember() {
|
||||
try {
|
||||
dispatch(setMemberChoose(selectMember))
|
||||
router.back()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
ToastAndroid.show('Gagal menambahkan anggota', ToastAndroid.SHORT)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
|
||||
headerTitle: 'Pilih Anggota',
|
||||
headerTitleAlign: 'center',
|
||||
headerRight: () => (
|
||||
<ButtonSaveHeader
|
||||
category="create"
|
||||
disable={selectMember.length > 0 ? false : true}
|
||||
onPress={() => {
|
||||
handleAddMember()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<View style={[Styles.p15]}>
|
||||
<InputSearch onChange={(val) => setSearch(val)} value={search} />
|
||||
|
||||
{
|
||||
selectMember.length > 0
|
||||
?
|
||||
<View>
|
||||
<ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
|
||||
{
|
||||
selectMember.map((item: any, index: any) => (
|
||||
<ImageWithLabel
|
||||
key={index}
|
||||
label={item.name}
|
||||
src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
|
||||
onClick={() => onChoose(item.idUser, item.name, item.img)}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
:
|
||||
<Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
|
||||
}
|
||||
<ScrollView>
|
||||
|
||||
{
|
||||
data.length > 0 ?
|
||||
data.map((item: any, index: any) => {
|
||||
return (
|
||||
<Pressable
|
||||
key={index}
|
||||
style={[Styles.itemSelectModal]}
|
||||
onPress={() => {
|
||||
onChoose(item.idUser, item.name, item.img)
|
||||
}}
|
||||
>
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
|
||||
<View style={[Styles.ml10]}>
|
||||
<Text style={[Styles.textDefault]}>{item.name}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{
|
||||
selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} />
|
||||
}
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
)
|
||||
:
|
||||
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
|
||||
}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import ButtonBackHeader from "@/components/buttonBackHeader";
|
||||
import ButtonSaveHeader from "@/components/buttonSaveHeader";
|
||||
import { InputForm } from "@/components/inputForm";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { setTaskCreate } from "@/lib/taskCreate";
|
||||
import dayjs from "dayjs";
|
||||
import { router, Stack } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
Text,
|
||||
View
|
||||
} from "react-native";
|
||||
import DateTimePicker, {
|
||||
DateType
|
||||
} from "react-native-ui-datepicker";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
export default function CreateTaskAddTugas() {
|
||||
const dispatch = useDispatch()
|
||||
const [disable, setDisable] = useState(true);
|
||||
const [range, setRange] = useState<{
|
||||
startDate: DateType;
|
||||
endDate: DateType;
|
||||
}>({ startDate: undefined, endDate: undefined });
|
||||
const [error, setError] = useState({
|
||||
startDate: false,
|
||||
endDate: false,
|
||||
title: false,
|
||||
})
|
||||
const [title, setTitle] = useState('');
|
||||
const taskCreate = useSelector((state: any) => state.taskCreate)
|
||||
|
||||
const from = range.startDate
|
||||
? dayjs(range.startDate).format("DD-MM-YYYY")
|
||||
: "";
|
||||
const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
|
||||
|
||||
function checkAll() {
|
||||
if (from == "" || to == "" || title == "" || title == "null" || error.startDate || error.endDate || error.title) {
|
||||
setDisable(true)
|
||||
} else {
|
||||
setDisable(false)
|
||||
}
|
||||
}
|
||||
|
||||
function onValidation(cat: string, val: string) {
|
||||
if (cat == "title") {
|
||||
setTitle(val)
|
||||
if (val == "" || val == "null") {
|
||||
setError(error => ({ ...error, title: true }))
|
||||
} else {
|
||||
setError(error => ({ ...error, title: false }))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
checkAll()
|
||||
}, [from, to, title, error])
|
||||
|
||||
async function handleCreate() {
|
||||
try {
|
||||
dispatch(setTaskCreate([...taskCreate, {
|
||||
title: title,
|
||||
dateStart: from,
|
||||
dateEnd: to,
|
||||
dateStartFix: dayjs(range.startDate).format("YYYY-MM-DD"),
|
||||
dateEndFix: dayjs(range.endDate).format("YYYY-MM-DD"),
|
||||
}]))
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerLeft: () => (
|
||||
<ButtonBackHeader
|
||||
onPress={() => {
|
||||
router.back();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
headerTitle: "Tambah Tugas",
|
||||
headerTitleAlign: "center",
|
||||
headerRight: () => (
|
||||
<ButtonSaveHeader
|
||||
disable={disable}
|
||||
category="create"
|
||||
onPress={() => { handleCreate() }}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<ScrollView>
|
||||
<View style={[Styles.p15, Styles.mb100]}>
|
||||
<View style={[Styles.wrapPaper, Styles.p10]}>
|
||||
<DateTimePicker
|
||||
mode="range"
|
||||
startDate={range.startDate}
|
||||
endDate={range.endDate}
|
||||
onChange={(param) => setRange(param)}
|
||||
styles={{
|
||||
selected: Styles.selectedDate,
|
||||
selected_label: Styles.cWhite,
|
||||
range_fill: Styles.selectRangeDate,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={[Styles.mv10]}>
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<View style={[{ width: "48%" }]}>
|
||||
<Text style={[Styles.mb05]}>
|
||||
Tanggal Mulai <Text style={Styles.cError}>*</Text>
|
||||
</Text>
|
||||
<View style={[Styles.wrapPaper, Styles.p10]}>
|
||||
<Text style={{ textAlign: "center" }}>{from}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[{ width: "48%" }]}>
|
||||
<Text style={[Styles.mb05]}>
|
||||
Tanggal Berakhir <Text style={Styles.cError}>*</Text>
|
||||
</Text>
|
||||
<View style={[Styles.wrapPaper, Styles.p10]}>
|
||||
<Text style={{ textAlign: "center" }}>{to}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{
|
||||
(error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
|
||||
}
|
||||
</View>
|
||||
<InputForm
|
||||
label="Judul Tugas"
|
||||
type="default"
|
||||
placeholder="Judul Tugas"
|
||||
required
|
||||
bg="white"
|
||||
value={title}
|
||||
error={error.title}
|
||||
errorText="Judul tidak boleh kosong"
|
||||
onChange={(e) => {
|
||||
onValidation("title", e)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user