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

66
src/module/calender/ui/date_event_division.tsx
View File

@@ -1,5 +1,5 @@
import { WARNA } from '@/module/_global';
import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -7,6 +7,7 @@ import { funGetAllCalender } from '../lib/api_calender';
import { useSetState, useShallowEffect } from '@mantine/hooks';
import { IDataCalender } from '../lib/type_calender';
import moment from 'moment';
import _ from 'lodash';
export default function DateEventDivision() {
@@ -14,13 +15,18 @@ export default function DateEventDivision() {
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
const [loading, setLoading] = useState(true)
const getData = async (tgl: any) => {
try {
setLoading(true)
const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
setData(response.data)
setLoading(false)
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}
@@ -60,30 +66,42 @@ export default function DateEventDivision() {
<Text mb={10} mt={20} fw={"bold"}>
Event
</Text>
{isData.length > 0 ? (
isData.map((event, index) => {
const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
return (
<Box key={event.id} mt={10}>
<Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
borderRadius: 10
}} h={113}>
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Box>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"}>{event.title}</Text>
<Text>Dibuat oleh : {event.user_name}</Text>
</Box>
</Group>
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Skeleton height={100} width={"100%"} radius={"md"} />
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
</Box>
:
isData.map((event, index) => {
const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
return (
<Box key={event.id} mt={10}>
<Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
borderRadius: 10
}} h={113}>
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Box>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"}>{event.title}</Text>
<Text>Dibuat oleh : {event.user_name}</Text>
</Box>
</Group>
</Box>
</Box>
</Box>
)
})
) : (
<Text c={WARNA.biruTua}>Tidak ada event</Text>
)}
)
})
}
</Box>
</Box>
);

121
src/module/calender/ui/history_division_calender.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, Text, TextInput } from '@mantine/core';
import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -9,63 +9,25 @@ import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
import { useShallowEffect } from '@mantine/hooks';
import moment from 'moment';
import "moment/locale/id";
const history = [
{
dateStart: "21",
data: [
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "10.00",
status: "Selesai",
},
{
id: 2,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "13.00 - 14.00",
},
]
},
{
dateStart: "21",
data: [
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "10.00",
},
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "13.00",
},
{
id: 1,
title: "Pembahasan Mengenai Darmasaba",
timeEnd: "10:00",
timeStart: "15.00",
},
]
},
]
import _ from 'lodash';
export default function HistoryDivisionCalender() {
const [isData, setData] = useState<IHistoryCalender[]>([])
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true)
const getData = async () => {
try {
setLoading(true)
const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
setData(response.data)
setLoading(false)
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}
@@ -74,7 +36,7 @@ export default function HistoryDivisionCalender() {
}, [searchQuery])
return (
<Box>
<LayoutNavbarNew back="/calender" title="Riwayat kalender" menu />
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Riwayat kalender" menu />
<Box p={20}>
<TextInput
styles={{
@@ -96,28 +58,59 @@ export default function HistoryDivisionCalender() {
borderRadius: 10,
padding: 20
}}>
{isData.map((v, i) => {
return (
<Grid key={i}>
<Grid.Col span={2}>
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Grid >
<Grid.Col span={2}>
<Flex justify={"center"} direction={'column'}>
<Skeleton height={30} width={"100%"} radius={"md"} />
<Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
</Flex>
</Grid.Col>
<Grid.Col span={'auto'}>
{[...Array(1)].map((_, x) => (
<Box mb={10} key={x}>
<Skeleton height={20} width={"100%"} radius={"md"} />
<Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
</Box>
))}
</Grid.Col>
</Grid>
</Box>
))
:
_.isEmpty(isData)
?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text>
</Box>
:
isData.map((v, i) => {
return (
<Grid key={i}>
<Grid.Col span={2}>
<Flex justify={"center"} direction={'column'}>
<Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
<Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
</Flex>
</Grid.Col>
<Grid.Col span={'auto'}>
{v.data.map((d, x) => {
return (
<Box mb={10} key={x} >
<Text fw={"bold"}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text>
</Box>
)
})}
</Grid.Col>
</Grid>
)
})}
</Grid.Col>
<Grid.Col span={'auto'}>
{v.data.map((d, x) => {
return (
<Box mb={10} key={x} >
<Text fw={"bold"}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text>
</Box>
)
})}
</Grid.Col>
</Grid>
)
})
}
</Box>
</Box>
</Box>

101
src/module/calender/ui/navbar_create_division_calender.tsx
View File

