style: update skelaton

2024-08-23 18:05:51 +08:00
parent d4f60ef016
commit df9074bf4d
12 changed files with 351 additions and 234 deletions
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -1,5 +1,5 @@
 import { WARNA } from '@/module/_global';
-import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -7,6 +7,7 @@ import { funGetAllCalender } from '../lib/api_calender';
 import { useSetState, useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 import moment from 'moment';
+import _ from 'lodash';


 export default function DateEventDivision() {
@@ -14,13 +15,18 @@ export default function DateEventDivision() {
  const router = useRouter()
  const param = useParams<{ id: string, detail: string }>()
  const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
+  const [loading, setLoading] = useState(true)

  const getData = async (tgl: any) => {
    try {
+      setLoading(true)
      const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
      setData(response.data)
+      setLoading(false)
    } catch (error) {
      console.log(error)
+    } finally {
+      setLoading(false)
    }
  }

@@ -60,30 +66,42 @@ export default function DateEventDivision() {
        <Text mb={10} mt={20} fw={"bold"}>
          Event
        </Text>
-        {isData.length > 0 ? (
-          isData.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(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
-                  borderRadius: 10
-                }} h={113}>
-                  <Group>
-                    <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
-                    <Box>
-                      <Text>{event.timeStart} - {event.timeEnd}</Text>
-                      <Text fw={"bold"}>{event.title}</Text>
-                      <Text>Dibuat oleh : {event.user_name}</Text>
-                    </Box>
-                  </Group>
+        {loading ? 
+          Array(6)
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i} mb={10}>
+              <Skeleton height={100} width={"100%"} radius={"md"} />
+            </Box>
+          ))
+          :
+          _.isEmpty(isData)
+            ?
+            <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
+            </Box>
+            :
+            isData.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(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
+                    borderRadius: 10
+                  }} h={113}>
+                    <Group>
+                      <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
+                      <Box>
+                        <Text>{event.timeStart} - {event.timeEnd}</Text>
+                        <Text fw={"bold"}>{event.title}</Text>
+                        <Text>Dibuat oleh : {event.user_name}</Text>
+                      </Box>
+                    </Group>
+                  </Box>
                </Box>
-              </Box>
-            )
-          })
-        ) : (
-          <Text c={WARNA.biruTua}>Tidak ada event</Text>
-        )}
+              )
+            })
+        }
      </Box>
    </Box>
  );
--- a/src/module/calender/ui/history_division_calender.tsx
+++ b/src/module/calender/ui/history_division_calender.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Box, Center, Flex, Grid, Group, Text, TextInput } from '@mantine/core';
+import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -9,63 +9,25 @@ import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
 import { useShallowEffect } from '@mantine/hooks';
 import moment from 'moment';
 import "moment/locale/id";
