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

fix: pdf viewer

Browse Source 
Deskripsi:
- tampilan modal viewer

No Issues
This commit is contained in:
amel
2025-01-20 14:37:01 +08:00
parent b25074b782
commit 9b95d508b0
5 changed files with 91 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/module/_global/layout/layout_modal_view_file.tsx
View File

@@ -7,7 +7,7 @@ import toast from 'react-hot-toast';
import { funReadPdf } from '../fun/read_pdf';
const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false });
export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) {
export default function LayoutModal({ opened, onClose, extension, fitur, name, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, name?: string, file: string }) {
const [zoom, setZoom] = useState(1)
const [loadingPdf, setLoadingPdf] = useState(true)
const [dataPdf, setDataPdf] = useState([])
@@ -46,80 +46,96 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
}, [file, extension])
return (
<Modal styles={{
content: {
maxWidth: 550,
}
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
<Box
pos="sticky"
top={60}
right={10}
w={"100%"}
pb={10}
<>
<Modal.Root styles={{
content: {
maxWidth: 550,
}
}} opened={opened} onClose={onClose} centered closeOnClickOutside={false} fullScreen>
<Modal.Overlay />
<Modal.Content>
<Modal.Header py={0}>
<Modal.Title>
<Text lineClamp={1}>{name}</Text>
</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pl={0} pr={0}>
<Box
pos="sticky"
top={60}
right={0}
w={"100%"}
pb={10}
px={10}
style={{
background: 'white',
zIndex: 999,
}}
>
<Group justify="space-between">
<Flex direction="row" gap="xs" align="center">
<Button variant="light" onClick={handleZoomOut}> - </Button>
<Button variant="light" onClick={handleZoomIn}> + </Button>
</Flex>
style={{
background: 'white',
zIndex: 999,
}}
>
<Group justify="space-between">
<Flex direction="row" gap="xs" align="center">
<Button variant="light" onClick={handleZoomOut}> - </Button>
<Button variant="light" onClick={handleZoomIn}> + </Button>
</Flex>
{
extension == "pdf" &&
<Flex direction="row" gap="xs" align="center">
<Button variant="light" disabled={page == 1 ? true : false} onClick={() => { getPdfToImg(page - 1) }}> Prev </Button>
<Text c={"gray"}> {page} / {totalPage} </Text>
<Button variant="light" disabled={page == totalPage ? true : false} onClick={() => { getPdfToImg(page + 1) }}> Next </Button>
</Flex>
}
</Group>
{
extension == "pdf" &&
<Flex direction="row" gap="xs" align="center">
<Button variant="light" disabled={page == 1 ? true : false} onClick={() => { getPdfToImg(page - 1) }}> Prev </Button>
<Text c={"gray"}> {page} / {totalPage} </Text>
<Button variant="light" disabled={page == totalPage ? true : false} onClick={() => { getPdfToImg(page + 1) }}> Next </Button>
</Flex>
}
</Group>
</Box>
<Box pos={"relative"} style={{
transform: `scale(${zoom})`,
transformOrigin: 'center',
maxWidth: rem(550),
}}>
<div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
{
extension === 'pdf' ?
// <PdfToImage md={`https://wibu-storage.wibudev.com/api/files/${file}`} />
loadingPdf ?
<Stack p="md">
{[...Array(1)].map((_, index) => (
<Skeleton key={index} height={500} />
))}
</Stack>
:
<>
{dataPdf.map((item: any, index: any) => (
</Box>
<Box pos={"relative"} style={{
transform: `scale(${zoom})`,
transformOrigin: 'center',
maxWidth: rem(550),
paddingLeft: 10,
paddingRight: 10
}}>
<div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
{
extension === 'pdf' ?
// <PdfToImage md={`https://wibu-storage.wibudev.com/api/files/${file}`} />
loadingPdf ?
<Stack p="md">
{[...Array(1)].map((_, index) => (
<Skeleton key={index} height={500} />
))}
</Stack>
:
<>
{dataPdf.map((item: any, index: any) => (
<Image
w={"100%"}
alt={file}
key={index}
src={item.imageUrl}
/>
))}
</>
:
<Image
w={"100%"}
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
fit="contain"
src={`https://wibu-storage.wibudev.com/api/files/${file}`}
alt={file}
key={index}
src={item.imageUrl}
/>
))}
</>
:
<Image
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
fit="contain"
src={`https://wibu-storage.wibudev.com/api/files/${file}`}
alt={file}
/>
}
</div>
</Box>
</Modal>
}
</div>
</Box>
</Modal.Body>
</Modal.Content>
</Modal.Root>
</>
);
}

4
src/module/banner/ui/list_banner.tsx
View File

@@ -21,6 +21,7 @@ function ListBanner() {
const [openDrawer, setOpenDrawer] = useState(false);
const [idDataStorage, setIdDataStorage] = useState('')
const [isExtension, setExtension] = useState('')
const [isName, setName] = useState('')
const [loading, setLoading] = useState(true)
const [isData, setData] = useState<IDataBanner[]>([])
const [idData, setIdData] = useState('')
@@ -109,6 +110,7 @@ function ListBanner() {
setIdDataStorage(v.image);
setExtension(v.extension);
setOpenDrawer(true)
setName(v.title)
}
}
style={{
@@ -194,7 +196,7 @@ function ListBanner() {
}
}} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
<LayoutModalViewFile name={isName} opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
</Box>
);
}

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

@@ -923,6 +923,7 @@ export default function NavbarDocumentDivision() {
file={idStorage}
extension={isExtension}
fitur="dokumen"
name={nameFileFull}
/>
</Box>
);

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

@@ -279,7 +279,7 @@ export default function ListFileDetailProject() {
}
}} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idStorage} extension={isExtension} fitur='project' />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} name={nameData} file={idStorage} extension={isExtension} fitur='project' />
</Box>
</>
);

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

@@ -259,7 +259,7 @@ export default function ListFileDetailTask() {
}
}} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
<LayoutModalViewFile name={nameData} opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
</Box>
)
}