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

Merge pull request #367 from bipproduction/amalia/05-jan-23

Browse Source 
Amalia/05 jan 23
This commit is contained in:
Amalia
2025-01-05 18:19:40 +08:00
committed by GitHub
parent 463efe59ce e697b2d650
commit 84f557caa0
24 changed files with 1320 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/(application)/discussion/[id]/member/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { MemberDiscussionGeneral } from "@/module/discussion_general";
export default function Page() {
return (
<>
<MemberDiscussionGeneral />
</>
)
}

4
src/app/(application)/discussion/[id]/page.tsx
View File

@@ -1,7 +1,9 @@
import { DetailDiscussionGeneral } from "@/module/discussion_general";
export default function Page() {
return (
<>
detail diskusi umum
<DetailDiscussionGeneral />
</>
)
}

92
src/app/api/discussion-general/[id]/member/route.ts Normal file
View File

@@ -0,0 +1,92 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import { createLogUser } from "@/module/user";
import _ from "lodash";
import { NextResponse } from "next/server";
// ADD MEMBER DISCUSSION GENERAL
export async function POST(request: Request, context: { params: { id: string } }) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { id } = context.params
const { member } = (await request.json())
const cek = await prisma.discussion.count({
where: {
id,
isActive: true
}
})
if (cek == 0) {
return NextResponse.json({ success: false, message: "Gagal menambahkan anggota, data tidak ditemukan" }, { status: 404 });
}
if (member.length > 0) {
const dataMember = member.map((v: any) => ({
..._.omit(v, ["idUser", "name", "img"]),
idDiscussion: id,
idUser: v.idUser
}))
const insertMember = await prisma.discussionMember.createMany({
data: dataMember
})
}
// create log user
const log = await createLogUser({ act: 'CREATE', desc: 'User menambah anggota diskusi umum', table: 'discussion', data: String(id) })
return NextResponse.json({ success: true, message: "Berhasil menambahkan anggota diskusi umum" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal menambahkan anggota, coba lagi nanti (error : 500)" }, { status: 500 });
}
}
// MENGELUARKAN ANGGOTA
export async function DELETE(request: Request, context: { params: { id: string } }) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { id } = context.params
const { idUser } = (await request.json());
const cek = await prisma.discussion.count({
where: {
id,
isActive: true
}
})
if (cek == 0) {
return NextResponse.json({ success: false, message: "Gagal, data tidak ditemukan" }, { status: 404 });
}
const deleteMember = await prisma.discussionMember.deleteMany({
where: {
idDiscussion: id,
idUser
}
})
// create log user
const log = await createLogUser({ act: 'DELETE', desc: 'User mengeluarkan anggota diskusi umum', table: 'discussion', data: String(id) })
return NextResponse.json({ success: true, message: "Berhasil mengeluarkan anggota diskusi umum" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mengeluarkan anggota, coba lagi nanti (error : 500)" }, { status: 500 });
}
}

112
src/app/api/discussion-general/[id]/route.ts Normal file
View File

@@ -0,0 +1,112 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash";
import moment from "moment";
import { NextResponse } from "next/server";
export async function GET(request: Request, context: { params: { id: string } }) {
try {
let dataFix
const { id } = context.params
const { searchParams } = new URL(request.url);
const kategori = searchParams.get("cat");
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const cek = await prisma.discussion.count({
where: {
id,
isActive: true
}
})
if (cek == 0) {
return NextResponse.json({ success: false, message: "Gagal mendapatkan diskusi, data tidak ditemukan" }, { status: 404 });
}
if (kategori == "detail") {
const data = await prisma.discussion.findUnique({
where: {
id,
isActive: true
},
select: {
id: true,
title: true,
desc: true,
status: true,
createdAt: true,
}
})
dataFix = {
id: data?.id,
title: data?.title,
desc: data?.desc,
status: data?.status,
createdAt: moment(data?.createdAt).format("ll"),
}
} else if (kategori == "komentar") {
const data = await prisma.discussionComment.findMany({
where: {
idDiscussion: id,
isActive: true
},
select: {
id: true,
comment: true,
createdAt: true,
idUser: true,
User: {
select: {
name: true,
img: true
}
}
}
})
dataFix = data.map((v: any) => ({
..._.omit(v, ["createdAt", "User",]),
createdAt: moment(v.createdAt).format("ll"),
username: v.User.name,
img: v.User.img
}))
} else if (kategori == "anggota") {
const data = await prisma.discussionMember.findMany({
where: {
idDiscussion: id,
isActive: true
},
select: {
idUser: true,
User: {
select: {
name: true,
img: true
}
}
}
})
dataFix = data.map((v: any) => ({
..._.omit(v, ["User",]),
name: v.User.name,
img: v.User.img
}))
}
return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: dataFix }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan diskusi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}

6
src/module/discussion_general/index.ts
View File

