wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd : kalender divisi

Browse Source 
Deskripsi:
0 tambah data
- edit data kalender divisi
- nb : bllm selesai

No Issues
This commit is contained in:
amal
2025-07-17 17:48:02 +08:00
parent cf3b2090ea
commit 85f80746a3
11 changed files with 501 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx
View File

@@ -1,31 +1,47 @@
import ButtonBackHeader from "@/components/buttonBackHeader"
import ButtonSaveHeader from "@/components/buttonSaveHeader"
import { InputDate } from "@/components/inputDate"
import { InputForm } from "@/components/inputForm"
import ModalSelect from "@/components/modalSelect"
import SelectForm from "@/components/selectForm"
import Styles from "@/constants/Styles"
import { apiGetCalendarOne } from "@/lib/api"
import { valueTypeEventRepeat } from "@/constants/TypeEventRepeat"
import { apiGetCalendarOne, apiUpdateCalendar } from "@/lib/api"
import { setUpdateCalendar } from "@/lib/calendarUpdate"
import { stringToDateTime } from "@/lib/fun_stringToDate"
import { useAuthSession } from "@/providers/AuthProvider"
import { Stack, router, useLocalSearchParams } from "expo-router"
import moment from "moment"
import { useEffect, useState } from "react"
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
import { useDispatch, useSelector } from "react-redux"
export default function EditEventCalendar() {
const { token, decryptToken } = useAuthSession();
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
const [choose, setChoose] = useState({ val: "", label: "" })
const [isSelect, setSelect] = useState(false)
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>()
const [idCalendar, setIdCalendar] = useState('')
const dispatch = useDispatch()
const update = useSelector((state: any) => state.updateCalendar)
const [error, setError] = useState({
title: false,
dateStart: false,
timeStart: false,
timeEnd: false,
repeatEventType: false,
repeatValue: false,
});
const [data, setData] = useState({
id: '',
timeStart: '',
timeEnd: '',
dateStart: '',
dateEnd: '',
idCalendar: '',
status: 0,
title: '',
desc: '',
linkMeet: '',
repeatEventTyper: '',
repeatValue: 0,
repeatValue: 1,
})
async function handleLoad() {
@@ -36,9 +52,14 @@ export default function EditEventCalendar() {
id: detail,
cat: 'data',
});
setData(response.data);
setData(response.data)
setIdCalendar(response.data.idCalendar)
console.log(response.data)
setData({ ...data, dateStart: moment(response.data.dateStartFormat, 'DD-MM-YYYY').format('DD-MM-YYYY') })
setChoose({ val: response.data.repeatEventTyper, label: valueTypeEventRepeat.find((item) => item.id == response.data.repeatEventTyper)?.name || "" })
} catch (error) {
console.error(error);
ToastAndroid.show('Gagal mendapatkan data', ToastAndroid.SHORT)
}
}
@@ -48,6 +69,99 @@ export default function EditEventCalendar() {
function validationForm(cat: "title" | "desc" | "dateStart" | "timeStart" | "timeEnd" | "repeatEventType" | "repeatValue" | "linkMeet", val: string, label?: string) {
if (cat == "title") {
setData({ ...data, title: val });
if (val == "" || val == "null") {
setError({ ...error, title: true });
} else {
setError({ ...error, title: false });
}
} else if (cat == "desc") {
setData({ ...data, desc: val });
} else if (cat == "dateStart") {
setData({ ...data, dateStart: val });
if (val == "" || val == "null") {
setError({ ...error, dateStart: true });
} else {
setError({ ...error, dateStart: false });
}
} else if (cat == "timeStart") {
setData({ ...data, timeStart: val });
if (val == "" || val == "null") {
setError({ ...error, timeStart: true });
} else {
setError({ ...error, timeStart: false });
}
const start = stringToDateTime(data.dateStart, data.timeStart);
const end = stringToDateTime(data.dateStart, data.timeEnd);
const timestampAwal = start.getTime();
const timestampAkhir = end.getTime();
if (timestampAwal > timestampAkhir) {
setError({ ...error, timeEnd: true });
} else {
setError({ ...error, timeEnd: false });
}
} else if (cat == "timeEnd") {
setData({ ...data, timeEnd: val });
if (val == "" || val == "null") {
setError({ ...error, timeEnd: true });
} else {
setError({ ...error, timeEnd: false });
}
const start = stringToDateTime(data.dateStart, data.timeStart);
const end = stringToDateTime(data.dateStart, val);
const timestampAwal = start.getTime();
const timestampAkhir = end.getTime();
if (timestampAwal > timestampAkhir) {
setError({ ...error, timeEnd: true });
} else {
setError({ ...error, timeEnd: false });
}
} else if (cat == "repeatEventType") {
setChoose({ val, label: String(label) })
setData({ ...data, repeatEventTyper: val });
if (val == "" || val == "null") {
setError({ ...error, repeatEventType: true });
} else {
setError({ ...error, repeatEventType: false });
if (val == "once") {
setData({ ...data, repeatValue: 1 });
}
}
} else if (cat == "repeatValue") {
setData({ ...data, repeatValue: Number(val) });
if (val == "" || val == "null") {
setError({ ...error, repeatValue: true });
} else {
setError({ ...error, repeatValue: false });
}
} else if (cat == "linkMeet") {
setData({ ...data, linkMeet: val });
}
}
async function handleUpdate() {
try {
const hasil = await decryptToken(String(token?.current))
const response = await apiUpdateCalendar({ data: { ...data, user: hasil }, id: idCalendar })
if (response.success) {
ToastAndroid.show('Berhasil mengubah acara', ToastAndroid.SHORT)
dispatch(setUpdateCalendar({ ...update, data: !update.data }));
router.replace(`/division/${id}/calendar/`)
} else {
ToastAndroid.show(response.message, ToastAndroid.SHORT)
}
} catch (error) {
console.error(error)
ToastAndroid.show('Gagal mengubah acara', ToastAndroid.SHORT)
}
}
return (
<SafeAreaView>
<Stack.Screen
@@ -55,36 +169,115 @@ export default function EditEventCalendar() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Acara',
headerTitleAlign: 'center',
headerRight: () => <ButtonSaveHeader category="update" onPress={() => {
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
router.back()
}} />
headerRight: () =>
<ButtonSaveHeader
disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventTyper == ""}
category="update"
onPress={() => {
handleUpdate()
}}
/>
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<InputForm label="Nama Acara" type="default" placeholder="Nama Acara" required bg="white" />
<InputForm label="Tanggal Acara" type="default" placeholder="Input Tanggal Acara" required bg="white" />
<InputForm
label="Nama Acara"
type="default"
placeholder="Nama Acara"
required
bg="white"
value={data.title}
onChange={(val) => validationForm("title", val)}
error={error.title}
errorText="Nama acara tidak boleh kosong"
/>
<InputDate
onChange={(val) => validationForm("dateStart", val)}
mode="date"
value={data.dateStart}
label="Tanggal Acara"
required
error={error.dateStart}
errorText="Tanggal acara tidak boleh kosong"
placeholder="Pilih Tanggal Acara"
/>
<View style={[Styles.rowSpaceBetween, Styles.mv10]}>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Waktu Awal<Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>--.--</Text>
</View>
<View style={[{ width: "48%" }]}>
<InputDate
onChange={(val) => validationForm("timeStart", val)}
mode="time"
value={data.timeStart}
label="Waktu Awal"
required
error={error.timeStart}
errorText="Waktu awal tidak valid"
placeholder="--:--"
/>
</View>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Waktu Akhir <Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>--.--</Text>
</View>
<View style={[{ width: "48%" }]}>
<InputDate
onChange={(val) => validationForm("timeEnd", val)}
mode="time"
value={data.timeEnd}
label="Waktu Akhir"
required
error={error.timeEnd}
errorText="Waktu akhir tidak valid"
placeholder="--:--"
/>
</View>
</View>
<InputForm label="Link Meet" type="default" placeholder="Link Meet" bg="white" />
<SelectForm bg="white" label="Ulangi Acara" placeholder="Ulangi Acara" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="Jumlah Pengulangan" type="numeric" placeholder="Jumlah Pengulangan" required bg="white" />
<InputForm label="Deskripsi" type="default" placeholder="Deskripsi" bg="white" />
<InputForm
label="Link Meet"
type="default"
placeholder="Link Meet"
bg="white"
value={data.linkMeet}
onChange={(val) => validationForm("linkMeet", val)}
/>
<SelectForm
bg="white"
label="Ulangi Acara"
placeholder="Ulangi Acara"
value={choose.label}
required
onPress={() => { setSelect(true) }}
/>
<InputForm
label="Jumlah Pengulangan"
type="numeric"
placeholder="Jumlah Pengulangan"
required
bg="white"
value={String(data.repeatValue)}
onChange={(val) => validationForm("repeatValue", val)}
error={error.repeatValue}
errorText="Jumlah pengulangan tidak valid"
disable={choose.val == "once"}
/>
<InputForm
label="Deskripsi"
type="default"
placeholder="Deskripsi"
bg="white"
value={data.desc}
onChange={(val) => validationForm("desc", val)}
multiline
/>
</View>
</ScrollView>
<ModalSelect
category={"type-event-repeat"}
close={setSelect}
onSelect={(value) => {
validationForm("repeatEventType", value.val, value.label);
}}
title={"Ulangi Acara"}
open={isSelect}
valChoose={choose.val}
/>
</SafeAreaView>
)
}

