matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

resolve issues with new features

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-12 10:21:26 +01:00
parent 31f1414e06
commit d5be68ca63
13 changed files with 275 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/pages/Wissen.tsx
View File

@@ -11,12 +11,18 @@ import {
CircularProgress,
InputAdornment,
Divider,
Chip,
IconButton,
Tooltip,
} from '@mui/material';
import { Search as SearchIcon } from '@mui/icons-material';
import { Search as SearchIcon, OpenInNew } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import DOMPurify from 'dompurify';
import { formatDistanceToNow } from 'date-fns';
import { de } from 'date-fns/locale';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { bookstackApi } from '../services/bookstack';
import { safeOpenUrl } from '../utils/safeOpenUrl';
import type { BookStackPage, BookStackSearchResult } from '../types/bookstack.types';
export default function Wissen() {
@@ -103,6 +109,21 @@ export default function Wissen() {
/>
</Box>
<Divider />
<Box sx={{ px: 2, pt: 1.5, pb: 0.5, display: 'flex', alignItems: 'center', gap: 1 }}>
{isSearching ? (
<>
<Typography variant="subtitle2" color="text.secondary">
Suchergebnisse für &quot;{debouncedSearch}&quot;
</Typography>
<Chip label={listItems.length} size="small" />
</>
) : (
<Typography variant="subtitle2" color="text.secondary">
Zuletzt geänderte Seiten
</Typography>
)}
</Box>
<Divider />
<Box sx={{ flex: 1, overflow: 'auto' }}>
{listLoading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
@@ -114,25 +135,32 @@ export default function Wissen() {
</Typography>
) : (
<List disablePadding>
{listItems.map((item) => (
<ListItem key={item.id} disablePadding>
<ListItemButton
selected={selectedPageId === item.id}
onClick={() => handleSelectPage(item.id)}
>
<ListItemText
primary={item.name}
secondary={
'book' in item && item.book
? item.book.name
: undefined
}
primaryTypographyProps={{ noWrap: true }}
secondaryTypographyProps={{ noWrap: true }}
/>
</ListItemButton>
</ListItem>
))}
{listItems.map((item) => {
const isRecentPage = 'updated_at' in item && !isSearching;
const bookName = 'book' in item && item.book ? item.book.name : undefined;
const secondaryParts: string[] = [];
if (bookName) secondaryParts.push(bookName);
if (isRecentPage && (item as BookStackPage).updated_at) {
secondaryParts.push(
`Geändert ${formatDistanceToNow(new Date((item as BookStackPage).updated_at), { addSuffix: true, locale: de })}`
);
}
return (
<ListItem key={item.id} disablePadding>
<ListItemButton
selected={selectedPageId === item.id}
onClick={() => handleSelectPage(item.id)}
>
<ListItemText
primary={item.name}
secondary={secondaryParts.length > 0 ? secondaryParts.join(' · ') : undefined}
primaryTypographyProps={{ noWrap: true }}
secondaryTypographyProps={{ noWrap: true }}
/>
</ListItemButton>
</ListItem>
);
})}
</List>
)}
</Box>
@@ -154,9 +182,21 @@ export default function Wissen() {
</Typography>
) : pageQuery.data?.data ? (
<Box>
<Typography variant="h5" gutterBottom>
{pageQuery.data.data.name}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
<Typography variant="h5" gutterBottom sx={{ flex: 1 }}>
{pageQuery.data.data.name}
</Typography>
{pageQuery.data.data.url && (
<Tooltip title="In BookStack öffnen">
<IconButton
size="small"
onClick={() => safeOpenUrl(pageQuery.data!.data!.url)}
>
<OpenInNew fontSize="small" />
</IconButton>
</Tooltip>
)}
</Box>
{pageQuery.data.data.book && (
<Typography variant="body2" color="text.secondary" gutterBottom>
Buch: {pageQuery.data.data.book.name}