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>
</>
);
}