AppStd/DigitalData.Hub
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(doc): Modale Vollansicht des Dokuments hinzufügen und Öffnen bei Kartenklick ermöglichen

Browse Source
This commit is contained in:
tekh 2025-07-14 10:04:06 +02:00
parent b15b4dc3b1
commit 49667d7fe9
2 changed files with 48 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/client/dd-hub-react/src/sections/document/doc-item.tsx
View File

@ -13,6 +13,8 @@ import { Doc } from 'src/api/document-service';
import { Iconify } from 'src/components/iconify'; import { Iconify } from 'src/components/iconify';
import { SvgColor } from 'src/components/svg-color'; import { SvgColor } from 'src/components/svg-color';
import DocFullView from './view/doc-full-view';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
export function DocItem({ export function DocItem({
@ -161,48 +163,51 @@ export function DocItem({
} }
return ( return (
<Card sx={sx} {...other}> <>
<Box <DocFullView data={doc.data} open={openViewDoc} handleClose={() => setOpenViewDoc(false)} />
sx={(theme) => ({ <Card sx={sx} {...other} onClick={() => setOpenViewDoc(true)}>
position: 'relative', <Box
pt: 'calc(100% * 3 / 4)', sx={(theme) => ({
...((large || long) && { position: 'relative',
pt: 'calc(100% * 4 / 3)', pt: 'calc(100% * 3 / 4)',
'&:after': { ...((large || long) && {
top: 0, pt: 'calc(100% * 4 / 3)',
content: "''", '&:after': {
width: '100%', top: 0,
height: '100%', content: "''",
position: 'absolute', width: '100%',
bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72), height: '100%',
}, position: 'absolute',
}), bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
...(large && { },
pt: { }),
xs: 'calc(100% * 4 / 3)', ...(large && {
sm: 'calc(100% * 3 / 4.66)', pt: {
}, xs: 'calc(100% * 4 / 3)',
}), sm: 'calc(100% * 3 / 4.66)',
})} },
> }),
{renderShape} })}
{renderCover} >
</Box> {renderShape}
{renderCover}
</Box>
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
p: theme.spacing(6, 3, 3, 3), p: theme.spacing(6, 3, 3, 3),
...((large || long) && { ...((large || long) && {
width: 1, width: 1,
bottom: 0, bottom: 0,
position: 'absolute', position: 'absolute',
}), }),
})} })}
> >
{renderDate} {renderDate}
{renderTitle} {renderTitle}
{renderInfo} {renderInfo}
</Box> </Box>
</Card> </Card>
</>
); );
} }

1
src/client/dd-hub-react/src/sections/document/view/doc-full-view.tsx
View File

@ -34,6 +34,7 @@ export default function DocFullView({ data, open, handleClose }: DocFullViewProp
open={open} open={open}
aria-labelledby="modal-modal-title" aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description" aria-describedby="modal-modal-description"
onClose={handleClose}
> >
<Box sx={style}> <Box sx={style}>
<TextField label="Label" variant="filled" value={name} onChange={e => setName(e.target.value)} /> <TextField label="Label" variant="filled" value={name} onChange={e => setName(e.target.value)} />