@@ -1,7 +1,11 @@
import FormCreateDiscussionGeneral from "./ui/create_discussion";
import DetailDiscussionGeneral from "./ui/detail_discussion_general";
import ListDiscussionGeneral from "./ui/list_discussion";
import MemberDiscussionGeneral from "./ui/member_discussion_general";
import NavbarDiscussionGeneral from "./ui/navbar_discussion";
export { ListDiscussionGeneral }
export { NavbarDiscussionGeneral }
export { FormCreateDiscussionGeneral }
export { FormCreateDiscussionGeneral }
export { DetailDiscussionGeneral }
export { MemberDiscussionGeneral }

7
src/module/discussion_general/lib/api_discussion_general.ts
View File

@@ -14,4 +14,9 @@ export const funCreateDiscussionGeneral = async (data: { idGroup: string, title:
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}
}
export const funGetOneDiscussionGeneral = async (id: string, path: string) => {
const response = await fetch(`/api/discussion-general/${id}${(path) ? path : ''}`, { next: { tags: ['discussion-general'] } });
return await response.json().catch(() => null);
}

19
src/module/discussion_general/lib/type_discussion_general.ts
View File

@@ -2,4 +2,21 @@ export interface IFormMemberDisscussionGeneral {
idUser: string,
name: string,
img: string
}
}
export interface IDetailDiscussionGeneral{
id: string
title: string
desc: string
status: number
createdAt: string
}
export interface IComentsDisscussionGeneral{
id: string
comment: string
createdAt: string
idUser: string
img: string
username: string
}

3
src/module/discussion_general/lib/val_discussion_general.ts
View File

@@ -1,4 +1,5 @@
import { hookstate } from "@hookstate/core";
import { IFormMemberDisscussionGeneral } from "./type_discussion_general";
export const globalMemberDiscussionGeneral = hookstate<IFormMemberDisscussionGeneral[]>([]);
export const globalMemberDiscussionGeneral = hookstate<IFormMemberDisscussionGeneral[]>([]);
export const globalRefreshDiscussionGeneral = hookstate<boolean>(false);

380
src/module/discussion_general/ui/detail_discussion_general.tsx Normal file
View File