-
-const history = [
-  {
-    dateStart: "21",
-    data: [
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "10.00",
-        status: "Selesai",
-      },
-      {
-        id: 2,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "13.00 - 14.00",
-      },
-    ]
-  },
-  {
-    dateStart: "21",
-    data: [
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "10.00",
-      },
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "13.00",
-      },
-      {
-        id: 1,
-        title: "Pembahasan Mengenai Darmasaba",
-        timeEnd: "10:00",
-        timeStart: "15.00",
-      },
-    ]
-  },
-]
+import _ from 'lodash';

 export default function HistoryDivisionCalender() {
  const [isData, setData] = useState<IHistoryCalender[]>([])
  const router = useRouter()
  const param = useParams<{ id: string, detail: string }>()
  const [searchQuery, setSearchQuery] = useState('')
+  const [loading, setLoading] = useState(true)

  const getData = async () => {
    try {
+      setLoading(true)
      const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
      setData(response.data)
+      setLoading(false)
    } catch (error) {
      console.log(error)
+    } finally {
+      setLoading(false)
    }
  }

@@ -74,7 +36,7 @@ export default function HistoryDivisionCalender() {
  }, [searchQuery])
  return (
    <Box>
-      <LayoutNavbarNew back="/calender" title="Riwayat kalender" menu />
+      <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Riwayat kalender" menu />
      <Box p={20}>
        <TextInput
          styles={{
@@ -96,28 +58,59 @@ export default function HistoryDivisionCalender() {
            borderRadius: 10,
            padding: 20
          }}>
-            {isData.map((v, i) => {
-              return (
-                <Grid key={i}>
-                  <Grid.Col span={2}>
+            {loading ?
+              Array(6)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i} mb={10}>
+                    <Grid >
+                      <Grid.Col span={2}>
+                        <Flex justify={"center"} direction={'column'}>
+                          <Skeleton height={30} width={"100%"} radius={"md"} />
+                          <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
+                        </Flex>
+                      </Grid.Col>
+                      <Grid.Col span={'auto'}>
+                        {[...Array(1)].map((_, x) => (
+                          <Box mb={10} key={x}>
+                            <Skeleton height={20} width={"100%"} radius={"md"} />
+                            <Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
+                          </Box>
+                        ))}
+                      </Grid.Col>
+                    </Grid>
+                  </Box>
+                ))
+              :
+              _.isEmpty(isData)
+              ?
+              <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+                 <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text>
+              </Box>
+              :
+              isData.map((v, i) => {
+                return (
+                  <Grid key={i}>
+                    <Grid.Col span={2}>
                      <Flex justify={"center"} direction={'column'}>
                        <Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
                        <Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
                      </Flex>
-                  </Grid.Col>
-                  <Grid.Col span={'auto'}>
-                    {v.data.map((d, x) => {
-                      return (
-                        <Box mb={10} key={x} >
-                          <Text fw={"bold"}>{d.title}</Text>
-                          <Text>{d.timeStart} | {d.timeEnd}</Text>
-                        </Box>
-                      )
-                    })}
-                  </Grid.Col>
-                </Grid>
-              )
-            })}
+                    </Grid.Col>
+                    <Grid.Col span={'auto'}>
+                      {v.data.map((d, x) => {
+                        return (
+                          <Box mb={10} key={x} >
+                            <Text fw={"bold"}>{d.title}</Text>
+                            <Text>{d.timeStart} | {d.timeEnd}</Text>
+                          </Box>
+                        )
+                      })}
+                    </Grid.Col>
+                  </Grid>
+                )
+              })
+            }
          </Box>
        </Box>
      </Box>
