upd: link upload
Deskripsi: - update struktur db - api tambah link pada projet - api deelete link pada project - api get link pada project - api tambah link pada tugas divisi - api delete link pada tugas divisi - api get link pada tugas divisi - tampilan modal tambah link pada project dan tugas divisi - tampilan list link pada project dan tugas divisi - tampilan modal detail link pada project dan tugas divisi No Issues
This commit is contained in:
231
src/module/project/ui/list_link_detail_project.tsx
Normal file
231
src/module/project/ui/list_link_detail_project.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
'use client'
|
||||
import { urlCompleted } from '@/lib/urlCompleted';
|
||||
import { globalRole, keyWibu, LayoutDrawer, TEMA } from '@/module/_global';
|
||||
import LayoutModal from '@/module/_global/layout/layout_modal';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { FaTrash } from 'react-icons/fa6';
|
||||
import { LuLink } from 'react-icons/lu';
|
||||
import { RiExternalLinkLine } from 'react-icons/ri';
|
||||
import { useWibuRealtime } from 'wibu-realtime';
|
||||
import { funDeleteLinkProject, funGetOneProjectById } from '../lib/api_project';
|
||||
import { IDataLinkProject } from '../lib/type_project';
|
||||
import { globalIsMemberProject } from '../lib/val_project';
|
||||
|
||||
export default function ListLinkDetailProject() {
|
||||
const [isData, setData] = useState<IDataLinkProject[]>([])
|
||||
const param = useParams<{ id: string }>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadingDelete, setLoadingDelete] = useState(false)
|
||||
const [idData, setIdData] = useState('')
|
||||
const [linkData, setLinkData] = useState('')
|
||||
const [openDrawer, setOpenDrawer] = useState(false)
|
||||
const [isOpenModal, setOpenModal] = useState(false)
|
||||
const tema = useHookstate(TEMA)
|
||||
const roleLogin = useHookstate(globalRole)
|
||||
const memberProject = useHookstate(globalIsMemberProject)
|
||||
const isMobile = useMediaQuery("(max-width: 350px)");
|
||||
const [reason, setReason] = useState("")
|
||||
const [dataRealTime, setDataRealtime] = useWibuRealtime({
|
||||
WIBU_REALTIME_TOKEN: keyWibu,
|
||||
project: "sdm"
|
||||
})
|
||||
|
||||
async function getOneDataCancel() {
|
||||
try {
|
||||
const res = await funGetOneProjectById(param.id, 'data');
|
||||
if (res.success) {
|
||||
setReason(res.data.reason);
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
getOneDataCancel();
|
||||
}, [param.id])
|
||||
|
||||
async function getOneData(loading: boolean) {
|
||||
try {
|
||||
setLoading(loading)
|
||||
const res = await funGetOneProjectById(param.id, 'link');
|
||||
if (res.success) {
|
||||
setData(res.data)
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal mendapatkan link kegiatan, coba lagi nanti");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
getOneData(true);
|
||||
}, [param.id])
|
||||
|
||||
|
||||
async function onDelete() {
|
||||
try {
|
||||
setLoadingDelete(true)
|
||||
const res = await funDeleteLinkProject(param.id, { idLink: idData });
|
||||
if (res.success) {
|
||||
setDataRealtime([{
|
||||
category: "project-detail-link",
|
||||
id: param.id,
|
||||
}])
|
||||
toast.success(res.message)
|
||||
getOneData(false)
|
||||
setIdData("")
|
||||
setOpenDrawer(false)
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal menghapus link, coba lagi nanti");
|
||||
} finally {
|
||||
setOpenModal(false)
|
||||
setLoadingDelete(false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-link' && i.id == param.id)) {
|
||||
getOneData(false)
|
||||
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
|
||||
getOneDataCancel()
|
||||
}
|
||||
}, [dataRealTime])
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
isData.length > 0
|
||||
&&
|
||||
<Box pt={20}>
|
||||
<Text fw={'bold'} c={tema.get().utama}>Link</Text>
|
||||
<Box bg={"white"} style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 20
|
||||
}}>
|
||||
{
|
||||
isData.map((item, index) => {
|
||||
return (
|
||||
<Box
|
||||
key={index}
|
||||
style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
padding: 10
|
||||
}}
|
||||
mb={10}
|
||||
|
||||
onClick={() => {
|
||||
setLinkData(item.link)
|
||||
setIdData(item.id)
|
||||
setOpenDrawer(true)
|
||||
}}
|
||||
>
|
||||
<Grid justify='center' align='center'>
|
||||
<Grid.Col span={{
|
||||
base: 1.5,
|
||||
xs: 1,
|
||||
sm: 1,
|
||||
md: 1,
|
||||
lg: 1,
|
||||
xl: 1,
|
||||
}}>
|
||||
<LuLink size={30} />
|
||||
</Grid.Col>
|
||||
<Grid.Col
|
||||
span={{
|
||||
base: 10.5,
|
||||
xs: 11,
|
||||
sm: 11,
|
||||
md: 11,
|
||||
lg: 11,
|
||||
xl: 11,
|
||||
}}
|
||||
>
|
||||
<Text style={{
|
||||
overflowWrap: "break-word"
|
||||
}} pl={isMobile ? 10 : 0} truncate="end">{item.link}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Group>
|
||||
</Group>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
|
||||
|
||||
<LayoutDrawer opened={openDrawer} title={<Text truncate="end">Menu</Text>} onClose={() => setOpenDrawer(false)}>
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
|
||||
{
|
||||
<Flex onClick={() => { window.open(urlCompleted(linkData), '_blank', 'noopener,noreferrer') }} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<RiExternalLinkLine size={30} color={tema.get().utama} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={tema.get().utama}>Buka Link</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
}
|
||||
|
||||
{
|
||||
(roleLogin.get() == "user" || roleLogin.get() == "coadmin") && !memberProject.get() ? <></>
|
||||
:
|
||||
<Flex onClick={() => {
|
||||
reason == null ?
|
||||
setOpenModal(true)
|
||||
: setOpenModal(false)
|
||||
}} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={reason == null ? tema.get().utama : "gray"}>Hapus</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
|
||||
|
||||
<LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
|
||||
description="Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan"
|
||||
onYes={(val) => {
|
||||
if (val) {
|
||||
onDelete()
|
||||
} else {
|
||||
setOpenModal(false)
|
||||
}
|
||||
}} />
|
||||
|
||||
</Box>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/modu
|
||||
import LayoutModal from '@/module/_global/layout/layout_modal';
|
||||
import { funGetUserByCookies } from '@/module/auth';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { ActionIcon, Box, Button, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
@@ -11,9 +11,10 @@ import toast from 'react-hot-toast';
|
||||
import { FaFileCirclePlus, FaPencil, FaTrash, FaUsers } from 'react-icons/fa6';
|
||||
import { HiMenu } from 'react-icons/hi';
|
||||
import { IoAddCircle } from 'react-icons/io5';
|
||||
import { LuLink } from 'react-icons/lu';
|
||||
import { MdCancel } from 'react-icons/md';
|
||||
import { useWibuRealtime } from 'wibu-realtime';
|
||||
import { funDeleteProject, funGetOneProjectById } from '../lib/api_project';
|
||||
import { funAddLinkProject, funDeleteProject, funGetOneProjectById } from '../lib/api_project';
|
||||
import { globalIsMemberProject } from '../lib/val_project';
|
||||
|
||||
export default function NavbarDetailProject() {
|
||||
@@ -28,7 +29,10 @@ export default function NavbarDetailProject() {
|
||||
const tema = useHookstate(TEMA)
|
||||
const [reason, setReason] = useState("")
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
const [openNewLink, setOpenNewLink] = useState(false)
|
||||
const [loadingModal, setLoadingModal] = useState(false)
|
||||
const [loadingLink, setLoadingLink] = useState(false)
|
||||
const [valLink, setValLink] = useState("")
|
||||
const [dataRealTime, setDataRealtime] = useWibuRealtime({
|
||||
WIBU_REALTIME_TOKEN: keyWibu,
|
||||
project: "sdm"
|
||||
@@ -52,6 +56,30 @@ export default function NavbarDetailProject() {
|
||||
}
|
||||
}
|
||||
|
||||
async function addLinkProject() {
|
||||
try {
|
||||
setLoadingLink(true)
|
||||
const res = await funAddLinkProject(param.id, { link: valLink });
|
||||
if (res.success) {
|
||||
setDataRealtime([{
|
||||
category: "project-detail-link",
|
||||
id: param.id,
|
||||
user: res.user
|
||||
}])
|
||||
toast.success(res.message)
|
||||
} else {
|
||||
toast.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal menambahkan link, coba lagi nanti");
|
||||
} finally {
|
||||
setLoadingLink(false)
|
||||
setOpenNewLink(false)
|
||||
setValLink("")
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteDataProject() {
|
||||
try {
|
||||
setLoadingModal(true)
|
||||
@@ -157,6 +185,27 @@ export default function NavbarDetailProject() {
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Flex justify={'center'} align={'center'} direction={'column'}
|
||||
style={{
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => {
|
||||
if (reason == null) {
|
||||
setOpen(false)
|
||||
setOpenNewLink(true)
|
||||
} else {
|
||||
null
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<LuLink size={30} color={reason == null ? tema.get().utama : "gray"} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={reason == null ? tema.get().utama : "gray"} ta='center'>Tambah link</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
{
|
||||
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
|
||||
<>
|
||||
@@ -229,11 +278,50 @@ export default function NavbarDetailProject() {
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
</LayoutDrawer >
|
||||
|
||||
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
|
||||
description="Apakah Anda yakin ingin menghapus kegiatan ini?"
|
||||
onYes={(val) => { val ? deleteDataProject() : setOpenModal(false) }} />
|
||||
|
||||
<Modal styles={{
|
||||
body: {
|
||||
borderRadius: 20
|
||||
},
|
||||
content: {
|
||||
borderRadius: 20,
|
||||
border: `2px solid ${"#828AFC"}`
|
||||
}
|
||||
}} opened={openNewLink} onClose={() => setOpenNewLink(false)} centered withCloseButton={false}>
|
||||
<Box p={20}>
|
||||
<Text ta={"center"} fw={"bold"}>Tambah Link</Text>
|
||||
<Box mt={20} mb={20}>
|
||||
<TextInput
|
||||
styles={{
|
||||
input: {
|
||||
color: tema.get().utama,
|
||||
borderRadius: '#828AFC',
|
||||
borderColor: '#828AFC',
|
||||
},
|
||||
}}
|
||||
size="md"
|
||||
radius={10}
|
||||
placeholder="Masukkan link"
|
||||
value={valLink}
|
||||
onChange={(e) => setValLink(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Grid mt={40}>
|
||||
<Grid.Col span={6}>
|
||||
<Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenNewLink(false)}>Batalkan</Button>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Button loading={loadingLink} disabled={loadingLink || valLink == "" ? true : false} variant="subtle" fullWidth color={tema.get().utama} onClick={() => { addLinkProject() }}>Tambah</Button>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Modal>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user