@@ -0,0 +1,380 @@
"use client"
import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { globalIsAdminDivision, globalIsMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import "moment/locale/id";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { GrChatOption } from "react-icons/gr";
import { HiMenu } from "react-icons/hi";
import { VscSend } from "react-icons/vsc";
import { useWibuRealtime } from "wibu-realtime";
import { funGetOneDiscussionGeneral } from "../lib/api_discussion_general";
import { IComentsDisscussionGeneral, IDetailDiscussionGeneral } from "../lib/type_discussion_general";
import { globalRefreshDiscussionGeneral } from "../lib/val_discussion_general";
import DrawerDetailDiscussionGeneral from "./drawer_detail_discussion_general";
import { BiSolidCommentDetail } from "react-icons/bi";
export default function DetailDiscussionGeneral() {
const [isData, setData] = useState<IDetailDiscussionGeneral>()
const [isDataKomentar, setDataKomentar] = useState<IComentsDisscussionGeneral[]>([])
const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string }>()
const [isLoad, setIsLoad] = useState(true)
const [loadingKomentar, setLoadingKomentar] = useState(false)
const refresh = useHookstate(globalRefreshDiscussionGeneral)
const roleLogin = useHookstate(globalRole)
const [isCreator, setCreator] = useState(false)
const [isUser, setUser] = useState('')
const adminLogin = useHookstate(globalIsAdminDivision)
const memberDivision = useHookstate(globalIsMemberDivision)
const tema = useHookstate(TEMA)
const router = useRouter()
const [openDrawer, setOpenDrawer] = useState(false)
const isMobile = useMediaQuery('(max-width: 369px)')
const isMobile2 = useMediaQuery("(max-width: 438px)")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const getData = async (loading: boolean) => {
try {
setIsLoad(loading)
const response = await funGetOneDiscussionGeneral(param.id, "?cat=detail")
if (response.success) {
setData(response.data)
} else {
toast.error(response.message)
}
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan data, coba lagi nanti")
} finally {
setIsLoad(false)
}
}
useShallowEffect(() => {
getData(true)
}, [refresh.get()])
// useShallowEffect(() => {
// if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-detail' && i.id == param.id)) {
// getData(false)
// }
// if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-delete' && i.id == param.id && i.user != isUser)) {
// toast.error("Data telah di hapus, anda akan beralih ke halaman list diskusi")
// setTimeout(() => {
// router.push(`/division/${param.id}/discussion`)
// }, 1000)
// }
// }, [dataRealTime])
async function getKomentar(loading: boolean) {
try {
setLoadingKomentar(loading)
const response = await funGetOneDiscussionGeneral(param.id, "?cat=komentar")
if (response.success) {
setData(response.data)
} else {
toast.error(response.message)
}
} catch (error) {
console.error(error)
} finally {
setLoadingKomentar(false)
}
}
// const sendComent = async () => {
// try {
// if (isComent.trim() == "") {
// return toast.error("Masukkan Komentar Anda")
// }
// const response = await funCreateComent(id, { comment: isComent, idDiscussion: param.detail })
// if (response.success) {
// setIsComent("")
// setDataRealtime([{
// category: "discussion-detail",
// id: id,
// }])
// reloadData()
// } else {
// toast.error(response.message)
// }
// } catch (error) {
// console.error(error)
// }
// }
return (
<Box>
<LayoutNavbarNew back={`/discussion`} title="Diskusi"
menu={
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || adminLogin.get() || isCreator) ?
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
: <></>
}
/>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDetailDiscussionGeneral onSuccess={(val) => setOpenDrawer(false)} id={param.id} status={Number(isData?.status)} />
</LayoutDrawer>
<Box p={20}>
{isLoad ?
Array(1)
.fill(null)
.map((_, i) => (
<Box key={i} pl={5} pr={5}>
<Box>
<Flex
justify={"space-between"}
align={"center"}
>
<Group>
<Skeleton width={60} height={60} radius={100} />
<Box>
<Skeleton width={80} height={20} radius={"md"} />
<Skeleton mt={8} width={60} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"20%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
</Box>
</Box>
)) :
<>
{isDataKomentar?.length == 0 ?
<Box mb={60} pl={5} pr={5}>
<Grid align='center'>
<Grid.Col span={1}>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<BiSolidCommentDetail size={25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={8}>
<Box pl={isMobile2 ? 40 : 30}>
<Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.title}</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
{isData?.createdAt}
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<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={30} c={'#8C8C8C'}>
{isDataKomentar?.length ? <Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>{isDataKomentar?.length} Komentar</Text>
</Group > : ""}
</Group>
</Box>
:
<Box mb={20}>
<Grid align='center'>
<Grid.Col span={1}>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<BiSolidCommentDetail size={25} color={tema.get().utama} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={8}>
<Box pl={isMobile2 ? 40 : 30}>
<Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.title}</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
{isData?.createdAt}
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<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={30} c={'#8C8C8C'}>
{isDataKomentar?.length ? <Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>{isDataKomentar.length} Komentar</Text>
</Group > : ""}
</Group>
</Box>
}
</>
}
<Box pl={10} pr={10} mb={60}>
{isLoad ?
Array(2)
.fill(0)
.map((_, i) => (
<Box key={i} p={10}>
<Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
<Group>
<Skeleton width={40} height={40} radius={100} />
<Box>
<Skeleton width={60} height={20} radius={"md"} />
</Box>
</Group>
<Skeleton width={"50%"} height={20} radius={"md"} />
</Flex>
<Box mt={10}>
<Skeleton width={"100%"} height={50} radius={"md"} />
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Skeleton width={"30%"} height={20} radius={"md"} />
</Group>
</Box>
<Box mt={20}>
<Skeleton width={"100%"} height={1} radius={"md"} />
</Box>
</Box>
)) :
isDataKomentar.map((v, i) => {
return (
<Box key={i} p={10} >
<Grid align="center">
<Grid.Col span={1}>
<Avatar alt="it's me" size="md" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} />
</Grid.Col>
<Grid.Col span={8}>
<Box>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 25 : 15} fz={isMobile ? 15 : 16}>
{v.username}
</Text>
</Box>
</Grid.Col>
<Grid.Col span={3}>
<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
style={{
overflowWrap: "break-word"
}}
>
{v.comment}
</Text>
</Spoiler>
</Box>
<Box mt={20}>
<Divider size={"xs"} />
</Box>
</Box>
);
})
}
</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={tema.get().bgUtama}>
<Box bg={tema.get().bgUtama} >
<Group justify="flex-end">
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
</Group>
<Box mb={20} bg={tema.get().bgUtama}>
<Grid bg={"white"} style={{
border: '1px solid gray',
borderRadius: 40
}} justify="center" align="center">
<Grid.Col span={10}>
<TextInput
styles={{
input: {
color: tema.get().utama,
border: "none",
backgroundColor: "transparent"
},
}}
size="md"
placeholder="Kirim Komentar"
disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}
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 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}>
<VscSend size={30} />
</ActionIcon>
</Center>
</Grid.Col>
</Grid>
</Box>
</Box>
</Box>
}
</Box>
)
}

163
src/module/discussion_general/ui/drawer_detail_discussion_general.tsx Normal file
View File

