upd: kalender divisi

Deskripsi: - tambah kalender divisi - nb : blm selesai No Issues
2025-07-15 17:41:53 +08:00
parent 0c88ef5bbd
commit cf3b2090ea
4 changed files with 205 additions and 48 deletions
--- a/app/(application)/division/[id]/(fitur-division)/calendar/create.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/create.tsx
@@ -1,64 +1,217 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputDate } from "@/components/inputDate";
 import { InputForm } from "@/components/inputForm";
 import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
-import { Stack, router } from "expo-router";
+import { stringToDate } from "@/lib/fun_stringToDate";
+import { Stack, router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
-import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import {
+   SafeAreaView,
+   ScrollView,
+   ToastAndroid,
+   View
+} from "react-native";

 export default function CalendarDivisionCreate() {
-   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const [error, setError] = useState({
+      title: false,
+      dateStart: false,
+      timeStart: false,
+      timeEnd: false,
+      repeatEventType: false,
+      repeatValue: false,
+   });
+   const [data, setData] = useState({
+      title: "",
+      desc: "",
+      dateStart: "",
+      timeStart: "",
+      timeEnd: "",
+      repeatEventType: "",
+      repeatValue: 1,
+      linkMeet: "",
+   });
+
+   function validationForm(cat: "title" | "desc" | "dateStart" | "timeStart" | "timeEnd" | "repeatEventType" | "repeatValue" | "linkMeet", val: 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 = stringToDate(val);
+         const end = stringToDate(data.timeEnd);
+         if (start < end) {
+            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 = stringToDate(data.timeStart);
+         const end = stringToDate(val);
+         if (start < end) {
+            setError({ ...error, timeEnd: true });
+         } else {
+            setError({ ...error, timeEnd: false });
+         }
+      } else if (cat == "repeatEventType") {
+         setData({ ...data, repeatEventType: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, repeatEventType: true });
+         } else {
+            setError({ ...error, repeatEventType: false });
+         }
+      } 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 });
+      }
+   }

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Tambah Acara',
-               headerTitleAlign: 'center',
-               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
-                  ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
-                  router.push('./')
-               }} />
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Acara",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     onPress={() => {
+                        ToastAndroid.show(
+                           "Berhasil menambahkan data",
+                           ToastAndroid.SHORT
+                        );
+                        router.push("./");
+                     }}
+                  />
+               ),
            }}
         />
         <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 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 boleh kosong"
+                        placeholder="--:--"
+                     />
+                  </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 boleh kosong"
+                        placeholder="--:--"
+                     />
                  </View>
               </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>
-               </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" />
-               {/* <ButtonForm
-                  text="SIMPAN"
-                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menambahkan data?',
-                        onPress: () => {
-                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
-                           router.push('./')
-                        }
-                     })
-                  }} /> */}
+               <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={chooseGroup.label}
+                  required
+                  onPress={() => { }}
+               />
+               <InputForm
+                  label="Jumlah Pengulangan"
+                  type="numeric"
+                  placeholder="Jumlah Pengulangan"
+                  required
+                  bg="white"
+                  value={String(data.repeatValue)}
+                  onChange={(val) => validationForm("repeatValue", val)}
+               />
+               <InputForm
+                  label="Deskripsi"
+                  type="default"
+                  placeholder="Deskripsi"
+                  bg="white"
+                  value={data.desc}
+                  onChange={(val) => validationForm("desc", val)}
+                  multiline
+               />
            </View>
         </ScrollView>
      </SafeAreaView>
-   )
+   );
 }
--- a/app/(application)/division/[id]/report.tsx
+++ b/app/(application)/division/[id]/report.tsx
@@ -115,7 +115,7 @@ export default function ReportDivision() {
            <View style={[Styles.p15, Styles.mb100]}>
               <InputDate
                  onChange={(val) => validationForm("date", val)}
-                  type="date"
+                  mode="date"
                  value={data.date}
                  label="Tanggal Awal"
                  required
@@ -125,7 +125,7 @@ export default function ReportDivision() {
               />
               <InputDate
                  onChange={(val) => validationForm("dateEnd", val)}
-                  type="date"
+                  mode="date"
                  value={data.dateEnd}
                  label="Tanggal Akhir"
                  required
--- a/app/(application)/division/report.tsx
+++ b/app/(application)/division/report.tsx
@@ -151,7 +151,7 @@ export default function Report() {
               />
               <InputDate
                  onChange={(val) => validationForm("date", val)}
-                  type="date"
+                  mode="date"
                  value={data.date}
                  label="Tanggal Awal"
                  required
@@ -161,7 +161,7 @@ export default function Report() {
               />
               <InputDate
                  onChange={(val) => validationForm("dateEnd", val)}
-                  type="date"
+                  mode="date"
                  value={data.dateEnd}
                  label="Tanggal Akhir"
                  required
--- a/components/inputDate.tsx
+++ b/components/inputDate.tsx
@@ -14,7 +14,7 @@ type Props = {
   error?: boolean;
   errorText?: string;
   required?: boolean;
-   type: 'date' | 'datetime' | 'time'
+   mode: 'date' | 'datetime' | 'time'
   round?: boolean
   width?: number
   bg?: 'white' | 'transparent'
@@ -23,12 +23,16 @@ type Props = {
 };


-export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, type, round, width, }: Props) {
+export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
   const [modal, setModal] = useState(false);

   const onChangeDate = ({ type }: { type: string }, selectedDate: any) => {
      if (type === "set") {
+         if (mode == "date") {
            onChange(dayjs(selectedDate).format("DD-MM-YYYY"))
+         } else if (mode == "time") {
+            onChange(dayjs(selectedDate).format("HH:mm"))
+         }
         setModal(false)
      } else {
         setModal(false);
@@ -56,7 +60,7 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
            modal && (
               <DateTimePicker
                  value={value ? stringToDate(value) : new Date()}
-                  mode={type}
+                  mode={mode}
                  display="default"
                  onChange={onChangeDate}
                  onTouchCancel={() => setModal(false)}