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>
);
}

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

87
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'} >
<Stack>
<Group>
<TfiAnnouncement size={25} />
{
loading ?
<Skeleton height={10} radius="md" m={0} width={200} />
: <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">
<Text>{isData?.desc}</Text>
</Spoiler>
}
</Grid.Col>
</Grid>
</Stack>
{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} />
<Text fw={'bold'}>{isData?.title}</Text>
</Group>
<Grid gutter={'md'}>
<Grid.Col span={1}>
<BsCardText size={25} />
</Grid.Col>
<Grid.Col span={11}>
<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}>

27
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);
}
};
@@ -90,14 +95,14 @@ export default function ListDivision() {
</Flex>
</Grid.Col>
</Grid>
<Box pt={20}>
<Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={'white'}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
</Flex>
<Box pt={20}>
<Box bg={WARNA.biruTua} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={'white'}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={'white'}>{jumlah}</Text>
</Flex>
</Box>
</Box>
</Box>
{isList ? (
<Box pt={20}>
{data?.map((v: any, i: any) => {
@@ -129,7 +134,7 @@ export default function ListDivision() {
})}
</Box>
) : (
<Box pt={20}>
<Box pt={20}>
{data?.map((v: any, i: any) => {
return (
<Box key={i} mb={20}>
@@ -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>

92
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() {
@@ -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() {
<SkeletonSingle />
</Box>
))
: isData.map((v, i) => {
return (
<Box pt={20} key={i}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
onClick={() => {
setValChoose(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<HiOutlineOfficeBuilding
color={WARNA.biruTua}
size={25}
/>
</ActionIcon>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
</Box>
</Group>
</Box>
);
})}
:
_.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
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
onClick={() => {
setValChoose(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<HiOutlineOfficeBuilding
color={WARNA.biruTua}
size={25}
/>
</ActionIcon>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
</Box>
</Group>
</Box>
);
})}
<LayoutDrawer
opened={openDrawer}

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}

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

@@ -28,7 +28,7 @@ export default function ListPositionActive() {
try {
setDataPosition([]);
setLoading(true)
const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery)
const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery)
setDataPosition(res.data);
setLoading(false);
} catch (error) {
@@ -64,46 +64,51 @@ export default function ListPositionActive() {
<SkeletonSingle />
</Box>
)) :
isDataPosition.map((v, i) => {
return (
<Box pt={20} key={i}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
}}
onClick={() => {
setData(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<FaUserTie color={WARNA.biruTua} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
<Text fw={"lighter"} fz={12}>
{v.group}
</Text>
</Box>
</Group>
</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}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
}}
onClick={() => {
setData(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<FaUserTie color={WARNA.biruTua} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
<Text fw={"lighter"} fz={12}>
{v.group}
</Text>
</Box>
</Group>
</Box>
);
})
}
<LayoutDrawer
opened={openDrawer}

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={{

84
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,42 +68,56 @@ export default function NavbarDetailMember({ id }: IMember) {
<Center>
<Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
</Center>
<Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
<Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
{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>
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
{loading
?
<SkeletonDetailProfile />
:
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<FaSquarePhone size={28} />
<Text fz={18}>No Telepon</Text>
<Group justify="space-between" grow py={5}>
<Group>
<FaSquarePhone size={28} />
<Text fz={18}>No Telepon</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.phone}</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.phone}</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<MdEmail size={28} />
<Text fz={18}>Email</Text>
<Group justify="space-between" grow py={5}>
<Group>
<MdEmail size={28} />
<Text fz={18}>Email</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.email}</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.email}</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<IoMaleFemale size={28} />
<Text fz={18}>Gender</Text>
<Group justify="space-between" grow py={5}>
<Group>
<IoMaleFemale size={28} />
<Text fz={18}>Gender</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>
{dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>
{dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
</Text>
</Group>
</Box>
</Box>
}
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerDetailMember id={selectId} status={active} onDeleted={() => setOpen(false)} />
</LayoutDrawer>

59
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,28 +54,43 @@ export default function TabListMember() {
onChange={(e) => setSearchQuery(e.target.value)}
my={10}
/>
{dataMember.map((v, i) => {
return (
<Box pt={20} key={i} onClick={() => {
router.push(`/member/${v.id}`)
}}>
<Group align='center' style={{
borderBottom: `1px solid #D9D9D9`,
padding: 10,
}} >
<Box>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box>
</Group>
{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}`)
}}>
<Group align='center' style={{
borderBottom: `1px solid #D9D9D9`,
padding: 10,
}} >
<Box>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
</Box>
</Group>
</Box>
)
})
}
</Box>
</>
)