upd: kalender divisi

Deskripsi:
- tambah kalender divisi
- nb : blm selesai

No Issues

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() }} />,
+               headerLeft: () => (
-               headerTitle: 'Tambah Acara',
+                  <ButtonBackHeader
-               headerTitleAlign: 'center',
+                     onPress={() => {
-               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+                        router.back();
-                  ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+                     }}
-                  router.push('./')
+                  />
-               }} />
+               ),
+               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
-               <InputForm label="Tanggal Acara" type="default" placeholder="Input Tanggal Acara" required bg="white" />
+                  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%' }]}>
+                  <View style={[{ width: "48%" }]}>
-                     <Text style={[Styles.mb05]}>Waktu Awal<Text style={Styles.cError}>*</Text></Text>
+                     <InputDate
-                     <View style={[Styles.wrapPaper, Styles.p10]}>
+                        onChange={(val) => validationForm("timeStart", val)}
-                        <Text style={{ textAlign: 'center' }}>--.--</Text>
+                        mode="time"
-                     </View>
+                        value={data.timeStart}
+                        label="Waktu Awal"
+                        required
+                        error={error.timeStart}
+                        errorText="Waktu awal tidak boleh kosong"
+                        placeholder="--:--"
+                     />
                   </View>
-                  <View style={[{ width: '48%' }]}>
+                  <View style={[{ width: "48%" }]}>
-                     <Text style={[Styles.mb05]}>Waktu Akhir <Text style={Styles.cError}>*</Text></Text>
+                     <InputDate
-                     <View style={[Styles.wrapPaper, Styles.p10]}>
+                        onChange={(val) => validationForm("timeEnd", val)}
-                        <Text style={{ textAlign: 'center' }}>--.--</Text>
+                        mode="time"
-                     </View>
+                        value={data.timeEnd}
+                        label="Waktu Akhir"
+                        required
+                        error={error.timeEnd}
+                        errorText="Waktu akhir tidak boleh kosong"
+                        placeholder="--:--"
+                     />
                   </View>
                </View>
-               <InputForm label="Link Meet" type="default" placeholder="Link Meet" bg="white" />
+               <InputForm
-               <SelectForm bg="white" label="Ulangi Acara" placeholder="Ulangi Acara" value={chooseGroup.label} required onPress={() => { }} />
+                  label="Link Meet"
-               <InputForm label="Jumlah Pengulangan" type="numeric" placeholder="Jumlah Pengulangan" required bg="white" />
+                  type="default"
-               <InputForm label="Deskripsi" type="default" placeholder="Deskripsi" bg="white" />
+                  placeholder="Link Meet"
-               {/* <ButtonForm
+                  bg="white"
-                  text="SIMPAN"
+                  value={data.linkMeet}
-                  onPress={() => {
+                  onChange={(val) => validationForm("linkMeet", val)}
-                     AlertKonfirmasi({
+               />
-                        title: 'Konfirmasi',
+               <SelectForm
-                        desc: 'Apakah anda yakin ingin menambahkan data?',
+                  bg="white"
-                        onPress: () => {
+                  label="Ulangi Acara"
-                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+                  placeholder="Ulangi Acara"
-                           router.push('./')
+                  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>
-   )
+   );
-}
+}

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

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

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") {
-         onChange(dayjs(selectedDate).format("DD-MM-YYYY"))
+         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)}