init_richi/schichtplanung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Synchronize profile modal state reactively via useEffect and add scroll container

Browse Source
This commit is contained in:
Richard
2026-08-01 12:45:03 +02:00
parent 565b14533c
commit 5db19502b1
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/index.html
Vendored
+2 -2
View File
@@ -11,8 +11,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<title>Schichtplaner — Veranstaltungsschichtpläne</title> <title>Schichtplaner — Veranstaltungsschichtpläne</title>
<script type="module" crossorigin src="/assets/index-BZVfc_jb.js"></script> <script type="module" crossorigin src="/assets/index-xAdtp-F5.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DQgIbK11.css"> <link rel="stylesheet" crossorigin href="/assets/index-DVt5wlUY.css">
</head> </head>
<body class="bg-paper text-main font-sans antialiased min-h-screen"> <body class="bg-paper text-main font-sans antialiased min-h-screen">
<div id="root"></div> <div id="root"></div>
frontend/src/components/ProfileModal.jsx
+13 -2
View File
@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { X, User, Award, Check, AlertCircle, CheckCircle2 } from 'lucide-react'; import { X, User, Award, Check, AlertCircle, CheckCircle2 } from 'lucide-react';
import { apiFetch } from '../api/client'; import { apiFetch } from '../api/client';
import { getRandomSkillColor } from '../utils/colors'; import { getRandomSkillColor } from '../utils/colors';
@@ -14,6 +14,17 @@ export default function ProfileModal({ user, skills = [], onClose, onUserUpdated
safeUserSkills.map(s => (typeof s === 'object' ? s.id : s)) safeUserSkills.map(s => (typeof s === 'object' ? s.id : s))
); );
useEffect(() => {
if (user) {
setDisplayName(user.display_name || user.username || '');
const uSkills = user.skills ? (Array.isArray(user.skills) ? user.skills : []) : [];
setSelectedSkillIds(uSkills.map(s => (typeof s === 'object' ? s.id : s)));
} else {
setDisplayName(localStorage.getItem('guest_display_name') || '');
setSelectedSkillIds([]);
}
}, [user]);
// New skill fields // New skill fields
const [newSkillName, setNewSkillName] = useState(''); const [newSkillName, setNewSkillName] = useState('');
const [newSkillDesc, setNewSkillDesc] = useState(''); const [newSkillDesc, setNewSkillDesc] = useState('');
@@ -93,7 +104,7 @@ export default function ProfileModal({ user, skills = [], onClose, onUserUpdated
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm overflow-y-auto animate-in fade-in duration-200"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm overflow-y-auto animate-in fade-in duration-200">
<div className="bg-surface w-full max-w-lg rounded-sm border border-grid p-6 shadow-2xl relative my-8 text-main font-sans"> <div className="bg-surface w-full max-w-lg rounded-sm border border-grid p-6 shadow-2xl relative my-8 text-main font-sans max-h-[90vh] overflow-y-auto">
{/* Close Button */} {/* Close Button */}
<button <button
onClick={onClose} onClick={onClose}