style : update skeleton

Deskripsi: - update announcement - update celender - update division - update task - update project - update user No Issue
2024-09-02 12:24:43 +08:00
parent b442e6e599
commit 2a8a3a1129
18 changed files with 1302 additions and 1012 deletions
--- a/src/module/project/ui/add_member_detail_project.tsx
+++ b/src/module/project/ui/add_member_detail_project.tsx
@@ -5,8 +5,8 @@ import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_projec
 import toast from 'react-hot-toast';
 import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Avatar, Box, Button, Divider, Flex, Group, rem, Stack, Text } from '@mantine/core';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Avatar, Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
+import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { FaCheck } from 'react-icons/fa6';
 import LayoutModal from '@/module/_global/layout/layout_modal';

@@ -17,27 +17,31 @@ export default function AddMemberDetailProject() {
  const [isData, setData] = useState<IDataMemberProjectDetail[]>([])
  const [isDataMember, setDataMember] = useState<IDataMemberProject[]>([])
  const [selectAll, setSelectAll] = useState(false)
+  const [loading, setLoading] = useState(true)
  const [openModal, setOpenModal] = useState(false)


  async function getData() {
    try {
+      setLoading(true)
      const response = await funGetAllMemberById(param.id)
      if (response.success) {
        setData(response.data.member)
      } else {
        toast.error(response.message)
      }
-
      const res = await funGetOneProjectById(param.id, 'member');
      if (res.success) {
        setDataMember(res.data)
      } else {
        toast.error(res.message);
      }
+      setLoading(false)
    } catch (error) {
      console.log(error)
      toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    } finally {
+      setLoading(false)
    }
  }

@@ -112,6 +116,15 @@ export default function AddMemberDetailProject() {
          </Text>
          {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
        </Group>
+        {loading ? 
+          Array(8)
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i} mb={10}>
+              <SkeletonSingle/>
+            </Box>
+          ))
+      :  
        <Box mt={15} mb={100}>
          {isData.map((v, i) => {
            const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
@@ -148,12 +161,16 @@ export default function AddMemberDetailProject() {
            );
          })}
        </Box>
+      }
      </Box>
        <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
            maxWidth: rem(550),
            zIndex: 999,
            backgroundColor: `${WARNA.bgWhite}`,