--- a/src/module/calender/ui/navbar_create_division_calender.tsx
+++ b/src/module/calender/ui/navbar_create_division_calender.tsx
@@ -22,6 +22,15 @@ export default function NavbarCreateDivisionCalender() {
  const memberValue = memberUser.get() as IFormMemberCalender[]
  const [openMember, setOpenMember] = useState(false)
  const param = useParams<{ id: string, detail: string }>()
+  const [touched, setTouched] = useState({
+    title: false,
+    dateStart: false,
+    timeStart: false,
+    timeEnd: false,
+    linkMeet: false,
+    repeatEventTyper: false,
+    desc: false
+  })
  const [isData, setData] = useState({
    idDivision: "",
    title: "",
@@ -50,7 +59,7 @@ export default function NavbarCreateDivisionCalender() {
          desc: isData.desc,
          member: memberValue
        })
-  
+
        if (response.success) {
          setModal(false)
          router.push(`/division/${param.id}/calender`)
@@ -69,7 +78,7 @@ export default function NavbarCreateDivisionCalender() {
        } else {
          toast.error(response.message)
          setModal(false)
-        } 
+        }
      }
    } catch (error) {
      console.log(error)
@@ -89,6 +98,7 @@ export default function NavbarCreateDivisionCalender() {
      <Box p={20}>
        <Stack>
          <TextInput
+            required
            styles={{
              input: {
                border: `1px solid ${"#D6D8F6"}`,
@@ -96,12 +106,19 @@ export default function NavbarCreateDivisionCalender() {
              },
            }}
            size="md"
-            placeholder="Event Nama"
-            label="Event Nama"
+            placeholder="Nama Acara"
+            label="Nama Acara"
            value={isData.title}
            onChange={(event) => setData({ ...isData, title: event.target.value })}
+            onBlur={() => setTouched({ ...touched, title: true })}
+            error={
+              touched.title && (
+                isData.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
+              )
+            }
          />
          <DateInput
+            required
            styles={{
              input: {
                border: `1px solid ${"#D6D8F6"}`,
@@ -117,11 +134,18 @@ export default function NavbarCreateDivisionCalender() {
            placeholder="Input Tanggal"
            label="Tanggal"
            minDate={new Date()}
+            onBlur={() => setTouched({ ...touched, dateStart: true })}
+            error={
+              touched.dateStart && (
+                isData.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
+              )
+            }
          />
          <SimpleGrid
            cols={{ base: 2, sm: 2, lg: 2 }}
          >
            <TimeInput
+              required
              styles={{
                input: {
                  border: `1px solid ${"#D6D8F6"}`,
@@ -132,8 +156,15 @@ export default function NavbarCreateDivisionCalender() {
              label="Waktu Awal"
              value={isData.timeStart}
              onChange={(event) => setData({ ...isData, timeStart: event.target.value })}
+              onBlur={() => setTouched({ ...touched, timeStart: true })}
+              error={
+                touched.timeStart && (
+                  isData.timeStart == "" ? "Waktu Awal Tidak Boleh Kosong" : null
+                )
+              }
            />
            <TimeInput
+              required
              styles={{
                input: {
                  border: `1px solid ${"#D6D8F6"}`,
@@ -144,9 +175,16 @@ export default function NavbarCreateDivisionCalender() {
              label="Waktu Akhir"
              value={isData.timeEnd}
              onChange={(event) => setData({ ...isData, timeEnd: event.target.value })}
+              onBlur={() => setTouched({ ...touched, timeEnd: true })}
+              error={
+                touched.timeEnd && (
+                  isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
+                )
+              }
            />
          </SimpleGrid>
          <TextInput
+            required
            styles={{
              input: {
                border: `1px solid ${"#D6D8F6"}`,
@@ -158,8 +196,15 @@ export default function NavbarCreateDivisionCalender() {
            label="Link Meet"
            value={isData.linkMeet}
            onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
+            onBlur={() => setTouched({ ...touched, linkMeet: true })}
+            error={
+              touched.linkMeet && (
+                isData.linkMeet == "" ? "Link Meet Tidak Boleh Kosong" : null
+              )
+            }
          />
          <Select
+            required
            styles={{
              input: {
                border: `1px solid ${"#D6D8F6"}`,
@@ -180,20 +225,13 @@ export default function NavbarCreateDivisionCalender() {
            onChange={(val: any) =>
              setData({ ...isData, repeatEventTyper: val })
            }
+            onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
+            error={
+              touched.repeatEventTyper && (
+                isData.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
+              )
+            }
          />
-          <Box mt={5} onClick={() => setOpenMember(true)}>
-            <Group
-              justify="space-between"
-              p={10}
-              style={{
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              }}
-            >
-              <Text>Tambah Anggota</Text>
-              <IoIosArrowDropright size={25} />
-            </Group>
-          </Box>
          <Textarea styles={{
            input: {
              border: `1px solid ${"#D6D8F6"}`,
@@ -204,6 +242,19 @@ export default function NavbarCreateDivisionCalender() {
            size="md" placeholder='Deskripsi' label="Deskripsi"
            onChange={(event) => setData({ ...isData, desc: event.target.value })}
          />
+          <Box mt={5} onClick={() => setOpenMember(true)}>
+            <Group
+              justify="space-between"
+              p={10}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              }}
+            >
+              <Text>Tambah Anggota *</Text>
+              <IoIosArrowDropright size={25} />
+            </Group>
+          </Box>
          {
            memberUser.length > 0 &&
            <Box pt={30}>
@@ -248,7 +299,6 @@ export default function NavbarCreateDivisionCalender() {
              </Box>
            </Box>
          }
-
          <Box mt={"xl"}>
            <Button
              c={"white"}
@@ -256,7 +306,20 @@ export default function NavbarCreateDivisionCalender() {
              size="lg"
              radius={30}
              fullWidth
-              onClick={() => setModal(true)}
+              onClick={() => {
+                if (
+                  isData.title !== "" &&
+                  isData.dateStart !== " " &&
+                  isData.timeStart !== "" &&
+                  isData.timeEnd !== "" &&
+                  isData.linkMeet !== "" &&
+                  isData.repeatEventTyper !== ""
+                ) {
+                  setModal(true);
+                } else {
+                  toast.error("Mohon lengkapi semua form");
+                }
+              }}
            >
              Simpan
            </Button>