@@ -0,0 +1,163 @@
import { keyWibu, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { BsTrash3 } from "react-icons/bs";
import { FaCheck, FaPencil, FaUsers } from "react-icons/fa6";
import { MdClose } from "react-icons/md";
import { useWibuRealtime } from "wibu-realtime";
import { globalRefreshDiscussionGeneral } from "../lib/val_discussion_general";
export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }: { onSuccess: (val: boolean) => void, id: string, status: number }) {
const [isValModal, setValModal] = useState(false)
const [isValModalStatus, setValModalStatus] = useState(false)
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const refresh = useHookstate(globalRefreshDiscussionGeneral)
const tema = useHookstate(TEMA)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [loadingUpdate, setLoadingUpdate] = useState(false)
const [loadingDelete, setLoadingDelete] = useState(false)
// async function fetchStatusDiscussion(val: boolean) {
// try {
// setLoadingUpdate(true)
// if (val) {
// const response = await funEditStatusDiscussion(id, { status: status })
// if (response.success) {
// toast.success(response.message)
// refresh.set(!refresh.get())
// setDataRealtime([{
// category: "discussion-detail",
// id: id,
// }])
// onSuccess(false)
// } else {
// toast.error(response.message)
// }
// }
// } catch (error) {
// console.error(error);
// toast.error("Gagal menambahkan diskusi, coba lagi nanti");
// } finally {
// setLoadingUpdate(false)
// setValModalStatus(false)
// }
// }
// async function fetchDeleteDiscussion(val: boolean) {
// try {
// if (val) {
// setLoadingDelete(true)
// const response = await funDeleteDiscussion(id)
// if (response.success) {
// setDataRealtime([
// {
// category: "discussion-delete",
// id: id,
// user: response.user
// },
// {
// category: "division/" + param.id + "/discussion",
// }
// ])
// toast.success(response.message)
// onSuccess(false)
// router.push(`/division/${param.id}/discussion`)
// } else {
// toast.error(response.message)
// }
// }
// } catch (error) {
// console.error(error);
// toast.error("Gagal hapus diskusi, coba lagi nanti");
// } finally {
// setLoadingDelete(false)
// setValModal(false)
// }
// }
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
spacing={{ base: 'xl', sm: 'xl' }}
verticalSpacing={{ base: 'xl', sm: 'xl' }}
>
<Flex onClick={() => window.location.href = `/discussion/${param.id}/member/`} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaUsers size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Anggota</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = `/discussion/${param.id}/update/`} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Edit</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setValModalStatus(true)} >
{status === 1 ? (
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<MdClose size={30} color={tema.get().utama} />
</Box>
<Text style={{ color: tema.get().utama }}>Tutup Diskusi</Text>
</Flex>
</>
) : (
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<FaCheck size={30} color={tema.get().utama} />
</Box>
<Text style={{ color: tema.get().utama }}>Buka Diskusi</Text>
</Flex>
</>
)}
</Flex>
<Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsTrash3 size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Hapus</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin menghapus diskusi ini?"
onYes={(val) => {
// fetchDeleteDiscussion(val)
}} />
<LayoutModal loading={loadingUpdate} opened={isValModalStatus} onClose={() => setValModalStatus(false)}
description="Apakah Anda yakin ingin mengubah status diskusi ini?"
onYes={(val) => {
// fetchStatusDiscussion(val)
}} />
</Box>
)
}

9
src/module/discussion_general/ui/list_discussion.tsx
View File

@@ -1,23 +1,22 @@
'use client'
import { currentScroll, globalNotifPage, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { ActionIcon, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useParams, useRouter } from "next/navigation";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { BiSolidCommentDetail } from "react-icons/bi";
import { GrChatOption } from "react-icons/gr";
import { HiMagnifyingGlass } from "react-icons/hi2";
import { useWibuRealtime } from "wibu-realtime";
import { funGetAllDiscussionGeneral } from "../lib/api_discussion_general";
import { BiSolidCommentDetail } from "react-icons/bi";
export default function ListDiscussionGeneral() {
const [isData, setData] = useState<any[]>([])
const [searchQuery, setSearchQuery] = useState('')
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const router = useRouter()
@@ -229,7 +228,7 @@ export default function ListDiscussionGeneral() {
overflowWrap: "break-word"
}}
onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
router.push(`/discussion/${v.id}`)
}}
>
{v.desc}

278
src/module/discussion_general/ui/member_discussion_general.tsx Normal file
View File