-         }}>
+      }}>
+        {loading ? 
+          <Skeleton height={50} radius={30} />
+        :
          <Button
            c={"white"}
            bg={WARNA.biruTua}
@@ -164,6 +181,7 @@ export default function AddMemberDetailProject() {
          >
            Simpan
          </Button>
+      }
        </Box>

      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
--- a/src/module/project/ui/edit_detail_task_project.tsx
+++ b/src/module/project/ui/edit_detail_task_project.tsx
@@ -5,7 +5,7 @@ import toast from 'react-hot-toast';
 import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
 import moment from 'moment';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { DatePicker } from '@mantine/dates';
 import LayoutModal from '@/module/_global/layout/layout_modal';
@@ -15,6 +15,7 @@ export default function EditDetailTaskProject() {
   const [name, setName] = useState("")
   const param = useParams<{ id: string }>()
   const [openModal, setOpenModal] = useState(false)
+   const [loading, setLoading] = useState(true)
   const [touched, setTouched] = useState({
      title: false,
   });
@@ -47,6 +48,7 @@ export default function EditDetailTaskProject() {

   async function getOneData() {
      try {
+         setLoading(true)
         const res = await funGetDetailProject(param.id);
         if (res.success) {
            setName(res.data.title)
@@ -57,9 +59,12 @@ export default function EditDetailTaskProject() {
         } else {
            toast.error(res.message);
         }
+         setLoading(false);
      } catch (error) {
         console.error(error);
         toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
+      } finally {
+         setLoading(false);
      }
   }

@@ -88,49 +93,65 @@ export default function EditDetailTaskProject() {
            </Group>
            <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
               <Box>
-                  <Text>Tanggal Mulai</Text>
-                  <Group
-                     justify="center"
-                     bg={"white"}
-                     h={45}
-                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-                  >
-                     <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
-                  </Group>
+                  {loading ?
+                     <Skeleton height={45} mt={20} radius={10} />
+                     :
+                     <> 
+                     <Text>Tanggal Mulai</Text>
+                     <Group
+                        justify="center"
+                        bg={"white"}
+                        h={45}
+                        style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                     >
+                        <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                     </Group>
+                     </>
+                  }
               </Box>
               <Box>
-                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
-                  <Group
-                     justify="center"
-                     bg={"white"}
-                     h={45}
-                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
-                  >
-                     <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
-                  </Group>
+                  {loading ?
+                     <Skeleton height={45} mt={20} radius={10} />
+                     :
+                     <>
+                        <Text>Tanggal Berakhir</Text>
+                        <Group
+                           justify="center"
+                           bg={"white"}
+                           h={45}
+                           style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        >
+                           <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                        </Group>
+                     </>
+                  }
               </Box>
            </SimpleGrid>
-            <Stack pt={15}>
-               <TextInput
-                  styles={{
-                     input: {
-                        border: `1px solid ${"#D6D8F6"}`,
-                        borderRadius: 10,
-                     },
-                  }}
-                  placeholder="Input Nama Tahapan"
-                  label="Judul Tahapan"
-                  required
-                  size="md"
-                  value={name}
-                  onChange={(e) => { setName(e.target.value) }}
-                  onBlur={() => setTouched({ ...touched, title: true })}
-                  error={
-                     touched.title && (
-                        name == "" ? "Judul Tidak Boleh Kosong" : null
-                     )
-                  }
-               />
+            <Stack pt={15} pb={100}>
+               {loading ?
+                  <Skeleton height={40} mt={20} radius={10} />
+                  :
+                  <TextInput
+                     styles={{
+                        input: {
+                           border: `1px solid ${"#D6D8F6"}`,
+                           borderRadius: 10,
+                        },
+                     }}
+                     placeholder="Input Nama Tahapan"
+                     label="Judul Tahapan"
+                     required
+                     size="md"
+                     value={name}
+                     onChange={(e) => { setName(e.target.value) }}
+                     onBlur={() => setTouched({ ...touched, title: true })}
+                     error={
+                        touched.title && (
+                           name == "" ? "Judul Tidak Boleh Kosong" : null
+                        )
+                     }
+                  />
+               }
            </Stack>
         </Box>
         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -138,6 +159,9 @@ export default function EditDetailTaskProject() {
            zIndex: 999,
            backgroundColor: `${WARNA.bgWhite}`,
         }}>
+            {loading ?
+               <Skeleton height={50} radius={30} />
+               :
            <Button
               c={"white"}
               bg={WARNA.biruTua}
@@ -156,6 +180,7 @@ export default function EditDetailTaskProject() {
            >
               Simpan
            </Button>
+            }
         </Box>

         <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
--- a/src/module/project/ui/edit_task_project.tsx
+++ b/src/module/project/ui/edit_task_project.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Input, rem, Stack, TextInput } from '@mantine/core';
+import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';

@@ -13,6 +13,7 @@ export default function EditTaskProject() {
  const [name, setName] = useState("")
  const [openModal, setOpenModal] = useState(false)
  const param = useParams<{ id: string }>()
+  const [loading, setLoading] = useState(true)
  const [touched, setTouched] = useState({
    name: false,
  });
@@ -41,16 +42,19 @@ export default function EditTaskProject() {

  async function getOneData() {
    try {
+      setLoading(true)
      const res = await funGetOneProjectById(param.id, 'data');
      if (res.success) {
        setName(res.data.title);
      } else {
        toast.error(res.message);
      }
-
+      setLoading(false);
    } catch (error) {
      console.error(error);
      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    } finally {
+      setLoading(false);
    }
  }

@@ -63,6 +67,9 @@ export default function EditTaskProject() {
      <LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
      <Box p={20}>
        <Stack pt={15}>
+          {loading ? 
+             <Skeleton height={40} mt={20} radius={10} />
+            :
          <TextInput
            styles={{
              input: {
@@ -86,6 +93,7 @@ export default function EditTaskProject() {
            }
            onBlur={() => setTouched({ ...touched, name: true })}
          />
+          }
        </Stack>
      </Box>
      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -93,6 +101,9 @@ export default function EditTaskProject() {
        zIndex: 999,
        backgroundColor: `${WARNA.bgWhite}`,
      }}>
+        {loading ?
+           <Skeleton height={50} radius={30} />
+      :  
        <Button
          c={"white"}
          bg={WARNA.biruTua}
@@ -103,6 +114,7 @@ export default function EditTaskProject() {
        >
          Simpan
        </Button>
+      }
      </Box>