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

style: update skelaton

Browse Source
This commit is contained in:
lukman
2024-08-23 14:12:01 +08:00
parent 6fef9ae028
commit f1121afee6
16 changed files with 756 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/module/task/ui/create_users_project.tsx
View File

@@ -3,6 +3,7 @@ import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import {
ActionIcon,
Anchor,
Avatar,
Box,
@@ -11,6 +12,7 @@ import {
Divider,
Flex,
Group,
Skeleton,
Text,
TextInput,
} from "@mantine/core";
@@ -28,10 +30,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
const [isData, setData] = useState<IDataMemberDivision[]>([])
const member = useHookstate(globalMemberTask)
const [selectAll, setSelectAll] = useState(false)
const [loading, setLoading] = useState(true)
async function getData() {
try {
setLoading(true)
const response = await funGetDivisionById(param.id)
if (response.success) {
setData(response.data.member)
@@ -41,9 +45,12 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
} else {
toast.error(response.message)
}
setLoading(false)
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -110,43 +117,72 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/> */}
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
{loading ?
<Skeleton height={20} width={"100%"} mt={20} />
:
<Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota
</Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group>
}
<Box mt={15}>
{isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i} mb={15}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={"lg"}
radius={100}
aria-label="icon"
>
<Skeleton height={30} width={30} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={"80%"} />
</Box>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
))
:
isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={"v.image"} alt="it's me" size="lg" />
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{v.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})
}
</Box>
<Box mt={"xl"}>
<Button
@@ -155,7 +191,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
size="lg"
radius={30}
fullWidth
onClick={() => {onSubmit()}}
onClick={() => { onSubmit() }}
>
Simpan
</Button>

12
src/module/task/ui/detail_list_anggota_task.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from "@/module/_global";
import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
@@ -79,7 +79,15 @@ export default function ListAnggotaDetailTask() {
py={10}
>
{
loading ? <Text>loading</Text> :
loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada anggota</Text> :
isData.map((v, i) => {
return (

18
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from "@/module/_global";
import { Box, Group, Text } from "@mantine/core";
import { SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
import { Box, Group, Skeleton, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
@@ -22,7 +22,6 @@ export default function ListFileDetailTask() {
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan file tugas divisi, coba lagi nanti");
@@ -45,7 +44,18 @@ export default function ListFileDetailTask() {
}}>
{
loading ? <Text>loading</Text> :
loading ?
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Group>
<Skeleton width={30} height={30} radius={"md"} />
<Skeleton width={"50%"} height={30} radius={"md"} />
</Group>
</Box>
))
:
isData.length === 0 ? <Text>Tidak ada file</Text> :
isData.map((item, index) => {
return (

13
src/module/task/ui/detail_list_tugas_task.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { LayoutDrawer, WARNA } from "@/module/_global"
import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from "@/module/_global"
import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
import { useShallowEffect } from "@mantine/hooks"
import { useParams, useRouter } from "next/navigation"
@@ -99,7 +99,11 @@ export default function ListTugasDetailTask() {
}}
>
{
loading ? <Text>loading</Text> :
loading ?
<>
<SkeletonDetailListTugasTask />
</>
:
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
@@ -163,7 +167,10 @@ export default function ListTugasDetailTask() {
</Box>
</Grid.Col>
</Grid>
<Divider my={"lg"} />
{isData.length >= 1
? "" :
<Divider my={"lg"} />
}
</Box>
)
})

15
src/module/task/ui/detail_progress_task.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from "@/module/_global";
import { Box, Grid, ActionIcon, Progress, Text } from "@mantine/core";
import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import toast from "react-hot-toast";
@@ -15,9 +15,11 @@ export default function ProgressDetailTask() {
const [valLastUpdate, setValLastUpdate] = useState('')
const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshTask)
const [loading, setLoading] = useState(true)
async function getOneData() {
try {
setLoading(true)
const res = await funGetTaskDivisionById(param.detail, 'progress');
if (res.success) {
setValProgress(res.data.progress);
@@ -25,10 +27,12 @@ export default function ProgressDetailTask() {
} else {
toast.error(res.message);
}
setLoading(false)
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan progress tugas divisi, coba lagi nanti");
} finally {
setLoading(false)
}
}
@@ -39,7 +43,7 @@ export default function ProgressDetailTask() {
}
}
useEffect(() => {
onRefresh()
@@ -51,6 +55,9 @@ export default function ProgressDetailTask() {
return (
<Box mt={10}>
{loading ?
<Skeleton width={"100%"} height={100} radius={"md"} />
:
<Box
p={20}
bg={"#DCEED8"}
@@ -83,11 +90,11 @@ export default function ProgressDetailTask() {
size="xl"
value={valProgress}
/>
{/* <Text c={"dimmed"}>Update terakhir : {valLastUpdate}</Text> */}
</Box>
</Grid.Col>
</Grid>
</Box>
}
</Box>
)
}

85
src/module/task/ui/list_division_task.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Text, TextInput, Title } from "@mantine/core";
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
@@ -8,6 +8,7 @@ import { IDataTask } from "../lib/type_task";
import { funGetAllTask } from "../lib/api_task";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
export default function ListDivisionTask() {
const [isList, setIsList] = useState(false)
@@ -79,12 +80,18 @@ export default function ListDivisionTask() {
</Grid.Col>
</Grid>
<Box pt={20}>
{loading ?
<Box>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
:
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
<Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
</Flex>
</Box>
}
{isList ? (
<Box pt={20}>
{isData.map((v, i) => {
@@ -117,37 +124,53 @@ export default function ListDivisionTask() {
</Box>
) : (
<Box pt={20}>
{isData.map((v: any, i: any) => {
return (
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member-1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
{loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Box key={i} mb={20}>
<Skeleton width={"100%"} height={200} radius={"md"} />
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Tugas</Text>
</Box>
);
})}
:
isData.map((v: any, i: any) => {
return (
<Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>
<Box pt={10}>
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
<Progress.Section value={v.progress} color="yellow" striped >
<Progress.Label>{v.progress}%</Progress.Label>
</Progress.Section>
</Progress.Root>
<Text my={10}>{v.desc}</Text>
<Group align='center' pt={10} justify='space-between'>
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>
</Card>
</Box>
);
})
}
</Box>
)}
</Box>

4
src/module/task/ui/navbar_division_task.tsx
View File

@@ -4,12 +4,14 @@ import { ActionIcon } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
import DrawerDivisionTask from "./drawer_division_task";
import { useParams } from "next/navigation";
export default function NavbarDivisionTask() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string}>()
return (
<>
<LayoutNavbarNew back="" title="Divisi - Tugas"
<LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - Tugas"
menu={
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />