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 16:05:01 +01:00
parent a5cd78f01f
commit 5aa309b97a
22 changed files with 796 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/admin/BannerManagementTab.tsx
View File

@@ -28,7 +28,7 @@ import AddIcon from '@mui/icons-material/Add';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { bannerApi } from '../../services/banners';
import { useNotification } from '../../contexts/NotificationContext';
import type { BannerLevel } from '../../types/banner.types';
import type { BannerLevel, BannerShowAs } from '../../types/banner.types';
const LEVEL_LABEL: Record<BannerLevel, string> = {
info: 'Info',
@@ -53,6 +53,11 @@ function formatDateTime(iso: string | null | undefined): string {
});
}
const SHOW_AS_LABEL: Record<BannerShowAs, string> = {
banner: 'Banner',
widget: 'Widget',
};
function BannerManagementTab() {
const queryClient = useQueryClient();
const { showSuccess, showError } = useNotification();
@@ -60,6 +65,7 @@ function BannerManagementTab() {
const [newMessage, setNewMessage] = useState('');
const [newLevel, setNewLevel] = useState<BannerLevel>('info');
const [newEndsAt, setNewEndsAt] = useState('');
const [newShowAs, setNewShowAs] = useState<BannerShowAs>('banner');
const { data: banners, isLoading } = useQuery({
queryKey: ['admin', 'banners'],
@@ -72,6 +78,7 @@ function BannerManagementTab() {
bannerApi.create({
message: newMessage.trim(),
level: newLevel,
show_as: newShowAs,
starts_at: new Date().toISOString(),
ends_at: newEndsAt ? new Date(newEndsAt).toISOString() : null,
}),
@@ -83,6 +90,7 @@ function BannerManagementTab() {
setNewMessage('');
setNewLevel('info');
setNewEndsAt('');
setNewShowAs('banner');
},
onError: (error: any) => {
const message = error?.response?.data?.message || 'Banner konnte nicht erstellt werden';
@@ -113,6 +121,7 @@ function BannerManagementTab() {
setNewMessage('');
setNewLevel('info');
setNewEndsAt('');
setNewShowAs('banner');
};
if (isLoading) {
@@ -133,6 +142,7 @@ function BannerManagementTab() {
<TableHead>
<TableRow>
<TableCell>Stufe</TableCell>
<TableCell>Anzeige</TableCell>
<TableCell>Nachricht</TableCell>
<TableCell>Erstellt am</TableCell>
<TableCell>Ablauf</TableCell>
@@ -149,6 +159,13 @@ function BannerManagementTab() {
size="small"
/>
</TableCell>
<TableCell>
<Chip
label={SHOW_AS_LABEL[banner.show_as] ?? 'Banner'}
variant="outlined"
size="small"
/>
</TableCell>
<TableCell sx={{ maxWidth: 400 }}>{banner.message}</TableCell>
<TableCell>{formatDateTime(banner.created_at)}</TableCell>
<TableCell>{formatDateTime(banner.ends_at)}</TableCell>
@@ -166,7 +183,7 @@ function BannerManagementTab() {
))}
{(banners ?? []).length === 0 && (
<TableRow>
<TableCell colSpan={5} align="center">Keine Banner vorhanden</TableCell>
<TableCell colSpan={6} align="center">Keine Banner vorhanden</TableCell>
</TableRow>
)}
</TableBody>
@@ -200,6 +217,17 @@ function BannerManagementTab() {
<MenuItem value="critical">Kritisch</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth margin="dense">
<InputLabel>Anzeige als</InputLabel>
<Select
value={newShowAs}
label="Anzeige als"
onChange={(e) => setNewShowAs(e.target.value as BannerShowAs)}
>
<MenuItem value="banner">Banner</MenuItem>
<MenuItem value="widget">Widget</MenuItem>
</Select>
</FormControl>
<TextField
margin="dense"
label="Ablaufdatum (optional)"

4
frontend/src/components/chat/ChatMessageView.tsx
View File

@@ -41,7 +41,7 @@ const ChatMessageView: React.FC = () => {
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
}).catch(() => {});
}
}, [selectedRoomToken, chatPanelOpen, queryClient]);
}, [selectedRoomToken, chatPanelOpen, queryClient, messages?.length]);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -83,7 +83,7 @@ const ChatMessageView: React.FC = () => {
</Box>
<Box sx={{ flex: 1, overflow: 'auto', py: 1 }}>
{messages?.map((msg) => (
{[...(messages ?? [])].reverse().map((msg) => (
<ChatMessage
key={msg.id}
message={msg}

28
frontend/src/components/chat/ChatPanel.tsx
View File

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import ChatIcon from '@mui/icons-material/Chat';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import Typography from '@mui/material/Typography';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
@@ -12,6 +13,10 @@ import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import { useLayout } from '../../contexts/LayoutContext';
import { ChatProvider, useChat } from '../../contexts/ChatContext';
import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { configApi } from '../../services/config';
import { safeOpenUrl } from '../../utils/safeOpenUrl';
import ChatRoomList from './ChatRoomList';
import ChatMessageView from './ChatMessageView';
@@ -22,6 +27,12 @@ const EXPANDED_WIDTH = 360;
const ChatPanelInner: React.FC = () => {
const { chatPanelOpen, setChatPanelOpen } = useLayout();
const { rooms, selectedRoomToken, selectRoom, connected } = useChat();
const { data: externalLinks } = useQuery({
queryKey: ['external-links'],
queryFn: () => configApi.getExternalLinks(),
staleTime: 10 * 60 * 1000,
});
const nextcloudUrl = externalLinks?.nextcloud;
if (!chatPanelOpen) {
return (
@@ -120,15 +131,24 @@ const ChatPanelInner: React.FC = () => {
<Typography variant="subtitle1" fontWeight={600}>
Chat
</Typography>
<IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
<ChatIcon fontSize="small" />
</IconButton>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
{nextcloudUrl && (
<Tooltip title="In Nextcloud öffnen" placement="bottom">
<IconButton size="small" onClick={() => safeOpenUrl(`${nextcloudUrl}/apps/spreed`)} aria-label="In Nextcloud öffnen">
<OpenInNewIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
<IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
<ChatIcon fontSize="small" />
</IconButton>
</Box>
</Box>
{!connected ? (
<Box sx={{ p: 2 }}>
<Typography variant="body2" color="text.secondary">
Nextcloud nicht verbunden. Bitte verbinden Sie sich in den Einstellungen.
Nextcloud nicht verbunden. Bitte verbinden Sie sich in den <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
</Typography>
</Box>
) : selectedRoomToken ? (

2
frontend/src/components/dashboard/AnnouncementBanner.tsx
View File

@@ -37,7 +37,7 @@ export default function AnnouncementBanner({ gridColumn }: { gridColumn?: string
retry: 1,
});
const visible = banners.filter(b => !dismissed.includes(b.id) || b.level === 'critical');
const visible = banners.filter(b => b.show_as !== 'widget' && (!dismissed.includes(b.id) || b.level === 'critical'));
const handleDismiss = (banner: Banner) => {
if (banner.level === 'critical') return; // never dismiss critical

51
frontend/src/components/dashboard/BannerWidget.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { Card, CardContent, Typography, Box } from '@mui/material';
import { Campaign } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { bannerApi } from '../../services/banners';
import type { BannerLevel } from '../../types/banner.types';
const SEVERITY_COLOR: Record<BannerLevel, string> = {
info: '#1976d2',
important: '#ed6c02',
critical: '#d32f2f',
};
export default function BannerWidget() {
const { data: banners = [] } = useQuery({
queryKey: ['banners', 'active'],
queryFn: bannerApi.getActive,
refetchInterval: 60_000,
retry: 1,
});
const widgetBanners = banners.filter(b => b.show_as === 'widget');
if (widgetBanners.length === 0) return null;
return (
<Card>
<CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
<Campaign color="primary" />
<Typography variant="h6">Mitteilungen</Typography>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
{widgetBanners.map(banner => (
<Box
key={banner.id}
sx={{
borderLeft: `4px solid ${SEVERITY_COLOR[banner.level]}`,
pl: 2,
py: 1,
}}
>
<Typography variant="body2">
{banner.message}
</Typography>
</Box>
))}
</Box>
</CardContent>
</Card>
);
}

2
frontend/src/components/dashboard/VikunjaMyTasksWidget.tsx
View File

@@ -165,7 +165,7 @@ const VikunjaMyTasksWidget: React.FC = () => {
key={task.id}
task={task}
showDivider={index < tasks.length - 1}
vikunjaUrl={import.meta.env.VITE_VIKUNJA_URL ?? ''}
vikunjaUrl={data?.vikunjaUrl ?? ''}
/>
))}
</Box>

49
frontend/src/components/dashboard/WidgetGroup.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { Box, Typography } from '@mui/material';
interface WidgetGroupProps {
title: string;
children: React.ReactNode;
gridColumn?: string;
}
function WidgetGroup({ title, children, gridColumn }: WidgetGroupProps) {
return (
<Box
sx={{
position: 'relative',
border: '1px solid',
borderColor: 'divider',
borderRadius: 1,
p: 2,
pt: 3,
gridColumn,
}}
>
<Typography
sx={{
position: 'absolute',
top: -10,
left: 16,
px: 1,
backgroundColor: 'background.default',
fontSize: '0.75rem',
color: 'text.secondary',
fontWeight: 500,
}}
>
{title}
</Typography>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
gap: 2.5,
}}
>
{children}
</Box>
</Box>
);
}
export default WidgetGroup;

2
frontend/src/components/dashboard/index.ts
View File

@@ -13,4 +13,6 @@ export { default as AdminStatusWidget } from './AdminStatusWidget';
export { default as VehicleBookingQuickAddWidget } from './VehicleBookingQuickAddWidget';
export { default as EventQuickAddWidget } from './EventQuickAddWidget';
export { default as AnnouncementBanner } from './AnnouncementBanner';
export { default as BannerWidget } from './BannerWidget';
export { default as LinksWidget } from './LinksWidget';
export { default as WidgetGroup } from './WidgetGroup';