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

Merge pull request #190 from bipproduction/lukman/4-september-2024

Browse Source 
style : update style responsive
This commit is contained in:
Amalia
2024-09-04 15:17:58 +08:00
committed by GitHub
parent c370c72b48 85a08aaa00
commit 76a1bdce99
13 changed files with 451 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/discussion/[id]/route.ts
View File

@@ -66,7 +66,7 @@ export async function GET(request: Request, context: { params: { id: string } })
const { ...userMember } = data const { ...userMember } = data
const username = data?.User.name const username = data?.User.name
const user_img = data?.User.img const user_img = data?.User.img
const createdAt = moment(data?.createdAt).format("LL") const createdAt = moment(data?.createdAt).format("ll")

2
src/app/api/discussion/route.ts
View File

@@ -72,7 +72,7 @@ export async function GET(request: Request) {
user_name: v.User.name, user_name: v.User.name,
img: v.User.img, img: v.User.img,
total_komentar: v.DivisionDisscussionComment.length, total_komentar: v.DivisionDisscussionComment.length,
createdAt: moment(v.createdAt).format("LL") createdAt: moment(v.createdAt).format("ll")
})) }))
return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: fixData, }, { status: 200 }); return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: fixData, }, { status: 200 });

112
src/module/calender/ui/create_user_calender.tsx
View File

