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

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

View File

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

View File

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