@@ -22,6 +22,15 @@ export default function NavbarCreateDivisionCalender() {
const memberValue = memberUser.get() as IFormMemberCalender[]
const [openMember, setOpenMember] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const [touched, setTouched] = useState({
title: false,
dateStart: false,
timeStart: false,
timeEnd: false,
linkMeet: false,
repeatEventTyper: false,
desc: false
})
const [isData, setData] = useState({
idDivision: "",
title: "",
@@ -50,7 +59,7 @@ export default function NavbarCreateDivisionCalender() {
desc: isData.desc,
member: memberValue
})
if (response.success) {
setModal(false)
router.push(`/division/${param.id}/calender`)
@@ -69,7 +78,7 @@ export default function NavbarCreateDivisionCalender() {
} else {
toast.error(response.message)
setModal(false)
}
}
}
} catch (error) {
console.log(error)
@@ -89,6 +98,7 @@ export default function NavbarCreateDivisionCalender() {
<Box p={20}>
<Stack>
<TextInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -96,12 +106,19 @@ export default function NavbarCreateDivisionCalender() {
},
}}
size="md"
placeholder="Event Nama"
label="Event Nama"
placeholder="Nama Acara"
label="Nama Acara"
value={isData.title}
onChange={(event) => setData({ ...isData, title: event.target.value })}
onBlur={() => setTouched({ ...touched, title: true })}
error={
touched.title && (
isData.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
)
}
/>
<DateInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -117,11 +134,18 @@ export default function NavbarCreateDivisionCalender() {
placeholder="Input Tanggal"
label="Tanggal"
minDate={new Date()}
onBlur={() => setTouched({ ...touched, dateStart: true })}
error={
touched.dateStart && (
isData.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
)
}
/>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
>
<TimeInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -132,8 +156,15 @@ export default function NavbarCreateDivisionCalender() {
label="Waktu Awal"
value={isData.timeStart}
onChange={(event) => setData({ ...isData, timeStart: event.target.value })}
onBlur={() => setTouched({ ...touched, timeStart: true })}
error={
touched.timeStart && (
isData.timeStart == "" ? "Waktu Awal Tidak Boleh Kosong" : null
)
}
/>
<TimeInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -144,9 +175,16 @@ export default function NavbarCreateDivisionCalender() {
label="Waktu Akhir"
value={isData.timeEnd}
onChange={(event) => setData({ ...isData, timeEnd: event.target.value })}
onBlur={() => setTouched({ ...touched, timeEnd: true })}
error={
touched.timeEnd && (
isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
)
}
/>
</SimpleGrid>
<TextInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -158,8 +196,15 @@ export default function NavbarCreateDivisionCalender() {
label="Link Meet"
value={isData.linkMeet}
onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
onBlur={() => setTouched({ ...touched, linkMeet: true })}
error={
touched.linkMeet && (
isData.linkMeet == "" ? "Link Meet Tidak Boleh Kosong" : null
)
}
/>
<Select
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -180,20 +225,13 @@ export default function NavbarCreateDivisionCalender() {
onChange={(val: any) =>
setData({ ...isData, repeatEventTyper: val })
}
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
error={
touched.repeatEventTyper && (
isData.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
)
}
/>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -204,6 +242,19 @@ export default function NavbarCreateDivisionCalender() {
size="md" placeholder='Deskripsi' label="Deskripsi"
onChange={(event) => setData({ ...isData, desc: event.target.value })}
/>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Anggota *</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
{
memberUser.length > 0 &&
<Box pt={30}>
@@ -248,7 +299,6 @@ export default function NavbarCreateDivisionCalender() {
</Box>
</Box>
}
<Box mt={"xl"}>
<Button
c={"white"}
@@ -256,7 +306,20 @@ export default function NavbarCreateDivisionCalender() {
size="lg"
radius={30}
fullWidth
onClick={() => setModal(true)}
onClick={() => {
if (
isData.title !== "" &&
isData.dateStart !== " " &&
isData.timeStart !== "" &&
isData.timeEnd !== "" &&
isData.linkMeet !== "" &&
isData.repeatEventTyper !== ""
) {
setModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>

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' />

19
src/module/division_new/ui/edit_division.tsx
View File

@@ -77,18 +77,10 @@ export default function EditDivision() {
}, [param.id])
return (
<Box>
<Box pos={"relative"} h={"100vh"}>
<LayoutNavbarNew back="" title="Edit Divisi" menu />
<Box p={20}>
<Stack>
{/* <Select
placeholder="Grup"
label="Grup"
size="md"
required
radius={40}
/> */}
<TextInput
placeholder="Judul"
label="Judul"
@@ -101,8 +93,14 @@ export default function EditDivision() {
<Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
value={body.desc}
onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
styles={{
input: {
height: "40vh"
}
}}
/>
<Box mt="xl">
</Stack>
<Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
<Button
color="white"
bg={WARNA.biruTua}
@@ -114,7 +112,6 @@ export default function EditDivision() {
Simpan
</Button>
</Box>
</Stack>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
onYes={(val) => {

3
src/module/division_new/ui/information_division.tsx
View File

@@ -141,7 +141,10 @@ export default function InformationDivision() {
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
>
<Box>