upd: fitur baru task divisi
Deskripsi; - tampilan list detail tugas task divisi - tampilan tambah detail tugas task divisi - tampilan edit detail tugas task divisi - tampilan tambah data task divisi > detail tugas - integrasi api get data list detail tugas task divisi - integrasi api tambah dtail tugas task divisi - integrasi api edit detail tugas task divisi - integrasi api tambah data task divisi > detail tugas NO Issues'
This commit is contained in:
135
components/task/modalAddDetailTugasTask.tsx
Normal file
135
components/task/modalAddDetailTugasTask.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import Styles from "@/constants/Styles";
|
||||
import { stringToDateTime } from "@/lib/fun_stringToDate";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Dimensions, View, VirtualizedList } from "react-native";
|
||||
import { InputDate } from "../inputDate";
|
||||
import ModalFloat from "../modalFloat";
|
||||
import Text from "../Text";
|
||||
|
||||
interface Props {
|
||||
date: string;
|
||||
timeStart: string;
|
||||
timeEnd: string;
|
||||
}
|
||||
|
||||
export default function ModalAddDetailTugasTask({ isVisible, setVisible, dataTanggal, onSubmit }: { isVisible: boolean, setVisible: (value: boolean) => void, dataTanggal: Props[], onSubmit: (data: Props[]) => void }) {
|
||||
const [data, setData] = useState<Props[]>(dataTanggal)
|
||||
const tinggiScreen = Dimensions.get("window").height;
|
||||
const tinggiFix = tinggiScreen * 70 / 100;
|
||||
const [error, setError] = useState<any>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
setData(dataTanggal)
|
||||
setError([])
|
||||
}
|
||||
}, [isVisible, dataTanggal])
|
||||
|
||||
|
||||
const getItem = (_data: unknown, index: number): Props => ({
|
||||
date: data[index].date,
|
||||
timeStart: data[index].timeStart,
|
||||
timeEnd: data[index].timeEnd,
|
||||
})
|
||||
|
||||
function settingError(date: string, cat: 'timeStart' | 'timeEnd', val: boolean) {
|
||||
const ada = error.find((item: any) => item.date == date)
|
||||
if (ada) {
|
||||
setError(error.map((item: any) => {
|
||||
if (item.date == date) {
|
||||
return { ...item, [cat]: val }
|
||||
}
|
||||
return item
|
||||
}))
|
||||
} else {
|
||||
setError([...error, { date, [cat]: val }])
|
||||
}
|
||||
}
|
||||
|
||||
function validationForm(cat: "timeStart" | "timeEnd", val: string, date: string) {
|
||||
if (cat == "timeEnd") {
|
||||
const start = stringToDateTime("", String(data.find((item) => item.date == date)?.timeStart))
|
||||
const end = stringToDateTime("", val)
|
||||
const timestampAwal = start.getTime()
|
||||
const timestampAkhir = end.getTime()
|
||||
if (val == "" || val == null || timestampAwal > timestampAkhir) {
|
||||
settingError(date, "timeEnd", true)
|
||||
} else {
|
||||
settingError(date, "timeEnd", false)
|
||||
}
|
||||
} else {
|
||||
const end = stringToDateTime("", String(data.find((item) => item.date == date)?.timeEnd))
|
||||
const start = stringToDateTime("", val)
|
||||
const timestampAwal = start.getTime()
|
||||
const timestampAkhir = end.getTime()
|
||||
|
||||
if (val == "" || val == null || timestampAwal > timestampAkhir) {
|
||||
settingError(date, "timeEnd", true)
|
||||
} else {
|
||||
settingError(date, "timeEnd", false)
|
||||
}
|
||||
}
|
||||
|
||||
setData(data.map((item) => {
|
||||
if (item.date == date) {
|
||||
return { ...item, [cat]: val }
|
||||
}
|
||||
return item
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<ModalFloat
|
||||
title="Detail Tanggal dan Waktu Tugas"
|
||||
isVisible={isVisible}
|
||||
setVisible={setVisible}
|
||||
disableSubmit={Object.values(error).some((val: any) => val.timeEnd == true || val.timeStart == true)}
|
||||
onSubmit={() => {
|
||||
onSubmit(data)
|
||||
setVisible(false)
|
||||
}}
|
||||
>
|
||||
<View style={[{ height: tinggiFix }]} >
|
||||
<VirtualizedList
|
||||
data={data}
|
||||
getItemCount={() => data.length}
|
||||
getItem={getItem}
|
||||
renderItem={({ item, index }: { item: Props, index: number }) => {
|
||||
return (
|
||||
<View key={index} style={[Styles.borderBottom, Styles.pv05]}>
|
||||
<Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<View style={[{ width: "48%" }]}>
|
||||
<InputDate
|
||||
mode="time"
|
||||
onChange={(val) => { validationForm("timeStart", val, item.date) }}
|
||||
value={item.timeStart}
|
||||
label="Waktu Awal"
|
||||
placeholder="--:--"
|
||||
error={error.find((error: any) => error.date == item.date)?.timeStart}
|
||||
errorText="Waktu awal tidak valid"
|
||||
/>
|
||||
</View>
|
||||
<View style={[{ width: "48%" }]}>
|
||||
<InputDate
|
||||
onChange={(val) => { validationForm("timeEnd", val, item.date) }}
|
||||
mode="time"
|
||||
value={item.timeEnd}
|
||||
label="Waktu Akhir"
|
||||
placeholder="--:--"
|
||||
error={error.find((error: any) => error.date == item.date)?.timeEnd}
|
||||
errorText="Waktu akhir harus lebih dari waktu awal"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}}
|
||||
keyExtractor={(item, index) => String(index)}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
</View>
|
||||
|
||||
</ModalFloat>
|
||||
)
|
||||
}
|
||||
116
components/task/modalListDetailTugasTask.tsx
Normal file
116
components/task/modalListDetailTugasTask.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiGetProjectTask, apiGetTaskTugas } from "@/lib/api";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Dimensions, View, VirtualizedList } from "react-native";
|
||||
import { InputDate } from "../inputDate";
|
||||
import ModalFloat from "../modalFloat";
|
||||
import Skeleton from "../skeleton";
|
||||
import Text from "../Text";
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
date: string;
|
||||
timeStart: string;
|
||||
timeEnd: string;
|
||||
}
|
||||
|
||||
export default function ModalListDetailTugasTask({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
|
||||
const [data, setData] = useState<Props[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
|
||||
const tinggiScreen = Dimensions.get("window").height;
|
||||
const tinggiFix = tinggiScreen * 70 / 100;
|
||||
|
||||
|
||||
|
||||
async function getData() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const hasil = await decryptToken(String(token?.current));
|
||||
const res = await apiGetTaskTugas({ user: hasil, id: idTask, cat: "detailTask" })
|
||||
setData(res.data)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
getData()
|
||||
}
|
||||
}, [isVisible, idTask])
|
||||
|
||||
const getItem = (_data: unknown, index: number): Props => ({
|
||||
id: data[index].id,
|
||||
date: data[index].date,
|
||||
timeStart: data[index].timeStart,
|
||||
timeEnd: data[index].timeEnd,
|
||||
})
|
||||
|
||||
return (
|
||||
<ModalFloat
|
||||
title="Detail Tanggal dan Waktu Tugas"
|
||||
isVisible={isVisible}
|
||||
setVisible={setVisible}
|
||||
buttonHide
|
||||
>
|
||||
<View style={[{ height: tinggiFix }]} >
|
||||
{
|
||||
loading ?
|
||||
arrSkeleton.map((item: any, i: number) => {
|
||||
return (
|
||||
<Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
|
||||
)
|
||||
})
|
||||
:
|
||||
data.length > 0 ?
|
||||
(
|
||||
<VirtualizedList
|
||||
data={data}
|
||||
getItemCount={() => data.length}
|
||||
getItem={getItem}
|
||||
renderItem={({ item, index }: { item: Props, index: number }) => {
|
||||
return (
|
||||
<View key={index} style={[Styles.borderBottom, Styles.pv05]}>
|
||||
<Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<View style={[{ width: "48%" }]}>
|
||||
<InputDate
|
||||
mode="time"
|
||||
disable
|
||||
onChange={(val) => { }}
|
||||
value={item.timeStart}
|
||||
label="Waktu Awal"
|
||||
placeholder="--:--"
|
||||
/>
|
||||
</View>
|
||||
<View style={[{ width: "48%" }]}>
|
||||
<InputDate
|
||||
onChange={(val) => { }}
|
||||
mode="time"
|
||||
value={item.timeEnd}
|
||||
label="Waktu Akhir"
|
||||
placeholder="--:--"
|
||||
disable
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}}
|
||||
keyExtractor={(item, index) => String(index)}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
)
|
||||
:
|
||||
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]} >Tidak ada data</Text>
|
||||
}
|
||||
</View>
|
||||
|
||||
</ModalFloat>
|
||||
)
|
||||
}
|
||||
@@ -15,6 +15,7 @@ import MenuItemRow from "../menuItemRow";
|
||||
import ModalSelect from "../modalSelect";
|
||||
import SkeletonTask from "../skeletonTask";
|
||||
import Text from "../Text";
|
||||
import ModalListDetailTugasTask from "./modalListDetailTugasTask";
|
||||
|
||||
|
||||
type Props = {
|
||||
@@ -25,7 +26,7 @@ type Props = {
|
||||
dateEnd: string;
|
||||
}
|
||||
|
||||
export default function SectionTanggalTugasTask({refreshing}: {refreshing: boolean}) {
|
||||
export default function SectionTanggalTugasTask({ refreshing }: { refreshing: boolean }) {
|
||||
const dispatch = useDispatch()
|
||||
const update = useSelector((state: any) => state.taskUpdate)
|
||||
const [isModal, setModal] = useState(false)
|
||||
@@ -33,6 +34,7 @@ export default function SectionTanggalTugasTask({refreshing}: {refreshing: boole
|
||||
const { token, decryptToken } = useAuthSession()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const arrSkeleton = Array.from({ length: 5 })
|
||||
const [modalDetail, setModalDetail] = useState(false)
|
||||
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
|
||||
const [data, setData] = useState<Props[]>([])
|
||||
const [tugas, setTugas] = useState({
|
||||
@@ -171,7 +173,24 @@ export default function SectionTanggalTugasTask({refreshing}: {refreshing: boole
|
||||
router.push(`./update/${tugas.id}`)
|
||||
}}
|
||||
/>
|
||||
|
||||
<MenuItemRow
|
||||
icon={
|
||||
<MaterialCommunityIcons
|
||||
name="clock-time-three-outline"
|
||||
color="black"
|
||||
size={25}
|
||||
/>
|
||||
}
|
||||
title="Detail Waktu"
|
||||
onPress={() => {
|
||||
setModal(false);
|
||||
setTimeout(() => {
|
||||
setModalDetail(true)
|
||||
}, 600)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
|
||||
<MenuItemRow
|
||||
icon={<Ionicons name="trash" color="black" size={25} />}
|
||||
title="Hapus Tugas"
|
||||
@@ -198,6 +217,12 @@ export default function SectionTanggalTugasTask({refreshing}: {refreshing: boole
|
||||
open={isSelect}
|
||||
valChoose={String(tugas.status)}
|
||||
/>
|
||||
|
||||
<ModalListDetailTugasTask
|
||||
isVisible={modalDetail}
|
||||
setVisible={setModalDetail}
|
||||
idTask={tugas.id}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user