upd: discussion
Deskripsi: - discussion view list - api get all, create discussion No Issues
This commit is contained in:
amel
75
src/module/discussion/ui/drawer_detail_discussion.tsx
Normal file
75
src/module/discussion/ui/drawer_detail_discussion.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { WARNA } from "@/module/_global";
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal";
|
||||
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { BsTrash3 } from "react-icons/bs";
|
||||
import { FaPencil } from "react-icons/fa6";
|
||||
import { MdClose } from "react-icons/md";
|
||||
|
||||
export default function DrawerDetailDiscussion({ onSuccess }: { onSuccess: (val: boolean) => void }) {
|
||||
const [isValModal, setValModal] = useState(false)
|
||||
const [isValModalStatus, setValModalStatus] = useState(false)
|
||||
|
||||
function onTrue(val: boolean) {
|
||||
if (val) {
|
||||
onSuccess(true)
|
||||
toast.success("Sukses! Data terhapus");
|
||||
}
|
||||
setValModal(false)
|
||||
}
|
||||
|
||||
function onTrueStatus(val: boolean) {
|
||||
if (val) {
|
||||
onSuccess(true)
|
||||
toast.success("Sukses! Data terupdate");
|
||||
}
|
||||
setValModalStatus(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid
|
||||
cols={{ base: 3, sm: 3, lg: 3 }}
|
||||
>
|
||||
<Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<BsTrash3 size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Hapus</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Flex onClick={() => window.location.href = "/discussion/edit/2"} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<FaPencil size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Edit</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Flex onClick={() => setValModalStatus(true)} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<MdClose size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Tutup Diskusi</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
|
||||
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
|
||||
description="Apakah Anda yakin ingin menghapus diskusi ini?"
|
||||
onYes={(val) => { onTrue(val) }} />
|
||||
|
||||
|
||||
<LayoutModal opened={isValModalStatus} onClose={() => setValModalStatus(false)}
|
||||
description="Apakah Anda yakin ingin mengubah status diskusi ini?"
|
||||
onYes={(val) => { onTrueStatus(val) }} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
27
src/module/discussion/ui/drawer_list_discussion.tsx
Normal file
27
src/module/discussion/ui/drawer_list_discussion.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { WARNA } from "@/module/_global";
|
||||
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
|
||||
import { useParams } from "next/navigation";
|
||||
import { IoAddCircle } from "react-icons/io5";
|
||||
|
||||
export default function DrawerListDiscussion() {
|
||||
const param = useParams<{ id: string }>()
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid
|
||||
cols={{ base: 2, sm: 2, lg: 3 }}
|
||||
>
|
||||
<Flex onClick={() => window.location.href = "/division/" + param.id + "/discussion/create"} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<IoAddCircle size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Tambah Diskusi</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
56
src/module/discussion/ui/form_create_discussion.tsx
Normal file
56
src/module/discussion/ui/form_create_discussion.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'use client'
|
||||
import { WARNA } from "@/module/_global";
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal";
|
||||
import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
export default function FormCreateDiscussion() {
|
||||
const [isValModal, setValModal] = useState(false)
|
||||
|
||||
function onTrue(val: boolean) {
|
||||
if (val) {
|
||||
toast.success("Sukses! Data tersimpan");
|
||||
}
|
||||
setValModal(false)
|
||||
}
|
||||
|
||||
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',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Group>
|
||||
<Box mt="xl">
|
||||
<Button
|
||||
color="white"
|
||||
bg={WARNA.biruTua}
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => setValModal(true)}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
|
||||
description="Apakah Anda yakin ingin
|
||||
menambah data?"
|
||||
onYes={(val) => { onTrue(val) }} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
109
src/module/discussion/ui/list_discussion.tsx
Normal file
109
src/module/discussion/ui/list_discussion.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
'use client'
|
||||
import { WARNA } from "@/module/_global";
|
||||
import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { GrChatOption } from "react-icons/gr";
|
||||
import { HiMagnifyingGlass } from "react-icons/hi2";
|
||||
|
||||
const dataAnggota = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Iqbal Ramadan",
|
||||
image: "https://i.pravatar.cc/1000?img=5",
|
||||
status: true,
|
||||
jumlah: 16,
|
||||
desc: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. '
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Doni Setiawan",
|
||||
image: "https://i.pravatar.cc/1000?img=10",
|
||||
status: true,
|
||||
jumlah: 26,
|
||||
desc: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Rangga Agung",
|
||||
image: "https://i.pravatar.cc/1000?img=51",
|
||||
status: false,
|
||||
jumlah: 11,
|
||||
desc: 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Ramadan Sananta",
|
||||
image: "https://i.pravatar.cc/1000?img=15",
|
||||
status: false,
|
||||
jumlah: 30,
|
||||
desc: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. '
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Imam Baroni",
|
||||
image: "https://i.pravatar.cc/1000?img=22",
|
||||
status: false,
|
||||
jumlah: 29,
|
||||
desc: 'Contrary to popular belief, Lorem Ipsum is not simply random text'
|
||||
},
|
||||
];
|
||||
|
||||
export default function ListDiscussion() {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Box p={20}>
|
||||
<TextInput
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
size="md"
|
||||
radius={30}
|
||||
leftSection={<HiMagnifyingGlass size={20} />}
|
||||
placeholder="Pencarian"
|
||||
/>
|
||||
{dataAnggota.map((v, i) => {
|
||||
return (
|
||||
<Box key={i} pl={10} pr={10}
|
||||
onClick={() => {
|
||||
router.push(`/discussion/${v.id}`)
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
justify={"space-between"}
|
||||
align={"center"}
|
||||
mt={20}
|
||||
>
|
||||
<Group>
|
||||
<Avatar src={v.image} alt="it's me" size="lg" />
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||
{v.name}
|
||||
</Text>
|
||||
<Badge color={(v.status) ? "green" : "red"} size="sm">{(v.status) ? "BUKA" : "TUTUP"}</Badge>
|
||||
</Box>
|
||||
</Group>
|
||||
<Text c={"grey"}>1 Jam</Text>
|
||||
</Flex>
|
||||
<Box mt={10}>{v.desc}</Box>
|
||||
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
|
||||
<Group gap={5} align="center">
|
||||
<GrChatOption size={18} />
|
||||
<Text fz={13}>Diskusikan</Text>
|
||||
</Group >
|
||||
<Group gap={5} align="center">
|
||||
<Text fz={13}>{v.jumlah} Komentar</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Box mt={20}>
|
||||
<Divider size={"xs"} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
23
src/module/discussion/ui/navbar_detail_discussion.tsx
Normal file
23
src/module/discussion/ui/navbar_detail_discussion.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
'use client'
|
||||
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
|
||||
import { ActionIcon } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import { HiMenu } from "react-icons/hi";
|
||||
import DrawerDetailDiscussion from "./drawer_detail_discussion";
|
||||
|
||||
export default function NavbarDetailDiscussion() {
|
||||
const [openDrawer, setOpenDrawer] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<LayoutNavbarNew back="" title="Diskusi "
|
||||
menu={
|
||||
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||
<HiMenu size={20} color='white' />
|
||||
</ActionIcon>}
|
||||
/>
|
||||
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
|
||||
<DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} />
|
||||
</LayoutDrawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
24
src/module/discussion/ui/navbar_list_discussion.tsx
Normal file
24
src/module/discussion/ui/navbar_list_discussion.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
'use client'
|
||||
import { LayoutNavbarNew, WARNA, LayoutDrawer } from "@/module/_global";
|
||||
import { ActionIcon } from "@mantine/core";
|
||||
import { HiMenu } from "react-icons/hi";
|
||||
import { useState } from "react";
|
||||
import DrawerListDiscussion from "./drawer_list_discussion";
|
||||
|
||||
export default function NavbarListDiscussion() {
|
||||
const [openDrawer, setOpenDrawer] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<LayoutNavbarNew back="" title="Diskusi"
|
||||
menu={
|
||||
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||
<HiMenu size={20} color='white' />
|
||||
</ActionIcon>
|
||||
}
|
||||
/>
|
||||
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
|
||||
<DrawerListDiscussion />
|
||||
</LayoutDrawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user