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

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

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

@@ -1,5 +1,5 @@
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 { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
@@ -82,7 +82,7 @@ export default function DateEventDivision() {
const muncul = isListTgl.includes(coba)
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>
</Indicator>
);
@@ -136,11 +136,25 @@ export default function DateEventDivision() {
}} h={113}>
<Group>
<Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
<Box>
<Flex direction={'column'}>
<Text>{event.timeStart} - {event.timeEnd}</Text>
<Text fw={"bold"}>{event.title}</Text>
<Text>Dibuat oleh : {event.user_name}</Text>
</Box>
<Box w={{
base: 280,
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>
</Box>
</Box>

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

@@ -1,6 +1,6 @@
'use client'
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 { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
@@ -61,63 +61,130 @@ export default function DetailEventDivision() {
padding: 20,
borderRadius: 10
}}>
<Stack ml={10}>
<Group mb={10} gap={30}>
<BsCalendar2Event size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.title}</Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
</Group>
<Group mb={10} gap={30}>
<LuClock size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>
{isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
''}
</Text>
</Group>
<Group mb={10} gap={30}>
<LuLink size={25} color={WARNA.biruTua} />
{isDataCalender?.linkMeet ? (
<Group justify='space-between'>
<Text>{isDataCalender?.linkMeet}</Text>
<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>
)
}
</Group>
<Group gap={30}>
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
{isDataCalender?.desc ? (
<Text>{isDataCalender?.desc}</Text>
) : (
<Text>-</Text>
)
}
</Group>
<Stack>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendar2Event size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>{isDataCalender?.title}</Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<LuClock size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Grid.Col>
</Grid>
<Grid gutter={"lg"}>
<Grid.Col span={{
base: 2,
xl: 1
}}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
}}>
<Text>
{isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
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>
</Box>
}
@@ -157,7 +224,7 @@ export default function DetailEventDivision() {
px={20}
pt={20}
>
{isLengthMember == 0? (
{isLengthMember == 0 ? (
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
</Box>
@@ -165,24 +232,32 @@ export default function DetailEventDivision() {
<Box>
{isDataAnggota.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mb={20}
key={i}
>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
</Flex>
<Box my={10} key={i}>
<Grid align='center' gutter={"lg"}>
<Grid.Col span={{
base: 3,
xl: 2
}}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={{
base: 9,
xl: 10
}}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
<Text c={"#5A687D"} fz={14} lineClamp={1}>
{v.email}
</Text>
</Flex>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</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) => {
return (
<Grid key={i}>
<Grid.Col span={2}>
<Grid key={i} align='center'>
<Grid.Col span={3}>
<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'}>
<Grid.Col span={9}>
{v.data.map((d, x) => {
return (
<Box mb={10} key={x}
<Box mb={9} key={x}
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>
</Box>
)

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

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

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

@@ -1,6 +1,6 @@
"use client"
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 React, { useState } from 'react';
import { IoIosArrowDropright } from 'react-icons/io';
@@ -305,7 +305,7 @@ export default function UpdateDivisionCalender() {
borderRadius: 10,
}}
>
<Text>Tambah Anggota *</Text>
<Text>Tambah Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
@@ -332,24 +332,22 @@ export default function UpdateDivisionCalender() {
memberUser.get().map((v: any, i: any) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<Group>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={3}>
<Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={9}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
{v.name}
</Text>
</Box>
</Group>
<Text c={WARNA.biruTua} fw={"bold"}>
Anggota
</Text>
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</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 { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
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 React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -11,38 +11,6 @@ import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
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 }) {
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)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
} 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++) {
if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
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])
}
@@ -138,34 +106,30 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
</Box>
))
:
<Box mt={20}>
<Box mt={20} mb={100}>
{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>
<Grid align='center' gutter={{
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" />
<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"} />
</Grid.Col>
<Grid.Col span={10}>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text lineClamp={1}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</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)
.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