feat : update calender

2024-08-15 11:53:26 +08:00
parent d34a0a1a82
commit 2cfa96c0ed
14 changed files with 121 additions and 9 deletions
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -0,0 +1,127 @@
+import { WARNA } from '@/module/_global';
+import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { DatePicker, DatePickerProps } from '@mantine/dates';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { funGetAllCalender } from '../lib/api_calender';
+import { useShallowEffect } from '@mantine/hooks';
+import { IDataCalender } from '../lib/type_calender';
+
+const HariIni = [
+  {
+    id: 1,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "10.00",
+    jamAkhir: "11.00",
+    dibuat: "Jhon"
+  },
+  {
+    id: 2,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "11.00",
+    jamAkhir: "12.00",
+    dibuat: "Jhon"
+  },
+]
+const Besok = [
+  {
+    id: 1,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "10.00",
+    jamAkhir: "11.00",
+    dibuat: "Jhon"
+  },
+  {
+    id: 2,
+    title: 'Pembahasan Mengenai Darmasaba',
+    jamAwal: "11.00",
+    jamAkhir: "12.00",
+    dibuat: "Jhon"
+  },
+]
+
+export default function DateEventDivision() {
+  const[isData, setData] = useState<IDataCalender[]>([])
+  const router = useRouter()
+  const param = useParams<{ id: string }>()
+
+  const getData = async () => {
+    try {
+      const response = await funGetAllCalender('?division=' + param.id)
+      setData(response.data)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useShallowEffect(() => {
+    getData()
+  }, [])
+
+
+  const dayRenderer: DatePickerProps['renderDay'] = (date) => {
+    const day = date.getDate();
+    return (
+      <Indicator size={6} color="red" offset={-5} disabled={day !== 16}>
+        <div>{day}</div>
+      </Indicator>
+    );
+  };
+  return (
+    <Box>
+      <pre>{JSON.stringify(isData, null, 1)}</pre>
+      <Group
+        justify="center"
+        bg={"white"}
+        py={20}
+        style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+      >
+        <DatePicker size='md' defaultValue={new Date()} renderDay={dayRenderer} />
+      </Group>
+      <Box>
+        <Text mb={10} mt={20}  fw={"bold"}>Hari Ini</Text>
+        {HariIni.map((event, index) => {
+          const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+          return (
+            <Box key={event.id} mt={10}>
+              <Box onClick={() => router.push("/calender?page=detail-event")} bg={bgColor} pl={15} p={10} style={{
+                borderRadius: 10
+              }} h={113}>
+                <Group>
+                  <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
+                  <Box>
+                    <Text>{event.jamAwal} - {event.jamAkhir}</Text>
+                    <Text fw={"bold"}>{event.title}</Text>
+                    <Text>Dibuat oleh : {event.dibuat}</Text>
+                  </Box>
+                </Group>
+              </Box>
+            </Box>
+          )
+        })}
+        <Text mb={10} mt={20}  fw={"bold"}>16 Juli 2024</Text>
+        {Besok.map((event, index) => {
+          const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+          const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+          return (
+            <Box key={event.id} mt={10}>
+              <Box onClick={() => router.push("/calender?page=detail-event")}  bg={bgColor} pl={15} p={10} style={{
+                borderRadius: 10
+              }} h={113}>
+                <Group>
+                  <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
+                  <Box>
+                    <Text>{event.jamAwal} - {event.jamAkhir}</Text>
+                    <Text fw={"bold"}>{event.title}</Text>
+                    <Text>Dibuat oleh : {event.dibuat}</Text>
+                  </Box>
+                </Group>
+              </Box>
+            </Box>
+          )
+        })}
+      </Box>
+    </Box>
+  );
+}