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

style : update style responsive

Browse Source 
Deskripsi:
- update api discussion
- update calender
- update dicussion

No Issue
This commit is contained in:
lukman
2024-09-04 15:14:39 +08:00
parent 878294e063
commit 85a08aaa00
13 changed files with 451 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,21 +71,21 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Box key={i} pl={5} pr={5}>
<Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={60} height={60} radius={100} />
<Box>
<Skeleton width={100} height={20} radius={"md"} />
<Skeleton width={80} height={20} radius={"md"} />
<Skeleton mt={8} width={60} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Skeleton width={"20%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
@@ -95,7 +95,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
)) :
<>
{isData?.totalComments == 0 ?
<Box mb={60}>
<Box mb={60} pl={5} pr={5}>
<Flex
justify={"space-between"}
align={"center"}
@@ -135,24 +135,28 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Group>
</Box> :
<Box mb={20}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
{isData?.username ?
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${isData?.user_img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group> : ""
}
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Grid align="center">
<Grid.Col span={2}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${isData?.user_img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={6}>
<Box pl={{
sm: 0,
lg: 0,
xl: 0,
md: 0,
base: 10
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Grid.Col>
<Grid.Col span={4}>
<Text c={"grey"} ta={"end"} fz={13}>{isData?.createdAt}</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
@@ -176,7 +180,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
}
</>
}
<Box pl={10} pr={10} mb={30}>
<Box pl={10} pr={10} mb={60}>
{isLoad ?
Array(2)
.fill(0)
@@ -211,20 +215,21 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
isData?.DivisionDisscussionComment.map((v, i) => {
return (
<Box key={i} p={10} >
<Flex
justify={"space-between"}
align={"center"}
>
<Group>
<Avatar alt="it's me" size="md" src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} />
<Grid align="center">
<Grid.Col span={2}>
<Avatar alt="it's me" size="md" src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} />
</Grid.Col>
<Grid.Col span={6}>
<Box>
<Text c={WARNA.biruTua} fw={"bold"} fz={15}>
{v.username}
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={15}>
{v.username}
</Text>
</Box>
</Group>
<Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
</Flex>
</Grid.Col>
<Grid.Col span={4}>
<Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format("ll")}</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
@@ -245,53 +250,53 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
}
</Box>
</Box>
{isLoad ?
<Skeleton width={"100%"} height={50} radius={100} />
:
<Box pos={'fixed'} bottom={0} w={"100%"} style={{
maxWidth: rem(550)
}} pl={rem(15)} pr={rem(15)} 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}
/>
{isLoad ?
<Skeleton width={"100%"} height={50} radius={100} />
:
<Box pos={'fixed'} bottom={0} w={"100%"} style={{
maxWidth: rem(550)
}} pl={rem(15)} pr={rem(15)} 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>
</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>
)
}

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

@@ -4,13 +4,18 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
import { Avatar, Box, Button, Center, Grid, Group, rem, Text, Textarea } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { funCreateDiscussion } from "../lib/api_discussion";
import { funCreateDiscussion, funGetDiscussionById } from "../lib/api_discussion";
import { useParams, useRouter } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile";
export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false)
const router = useRouter()
const param = useParams<{ id: string }>()
const [isImg, setImg] = useState("")
const param = useParams<{ id: string, detail: string }>()
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const [touched, setTouched] = useState({
desc: false,
});
@@ -18,6 +23,22 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
desc: "",
idDivision: id
})
async function getData() {
try {
setLoading(true)
const res = await funGetProfileByCookies()
setIMG(`/api/file/img?jenis=image&cat=user&file=${res.data.img}`)
setLoading(false)
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getData()
}, [])
async function createDiscussion(val: boolean) {
try {
@@ -45,13 +66,12 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
}
return (
<Box >
<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 span={2}>
<Avatar src={img} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={10}>
<Box>
@@ -61,7 +81,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
input: {
border: 'none',
backgroundColor: 'transparent',
height: "60vh"
height: "70vh"
}
}}
value={isData.desc}

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

@@ -7,6 +7,7 @@ import { useState } from "react"
import toast from "react-hot-toast"
import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion"
import { useShallowEffect } from "@mantine/hooks"
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile"
export default function FormEditDiscussion() {
const [isValModal, setValModal] = useState(false)
@@ -14,6 +15,7 @@ export default function FormEditDiscussion() {
const param = useParams<{ id: string, detail: string }>()
const [isDataOne, setDataOne] = useState("")
const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const [touched, setTouched] = useState({
desc: false,
});
@@ -55,19 +57,35 @@ export default function FormEditDiscussion() {
}
}
async function getData() {
try {
setLoading(true)
const res = await funGetProfileByCookies()
setIMG(`/api/file/img?jenis=image&cat=user&file=${res.data.img}`)
setLoading(false)
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
fetchGetOneDiscussion()
getData()
}, [])
return (
<Box >
<Box p={20}>
<Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}>
<Grid.Col span={2}>
{loading ?
<Skeleton height={60} width={60} radius={100} />
:
<Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
<Avatar src={img} alt="it's me" size="lg" />
}
</Grid.Col>
<Grid.Col span={10}>
@@ -87,7 +105,7 @@ export default function FormEditDiscussion() {
input: {
border: 'none',
backgroundColor: 'transparent',
height: "60vh"
height: "70vh"
}
}}
value={isDataOne}

39
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, Spoiler, Text, TextInput } from "@mantine/core";
import { Avatar, Badge, Box, Divider, Flex, Grid, 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";
@@ -63,7 +63,7 @@ export default function ListDiscussion({ id }: { id: string }) {
.fill(null)
.map((_, i) => (
<Box key={i}>
<Box pl={10} pr={10}>
<Box pl={5} pr={5}>
<Flex
justify={"space-between"}
align={"center"}
@@ -100,26 +100,31 @@ export default function ListDiscussion({ id }: { id: string }) {
:
isData.map((v, i) => {
return (
<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>
<Box key={i} pl={5} pr={5}>
<Grid align="center" mt={20} onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
}}>
<Grid.Col span={2}>
<Avatar alt="it's me" src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
</Grid.Col>
<Grid.Col span={6}>
<Box pl={{
sm: 0,
lg: 0,
xl: 0,
md: 0,
base: 10
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.user_name}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
</Grid.Col>
<Grid.Col span={4}>
<Text c={"grey"} ta={"end"} fz={13}>{v.createdAt}</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text