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 18:05:51 +08:00
parent d4f60ef016
commit df9074bf4d
12 changed files with 351 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
@@ -10,7 +10,7 @@ import { useShallowEffect } from "@mantine/hooks";
import { IDetailDiscussion } from "../lib/type_discussion";
import moment from "moment";
import "moment/locale/id";
import { useParams } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
export default function DetailDiscussion({ id, idDivision }: { id: string, idDivision: string }) {
@@ -18,6 +18,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string, detail: string }>()
const [isLoad, setIsLoad] = useState(true)
const router = useRouter()
const getData = async () => {
try {
@@ -77,8 +78,8 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<Group>
<Skeleton width={60} height={60} radius={100} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={100} height={20} radius={"md"} />
<Skeleton mt={8} width={60} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
@@ -109,7 +110,16 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Box mt={10}>
<Text fw={"bold"}>{isData?.desc}</Text>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
style={{
overflowWrap: "break-word"
}}
fw={"bold"}
>
{isData?.desc}
</Text>
</Spoiler>
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
{isData?.totalComments ? <Group gap={5} align="center">
@@ -135,8 +145,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
<Group>
<Skeleton width={40} height={40} radius={100} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={60} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
@@ -170,7 +179,17 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Group>
<Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
</Flex>
<Box mt={10}>{v.comment}</Box>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
style={{
overflowWrap: "break-word"
}}
>
{v.comment}
</Text>
</Spoiler>
</Box>
<Box mt={20}>
<Divider size={"xs"} />
</Box>
@@ -179,48 +198,52 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
})
}
</Box>
{isLoad ?
<Skeleton width={"100%"} height={50} radius={100} />
:
<Box h={60} pos={"fixed"} bottom={20} w={{ base: "90%", md: "35.5%" }} style={{
zIndex: 999
}}>
<Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group>
<Grid bg={"white"} style={{
border: '1px solid gray',
borderRadius: 40
}} justify="center" align="center">
<Grid.Col span={10}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
border: "none",
backgroundColor: "transparent"
},
}}
size="md"
placeholder="Kirim Komentar"
disabled={isData?.status === 2}
onChange={(e) => setIsComent(e.target.value)}
value={isComent}
maxLength={300}
/>
</Grid.Col>
<Grid.Col span={2}>
<Center>
<ActionIcon
onClick={sendComent}
variant="subtle" aria-label="submit" disabled={isData?.status === 2}>
<LuSendHorizonal size={30} />
</ActionIcon>
</Center>
</Grid.Col>
</Grid>
</Box>
{isLoad ?
<Skeleton width={"100%"} height={50} radius={100} />
:
<Box pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
zIndex: 999
}} bg={WARNA.bgWhite}>
<Box bg={WARNA.bgWhite} >
<Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group>
<Box mb={20} bg={WARNA.bgWhite}>
<Grid bg={"white"} style={{
border: '1px solid gray',
borderRadius: 40
}} justify="center" align="center">
<Grid.Col span={10}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
border: "none",
backgroundColor: "transparent"
},
}}
size="md"
placeholder="Kirim Komentar"
disabled={isData?.status === 2}
onChange={(e) => setIsComent(e.target.value)}
value={isComent}
maxLength={300}
/>
</Grid.Col>
<Grid.Col span={2}>
<Center>
<ActionIcon
onClick={sendComent}
variant="subtle" aria-label="submit" disabled={isData?.status === 2}>
<LuSendHorizonal size={30} />
</ActionIcon>
</Center>
</Grid.Col>
</Grid>
</Box>
</Box>
</Box>
}
</Box>
</>

2
src/module/discussion/ui/drawer_detail_discussion.tsx
View File

@@ -66,6 +66,8 @@ export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivisi
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
spacing={{ base: 10, sm: 'xl' }}
verticalSpacing={{ base: 'md', sm: 'xl' }}
>
<Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>

101
src/module/discussion/ui/form_create_discussion.tsx
View File