@@ -6,7 +6,7 @@ import { useHookstate } from '@hookstate/core';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks'; import { useShallowEffect } from '@mantine/hooks';
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Divider, Flex, Group, rem, Text } from '@mantine/core'; import { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Text } from '@mantine/core';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) { export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
@@ -31,7 +31,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
} else { } else {
toast.error(response.message) toast.error(response.message)
} }
} catch (error) { } catch (error) {
console.log(error) console.log(error)
toast.error("Gagal mendapatkan anggota, coba lagi nanti"); toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -83,77 +83,73 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
return ( return (
<Box> <Box>
<LayoutNavbarNew <LayoutNavbarNew
// back="" // back=""
title="Pilih Anggota" title="Pilih Anggota"
menu menu
/> />
<Box p={20}> <Box p={20}>
<Group justify="space-between" mt={20} onClick={handleSelectAll}> <Group justify="space-between" mt={20} onClick={handleSelectAll}>
<Text c={WARNA.biruTua} fw={"bold"}> <Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Anggota Pilih Semua Anggota
</Text> </Text>
{selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""} {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Group> </Group>
{loading ? {loading ?
Array(8) Array(8)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonSingle /> <SkeletonSingle />
</Box> </Box>
)) ))
: :
<Box mt={20}> <Box mt={20} mb={100}>
{isData.map((v, i) => { {isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}> <Grid align='center' gutter={{
<Group> base: 60,
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> xl: "xs"
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}> }}>
{v.name} <Grid.Col span={2}>
</Text> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Group> </Grid.Col>
<Text <Grid.Col span={10}>
style={{ <Flex justify='space-between' align={"center"}>
cursor: 'pointer', <Flex direction={'column'} align="flex-start" justify="flex-start">
display: 'flex', <Text lineClamp={1}>{v.name}</Text>
alignItems: 'center', </Flex>
paddingLeft: 20, {isSelected ? <FaCheck /> : null}
}} </Flex>
> </Grid.Col>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""} </Grid>
</Text> <Box mt={10}>
</Flex> <Divider size={"xs"} />
<Divider my={"md"} /> </Box>
</Box> </Box>
); );
})} })}
</Box> </Box>
} }
</Box> </Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 999, zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`, backgroundColor: `${WARNA.bgWhite}`,
}}> }}>
<Button <Button
c={"white"} c={"white"}
bg={WARNA.biruTua} bg={WARNA.biruTua}
size="lg" size="lg"
radius={30} radius={30}
fullWidth fullWidth
onClick={() => {onSubmit()}} onClick={() => { onSubmit() }}
> >
Simpan Simpan
</Button> </Button>
</Box> </Box>
</Box> </Box>
); );
} }

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

@@ -1,5 +1,5 @@
import { WARNA } from '@/module/_global'; import { WARNA } from '@/module/_global';
import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core'; import { Box, Divider, Flex, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { DatePicker, DatePickerProps } from '@mantine/dates'; import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
@@ -82,7 +82,7 @@ export default function DateEventDivision() {
const muncul = isListTgl.includes(coba) const muncul = isListTgl.includes(coba)
return ( return (
<Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline size={6} > <Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline size={6} >
<div>{day}</div> <div>{day}</div>
</Indicator> </Indicator>
); );
@@ -136,11 +136,25 @@ export default function DateEventDivision() {
}} h={113}> }} h={113}>
<Group> <Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} /> <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Box> <Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text> <Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"}>{event.title}</Text> <Box w={{
<Text>Dibuat oleh : {event.user_name}</Text> base: 280,
</Box> xl: 430
}}>
<Text fw={"bold"} lineClamp={1}>
{_.startCase(event.title)}
</Text>
</Box>
<Box w={{
base: 280,
xl: 420
}}>
<Text lineClamp={1}>
Dibuat oleh : {event.user_name}
</Text>
</Box>
</Flex>
</Group> </Group>
</Box> </Box>
</Box> </Box>

229
src/module/calender/ui/detail_event_division.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Flex, Group, Skeleton, Stack, Text, Tooltip } from '@mantine/core'; import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs'; import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md"; import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
@@ -61,63 +61,130 @@ export default function DetailEventDivision() {
padding: 20, padding: 20,
borderRadius: 10 borderRadius: 10
}}> }}>
<Stack ml={10}> <Stack>
<Group mb={10} gap={30}> <Grid gutter={"lg"}>
<BsCalendar2Event size={25} color={WARNA.biruTua} /> <Grid.Col span={{
<Text>{isDataCalender?.title}</Text> base: 2,
</Group> xl: 1
<Group mb={10} gap={30}> }}>
<BsCalendarDate size={25} color={WARNA.biruTua} /> <BsCalendar2Event size={25} color={WARNA.biruTua} />
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text> </Grid.Col>
</Group> <Grid.Col span={{
<Group mb={10} gap={30}> base: 10,
<LuClock size={25} color={WARNA.biruTua} /> xl: 11
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text> }}>
</Group> <Text>{isDataCalender?.title}</Text>
<Group mb={10} gap={30}> </Grid.Col>
<BsCalendarDate size={25} color={WARNA.biruTua} /> </Grid>
<Text> <Grid gutter={"lg"}>
{isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' : <Grid.Col span={{
isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' : base: 2,
isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' : xl: 1
isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' : }}>
isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' : <BsCalendarDate size={25} color={WARNA.biruTua} />
''} </Grid.Col>
</Text> <Grid.Col span={{
</Group> base: 10,
<Group mb={10} gap={30}> xl: 11
<LuLink size={25} color={WARNA.biruTua} /> }}>
{isDataCalender?.linkMeet ? ( <Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
<Group justify='space-between'> </Grid.Col>
<Text>{isDataCalender?.linkMeet}</Text> </Grid>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}> <Grid gutter={"lg"}>
{({ copied, copy }) => ( <Grid.Col span={{
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right"> base: 2,
<ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}> xl: 1
{copied ? ( }}>
<FaCheck size={20} /> <LuClock size={25} color={WARNA.biruTua} />
) : ( </Grid.Col>
<TbCopy size={20} /> <Grid.Col span={{
)} base: 10,
</ActionIcon> xl: 11
</Tooltip> }}>
)} <Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</CopyButton> </Grid.Col>
</Group> </Grid>
) : ( <Grid gutter={"lg"}>
<Text>-</Text> <Grid.Col span={{
) base: 2,
} xl: 1
</Group> }}>
<Group gap={30}> <BsCalendarDate size={25} color={WARNA.biruTua} />
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} /> </Grid.Col>
{isDataCalender?.desc ? ( <Grid.Col span={{
<Text>{isDataCalender?.desc}</Text> base: 10,
) : ( xl: 11
<Text>-</Text> }}>
) <Text>
} {isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
</Group> isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
''}
</Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<LuLink size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
{isDataCalender?.linkMeet ? (
<Group justify='space-between'>
<Box w={{
base: 170,
xl: 380
}}>
<Text lineClamp={1}>{isDataCalender?.linkMeet}</Text>
</Box>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
<ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
{copied ? (
<FaCheck size={20} />
) : (
<TbCopy size={20} />
)}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
</Group>
) : (
<Text>-</Text>
)
}
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
{isDataCalender?.desc ? (
<Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih dikit">
<Text>{isDataCalender?.desc}</Text>
</Spoiler>
) : (
<Text>-</Text>
)
}
</Grid.Col>
</Grid>
</Stack> </Stack>
</Box> </Box>
} }
@@ -157,7 +224,7 @@ export default function DetailEventDivision() {
px={20} px={20}
pt={20} pt={20}
> >
{isLengthMember == 0? ( {isLengthMember == 0 ? (
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30vh' }}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Box> </Box>
@@ -165,24 +232,32 @@ export default function DetailEventDivision() {
<Box> <Box>
{isDataAnggota.map((v, i) => { {isDataAnggota.map((v, i) => {
return ( return (
<Flex <Box my={10} key={i}>
justify={"space-between"} <Grid align='center' gutter={"lg"}>
align={"center"} <Grid.Col span={{
mb={20} base: 3,
key={i} xl: 2
> }}>
<Group> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> </Grid.Col>
<Box> <Grid.Col span={{
<Text c={WARNA.biruTua} fw={"bold"}> base: 9,
{v.name} xl: 10
</Text> }}>
<Text c={"#5A687D"} fz={14}> <Flex justify='space-between' align={"center"}>
{v.email} <Flex direction={'column'} align="flex-start" justify="flex-start">
</Text> <Text lineClamp={1}>{v.name}</Text>
</Box> <Text c={"#5A687D"} fz={14} lineClamp={1}>
</Group> {v.email}
</Flex> </Text>
</Flex>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
); );
})} })}
</Box> </Box>

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

@@ -91,20 +91,20 @@ export default function HistoryDivisionCalender() {
: :
isData.map((v, i) => { isData.map((v, i) => {
return ( return (
<Grid key={i}> <Grid key={i} align='center'>
<Grid.Col span={2}> <Grid.Col span={3}>
<Flex justify={"center"} direction={'column'}> <Flex justify={"center"} direction={'column'}>
<Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text> <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> <Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
</Flex> </Flex>
</Grid.Col> </Grid.Col>
<Grid.Col span={'auto'}> <Grid.Col span={9}>
{v.data.map((d, x) => { {v.data.map((d, x) => {
return ( return (
<Box mb={10} key={x} <Box mb={9} key={x}
onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)} onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
> >
<Text fw={"bold"}>{d.title}</Text> <Text fw={"bold"} lineClamp={1}>{d.title}</Text>
<Text>{d.timeStart} | {d.timeEnd}</Text> <Text>{d.timeStart} | {d.timeEnd}</Text>
</Box> </Box>
) )

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

@@ -1,6 +1,6 @@
"use client" "use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core'; import { Avatar, Box, Button, Divider, Flex, Grid, Group, Input, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates'; import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IoIosArrowDropright } from 'react-icons/io'; import { IoIosArrowDropright } from 'react-icons/io';
@@ -85,7 +85,7 @@ export default function NavbarCreateDivisionCalender() {
<Box> <Box>
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="tambah kalender" menu /> <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="tambah kalender" menu />
<Box p={20}> <Box p={20}>
<Stack> <Stack pb={100}>
<TextInput <TextInput
required required
styles={{ styles={{
@@ -268,24 +268,32 @@ export default function NavbarCreateDivisionCalender() {
member.get().map((v: any, i: any) => { member.get().map((v: any, i: any) => {
return ( return (
<Flex <Box key={i}>
justify={"space-between"} <Grid align='center' mt={10}
align={"center"} >
mt={20} <Grid.Col span={9}>
key={i} <Group>
> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Group> <Box w={{
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> base: 140,
<Box> xl: 270
<Text c={WARNA.biruTua} fw={"bold"}> }}>
{v.name} <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
Anggota
</Text> </Text>
</Box> </Grid.Col>
</Group> </Grid>
<Text c={WARNA.biruTua} fw={"bold"}> <Box mt={10}>
Anggota <Divider size={"xs"} />
</Text> </Box>
</Flex> </Box>
); );
})} })}
</Box> </Box>

34
src/module/calender/ui/update_division_calender.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Flex, Group, Input, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core'; import { Avatar, Box, Button, Divider, Flex, Grid, Group, Input, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates'; import { DateInput, TimeInput } from '@mantine/dates';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IoIosArrowDropright } from 'react-icons/io'; import { IoIosArrowDropright } from 'react-icons/io';
@@ -305,7 +305,7 @@ export default function UpdateDivisionCalender() {
borderRadius: 10, borderRadius: 10,
}} }}
> >
<Text>Tambah Anggota *</Text> <Text>Tambah Anggota</Text>
<IoIosArrowDropright size={25} /> <IoIosArrowDropright size={25} />
</Group> </Group>
</Box> </Box>
@@ -332,24 +332,22 @@ export default function UpdateDivisionCalender() {
memberUser.get().map((v: any, i: any) => { memberUser.get().map((v: any, i: any) => {
return ( return (
<Flex <Box key={i}>
justify={"space-between"} <Grid align='center' mt={10}
align={"center"} >
mt={20} <Grid.Col span={3}>
key={i} <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
> </Grid.Col>
<Group> <Grid.Col span={9}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name} {v.name}
</Text> </Text>
</Box> </Grid.Col>
</Group> </Grid>
<Text c={WARNA.biruTua} fw={"bold"}> <Box mt={10}>
Anggota <Divider size={"xs"} />
</Text> </Box>
</Flex> </Box>
); );
})} })}
</Box> </Box>

80
src/module/calender/ui/update_list_users.tsx
View File

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global'; import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new'; import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
import { useHookstate } from '@hookstate/core'; import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Divider, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -11,38 +11,6 @@ import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks'; import { useShallowEffect } from '@mantine/hooks';
import { FaCheck } from 'react-icons/fa6'; import { FaCheck } from 'react-icons/fa6';
const dataUser = [
{
id: 1,
img: "https://i.pravatar.cc/500?img=3",
name: "Doni Setiawan",
},
{
id: 2,
img: "https://i.pravatar.cc/500?img=10",
name: "Ilham Udin",
},
{
id: 3,
img: "https://i.pravatar.cc/500?img=11",
name: "Didin Anang",
},
{
id: 4,
img: "https://i.pravatar.cc/500?img=1",
name: "Angga Saputra",
},
{
id: 5,
img: "https://i.pravatar.cc/500?img=2",
name: "Marcel Widianto",
},
{
id: 6,
img: "https://i.pravatar.cc/500?img=7",
name: "Bagas Nusantara",
},
];
export default function UpdateListUsers({ onClose }: { onClose: (val: any) => void }) { export default function UpdateListUsers({ onClose }: { onClose: (val: any) => void }) {
const router = useRouter() const router = useRouter()
@@ -83,7 +51,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) { if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser)) setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
} else { } else {
setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name }]) setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
} }
}; };
@@ -95,7 +63,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
for (let index = 0; index < isData.length; index++) { for (let index = 0; index < isData.length; index++) {
if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) { if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
const newArr = { const newArr = {
idUser: isData[index].idUser, name: isData[index].name idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img
} }
setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr]) setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
} }
@@ -138,34 +106,30 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
</Box> </Box>
)) ))
: :
<Box mt={20}> <Box mt={20} mb={100}>
{isData.map((v, i) => { {isData.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
return ( return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}> <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}> <Grid align='center' gutter={{
<Group> base: 60,
xl: "xs"
}}>
<Grid.Col span={2}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" /> <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Text style={{ </Grid.Col>
cursor: 'pointer', <Grid.Col span={10}>
display: 'flex', <Flex justify='space-between' align={"center"}>
alignItems: 'center', <Flex direction={'column'} align="flex-start" justify="flex-start">
}}> <Text lineClamp={1}>{v.name}</Text>
{v.name} </Flex>
</Text> {isSelected ? <FaCheck /> : null}
</Group> </Flex>
<Text </Grid.Col>
style={{ </Grid>
cursor: 'pointer', <Box mt={10}>
display: 'flex', <Divider size={"xs"} />
alignItems: 'center', </Box>
paddingLeft: 20,
}}
>
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={"md"} />
</Box> </Box>
); );
})} })}

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) Array(1)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i} pl={5} pr={5}>
<Box> <Box>
<Flex <Flex
justify={"space-between"} justify={"space-between"}
align={"center"} align={"center"}
mt={20}
> >
<Group> <Group>
<Skeleton width={60} height={60} radius={100} /> <Skeleton width={60} height={60} radius={100} />
<Box> <Box>
<Skeleton width={100} height={20} radius={"md"} /> <Skeleton width={80} height={20} radius={"md"} />
<Skeleton mt={8} width={60} height={20} radius={"md"} /> <Skeleton mt={8} width={60} height={20} radius={"md"} />
</Box> </Box>
</Group> </Group>
<Skeleton width={"50%"} height={20} radius={"md"} /> <Skeleton width={"20%"} height={20} radius={"md"} />
</Flex> </Flex>
<Box mt={10}> <Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} /> <Skeleton width={"100%"} height={100} radius={"md"} />
@@ -95,7 +95,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
)) : )) :
<> <>
{isData?.totalComments == 0 ? {isData?.totalComments == 0 ?
<Box mb={60}> <Box mb={60} pl={5} pr={5}>
<Flex <Flex
justify={"space-between"} justify={"space-between"}
align={"center"} align={"center"}
@@ -135,24 +135,28 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Group> </Group>
</Box> : </Box> :
<Box mb={20}> <Box mb={20}>
<Flex <Grid align="center">
justify={"space-between"} <Grid.Col span={2}>
align={"center"} <Avatar src={`/api/file/img?jenis=image&cat=user&file=${isData?.user_img}`} alt="it's me" size="lg" />
mt={20} </Grid.Col>
> <Grid.Col span={6}>
{isData?.username ? <Box pl={{
<Group> sm: 0,
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${isData?.user_img}`} alt="it's me" size="lg" /> lg: 0,
<Box> xl: 0,
<Text c={WARNA.biruTua} fw={"bold"}> md: 0,
{isData?.username} base: 10
</Text> }}>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
</Box> {isData?.username}
</Group> : "" </Text>
} <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text> </Box>
</Flex> </Grid.Col>
<Grid.Col span={4}>
<Text c={"grey"} ta={"end"} fz={13}>{isData?.createdAt}</Text>
</Grid.Col>
</Grid>
<Box mt={10}> <Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text <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 ? {isLoad ?
Array(2) Array(2)
.fill(0) .fill(0)
@@ -211,20 +215,21 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
isData?.DivisionDisscussionComment.map((v, i) => { isData?.DivisionDisscussionComment.map((v, i) => {
return ( return (
<Box key={i} p={10} > <Box key={i} p={10} >
<Flex <Grid align="center">
justify={"space-between"} <Grid.Col span={2}>
align={"center"} <Avatar alt="it's me" size="md" src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} />
> </Grid.Col>
<Group> <Grid.Col span={6}>
<Avatar alt="it's me" size="md" src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} />
<Box> <Box>
<Text c={WARNA.biruTua} fw={"bold"} fz={15}> <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={15}>
{v.username} {v.username}
</Text> </Text>
</Box> </Box>
</Group> </Grid.Col>
<Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text> <Grid.Col span={4}>
</Flex> <Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format("ll")}</Text>
</Grid.Col>
</Grid>
<Box mt={10}> <Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit"> <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text <Text
@@ -245,53 +250,53 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
} }
</Box> </Box>
</Box> </Box>
{isLoad ? {isLoad ?
<Skeleton width={"100%"} height={50} radius={100} /> <Skeleton width={"100%"} height={50} radius={100} />
: :
<Box pos={'fixed'} bottom={0} w={"100%"} style={{ <Box pos={'fixed'} bottom={0} w={"100%"} style={{
maxWidth: rem(550) maxWidth: rem(550)
}} pl={rem(15)} pr={rem(15)} bg={WARNA.bgWhite}> }} pl={rem(15)} pr={rem(15)} bg={WARNA.bgWhite}>
<Box bg={WARNA.bgWhite} > <Box bg={WARNA.bgWhite} >
<Group justify="flex-end"> <Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text> <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group> </Group>
<Box mb={20} bg={WARNA.bgWhite}> <Box mb={20} bg={WARNA.bgWhite}>
<Grid bg={"white"} style={{ <Grid bg={"white"} style={{
border: '1px solid gray', border: '1px solid gray',
borderRadius: 40 borderRadius: 40
}} justify="center" align="center"> }} justify="center" align="center">
<Grid.Col span={10}> <Grid.Col span={10}>
<TextInput <TextInput
styles={{ styles={{
input: { input: {
color: WARNA.biruTua, color: WARNA.biruTua,
border: "none", border: "none",
backgroundColor: "transparent" backgroundColor: "transparent"
}, },
}} }}
size="md" size="md"
placeholder="Kirim Komentar" placeholder="Kirim Komentar"
disabled={isData?.status === 2} disabled={isData?.status === 2}
onChange={(e) => setIsComent(e.target.value)} onChange={(e) => setIsComent(e.target.value)}
value={isComent} value={isComent}
maxLength={300} maxLength={300}
/> />
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col span={2}>
<Center> <Center>
<ActionIcon <ActionIcon
onClick={sendComent} onClick={sendComent}
variant="subtle" aria-label="submit" disabled={isData?.status === 2}> variant="subtle" aria-label="submit" disabled={isData?.status === 2}>
<LuSendHorizonal size={30} /> <LuSendHorizonal size={30} />
</ActionIcon> </ActionIcon>
</Center> </Center>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box>
</Box> </Box>
</Box> </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 { Avatar, Box, Button, Center, Grid, Group, rem, Text, Textarea } from "@mantine/core";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; 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 { 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 }) { export default function FormCreateDiscussion({ id }: { id: string }) {
const [isValModal, setValModal] = useState(false) const [isValModal, setValModal] = useState(false)
const router = useRouter() 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({ const [touched, setTouched] = useState({
desc: false, desc: false,
}); });
@@ -18,6 +23,22 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
desc: "", desc: "",
idDivision: id 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) { async function createDiscussion(val: boolean) {
try { try {
@@ -45,13 +66,12 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
} }
return ( return (
<Box > <Box >
<Box p={20} > <Box p={20} >
<Grid gutter={0} pt={10}> <Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}> <Grid.Col span={2}>
<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>
<Grid.Col span={10}> <Grid.Col span={10}>
<Box> <Box>
@@ -61,7 +81,7 @@ export default function FormCreateDiscussion({ id }: { id: string }) {
input: { input: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: "60vh" height: "70vh"
} }
}} }}
value={isData.desc} 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 toast from "react-hot-toast"
import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion" import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion"
import { useShallowEffect } from "@mantine/hooks" import { useShallowEffect } from "@mantine/hooks"
import { funGetProfileByCookies } from "@/module/user/profile/lib/api_profile"
export default function FormEditDiscussion() { export default function FormEditDiscussion() {
const [isValModal, setValModal] = useState(false) const [isValModal, setValModal] = useState(false)
@@ -14,6 +15,7 @@ export default function FormEditDiscussion() {
const param = useParams<{ id: string, detail: string }>() const param = useParams<{ id: string, detail: string }>()
const [isDataOne, setDataOne] = useState("") const [isDataOne, setDataOne] = useState("")
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [img, setIMG] = useState<any | null>()
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
desc: false, 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(() => { useShallowEffect(() => {
fetchGetOneDiscussion() fetchGetOneDiscussion()
getData()
}, []) }, [])
return ( return (
<Box > <Box >
<Box p={20}> <Box p={20}>
<Grid gutter={0} pt={10}> <Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}> <Grid.Col span={2}>
{loading ? {loading ?
<Skeleton height={60} width={60} radius={100} /> <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>
<Grid.Col span={10}> <Grid.Col span={10}>
@@ -87,7 +105,7 @@ export default function FormEditDiscussion() {
input: { input: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: "60vh" height: "70vh"
} }
}} }}
value={isDataOne} value={isDataOne}

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

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