wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update skeleton

Browse Source
This commit is contained in:
lukman
2024-08-22 17:42:13 +08:00
parent 176ec5ec64
commit 4c63fcbf9a
11 changed files with 348 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/module/_global/components/skeleton_detail_profile.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { ActionIcon, Box, Group, Skeleton } from '@mantine/core';
import React from 'react';
export default function SkeletonDetailProfile() {
return (
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={28}
radius={100}
aria-label="icon"
>
<Skeleton height={20} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={80} />
</Box>
</Group>
<Box>
<Skeleton height={18} width={"100%"} />
</Box>
</Group>
</Box>
);
}

2
src/module/_global/index.ts
View File

@@ -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";
@@ -27,3 +28,4 @@ export { SkeletonSingle }
export { SkeletonDetailDiscussionComment }
export { SkeletonDetailDiscussionMember }
export { funUploadFile }
export { SkeletonDetailProfile }

59
src/module/announcement/ui/detail_announcement.tsx
View File

@@ -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<IAnnouncement>()
const [isMember, setIsMember] = useState<any>({})
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 (
<Box py={30} px={20}>
<Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
{loading ?
<Stack>
<Group>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={30}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={40} />
</ActionIcon>
<Box>
<Skeleton height={18} width={150} />
</Box>
</Group>
<Grid gutter={'md'}>
<Grid.Col span={1}>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={30}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={40} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={11}>
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Skeleton mt={5} ml={5} height={18} width={150} />
</Spoiler>
</Grid.Col>
</Grid>
</Stack>
:
<Stack>
<Group>
<TfiAnnouncement size={25} />
{
loading ?
<Skeleton height={10} radius="md" m={0} width={200} />
: <Text fw={'bold'}>{isData?.title}</Text>
}
<Text fw={'bold'}>{isData?.title}</Text>
</Group>
<Grid gutter={'md'}>
<Grid.Col span={1}>
<BsCardText size={25} />
</Grid.Col>
<Grid.Col span={11}>
{
loading ? Array(3)
.fill(null)
.map((_, i) => (
<Skeleton key={i} height={10} radius="md" mb={5} width={"100%"} />
))
: <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text>{isData?.desc}</Text>
</Spoiler>
}
</Grid.Col>
</Grid>
</Stack>
}
</Box>
<Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >

4
src/module/announcement/ui/list_announcement.tsx
View File

@@ -65,13 +65,13 @@ export default function ListAnnouncement() {
</Box>
))
: (isData.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={200}>
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada pengumuman</Text>
</Stack>
:
isData.map((v, i) => {
return (
<Box key={i} mt={15}>
<Box key={i} mt={20}>
<Box >
<Grid>
<Grid.Col span={2}>

11
src/module/division_new/ui/list_division.tsx
View File

@@ -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);
}
};
@@ -142,7 +147,7 @@ export default function ListDivision() {
</Box>
</Card.Section>
<Box pt={10}>
<Text>{v.desc}</Text>
<Text lineClamp={2}>{v.desc}</Text>
<Group align='center' pt={10} justify='flex-end'>
<Avatar.Group>
<Avatar>

10
src/module/group/ui/list_group_active.tsx
View File

@@ -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() {
@@ -80,7 +81,14 @@ export default function ListGroupActive() {
<SkeletonSingle />
</Box>
))
: isData.map((v, i) => {
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada grup</Text>
</Box>
:
isData.map((v, i) => {
return (
<Box pt={20} key={i}>
<Group

2
src/module/home/view/view_detail_feature.tsx
View File

@@ -73,7 +73,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Anggota</Text>
</Center>
</Box>
<Box onClick={() => router.push('/position')}>
<Box onClick={() => router.push('position?active=true')}>
<Center>
<ActionIcon variant="gradient"
size={68}

5
src/module/position/ui/list_position_active.tsx
View File

@@ -64,6 +64,11 @@ export default function ListPositionActive() {
<SkeletonSingle />
</Box>
)) :
_.isEmpty(isDataPosition) ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
</Box>
:
isDataPosition.map((v, i) => {
return (
<Box pt={20} key={i}>

2
src/module/task/ui/add_member_detail_task.tsx
View File

@@ -120,8 +120,6 @@ export default function AddMemberDetailTask() {
title="Pilih Anggotak"
menu
/>
<pre>{JSON.stringify(isData, null, 1)}</pre>
<pre>{JSON.stringify(isDataMember, null, 1)}</pre>
<Box p={20}>
{/* <TextInput
styles={{

24
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar } from "@mantine/core";
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import { HiUser } from "react-icons/hi2";
import DrawerDetailMember from "./drawer_detail_member";
@@ -21,6 +21,7 @@ export default function NavbarDetailMember({ id }: IMember) {
const [dataOne, setDataOne] = useState<IListMember>()
const [selectId, setSelectId] = useState<string>('');
const [active, setActive] = useState<boolean>(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,10 +68,23 @@ export default function NavbarDetailMember({ id }: IMember) {
<Center>
<Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
</Center>
{loading ?
<>
<Skeleton height={25} mt={10} width={"40%"} />
<Skeleton height={15} mt={12} width={"30%"} />
</>
:
<>
<Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
<Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
</>
}
</Stack>
</LayoutNavbarHome>
{loading
?
<SkeletonDetailProfile />
:
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
@@ -98,6 +117,7 @@ export default function NavbarDetailMember({ id }: IMember) {
</Text>
</Group>
</Box>
}
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} />
</LayoutDrawer>

21
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -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,7 +54,21 @@ export default function TabListMember() {
onChange={(e) => setSearchQuery(e.target.value)}
my={10}
/>
{dataMember.map((v, i) => {
{loading
? Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
dataMember.length == 0 ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Box>
:
dataMember.map((v, i) => {
return (
<Box pt={20} key={i} onClick={() => {
router.push(`/member/${v.id}`)
@@ -75,7 +89,8 @@ export default function TabListMember() {
</Group>
</Box>
)
})}
})
}
</Box>
</>
)