From 4c63fcbf9a7a3431f5124caac2b7ccf3f01087db Mon Sep 17 00:00:00 2001 From: lukman Date: Thu, 22 Aug 2024 17:42:13 +0800 Subject: [PATCH] style : update skeleton --- .../components/skeleton_detail_profile.tsx | 86 +++++++++++++++++ src/module/_global/index.ts | 4 +- .../announcement/ui/detail_announcement.tsx | 87 +++++++++++------- .../announcement/ui/list_announcement.tsx | 4 +- src/module/division_new/ui/list_division.tsx | 27 +++--- src/module/group/ui/list_group_active.tsx | 92 ++++++++++--------- src/module/home/view/view_detail_feature.tsx | 2 +- .../position/ui/list_position_active.tsx | 87 +++++++++--------- src/module/task/ui/add_member_detail_task.tsx | 2 - .../user/member/ui/navbar_detail_member.tsx | 84 ++++++++++------- src/module/user/member/ui/tab_list_member.tsx | 59 +++++++----- 11 files changed, 348 insertions(+), 186 deletions(-) create mode 100644 src/module/_global/components/skeleton_detail_profile.tsx diff --git a/src/module/_global/components/skeleton_detail_profile.tsx b/src/module/_global/components/skeleton_detail_profile.tsx new file mode 100644 index 0000000..818a3b6 --- /dev/null +++ b/src/module/_global/components/skeleton_detail_profile.tsx @@ -0,0 +1,86 @@ +import { ActionIcon, Box, Group, Skeleton } from '@mantine/core'; +import React from 'react'; + +export default function SkeletonDetailProfile() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index 16554ed..f0ed0b3 100644 --- a/src/module/_global/index.ts +++ b/src/module/_global/index.ts @@ -2,6 +2,7 @@ import prisma from "./bin/prisma"; import { pwd_key_config } from "./bin/val_global"; import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment"; import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member"; +import SkeletonDetailProfile from "./components/skeleton_detail_profile"; import SkeletonSingle from "./components/skeleton_single"; import { funUploadFile } from "./fun/upload-file"; import { WARNA } from "./fun/WARNA"; @@ -26,4 +27,5 @@ export { pwd_key_config }; export { SkeletonSingle } export { SkeletonDetailDiscussionComment } export { SkeletonDetailDiscussionMember } -export { funUploadFile } \ No newline at end of file +export { funUploadFile } +export { SkeletonDetailProfile } \ No newline at end of file diff --git a/src/module/announcement/ui/detail_announcement.tsx b/src/module/announcement/ui/detail_announcement.tsx index 4369059..19d6dff 100644 --- a/src/module/announcement/ui/detail_announcement.tsx +++ b/src/module/announcement/ui/detail_announcement.tsx @@ -1,5 +1,5 @@ "use client" -import { Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core"; +import { ActionIcon, Box, Flex, Grid, Group, List, Skeleton, Spoiler, Stack, Text } from "@mantine/core"; import { useShallowEffect } from "@mantine/hooks"; import { useState } from "react"; import { BsCardText } from "react-icons/bs"; @@ -12,7 +12,7 @@ import toast from "react-hot-toast"; export default function DetailAnnouncement({ id }: { id: string }) { const [isData, setIsData] = useState() const [isMember, setIsMember] = useState({}) - const [loading, setLoading] = useState(false) + const [loading, setLoading] = useState(true) async function fetchOneAnnouncement() { try { @@ -41,36 +41,59 @@ export default function DetailAnnouncement({ id }: { id: string }) { return ( - - - - { - loading ? - - : {isData?.title} - } - - - - - - - - { - loading ? Array(3) - .fill(null) - .map((_, i) => ( - - )) - - : - {isData?.desc} - - } - - - - + {loading ? + + + + + + + + + + + + + + + + + + + + + + + : + + + + {isData?.title} + + + + + + + + {isData?.desc} + + + + + } diff --git a/src/module/announcement/ui/list_announcement.tsx b/src/module/announcement/ui/list_announcement.tsx index f65a163..3704671 100644 --- a/src/module/announcement/ui/list_announcement.tsx +++ b/src/module/announcement/ui/list_announcement.tsx @@ -65,13 +65,13 @@ export default function ListAnnouncement() { )) : (isData.length === 0) ? - + Tidak ada pengumuman : isData.map((v, i) => { return ( - + diff --git a/src/module/division_new/ui/list_division.tsx b/src/module/division_new/ui/list_division.tsx index 518b7fe..8e8a66b 100644 --- a/src/module/division_new/ui/list_division.tsx +++ b/src/module/division_new/ui/list_division.tsx @@ -1,6 +1,6 @@ 'use client' import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global'; -import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core'; +import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core'; import { useRouter, useSearchParams } from 'next/navigation'; import React, { useState } from 'react'; import { HiMenu } from 'react-icons/hi'; @@ -21,6 +21,8 @@ export default function ListDivision() { const [searchQuery, setSearchQuery] = useState('') const searchParams = useSearchParams() const group = searchParams.get('group') + const [loading, setLoading] = useState(true) + const handleList = () => { setIsList(!isList) @@ -29,6 +31,7 @@ export default function ListDivision() { const fetchData = async (search: string) => { try { setData([]); + setLoading(true); const response = await funGetAllDivision('?search=' + search + '&group=' + group) if (response.success) { @@ -37,10 +40,12 @@ export default function ListDivision() { } else { toast.error(response.message); } - + setLoading(false); } catch (error) { toast.error("Gagal mendapatkan divisi, coba lagi nanti"); console.error(error); + } finally { + setLoading(false); } }; @@ -90,14 +95,14 @@ export default function ListDivision() { - - - Total Divisi - - {jumlah} - + + + Total Divisi + + {jumlah} + + - {isList ? ( {data?.map((v: any, i: any) => { @@ -129,7 +134,7 @@ export default function ListDivision() { })} ) : ( - + {data?.map((v: any, i: any) => { return ( @@ -142,7 +147,7 @@ export default function ListDivision() { - {v.desc} + {v.desc} diff --git a/src/module/group/ui/list_group_active.tsx b/src/module/group/ui/list_group_active.tsx index d40c9e6..89e1d13 100644 --- a/src/module/group/ui/list_group_active.tsx +++ b/src/module/group/ui/list_group_active.tsx @@ -16,6 +16,7 @@ import { useShallowEffect } from "@mantine/hooks"; import { funGetAllGroup } from "../lib/api_group"; import { IDataGroup } from "../lib/type_group"; import { useSearchParams } from "next/navigation"; +import _ from "lodash"; export default function ListGroupActive() { @@ -28,7 +29,7 @@ export default function ListGroupActive() { const [loading, setLoading] = useState(true); const searchParams = useSearchParams() const status = searchParams.get('active') - + const fetchData = async () => { try { @@ -80,47 +81,54 @@ export default function ListGroupActive() { )) - : isData.map((v, i) => { - return ( - - { - setValChoose(v.name); - setOpenDrawer(true); - setSelectId(v.id); - setActive(v.isActive); - }} - > - - - - - - - - {v.name} - - - - - ); - })} + : + _.isEmpty(isData) + ? + + Tidak ada grup + + : + isData.map((v, i) => { + return ( + + { + setValChoose(v.name); + setOpenDrawer(true); + setSelectId(v.id); + setActive(v.isActive); + }} + > + + + + + + + + {v.name} + + + + + ); + })} Anggota - router.push('/position')}> + router.push('position?active=true')}>
+ Tidak ada jabatan + + : + isDataPosition.map((v, i) => { + return ( + + { + setData(v.name); + setOpenDrawer(true); + setSelectId(v.id); + setActive(v.isActive); + }} + > + + + + + + + + {v.name} + + + {v.group} + + + + + ); + }) } - 
{JSON.stringify(isData, null, 1)}
- 
{JSON.stringify(isDataMember, null, 1)}
{/* () const [selectId, setSelectId] = useState(''); const [active, setActive] = useState(false) + const [loading, setLoading] = useState(true) useShallowEffect(() => { featchGetOne() @@ -29,6 +30,7 @@ export default function NavbarDetailMember({ id }: IMember) { async function featchGetOne() { try { + setLoading(true) const respose = await funGetOneMember(id) if (respose.success) { setDataOne(respose.data) @@ -37,9 +39,13 @@ export default function NavbarDetailMember({ id }: IMember) { } else { toast.error(respose.message) } + + setLoading(false) } catch (error) { console.error(error) toast.error("Gagal mendapatkan detail user, coba lagi nanti"); + } finally { + setLoading(false) } } @@ -62,42 +68,56 @@ export default function NavbarDetailMember({ id }: IMember) {
- {dataOne?.name} - {dataOne?.group} - {dataOne?.position} + {loading ? + <> + + + + : + <> + {dataOne?.name} + {dataOne?.group} - {dataOne?.position} + + } - - - - - NIK + {loading + ? + + : + + + + + NIK + + {dataOne?.nik} - {dataOne?.nik} - - - - - No Telepon + + + + No Telepon + + {dataOne?.phone} - {dataOne?.phone} - - - - - Email + + + + Email + + {dataOne?.email} - {dataOne?.email} - - - - - Gender + + + + Gender + + + {dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''} + - - {dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''} - - - + + } setOpen(false)}> setOpen(false)} /> diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx index a7add71..b6a470e 100644 --- a/src/module/user/member/ui/tab_list_member.tsx +++ b/src/module/user/member/ui/tab_list_member.tsx @@ -1,5 +1,5 @@ -import { WARNA } from "@/module/_global" +import { SkeletonSingle, WARNA } from "@/module/_global" import { Box, Group, ActionIcon, Text, TextInput } from "@mantine/core" import { useShallowEffect } from "@mantine/hooks" import { useRouter, useSearchParams } from "next/navigation" @@ -54,28 +54,43 @@ export default function TabListMember() { onChange={(e) => setSearchQuery(e.target.value)} my={10} /> - {dataMember.map((v, i) => { - return ( - { - router.push(`/member/${v.id}`) - }}> - - - - - - - - {v.name} - {v.group + ' - ' + v.position} - - + {loading + ? Array(6) + .fill(null) + .map((_, i) => ( + + + + )) + : + dataMember.length == 0 ? + + Tidak ada anggota - ) - })} + : + dataMember.map((v, i) => { + return ( + { + router.push(`/member/${v.id}`) + }}> + + + + + + + + {v.name} + {v.group + ' - ' + v.position} + + + + ) + }) + } )