feat : update all button

2024-08-29 17:43:05 +08:00
parent 2ce1f204ed
commit e5adacb636
20 changed files with 406 additions and 295 deletions
--- a/src/module/calender/ui/create_user_calender.tsx
+++ b/src/module/calender/ui/create_user_calender.tsx
@@ -6,7 +6,7 @@ import { useHookstate } from '@hookstate/core';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Divider, Flex, Group, Text } from '@mantine/core';
+import { Avatar, Box, Button, Divider, Flex, Group, rem, Text } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';

 export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
@@ -96,7 +96,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
        {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
        </Group>
        {loading ? 
-          Array(4)
+          Array(8)
          .fill(null)
          .map((_, i) => (
             <Box key={i}>
@@ -137,7 +137,12 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
        })}
      </Box>
        }
-      <Box mt={"xl"}>
+    </Box>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
        <Button
          c={"white"}
          bg={WARNA.biruTua}
@@ -149,7 +154,6 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
          Simpan
        </Button>
      </Box>
-    </Box>
  </Box>
  );
 }
--- a/src/module/calender/ui/history_division_calender.tsx
+++ b/src/module/calender/ui/history_division_calender.tsx
@@ -18,6 +18,7 @@ export default function HistoryDivisionCalender() {
  const [searchQuery, setSearchQuery] = useState('')
  const [loading, setLoading] = useState(true)

+
  const getData = async () => {
    try {
      setLoading(true)
@@ -100,7 +101,9 @@ export default function HistoryDivisionCalender() {
                    <Grid.Col span={'auto'}>
                      {v.data.map((d, x) => {
                        return (
-                          <Box mb={10} key={x} >
+                          <Box mb={10} key={x}
+                          onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
+                          >
                            <Text fw={"bold"}>{d.title}</Text>
                            <Text>{d.timeStart} | {d.timeEnd}</Text>
                          </Box>
--- a/src/module/calender/ui/navbar_create_division_calender.tsx
+++ b/src/module/calender/ui/navbar_create_division_calender.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Flex, Group, Input, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
 import { IoIosArrowDropright } from 'react-icons/io';
@@ -245,7 +245,7 @@ export default function NavbarCreateDivisionCalender() {
          </Box>
          {
            memberUser.length > 0 &&
-            <Box pt={30}>
+            <Box pt={30} mb={60}>
              <Group justify="space-between">
                <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
                <Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
@@ -287,32 +287,36 @@ export default function NavbarCreateDivisionCalender() {
              </Box>
            </Box>
          }
-          <Box mt={"xl"}>
-            <Button
-              c={"white"}
-              bg={WARNA.biruTua}
-              size="lg"
-              radius={30}
-              fullWidth
-              onClick={() => {
-                if (
-                  isData.title !== "" &&
-                  isData.dateStart !== " " &&
-                  isData.timeStart !== "" &&
-                  isData.timeEnd !== "" &&
-                  isData.repeatEventTyper !== ""
-                ) {
-                  setModal(true);
-                } else {
-                  toast.error("Mohon lengkapi semua form");
-                }
-              }}
-            >
-              Simpan
-            </Button>
-          </Box>
        </Stack>
      </Box>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
+      }}>
+        <Button
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => {
+            if (
+              isData.title !== "" &&
+              isData.dateStart !== " " &&
+              isData.timeStart !== "" &&
+              isData.timeEnd !== "" &&
+              isData.repeatEventTyper !== ""
+            ) {
+              setModal(true);
+            } else {
+              toast.error("Mohon lengkapi semua form");
+            }
+          }}
+        >
+          Simpan
+        </Button>
+      </Box>
      <LayoutModal opened={isModal} onClose={() => setModal(false)}
        description="Apakah Anda yakin ingin menambahkan data?"
        onYes={(val) => { onSubmit(val) }} />
--- a/src/module/calender/ui/update_division_calender.tsx
+++ b/src/module/calender/ui/update_division_calender.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Flex, Group, Input, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { DateInput, TimeInput } from '@mantine/dates';
 import React, { useState } from 'react';
 import { IoIosArrowDropright } from 'react-icons/io';
@@ -295,8 +295,8 @@ export default function UpdateDivisionCalender() {
              <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
              <Text c={WARNA.biruTua}>Total {memberUser.length} Anggota</Text>
            </Group>
-            <Box pt={10}>
-              <Box mb={20}>
+            <Box pt={10} >
+              <Box mb={100}>
                <Box
                  style={{
                    border: `1px solid ${"#C7D6E8"}`,
@@ -305,46 +305,56 @@ export default function UpdateDivisionCalender() {
                  px={20}
                  py={10}
                >
-                  {memberUser.get().map((v: any, i: any) => {
-                    return (
-                      <Flex
-                        justify={"space-between"}
-                        align={"center"}
-                        mt={20}
-                        key={i}
-                      >
-                        <Group>
-                          <Avatar src={"v.image"} alt="it's me" size="lg" />
-                          <Box>
-                            <Text c={WARNA.biruTua} fw={"bold"}>
-                              {v.name}
-                            </Text>
-                          </Box>
-                        </Group>
-                        <Text c={WARNA.biruTua} fw={"bold"}>
-                          Anggota
-                        </Text>
-                      </Flex>
-                    );
-                  })}
+                  {memberUser.length == 0 ?
+                    <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
+                      <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
+                    </Box>
+                    :
+
+                    memberUser.get().map((v: any, i: any) => {
+                      return (
+                        <Flex
+                          justify={"space-between"}
+                          align={"center"}
+                          mt={20}
+                          key={i}
+                        >
+                          <Group>
+                            <Avatar src={"v.image"} alt="it's me" size="lg" />
+                            <Box>
+                              <Text c={WARNA.biruTua} fw={"bold"}>
+                                {v.name}
+                              </Text>
+                            </Box>
+                          </Group>
+                          <Text c={WARNA.biruTua} fw={"bold"}>
+                            Anggota
+                          </Text>
+                        </Flex>
+                      );
+                    })}
                </Box>
              </Box>
            </Box>
          </Box>
-          <Box mt={"xl"}>
-            <Button
-              c={"white"}
-              bg={WARNA.biruTua}
-              size="lg"
-              radius={30}
-              fullWidth
-              onClick={() => setModal(true)}
-            >
-              Simpan
-            </Button>
-          </Box>
        </Stack>
      </Box>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
+      }}>
+        <Button
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => setModal(true)}
+        >
+          Simpan
+        </Button>
+      </Box>
      <LayoutModal opened={isModal} onClose={() => setModal(false)}
        description="Apakah Anda yakin ingin menambahkan data?"
        onYes={(val) => { onSubmit(val) }} />