@@ -0,0 +1,278 @@
"use client"
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { AiOutlineUserAdd } from 'react-icons/ai';
import { FaPencil, FaToggleOff, FaUserTie } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
import { funGetOneDiscussionGeneral } from '../lib/api_discussion_general';
import { IFormMemberDisscussionGeneral } from '../lib/type_discussion_general';
export default function MemberDiscussionGeneral() {
const router = useRouter()
const [openDrawer, setDrawer] = useState(false)
const [openDrawerInfo, setDrawerInfo] = useState(false)
const [valActive, setValActive] = useState(true)
const param = useParams<{ id: string }>()
const [member, setMember] = useState<IFormMemberDisscussionGeneral[]>([])
const [loading, setLoading] = useState(true)
const [valChooseMember, setChooseMember] = useState("")
const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false)
const [valChooseMemberName, setChooseMemberName] = useState("")
const [isOpenModal, setOpenModal] = useState(false)
const [isOpenModalStatus, setOpenModalStatus] = useState(false)
const roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 455px)')
const isMobile2 = useMediaQuery("(max-width: 438px)")
const tema = useHookstate(TEMA)
const [loadingStatus, setLoadingStatus] = useState(false)
const [loadingDelete, setLoadingDelete] = useState(false)
async function getOneData(loading: boolean) {
try {
setLoading(loading)
const res = await funGetOneDiscussionGeneral(param.id, "?cat=anggota");
if (res.success) {
setMember(res.data)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan data, coba lagi nanti");
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getOneData(true);
}, [param.id])
async function onClickMember(id: string, status: boolean) {
setChooseMember(id)
setChooseMemberStatus(status)
setDrawer(true)
}
// async function deleteMember() {
// try {
// setLoadingDelete(true)
// const res = await funDeleteMemberDivision(param.id, { id: valChooseMember })
// if (res.success) {
// toast.success(res.message)
// setDrawer(false)
// getOneData(false)
// } else {
// toast.error(res.message)
// }
// } catch (error) {
// console.error(error);
// toast.error("Gagal mendapatkan divisi, coba lagi nanti");
// } finally {
// setLoadingDelete(false)
// setOpenModal(false)
// }
// }
// async function editStatusAdmin() {
// try {
// const res = await funEditStatusAdminDivision(param.id, { id: valChooseMember, isAdmin: valChooseMemberStatus })
// if (res.success) {
// toast.success(res.message)
// getOneData(false)
// } else {
// toast.error(res.message)
// }
// setDrawer(false)
// } catch (error) {
// console.error(error);
// toast.error("Gagal mendapatkan divisi, coba lagi nanti");
// }
// }
// async function editStatusDivisi() {
// try {
// setLoadingStatus(true)
// const res = await funUpdateStatusDivision(param.id, { isActive: valActive })
// if (res.success) {
// toast.success(res.message)
// getOneData(false)
// } else {
// toast.error(res.message)
// }
// } catch (error) {
// console.error(error);
// toast.error("Gagal mendapatkan divisi, coba lagi nanti");
// } finally {
// setDrawerInfo(false)
// setLoadingStatus(false)
// setOpenModalStatus(false)
// }
// }
return (
<Box>
<LayoutNavbarNew back={"/discussion/" + param.id} title="Anggota Diskusi" menu={<></>} />
<Box p={20}>
{/* <Box>
<Text fw={"bold"}>Deskripsi Divisi</Text>
<Box p={20} bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}>
{
loading ?
Array(3)
.fill(null)
.map((_, i) => (
<Stack align="stretch" justify="center" key={i} mb={10}>
<Skeleton height={10} radius="md" m={0} />
</Stack>
))
:
(deskripsi != null && deskripsi != undefined && deskripsi != "") ?
<Text ta={"justify"}>{deskripsi}</Text>
: <Text ta={"center"} c={"dimmed"} fs={"italic"}>Tidak ada deskripsi</Text>
}
</Box>
</Box> */}
<Box>
<Box>
<Text>{member.length} Anggota</Text>
</Box>
<Box p={20} bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}>
<Box>
{loading ?
<></>
:
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size={'lg'}>
<AiOutlineUserAdd size={30} color={tema.get().utama} />
</Avatar>
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
</Group>
}
</Box>
<Box pt={10}>
<Box mb={10}>
{loading
? Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList />
</Box>
))
: member.map((v, i) => {
return (
<Box key={i}>
<Grid align='center' mt={10}
onClick={() => {
if ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) {
// onClickMember(v.id, (v.isAdmin) ? true : false)
setChooseMemberName(v.name)
}
}}
>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
</Grid.Col>
<Grid.Col span={11}>
<Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})
}
</Box>
</Box>
</Box>
</Box>
</Box>
<LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title={valChooseMemberName}>
<Box>
<Group align='center' mb={20}
// onClick={() => valActive ? editStatusAdmin() : undefined}
>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<FaUserTie size={30} color={valActive ? tema.get().utama : "gray"} />
</ActionIcon>
<Text c={valActive ? tema.get().utama : "gray"}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
</Group>
<Group align='center' onClick={() => valActive ? setOpenModal(true) : undefined}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<IoIosCloseCircle size={40} color={valActive ? tema.get().utama : "gray"} />
</ActionIcon>
<Text c={valActive ? tema.get().utama : "gray"}>Keluarkan dari divisi</Text>
</Group>
</Box>
</LayoutDrawer>
<LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengeluarkan anggota?"
onYes={(val) => {
// if (!val) {
// setOpenModal(false)
// } else {
// deleteMember()
// }
}} />
<LayoutDrawer opened={openDrawerInfo} onClose={() => setDrawerInfo(false)} title={"Menu"}>
<Box>
<Stack pt={10}>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 3 }} >
<Flex onClick={() => router.push('/division/edit/' + param.id)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Edit Divisi</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModalStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaToggleOff size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>{valActive ? "Non Aktifkan Divisi" : "Aktifkan Divisi"}</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<LayoutModal loading={loadingStatus} opened={isOpenModalStatus} onClose={() => setOpenModalStatus(false)}
description="Apakah Anda yakin ingin mangubah status aktifasi divisi?"
onYes={(val) => {
// if (!val) {
// setOpenModalStatus(false)
// } else {
// editStatusDivisi()
// }
}} />
</Box>
);
}

7
src/module/division_new/ui/create_division.tsx
View File

@@ -49,8 +49,11 @@ export default function CreateDivision() {
const cek = checkAll()
if (!cek)
return false
if (member.length <= 1)
return toast.error("Error! Silahkan pilih anggota lebih dari 1")
if (member.length == 0)
return toast.error("Error! Silahkan pilih anggota")
// if (member.length <= 1)
// return toast.error("Error! Silahkan pilih anggota lebih dari 1")
setChooseAdmin(true)
}