@@ -5,34 +5,32 @@ import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@manti
import { useState } from "react";
import toast from "react-hot-toast";
import { funCreateDiscussion } from "../lib/api_discussion";
import { useParams, useRouter } from "next/navigation";
export default function FormCreateDiscussion({id}: {id: string}) {
export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false)
const router = useRouter()
const param = useParams<{ id: string }>()
const [isData, setData] = useState({
desc: "",
idDivision: id
})
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setValModal(false)
}
async function createDiscussion(val: boolean) {
try {
const response = await funCreateDiscussion({
desc: isData.desc,
idDivision: id
})
if (response.success) {
toast.success(response.message)
onTrue(true)
} else {
toast.error(response.message)
if (val) {
const response = await funCreateDiscussion({
desc: isData.desc,
idDivision: id
})
if (response.success) {
toast.success(response.message)
router.push(`/division/${response.data.id}/discussion/`)
setValModal(false)
} else {
toast.error(response.message)
}
}
} catch (error) {
console.log(error);
@@ -45,36 +43,41 @@ export default function FormCreateDiscussion({id}: {id: string}) {
return (
<Box>
<Box p={20}>
<Group>
<Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
<Box>
<Textarea
placeholder="Tuliskan apa yang ingin anda diskusikan"
w={"100%"}
styles={{
input: {
border: 'none',
backgroundColor: 'transparent',
}
}}
onChange={(e) => setData({ ...isData, desc: e.target.value })}
/>
</Box>
</Group>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => setValModal(true)}
>
Simpan
</Button>
</Box>
<Box pos={"relative"} h={"89vh"}>
<Box p={20} >
<Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}>
<Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={10}>
<Box>
<Textarea
placeholder="Tuliskan apa yang ingin anda diskusikan"
styles={{
input: {
border: 'none',
backgroundColor: 'transparent',
height: "60vh"
}
}}
value={isData.desc}
onChange={(e) => setData({ ...isData, desc: e.target.value })}
/>
</Box>
</Grid.Col>
</Grid>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => setValModal(true)}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}

1
src/module/discussion/ui/form_edit_discussion.tsx
View File

@@ -75,7 +75,6 @@ export default function FormEditDiscussion() {
/>
</Box>
</Grid.Col>
</Grid>
<Box mt="xl">
<Button

40
src/module/discussion/ui/list_discussion.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { WARNA } from "@/module/_global";
import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Text, TextInput } from "@mantine/core";
import { Avatar, Badge, Box, Divider, Flex, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { GrChatOption } from "react-icons/gr";
@@ -62,20 +62,20 @@ export default function ListDiscussion({ id }: { id: string }) {
mt={20}
>
<Group>
<Skeleton width={40} height={40} radius={"md"} />
<Skeleton width={60} height={60} radius={100} />
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={100} height={20} radius={"md"} />
<Skeleton mt={8} width={60} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"40%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Skeleton width={"30%"} height={20} radius={"md"} />
<Skeleton width={"30%"} height={20} radius={"md"} />
<Skeleton width={"20%"} height={20} radius={"md"} />
<Skeleton width={"20%"} height={20} radius={"md"} />
</Group>
<Box mt={20}>
<Skeleton width={"100%"} height={1} radius={"md"} />
@@ -86,15 +86,14 @@ export default function ListDiscussion({ id }: { id: string }) {
:
isData.map((v, i) => {
return (
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Box key={i} pl={10} pr={10}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Group>
<Avatar alt="it's me" size="lg" />
@@ -107,8 +106,21 @@ export default function ListDiscussion({ id }: { id: string }) {
</Group>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
style={{
overflowWrap: "break-word"
}}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
{v.desc}
</Text>
</Spoiler>
</Box>
<Group justify="space-between" mt={40} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>Diskusikan</Text>

4
src/module/discussion/ui/navbar_detail_discussion.tsx
View File

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

4
src/module/discussion/ui/navbar_list_discussion.tsx
View File

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