Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: real backend for notifications + project shares — no more mocks

Browse Source
This commit is contained in:
Agent Zero
2026-06-28 12:35:18 +02:00
parent 0f6889cd06
commit 62713db4a0
12 changed files with 460 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+3
View File
@@ -1134,6 +1134,8 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
open={shareOpen}
onClose={() => setShareOpen(false)}
projectName={projectName}
projectId={projectId}
token={token}
/>
<HelpPanel
open={helpOpen}
@@ -1142,6 +1144,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
<NotificationPanel
open={notifOpen}
onClose={() => setNotifOpen(false)}
token={token}
/>
</div>
);
frontend/src/components/NotificationPanel.tsx
+57 -24
View File
@@ -1,24 +1,23 @@
import React, { useState, useEffect, useRef } from 'react';
import type { NotificationPanelProps } from '../types/ui.types';
import { getNotifications, markNotificationRead, markAllNotificationsRead, deleteNotification, type NotificationItem } from '../services/api';
interface Notification {
id: string;
icon: string;
title: string;
timestamp: string;
read: boolean;
}
const initialNotifications: Notification[] = [
{ id: 'n1', icon: '💾', title: 'Projekt automatisch gespeichert', timestamp: 'vor 2 Min.', read: false },
{ id: 'n2', icon: '🔄', title: 'Neue Version verfügbar', timestamp: 'vor 15 Min.', read: false },
{ id: 'n3', icon: '👤', title: 'Benutzer ist beigetreten', timestamp: 'vor 1 Std.', read: false },
];
const NotificationPanel: React.FC<NotificationPanelProps> = ({ open, onClose }) => {
const [notifications, setNotifications] = useState<Notification[]>(initialNotifications);
const NotificationPanel: React.FC<NotificationPanelProps> = ({ open, onClose, token }) => {
const [notifications, setNotifications] = useState<NotificationItem[]>([]);
const [loading, setLoading] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!open) return;
setLoading(true);
getNotifications(token).then((data) => {
setNotifications(data);
setLoading(false);
}).catch(() => {
setLoading(false);
});
}, [open, token]);
useEffect(() => {
if (!open) return;
const handleClickOutside = (e: MouseEvent) => {
@@ -39,12 +38,39 @@ const NotificationPanel: React.FC<NotificationPanelProps> = ({ open, onClose })
if (!open) return null;
const handleDismiss = (id: string) => {
const handleDismiss = async (id: string) => {
setNotifications((prev) => prev.filter((n) => n.id !== id));
try { await deleteNotification(token, id); } catch { /* ignore */ }
};
const handleMarkAllRead = () => {
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
const handleMarkAllRead = async () => {
setNotifications((prev) => prev.map((n) => ({ ...n, read: 1 })));
try { await markAllNotificationsRead(token); } catch { /* ignore */ }
};
const handleItemClick = async (id: string) => {
setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: 1 } : n));
try { await markNotificationRead(token, id); } catch { /* ignore */ }
};
const formatTime = (iso: string) => {
const d = new Date(iso);
const now = new Date();
const diff = Math.floor((now.getTime() - d.getTime()) / 1000);
if (diff < 60) return 'vor wenigen Sekunden';
if (diff < 3600) return `vor ${Math.floor(diff / 60)} Min.`;
if (diff < 86400) return `vor ${Math.floor(diff / 3600)} Std.`;
return d.toLocaleDateString('de-DE');
};
const iconForType = (type: string) => {
switch (type) {
case 'share': return '👥';
case 'save': return '💾';
case 'version': return '🔄';
case 'warning': return '⚠️';
default: return 'ℹ️';
}
};
return (
@@ -56,17 +82,24 @@ const NotificationPanel: React.FC<NotificationPanelProps> = ({ open, onClose })
</button>
</div>
<div className="notif-list">
{notifications.length === 0 ? (
{loading ? (
<p className="notif-empty">Laden...</p>
) : notifications.length === 0 ? (
<p className="notif-empty">Keine Benachrichtigungen</p>
) : (
notifications.map((n) => (
<div key={n.id} className={`notif-item ${n.read ? 'read' : ''}`}>
<span className="notif-icon">{n.icon}</span>
<div
key={n.id}
className={`notif-item ${n.read ? 'read' : ''}`}
onClick={() => !n.read && handleItemClick(n.id)}
>
<span className="notif-icon">{iconForType(n.type)}</span>
<div className="notif-content">
<span className="notif-title">{n.title}</span>
<span className="notif-time">{n.timestamp}</span>
{n.message && <span className="notif-message">{n.message}</span>}
<span className="notif-time">{formatTime(n.created_at)}</span>
</div>
<button className="notif-dismiss" aria-label="Entfernen" onClick={() => handleDismiss(n.id)}>
<button className="notif-dismiss" aria-label="Entfernen" onClick={(e) => { e.stopPropagation(); handleDismiss(n.id); }}>
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
frontend/src/components/ShareDialog.tsx
+38 -5
View File
@@ -1,15 +1,25 @@
import React, { useState } from 'react';
import type { ShareDialogProps } from '../types/ui.types';
import { createProjectShare, getProjectShares, type ProjectShare } from '../services/api';
const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName }) => {
const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName, projectId, token }) => {
const [email, setEmail] = useState('');
const [copied, setCopied] = useState(false);
const [invited, setInvited] = useState(false);
const [error, setError] = useState('');
const [shares, setShares] = useState<ProjectShare[]>([]);
const shareLink = `${window.location.origin}/?project=${encodeURIComponent(projectId)}`;
React.useEffect(() => {
if (open) {
getProjectShares(token, projectId).then(setShares).catch(() => {});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
if (!open) return null;
const shareLink = `${window.location.origin}/?project=${encodeURIComponent(projectName)}`;
const handleCopyLink = () => {
navigator.clipboard.writeText(shareLink).then(() => {
setCopied(true);
@@ -23,11 +33,18 @@ const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName })
if (e.key === 'Escape') onClose();
};
const handleInvite = () => {
if (email.trim()) {
const handleInvite = async () => {
if (!email.trim()) return;
setError('');
setInvited(false);
try {
const share = await createProjectShare(token, projectId, email.trim());
setShares((prev) => [...prev, share]);
setInvited(true);
setEmail('');
setTimeout(() => setInvited(false), 3000);
} catch (err) {
setError(err instanceof Error ? err.message : 'Einladung fehlgeschlagen');
}
};
@@ -67,7 +84,23 @@ const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName })
</button>
</div>
{invited && <p className="share-invited-msg">Einladung gesendet!</p>}
{error && <p className="share-error-msg">{error}</p>}
</div>
{shares.length > 0 && (
<div className="share-section">
<label className="share-label">Geteilt mit</label>
<ul className="share-list">
{shares.map((s) => (
<li key={s.id} className="share-list-item">
<span className="share-list-email">{s.shared_with_email}</span>
<span className={`share-list-status ${s.accepted ? 'accepted' : 'pending'}`}>
{s.accepted ? 'Angenommen' : 'Ausstehend'}
</span>
</li>
))}
</ul>
</div>
)}
</div>
</div>
</div>
frontend/src/services/api.ts
+60
View File
@@ -418,3 +418,63 @@ export async function aiChat(
}
return res.json();
}
// ─── Notifications ──────────────────────────────────────
export interface NotificationItem {
id: string;
user_id: string;
project_id: string | null;
type: string;
title: string;
message: string | null;
read: number;
created_at: string;
}
export async function getNotifications(token: string): Promise<NotificationItem[]> {
const res = await fetch(`${API_BASE}/api/notifications`, { headers: authHeaders(token) });
if (!res.ok) throw new Error('Failed to load notifications');
return res.json();
}
export async function markNotificationRead(token: string, id: string): Promise<void> {
await fetch(`${API_BASE}/api/notifications/${id}/read`, { method: 'PUT', headers: authHeaders(token) });
}
export async function markAllNotificationsRead(token: string): Promise<void> {
await fetch(`${API_BASE}/api/notifications/read-all`, { method: 'PUT', headers: authHeaders(token) });
}
export async function deleteNotification(token: string, id: string): Promise<void> {
await fetch(`${API_BASE}/api/notifications/${id}`, { method: 'DELETE', headers: authHeaders(token) });
}
// ─── Project Shares ─────────────────────────────────────
export interface ProjectShare {
id: string;
project_id: string;
shared_by_user_id: string;
shared_with_email: string;
token: string;
accepted: number;
created_at: string;
}
export async function getProjectShares(token: string, projectId: string): Promise<ProjectShare[]> {
const res = await fetch(`${API_BASE}/api/projects/${projectId}/shares`, { headers: authHeaders(token) });
if (!res.ok) throw new Error('Failed to load shares');
return res.json();
}
export async function createProjectShare(token: string, projectId: string, email: string): Promise<ProjectShare> {
const res = await fetch(`${API_BASE}/api/projects/${projectId}/shares`, {
method: 'POST',
headers: authHeaders(token),
body: JSON.stringify({ email }),
});
if (!res.ok) {
const err = await res.json().catch(() => ({ error: 'Failed to create share' }));
throw new Error(err.error || 'Failed to create share');
}
return res.json();
}
frontend/src/styles.css
+51
View File
@@ -2311,3 +2311,54 @@ body.drawer-open { overflow: hidden; }
width: auto;
}
}
/* ─── Share list + error ──────────────────────────────── */
.share-list {
list-style: none;
padding: 0;
margin: 0;
}
.share-list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
}
.share-list-email {
font-size: 13px;
color: var(--color-text);
}
.share-list-status {
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
}
.share-list-status.accepted {
color: #16a34a;
background: rgba(22, 163, 74, 0.1);
}
.share-list-status.pending {
color: var(--color-text-muted);
background: var(--color-surface-2);
}
.share-error-msg {
margin-top: 8px;
font-size: 12px;
color: #dc2626;
font-weight: 500;
}
/* ─── Notification message ────────────────────────────── */
.notif-message {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
.notif-item {
cursor: pointer;
}
.notif-item.read {
cursor: default;
}
frontend/src/types/ui.types.ts
+3
View File
@@ -77,6 +77,8 @@ export interface ShareDialogProps {
open: boolean;
onClose: () => void;
projectName: string;
projectId: string;
token: string;
}
export interface HelpPanelProps {
@@ -87,6 +89,7 @@ export interface HelpPanelProps {
export interface NotificationPanelProps {
open: boolean;
onClose: () => void;
token: string;
}
export interface SettingsModalProps {