4
src/module/document/ui/drawer_menu_document_division.tsx
View File

@@ -149,12 +149,12 @@ export default function DrawerMenuDocumentDivision() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf, .doc, .docx, .xls, .xlsx dengan ukuran maksimal 3 MB')
}}
>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>

76
src/module/document/ui/navbar_document_division.tsx
View File

@@ -34,6 +34,7 @@ export default function NavbarDocumentDivision() {
const [isOpenModalView, setOpenModalView] = useState(false);
const [isExtension, setExtension] = useState("");
const [idStorage, setIdStorage] = useState("");
const [nameFileFull, setNameFileFull] = useState("");
const [name, setName] = useState("");
const [isOpen, setOpen] = useState(false);
const [isDelete, setIsDelete] = useState(false);
@@ -253,9 +254,18 @@ export default function NavbarDocumentDivision() {
setRename(true);
}
const onDownload = async () => {
const onDownload = async (kategori: string, file?: { idFile: string, nameFile: string }) => {
try {
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${selectedFiles[0].idStorage}`;
let idStorageDownload, nameFileDownload = ""
if (kategori == "selected") {
idStorageDownload = selectedFiles[0].idStorage
nameFileDownload = `${selectedFiles[0].name}.${selectedFiles[0].extension}`
} else if (kategori == "klik") {
idStorageDownload = file?.idFile
nameFileDownload = String(file?.nameFile)
}
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idStorageDownload}`;
const response = await fetch(fileUrl);
const blob = await response.blob();
@@ -263,7 +273,7 @@ export default function NavbarDocumentDivision() {
const link = document.createElement("a");
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = `${selectedFiles[0].name}.${selectedFiles[0].extension}`; // Nama file yang akan diunduh
link.download = nameFileDownload; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
@@ -341,7 +351,7 @@ export default function NavbarDocumentDivision() {
direction={"column"}
onClick={() => {
if (selectedFiles.length > 0 && copyAllowed) {
onDownload();
onDownload("selected");
}
}}
>
@@ -663,9 +673,7 @@ export default function NavbarDocumentDivision() {
</Box>
) : (
dataDocument.map((v, i) => {
const isSelected = selectedFiles.some(
(i: any) => i?.id == v.id
);
const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
return (
<Box key={i}>
<Box mt={10} mb={10}>
@@ -680,20 +688,17 @@ export default function NavbarDocumentDivision() {
xl: 1,
}}
onClick={() => {
if (
v.category == "FOLDER" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
router.push("?path=" + v.id);
} else if (
v.category == "FILE" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
} else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
setExtension(v.extension);
setIdStorage(v.idStorage);
setOpenModalView(true);
setNameFileFull(v.name + "." + v.extension)
if (v.extension != "doc" && v.extension != "docx" && v.extension != "xls" && v.extension != "xlsx" && v.extension != "ppt" && v.extension != "pptx") {
setOpenModalView(true);
} else {
onDownload("klik", { idFile: v.idStorage, nameFile: v.name + "." + v.extension })
}
}
}}
>
@@ -712,7 +717,13 @@ export default function NavbarDocumentDivision() {
{v.category == "FOLDER" ? (
<FcFolder size={isMobile ? 40 : 50} />
) : v.extension == "pdf" ||
v.extension == "csv" ? (
v.extension == "csv" ||
v.extension == "doc" ||
v.extension == "docx" ||
v.extension == "xls" ||
v.extension == "xlsx" ||
v.extension == "ppt" ||
v.extension == "pptx" ? (
<FcDocument size={isMobile ? 40 : 50} />
) : (
<FcImageFile size={isMobile ? 40 : 50} />
@@ -723,7 +734,13 @@ export default function NavbarDocumentDivision() {
{v.category == "FOLDER" ? (
<FcFolder size={isMobile ? 40 : 50} />
) : v.extension == "pdf" ||
v.extension == "csv" ? (
v.extension == "csv" ||
v.extension == "doc" ||
v.extension == "docx" ||
v.extension == "xls" ||
v.extension == "xlsx" ||
v.extension == "ppt" ||
v.extension == "pptx" ? (
<FcDocument size={isMobile ? 40 : 50} />
) : (
<FcImageFile size={isMobile ? 40 : 50} />
@@ -747,20 +764,17 @@ export default function NavbarDocumentDivision() {
<Flex
direction={"column"}
onClick={() => {
if (
v.category == "FOLDER" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
router.push("?path=" + v.id);
} else if (
v.category == "FILE" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
} else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
setExtension(v.extension);
setIdStorage(v.idStorage);
setOpenModalView(true);
setNameFileFull(v.name + "." + v.extension)
if (v.extension != "doc" && v.extension != "docx" && v.extension != "xls" && v.extension != "xlsx" && v.extension != "ppt" && v.extension != "pptx") {
setOpenModalView(true);
} else {
onDownload("klik", { idFile: v.idStorage, nameFile: v.name + "." + v.extension })
}
}
}}
>

19
src/module/home/ui/view_detail_feature.tsx
View File

@@ -120,6 +120,25 @@ export default function ViewDetailFeature() {
<Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Jabatan</Text>
</Center>
</Box>
{
roleLogin.get() == "cosupadmin" &&
<Box onClick={() => router.push('/banner')}>
<Center>
<ActionIcon variant="gradient"
size={isMobile ? 50 : 68}
aria-label="Gradient action icon"
radius={100}
// gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
bg={tema.get().bgFiturHome}
>
<RiLayoutTop2Fill size={isMobile ? 25 : 35} color={tema.get().utama} />
</ActionIcon>
</Center>
<Center>
<Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Banner</Text>
</Center>
</Box>
}
{
roleLogin.get() == "supadmin" &&
<>

5
src/module/project/ui/add_file_detail_project.tsx
View File

@@ -69,7 +69,6 @@ export default function AddFileDetailProject() {
}
const response = await funAddFileProject(param.id, fd)
console.group(response)
if (response.success) {
setDataRealtime([{
category: "project-detail-file",
@@ -107,9 +106,9 @@ export default function AddFileDetailProject() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf, .doc, .docx, .xls, .xlsx dengan ukuran maksimal 3 MB')
}}
>
</Dropzone>

4
src/module/project/ui/create_project.tsx
View File

@@ -413,9 +413,9 @@ export default function CreateProject() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf, .doc, .docx, .xls, .xlsx dengan ukuran maksimal 3 MB')
}}
></Dropzone>

60
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -7,8 +7,9 @@ import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
import { FaTrash } from 'react-icons/fa6';
import { ImDownload3 } from "react-icons/im";
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { IDataFileProject } from '../lib/type_project';
@@ -113,6 +114,28 @@ export default function ListFileDetailProject() {
}
}, [dataRealTime])
const onDownload = async () => {
try {
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idStorage}`;
const response = await fetch(fileUrl);
const blob = await response.blob();
// Create a link element, use Blob URL
const link = document.createElement("a");
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = `${nameData}`; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
// Cleanup
window.URL.revokeObjectURL(url);
document.body.removeChild(link);
} catch (error) {
alert(error);
}
};
return (
<>
<Box pt={20}>
@@ -167,13 +190,12 @@ export default function ListFileDetailProject() {
}}>
{item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "PNG" && <BsFiletypePng size={30} />}
{item.extension == "JPG" && <BsFiletypeJpg size={30} />}
{item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
{(item.extension == "png" || item.extension == "PNG") && <BsFiletypePng size={30} />}
{(item.extension == "jpg" || item.extension == "jpeg" || item.extension == "JPG" || item.extension == "JPEG") && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
{(item.extension == "doc" || item.extension == "docx") && <BsFiletypeDocx size={30} />}
{(item.extension == "xls" || item.extension == "xlsx") && <BsFiletypeXlsx size={30} />}
{(item.extension == "ppt" || item.extension == "pptx") && <BsFiletypePptx size={30} />}
</Grid.Col>
<Grid.Col
span={{
@@ -203,15 +225,25 @@ export default function ListFileDetailProject() {
<LayoutDrawer opened={openDrawer} title={<Text truncate="end">{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
{
(isExtension != "doc" && isExtension != "docx" && isExtension != "xls" && isExtension != "xlsx" && isExtension != "ppt" && isExtension != "pptx") &&
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
</Box>
</Flex>
}
<Flex onClick={() => { onDownload() }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
<ImDownload3 size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
<Text c={tema.get().utama}>Download</Text>
</Box>
</Flex>
@@ -227,7 +259,7 @@ export default function ListFileDetailProject() {
<FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
<Text c={reason == null ? tema.get().utama : "gray"}>Hapus</Text>
</Box>
</Flex>
}

47
src/module/project/ui/results_file.tsx
View File

@@ -1,10 +1,38 @@
import { Box, Center, Grid, Group, Text } from '@mantine/core';
import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import { BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
import { IListFileTaskProject } from '../lib/type_project';
export default function ResultsFile({ name, extension }: IListFileTaskProject) {
const [fixed, setFixed] = useState(extension)
function cekExtension() {
let jadi = extension
if (extension == "msword") {
jadi = "doc"
} else if (extension == "vnd.openxmlformats-officedocument.wordprocessingml.document") {
jadi = "docx"
} else if (extension == "vnd.ms-excel") {
jadi = "xls"
} else if (extension == "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
jadi = "xlsx"
} else if (extension == "vnd.ms-powerpoint") {
jadi = "ppt"
} else if (extension == "vnd.openxmlformats-officedocument.presentationml.presentation") {
jadi = "pptx"
} else {
jadi = extension
}
setFixed(jadi)
}
useShallowEffect(() => {
cekExtension()
}, []);
return (
<Box style={{
borderRadius: 10,
@@ -14,11 +42,14 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center >
{extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "pdf" && <BsFiletypePdf size={30} />}
{fixed == "csv" && <BsFiletypeCsv size={30} />}
{fixed == "png" && <BsFiletypePng size={30} />}
{fixed == "jpg" || fixed == "jpeg" && <BsFiletypeJpg size={30} />}
{fixed == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "doc" || fixed == "docx" && <BsFiletypeDocx size={30} />}
{fixed == "xls" || fixed == "xlsx" && <BsFiletypeXlsx size={30} />}
{fixed == "ppt" || fixed == "pptx" && <BsFiletypePptx size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>

4
src/module/task/ui/add_file_detail_task.tsx
View File

@@ -107,9 +107,9 @@ export default function AddFileDetailTask() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf, .doc, .docx, .xls, .xlsx dengan ukuran maksimal 3 MB')
}}
>
</Dropzone>

4
src/module/task/ui/create_task.tsx
View File

@@ -336,9 +336,9 @@ export default function CreateTask() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf, .doc, .docx, .xls, .xlsx dengan ukuran maksimal 3 MB')
}}
></Dropzone>

59
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -1,18 +1,19 @@
'use client'
import { globalRole, keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { globalIsMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from "react-icons/bs";
import { FaTrash } from "react-icons/fa6";
import { ImDownload3 } from "react-icons/im";
import { useWibuRealtime } from "wibu-realtime";
import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataFileTaskDivision } from "../lib/type_task";
import { globalIsMemberDivision } from "@/module/division_new";
export default function ListFileDetailTask() {
const roleLogin = useHookstate(globalRole)
@@ -111,6 +112,28 @@ export default function ListFileDetailTask() {
}
}, [dataRealTime])
const onDownload = async () => {
try {
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idDataStorage}`;
const response = await fetch(fileUrl);
const blob = await response.blob();
// Create a link element, use Blob URL
const link = document.createElement("a");
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = `${nameData}`; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
// Cleanup
window.URL.revokeObjectURL(url);
document.body.removeChild(link);
} catch (error) {
alert(error);
}
};
return (
<Box pt={20}>
<Text fw={'bold'} c={tema.get().utama}>File</Text>
@@ -159,13 +182,12 @@ export default function ListFileDetailTask() {
<Center >
{item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "PNG" && <BsFiletypePng size={30} />}
{item.extension == "JPG" && <BsFiletypeJpg size={30} />}
{item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
{(item.extension == "png" || item.extension == "PNG") && <BsFiletypePng size={30} />}
{(item.extension == "jpg" || item.extension == "jpeg" || item.extension == "JPG" || item.extension == "JPEG") && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
{(item.extension == "doc" || item.extension == "docx") && <BsFiletypeDocx size={30} />}
{(item.extension == "xls" || item.extension == "xlsx") && <BsFiletypeXlsx size={30} />}
{(item.extension == "ppt" || item.extension == "pptx") && <BsFiletypePptx size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
@@ -185,15 +207,24 @@ export default function ListFileDetailTask() {
<LayoutDrawer opened={openDrawer} title={<Text truncate={'end'}>{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
{
(isExtension != "doc" && isExtension != "docx" && isExtension != "xls" && isExtension != "xlsx" && isExtension != "ppt" && isExtension != "pptx") &&
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
</Box>
</Flex>
}
<Flex onClick={() => { onDownload() }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
<ImDownload3 size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
<Text c={tema.get().utama}>Download</Text>
</Box>
</Flex>
{

50
src/module/task/ui/results_file.tsx
View File

@@ -1,9 +1,38 @@
import { Box, Center, Grid, Group, Text } from '@mantine/core';
import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import React, { useState } from 'react';
import { BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
import { IListFileTask } from '../lib/type_task';
import { useShallowEffect } from '@mantine/hooks';
export default function ResultsFile({ name, extension }: IListFileTask) {
const [fixed, setFixed] = useState(extension)
function cekExtension() {
let jadi = extension
if (extension == "msword") {
jadi = "doc"
} else if (extension == "vnd.openxmlformats-officedocument.wordprocessingml.document") {
jadi = "docx"
} else if (extension == "vnd.ms-excel") {
jadi = "xls"
} else if (extension == "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
jadi = "xlsx"
} else if (extension == "vnd.ms-powerpoint") {
jadi = "ppt"
} else if (extension == "vnd.openxmlformats-officedocument.presentationml.presentation") {
jadi = "pptx"
} else {
jadi = extension
}
setFixed(jadi)
}
useShallowEffect(() => {
cekExtension()
}, []);
return (
<Box style={{
borderRadius: 10,
@@ -13,15 +42,14 @@ export default function ResultsFile({ name, extension }: IListFileTask) {
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center>
{extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" && <BsFiletypeJpg size={30} />}
{extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "PNG" && <BsFiletypePng size={30} />}
{extension == "JPG" && <BsFiletypeJpg size={30} />}
{extension == "JPEG" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "pdf" && <BsFiletypePdf size={30} />}
{fixed == "csv" && <BsFiletypeCsv size={30} />}
{fixed == "png" && <BsFiletypePng size={30} />}
{fixed == "jpg" || fixed == "jpeg" && <BsFiletypeJpg size={30} />}
{fixed == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "doc" || fixed == "docx" && <BsFiletypeDocx size={30} />}
{fixed == "xls" || fixed == "xlsx" && <BsFiletypeXlsx size={30} />}
{fixed == "ppt" || fixed == "pptx" && <BsFiletypePptx size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>