157
app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx Normal file
View File

@@ -0,0 +1,157 @@
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 { apiCreateCalendar, apiGetDivisionMember } from "@/lib/api";
import { setFormCreateCalendar } from "@/lib/calendarCreate";
import { setUpdateCalendar } from "@/lib/calendarUpdate";
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 CreateCalendarAddMember() {
const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props[]>([])
const [selectMember, setSelectMember] = useState<any[]>([])
const [search, setSearch] = useState('')
const update = useSelector((state: any) => state.calendarCreate)
const dispatch = useDispatch()
const updateRefresh = useSelector((state: any) => state.calendarUpdate)
async function handleLoadMemberDivision() {
const hasil = await decryptToken(String(token?.current))
const responMemberDivision = await apiGetDivisionMember({ id: id, user: hasil, search: search })
setData(responMemberDivision.data)
if (update.member.length > 0) {
setSelectMember(update.member)
}
}
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() {
dispatch(setFormCreateCalendar({ ...update, member: selectMember }))
try {
const hasil = await decryptToken(String(token?.current))
const response = await apiCreateCalendar({ data: { ...update, user: hasil, idDivision: id } })
if (response.success) {
ToastAndroid.show('Berhasil membuat acara', ToastAndroid.SHORT)
dispatch(setFormCreateCalendar({
title: "",
desc: "",
dateStart: "",
timeStart: "",
timeEnd: "",
repeatEventType: "",
repeatValue: 1,
linkMeet: "",
member: [],
}))
dispatch(setUpdateCalendar({ ...updateRefresh, data: !updateRefresh.data }));
router.replace(`/division/${id}/calendar`)
} else {
ToastAndroid.show(response.message, ToastAndroid.SHORT)
}
} catch (error) {
console.error(error)
ToastAndroid.show('Gagal membuat acara', 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, Styles.w70]}>
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
<View style={[Styles.ml10]}>
<Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{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>
)
}

76
app/(application)/division/[id]/(fitur-division)/calendar/create.tsx
View File

@@ -1,22 +1,27 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ButtonSaveHeader from "@/components/buttonSaveHeader";
import ButtonNextHeader from "@/components/buttonNextHeader";
import { InputDate } from "@/components/inputDate";
import { InputForm } from "@/components/inputForm";
import ModalSelect from "@/components/modalSelect";
import SelectForm from "@/components/selectForm";
import Styles from "@/constants/Styles";
import { stringToDate } from "@/lib/fun_stringToDate";
import { setFormCreateCalendar } from "@/lib/calendarCreate";
import { stringToDateTime } from "@/lib/fun_stringToDate";
import { Stack, router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import {
SafeAreaView,
ScrollView,
ToastAndroid,
View
} from "react-native";
import { useDispatch, useSelector } from "react-redux";
export default function CalendarDivisionCreate() {
const { id } = useLocalSearchParams<{ id: string }>()
const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
const [choose, setChoose] = useState({ val: "", label: "" })
const [isSelect, setSelect] = useState(false)
const update = useSelector((state: any) => state.calendarCreate)
const dispatch = useDispatch()
const [error, setError] = useState({
title: false,
dateStart: false,
@@ -36,7 +41,7 @@ export default function CalendarDivisionCreate() {
linkMeet: "",
});
function validationForm(cat: "title" | "desc" | "dateStart" | "timeStart" | "timeEnd" | "repeatEventType" | "repeatValue" | "linkMeet", val: string) {
function validationForm(cat: "title" | "desc" | "dateStart" | "timeStart" | "timeEnd" | "repeatEventType" | "repeatValue" | "linkMeet", val: string, label?: string) {
if (cat == "title") {
setData({ ...data, title: val });
if (val == "" || val == "null") {
@@ -60,9 +65,12 @@ export default function CalendarDivisionCreate() {
} else {
setError({ ...error, timeStart: false });
}
const start = stringToDate(val);
const end = stringToDate(data.timeEnd);
if (start < end) {
const start = stringToDateTime(data.dateStart, data.timeStart);
const end = stringToDateTime(data.dateStart, data.timeEnd);
const timestampAwal = start.getTime();
const timestampAkhir = end.getTime();
if (timestampAwal > timestampAkhir) {
setError({ ...error, timeEnd: true });
} else {
setError({ ...error, timeEnd: false });
@@ -74,19 +82,26 @@ export default function CalendarDivisionCreate() {
} else {
setError({ ...error, timeEnd: false });
}
const start = stringToDate(data.timeStart);
const end = stringToDate(val);
if (start < end) {
const start = stringToDateTime(data.dateStart, data.timeStart);
const end = stringToDateTime(data.dateStart, val);
const timestampAwal = start.getTime();
const timestampAkhir = end.getTime();
if (timestampAwal > timestampAkhir) {
setError({ ...error, timeEnd: true });
} else {
setError({ ...error, timeEnd: false });
}
} else if (cat == "repeatEventType") {
setChoose({ val, label: String(label) })
setData({ ...data, repeatEventType: val });
if (val == "" || val == "null") {
setError({ ...error, repeatEventType: true });
} else {
setError({ ...error, repeatEventType: false });
if (val == "once") {
setData({ ...data, repeatValue: 1 });
}
}
} else if (cat == "repeatValue") {
setData({ ...data, repeatValue: Number(val) });
@@ -100,6 +115,11 @@ export default function CalendarDivisionCreate() {
}
}
function handleSetData() {
dispatch(setFormCreateCalendar(data))
router.push(`./create-member`)
}
return (
<SafeAreaView>
<Stack.Screen
@@ -114,15 +134,9 @@ export default function CalendarDivisionCreate() {
headerTitle: "Tambah Acara",
headerTitleAlign: "center",
headerRight: () => (
<ButtonSaveHeader
category="create"
onPress={() => {
ToastAndroid.show(
"Berhasil menambahkan data",
ToastAndroid.SHORT
);
router.push("./");
}}
<ButtonNextHeader
onPress={() => { handleSetData() }}
disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
/>
),
}}
@@ -159,7 +173,7 @@ export default function CalendarDivisionCreate() {
label="Waktu Awal"
required
error={error.timeStart}
errorText="Waktu awal tidak boleh kosong"
errorText="Waktu awal tidak valid"
placeholder="--:--"
/>
</View>
@@ -171,7 +185,7 @@ export default function CalendarDivisionCreate() {
label="Waktu Akhir"
required
error={error.timeEnd}
errorText="Waktu akhir tidak boleh kosong"
errorText="Waktu akhir tidak valid"
placeholder="--:--"
/>
</View>
@@ -188,9 +202,9 @@ export default function CalendarDivisionCreate() {
bg="white"
label="Ulangi Acara"
placeholder="Ulangi Acara"
value={chooseGroup.label}
value={choose.label}
required
onPress={() => { }}
onPress={() => { setSelect(true) }}
/>
<InputForm
label="Jumlah Pengulangan"
@@ -200,6 +214,9 @@ export default function CalendarDivisionCreate() {
bg="white"
value={String(data.repeatValue)}
onChange={(val) => validationForm("repeatValue", val)}
error={error.repeatValue}
errorText="Jumlah pengulangan tidak valid"
disable={choose.val == "once"}
/>
<InputForm
label="Deskripsi"
@@ -212,6 +229,17 @@ export default function CalendarDivisionCreate() {
/>
</View>
</ScrollView>
<ModalSelect
category={"type-event-repeat"}
close={setSelect}
onSelect={(value) => {
validationForm("repeatEventType", value.val, value.label);
}}
title={"Ulangi Acara"}
open={isSelect}
valChoose={choose.val}
/>
</SafeAreaView>
);
}