feat: overhaul groups management, remove global team_admin and isolate group administration
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m2s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m2s
This commit is contained in:
sandrodach committed
1 parent
60c302e23e
commit
e37302f73c
11 files changed
+936
-388
No files matched your search
+44
-10
@@ -17,6 +17,7 @@ import {
|
||||
Download,
|
||||
Smartphone,
|
||||
Share,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import { AuthStatus, DashboardStats, SharedList, Thought, User } from './lib/types';
|
||||
import {
|
||||
@@ -42,12 +43,14 @@ import { SetupAndAuthView } from './features/auth/SetupAndAuthView';
|
||||
import { UserSettingsView } from './features/settings/UserSettingsView';
|
||||
import { AdminSettingsView } from './features/settings/AdminSettingsView';
|
||||
import { HelpView } from './features/help/HelpView';
|
||||
import { GroupsView } from './features/teams/GroupsView';
|
||||
|
||||
type ActiveTab =
|
||||
| 'triage'
|
||||
| 'tasks'
|
||||
| 'workspace'
|
||||
| 'lists'
|
||||
| 'groups'
|
||||
| 'user_settings'
|
||||
| 'admin_settings'
|
||||
| 'help';
|
||||
@@ -403,13 +406,8 @@ export const App: React.FC = () => {
|
||||
);
|
||||
}
|
||||
|
||||
const isStaff = user.role === 'admin' || user.role === 'team_admin';
|
||||
const roleLabel =
|
||||
user.role === 'admin'
|
||||
? 'Server-Admin'
|
||||
: user.role === 'team_admin'
|
||||
? 'Team-Admin'
|
||||
: 'Mitglied';
|
||||
const isServerAdmin = user.role === 'admin';
|
||||
const roleLabel = isServerAdmin ? 'Server-Admin' : 'Mitglied';
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-canvas text-main flex flex-col font-sans selection:bg-accent/30">
|
||||
@@ -572,6 +570,20 @@ export const App: React.FC = () => {
|
||||
<span>Kontoeinstellungen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setShowProfileMenu(false);
|
||||
setActiveTab('groups');
|
||||
}}
|
||||
className={`w-full px-3.5 py-2.5 text-left flex items-center gap-2.5 hover:bg-panel-elevated transition-colors ${
|
||||
activeTab === 'groups' ? 'text-accent font-semibold' : 'text-main'
|
||||
}`}
|
||||
>
|
||||
<Users className="w-4 h-4 text-accent" />
|
||||
<span>Gruppen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleOpenHelp}
|
||||
className={`w-full px-3.5 py-2.5 text-left flex items-center gap-2.5 hover:bg-panel-elevated transition-colors ${
|
||||
@@ -582,7 +594,7 @@ export const App: React.FC = () => {
|
||||
<span>Hilfe & Anleitung</span>
|
||||
</button>
|
||||
|
||||
{isStaff && (
|
||||
{isServerAdmin && (
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
@@ -742,6 +754,13 @@ export const App: React.FC = () => {
|
||||
<SharedListsView onRefreshGlobal={refreshAll} currentUser={user} />
|
||||
)}
|
||||
|
||||
{activeTab === 'groups' && (
|
||||
<GroupsView
|
||||
currentUser={user}
|
||||
onBack={() => setActiveTab(previousTab || 'triage')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'user_settings' && (
|
||||
<UserSettingsView
|
||||
currentUser={user}
|
||||
@@ -755,7 +774,7 @@ export const App: React.FC = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'admin_settings' && isStaff && (
|
||||
{activeTab === 'admin_settings' && isServerAdmin && (
|
||||
<AdminSettingsView
|
||||
currentUser={user}
|
||||
onBack={() => setActiveTab('triage')}
|
||||
@@ -1004,6 +1023,21 @@ export const App: React.FC = () => {
|
||||
<span>Kontoeinstellungen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setShowMobileProfile(false);
|
||||
setActiveTab('groups');
|
||||
}}
|
||||
className={`w-full px-3 py-2.5 rounded-btn text-left flex items-center gap-3 hover:bg-panel-elevated transition-colors text-xs cursor-pointer ${
|
||||
activeTab === 'groups' ? 'text-accent font-semibold bg-panel-elevated' : 'text-main'
|
||||
}`}
|
||||
>
|
||||
<Users className="w-4 h-4 text-accent" />
|
||||
<span>Gruppen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@@ -1018,7 +1052,7 @@ export const App: React.FC = () => {
|
||||
<span>Hilfe & Anleitung</span>
|
||||
</button>
|
||||
|
||||
{isStaff && (
|
||||
{isServerAdmin && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
|
||||
@@ -10,16 +10,13 @@ import {
|
||||
Copy,
|
||||
Check,
|
||||
ArrowLeft,
|
||||
Share2,
|
||||
Send,
|
||||
AlertCircle,
|
||||
Building2,
|
||||
UserPlus,
|
||||
Share2,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
Organization,
|
||||
SystemSettings,
|
||||
Team,
|
||||
User,
|
||||
UserInvite,
|
||||
UserRole,
|
||||
@@ -31,7 +28,7 @@ interface AdminSettingsViewProps {
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
type AdminSection = 'users' | 'teams' | 'server' | 'smtp';
|
||||
type AdminSection = 'users' | 'server' | 'smtp';
|
||||
|
||||
export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
currentUser,
|
||||
@@ -50,19 +47,11 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
|
||||
const [inviteEmail, setInviteEmail] = useState('');
|
||||
const [inviteRole, setInviteRole] = useState<UserRole>('member');
|
||||
const [inviteTeamId, setInviteTeamId] = useState('');
|
||||
const [copiedInviteId, setCopiedInviteId] = useState<string | null>(null);
|
||||
|
||||
const [resetPwdUserId, setResetPwdUserId] = useState<string | null>(null);
|
||||
const [resetPwdVal, setResetPwdVal] = useState('');
|
||||
|
||||
// --- Teams & Groups State ---
|
||||
const [allTeams, setAllTeams] = useState<Team[]>([]);
|
||||
const [newTeamName, setNewTeamName] = useState('');
|
||||
const [newTeamDesc, setNewTeamDesc] = useState('');
|
||||
const [memberSelectByTeam, setMemberSelectByTeam] = useState<Record<string, string>>({});
|
||||
const [memberRoleByTeam, setMemberRoleByTeam] = useState<Record<string, string>>({});
|
||||
|
||||
// --- Server & SMTP Settings State ---
|
||||
const [settings, setSettings] = useState<SystemSettings>({
|
||||
sharingMode: 'teams_only',
|
||||
@@ -83,14 +72,12 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
|
||||
const loadAll = async () => {
|
||||
try {
|
||||
const [uList, invList, teamList] = await Promise.all([
|
||||
const [uList, invList] = await Promise.all([
|
||||
api.adminGetUsers(),
|
||||
api.adminGetInvites(),
|
||||
api.getUserTeams(),
|
||||
]);
|
||||
setUsers(uList);
|
||||
setInvites(invList);
|
||||
setAllTeams(teamList);
|
||||
|
||||
if (isServerAdmin) {
|
||||
const sys = await api.adminGetSettings();
|
||||
@@ -149,7 +136,6 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
const inv = await api.adminCreateInvite({
|
||||
email: inviteEmail.trim(),
|
||||
role: inviteRole,
|
||||
teamId: inviteTeamId,
|
||||
});
|
||||
setInvites((prev) => [inv, ...prev]);
|
||||
setInviteEmail('');
|
||||
@@ -231,64 +217,7 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// HANDLERS: TEAMS & GRUPPEN
|
||||
// ============================================================================
|
||||
const handleCreateTeam = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newTeamName.trim()) return;
|
||||
setStatusMsg(null);
|
||||
try {
|
||||
const created = await api.createTeam(
|
||||
newTeamName.trim(),
|
||||
newTeamDesc.trim()
|
||||
);
|
||||
setNewTeamName('');
|
||||
setNewTeamDesc('');
|
||||
await loadAll();
|
||||
setStatusMsg({ type: 'ok', text: `Gruppe / Team "${created.name}" wurde erstellt.` });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteTeam = async (team: Team) => {
|
||||
if (!window.confirm(`Gruppe / Team "${team.name}" wirklich löschen?`)) return;
|
||||
setStatusMsg(null);
|
||||
try {
|
||||
await api.deleteTeam(team.id);
|
||||
await loadAll();
|
||||
setStatusMsg({ type: 'ok', text: `Gruppe / Team "${team.name}" gelöscht.` });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMemberToTeam = async (teamId: string) => {
|
||||
const selectedUserId = memberSelectByTeam[teamId];
|
||||
if (!selectedUserId) return;
|
||||
const role = memberRoleByTeam[teamId] || 'member';
|
||||
setStatusMsg(null);
|
||||
try {
|
||||
await api.addTeamMember(teamId, { userId: selectedUserId, role });
|
||||
setMemberSelectByTeam((prev) => ({ ...prev, [teamId]: '' }));
|
||||
await loadAll();
|
||||
setStatusMsg({ type: 'ok', text: 'Mitglied zur Gruppe hinzugefügt.' });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveMemberFromTeam = async (teamId: string, userId: string) => {
|
||||
setStatusMsg(null);
|
||||
try {
|
||||
await api.removeTeamMember(teamId, userId);
|
||||
await loadAll();
|
||||
setStatusMsg({ type: 'ok', text: 'Mitglied aus Gruppe entfernt.' });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message });
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// HANDLERS: SERVER & SMTP SETTINGS
|
||||
@@ -327,9 +256,6 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
// All teams for invite dropdown
|
||||
const flattenedTeams: Team[] = allTeams;
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-4">
|
||||
{/* Top Page Header */}
|
||||
@@ -346,17 +272,15 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
<div>
|
||||
<h1 className="text-base font-bold text-main tracking-tight flex items-center gap-2">
|
||||
<Shield className="w-4 h-4 text-accent" />
|
||||
<span>Administration & Team-Steuerung</span>
|
||||
<span>Server-Administration</span>
|
||||
</h1>
|
||||
<p className="text-xs text-muted">
|
||||
Benutzerverwaltung, Einladungscodes, Organisationen, Teams, Isolationsmodus & Mail-Server
|
||||
Benutzerverwaltung, Einladungscodes, Isolationsmodus & Mail-Server
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="badge-accent">
|
||||
{isServerAdmin ? 'Server-Administrator' : 'Team-Administrator'}
|
||||
</span>
|
||||
<span className="badge-accent">Server-Administrator</span>
|
||||
</div>
|
||||
|
||||
{statusMsg && (
|
||||
@@ -401,21 +325,6 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setSection('teams')}
|
||||
className={`w-full px-3.5 py-3 text-left text-xs font-medium flex items-center gap-2.5 transition-colors ${
|
||||
section === 'teams'
|
||||
? 'bg-panel-elevated text-main border-l-2 border-l-accent'
|
||||
: 'text-muted hover:text-main hover:bg-canvas/50'
|
||||
}`}
|
||||
>
|
||||
<Users className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold">Teams & Gruppen</p>
|
||||
<p className="text-[10px] text-faint">Familie, Arbeit, Freunde zum Teilen</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isServerAdmin && (
|
||||
<>
|
||||
<button
|
||||
@@ -520,8 +429,7 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
className="w-full min-w-0 h-8 px-2 input-field bg-panel"
|
||||
>
|
||||
<option value="member">Mitglied (Standard)</option>
|
||||
<option value="team_admin">Team-Admin (Darf einladen)</option>
|
||||
{isServerAdmin && <option value="admin">Server-Admin (Vollzugriff)</option>}
|
||||
<option value="admin">Server-Admin (Vollzugriff)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -546,7 +454,7 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleCreateInvite} className="space-y-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="min-w-0">
|
||||
<label className="block text-muted mb-1">
|
||||
Gebundene E-Mail (optional)
|
||||
@@ -561,33 +469,14 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="min-w-0">
|
||||
<label className="block text-muted mb-1">Zugewiesene Rolle</label>
|
||||
<label className="block text-muted mb-1">Zugewiesene Server-Rolle</label>
|
||||
<select
|
||||
value={inviteRole}
|
||||
onChange={(e) => setInviteRole(e.target.value as UserRole)}
|
||||
className="w-full min-w-0 h-8 px-2 input-field bg-panel"
|
||||
>
|
||||
<option value="member">Mitglied</option>
|
||||
<option value="team_admin">Team-Admin</option>
|
||||
{isServerAdmin && <option value="admin">Server-Admin</option>}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="min-w-0">
|
||||
<label className="block text-muted mb-1">
|
||||
Automatisch Team zuweisen (optional)
|
||||
</label>
|
||||
<select
|
||||
value={inviteTeamId}
|
||||
onChange={(e) => setInviteTeamId(e.target.value)}
|
||||
className="w-full min-w-0 h-8 px-2 input-field bg-panel"
|
||||
>
|
||||
<option value="">Kein direktes Team</option>
|
||||
{flattenedTeams.map((t) => (
|
||||
<option key={t.id} value={t.id}>
|
||||
{t.name}
|
||||
</option>
|
||||
))}
|
||||
<option value="admin">Server-Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -690,8 +579,7 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
title="Benutzerrolle ändern"
|
||||
>
|
||||
<option value="member">Mitglied</option>
|
||||
<option value="team_admin">Team-Admin</option>
|
||||
{isServerAdmin && <option value="admin">Server-Admin</option>}
|
||||
<option value="admin">Server-Admin</option>
|
||||
</select>
|
||||
|
||||
{isServerAdmin && (
|
||||
@@ -758,203 +646,7 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ================================================================= */}
|
||||
{/* SECTION 2: TEAMS & GRUPPEN */}
|
||||
{/* ================================================================= */}
|
||||
{section === 'teams' && (
|
||||
<div className="space-y-6">
|
||||
<div className="border-b border-border pb-3">
|
||||
<h2 className="text-sm font-bold text-main">Teams & Gruppen verwalten</h2>
|
||||
<p className="text-muted mt-0.5">
|
||||
Erstelle Gruppen wie Familie, Arbeit oder Freunde. So kannst du Notizen und Listen
|
||||
direkt für eine gesamte Gruppe freigeben, ohne jeden Benutzer einzeln auswählen zu müssen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Create Team/Group Card */}
|
||||
<div className="p-4 bg-canvas border border-border rounded-card space-y-3">
|
||||
<h3 className="font-bold text-main flex items-center gap-2">
|
||||
<Plus className="w-4 h-4 text-accent" />
|
||||
<span>Neue Gruppe / Neues Team anlegen</span>
|
||||
</h3>
|
||||
<form onSubmit={handleCreateTeam} className="space-y-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-muted text-[11px] mb-1 font-medium">
|
||||
Name der Gruppe / des Teams *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newTeamName}
|
||||
onChange={(e) => setNewTeamName(e.target.value)}
|
||||
placeholder="z. B. Familie, Arbeit, Freunde…"
|
||||
required
|
||||
className="w-full h-8 px-2.5 input-field text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-muted text-[11px] mb-1 font-medium">
|
||||
Beschreibung (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newTeamDesc}
|
||||
onChange={(e) => setNewTeamDesc(e.target.value)}
|
||||
placeholder="z. B. Gemeinsame Einkaufslisten & Haushaltsnotizen…"
|
||||
className="w-full h-8 px-2.5 input-field text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button type="submit" className="btn-primary h-8 px-4 text-xs flex items-center gap-1.5">
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Gruppe / Team anlegen</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Teams & Groups List */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-bold text-main text-xs uppercase tracking-wider text-muted">
|
||||
Bestehende Gruppen & Teams ({allTeams.length})
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{allTeams.length === 0 ? (
|
||||
<div className="p-8 bg-canvas border border-border rounded-card text-center space-y-2">
|
||||
<Users className="w-8 h-8 text-faint mx-auto opacity-50" />
|
||||
<p className="text-muted text-xs font-medium">Noch keine Teams oder Gruppen vorhanden.</p>
|
||||
<p className="text-faint text-[11px]">
|
||||
Lege oben deine erste Gruppe an (z. B. "Familie" oder "Arbeit"), um Notizen und Listen gemeinsam zu nutzen.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
allTeams.map((team) => {
|
||||
const members = Array.isArray(team.members) ? team.members : [];
|
||||
const availableUsers = users.filter(
|
||||
(u) => !members.some((m) => m.userId === u.id)
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={team.id}
|
||||
className="p-4 bg-canvas border border-border rounded-card space-y-4"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3 border-b border-border pb-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<div className="w-8 h-8 rounded-btn bg-accent/10 text-accent flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-sm text-main">{team.name}</span>
|
||||
<span className="text-[11px] px-1.5 py-0.5 rounded-full bg-panel-elevated text-muted border border-border">
|
||||
{members.length} {members.length === 1 ? 'Mitglied' : 'Mitglieder'}
|
||||
</span>
|
||||
</div>
|
||||
{team.description && (
|
||||
<p className="text-xs text-muted mt-1">
|
||||
{team.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteTeam(team)}
|
||||
className="btn-icon btn-icon-danger"
|
||||
title="Gruppe / Team löschen"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Members Chips */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-[11px] font-semibold text-muted">
|
||||
Mitglieder ({members.length}):
|
||||
</p>
|
||||
{members.length === 0 ? (
|
||||
<p className="text-[11px] text-faint">
|
||||
Noch keine Mitglieder in dieser Gruppe.
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{members.map((m) => (
|
||||
<div
|
||||
key={m.userId}
|
||||
className="px-2.5 py-1 bg-panel border border-border rounded-btn flex items-center gap-2 text-xs"
|
||||
>
|
||||
<span className="text-main font-medium">
|
||||
{m.displayName}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted">
|
||||
({m.role === 'team_admin' ? 'Gruppen-Admin' : 'Mitglied'})
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleRemoveMemberFromTeam(team.id, m.userId)}
|
||||
className="text-faint hover:text-status-err font-bold ml-0.5"
|
||||
title="Aus Gruppe entfernen"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add User to Team Row */}
|
||||
<div className="pt-3 border-t border-border flex flex-wrap items-center gap-2">
|
||||
<select
|
||||
value={memberSelectByTeam[team.id] || ''}
|
||||
onChange={(e) =>
|
||||
setMemberSelectByTeam((prev) => ({
|
||||
...prev,
|
||||
[team.id]: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="flex-1 min-w-[200px] h-8 px-2.5 input-field text-xs bg-panel"
|
||||
>
|
||||
<option value="">Benutzer auswählen zum Hinzufügen…</option>
|
||||
{availableUsers.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.displayName} ({u.email})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={memberRoleByTeam[team.id] || 'member'}
|
||||
onChange={(e) =>
|
||||
setMemberRoleByTeam((prev) => ({
|
||||
...prev,
|
||||
[team.id]: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="h-8 px-2.5 input-field text-xs bg-panel"
|
||||
>
|
||||
<option value="member">Mitglied</option>
|
||||
<option value="team_admin">Gruppen-Admin</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAddMemberToTeam(team.id)}
|
||||
disabled={!memberSelectByTeam[team.id]}
|
||||
className="btn-action h-8 px-3 text-xs flex items-center gap-1.5 disabled:opacity-40"
|
||||
>
|
||||
<UserPlus className="w-3.5 h-3.5" />
|
||||
<span>Hinzufügen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ================================================================= */}
|
||||
{/* SECTION 3: SERVER & SHARING-ISOLATION (SERVER-ADMIN ONLY) */}
|
||||
|
||||
@@ -236,8 +236,6 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
|
||||
const roleBadgeLabel =
|
||||
currentUser.role === 'admin'
|
||||
? 'Server-Admin'
|
||||
: currentUser.role === 'team_admin'
|
||||
? 'Team-Admin'
|
||||
: 'Mitglied';
|
||||
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,654 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Users,
|
||||
Plus,
|
||||
Trash2,
|
||||
ArrowLeft,
|
||||
Check,
|
||||
AlertCircle,
|
||||
UserPlus,
|
||||
Shield,
|
||||
Pencil,
|
||||
X,
|
||||
LogOut,
|
||||
} from 'lucide-react';
|
||||
import { Team, User } from '../../lib/types';
|
||||
import { api, triggerHaptic } from '../../lib/api';
|
||||
import { UserAutocomplete } from '../UserAutocomplete';
|
||||
|
||||
interface GroupsViewProps {
|
||||
currentUser: User;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export const GroupsView: React.FC<GroupsViewProps> = ({ currentUser, onBack }) => {
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
const [directoryUsers, setDirectoryUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [statusMsg, setStatusMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
|
||||
|
||||
// Create Group Modal State
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [newGroupName, setNewGroupName] = useState('');
|
||||
const [newGroupDesc, setNewGroupDesc] = useState('');
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
// Edit Group State
|
||||
const [editingTeamId, setEditingTeamId] = useState<string | null>(null);
|
||||
const [editName, setEditName] = useState('');
|
||||
const [editDesc, setEditDesc] = useState('');
|
||||
|
||||
// Add Member State per Team
|
||||
const [selectedUserByTeam, setSelectedUserByTeam] = useState<Record<string, User | null>>({});
|
||||
const [memberRoleByTeam, setMemberRoleByTeam] = useState<Record<string, 'admin' | 'member'>>({});
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [userTeams, allUsers] = await Promise.all([
|
||||
api.getUserTeams(),
|
||||
api.getUsersDirectory().catch(() => []),
|
||||
]);
|
||||
setTeams(userTeams);
|
||||
setDirectoryUsers(allUsers);
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Laden der Gruppen' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const handleCreateGroup = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const name = newGroupName.trim();
|
||||
if (!name) return;
|
||||
|
||||
setCreating(true);
|
||||
setStatusMsg(null);
|
||||
triggerHaptic(15);
|
||||
|
||||
try {
|
||||
const created = await api.createTeam(name, newGroupDesc.trim());
|
||||
setNewGroupName('');
|
||||
setNewGroupDesc('');
|
||||
setShowCreateModal(false);
|
||||
await loadData();
|
||||
setStatusMsg({ type: 'ok', text: `Gruppe "${created.name}" erfolgreich erstellt.` });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Erstellen der Gruppe' });
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartEdit = (team: Team) => {
|
||||
setEditingTeamId(team.id);
|
||||
setEditName(team.name);
|
||||
setEditDesc(team.description || '');
|
||||
};
|
||||
|
||||
const handleSaveEdit = async (teamId: string) => {
|
||||
const name = editName.trim();
|
||||
if (!name) return;
|
||||
|
||||
setStatusMsg(null);
|
||||
triggerHaptic(10);
|
||||
try {
|
||||
await api.updateTeam(teamId, name, editDesc.trim());
|
||||
setEditingTeamId(null);
|
||||
await loadData();
|
||||
setStatusMsg({ type: 'ok', text: 'Gruppe erfolgreich aktualisiert.' });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Aktualisieren der Gruppe' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteTeam = async (team: Team) => {
|
||||
if (!window.confirm(`Gruppe "${team.name}" wirklich löschen? Alle Freigaben für diese Gruppe werden entfernt.`)) {
|
||||
return;
|
||||
}
|
||||
setStatusMsg(null);
|
||||
triggerHaptic(15);
|
||||
try {
|
||||
await api.deleteTeam(team.id);
|
||||
await loadData();
|
||||
setStatusMsg({ type: 'ok', text: `Gruppe "${team.name}" gelöscht.` });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Löschen der Gruppe' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMember = async (teamId: string) => {
|
||||
const user = selectedUserByTeam[teamId];
|
||||
if (!user) return;
|
||||
const role = memberRoleByTeam[teamId] || 'member';
|
||||
|
||||
setStatusMsg(null);
|
||||
triggerHaptic(10);
|
||||
try {
|
||||
await api.addTeamMember(teamId, { userId: user.id, role });
|
||||
setSelectedUserByTeam((prev) => ({ ...prev, [teamId]: null }));
|
||||
await loadData();
|
||||
setStatusMsg({ type: 'ok', text: `${user.displayName} wurde zur Gruppe hinzugefügt.` });
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Hinzufügen des Mitglieds' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangeMemberRole = async (teamId: string, memberUserId: string, newRole: 'admin' | 'member') => {
|
||||
setStatusMsg(null);
|
||||
triggerHaptic(10);
|
||||
try {
|
||||
await api.updateTeamMemberRole(teamId, memberUserId, newRole);
|
||||
await loadData();
|
||||
setStatusMsg({
|
||||
type: 'ok',
|
||||
text: `Rolle erfolgreich zu "${newRole === 'admin' ? 'Gruppen-Admin' : 'Mitglied'}" geändert.`,
|
||||
});
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Ändern der Rolle' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveMember = async (teamId: string, memberUserId: string, memberName: string) => {
|
||||
const isSelf = memberUserId === currentUser.id;
|
||||
const msg = isSelf
|
||||
? 'Möchtest du diese Gruppe wirklich verlassen?'
|
||||
: `Mitglied "${memberName}" wirklich aus der Gruppe entfernen?`;
|
||||
|
||||
if (!window.confirm(msg)) return;
|
||||
|
||||
setStatusMsg(null);
|
||||
triggerHaptic(10);
|
||||
try {
|
||||
await api.removeTeamMember(teamId, memberUserId);
|
||||
await loadData();
|
||||
setStatusMsg({
|
||||
type: 'ok',
|
||||
text: isSelf ? 'Du hast die Gruppe verlassen.' : `Mitglied "${memberName}" wurde entfernt.`,
|
||||
});
|
||||
} catch (err: any) {
|
||||
setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Entfernen des Mitglieds' });
|
||||
}
|
||||
};
|
||||
|
||||
// Group teams into managed (admin) and member-only
|
||||
const managedTeams = teams.filter((t) =>
|
||||
(t.members || []).some((m) => m.userId === currentUser.id && m.role === 'admin')
|
||||
);
|
||||
|
||||
const memberTeams = teams.filter(
|
||||
(t) =>
|
||||
(t.members || []).some((m) => m.userId === currentUser.id && m.role === 'member') &&
|
||||
!managedTeams.some((mt) => mt.id === t.id)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-5">
|
||||
{/* Page Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-border pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="btn-action h-8 px-2.5 text-xs flex items-center gap-1.5 cursor-pointer"
|
||||
title="Zurück"
|
||||
>
|
||||
<ArrowLeft className="w-3.5 h-3.5" />
|
||||
<span>Zurück</span>
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-base font-bold text-main tracking-tight flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-accent" />
|
||||
<span>Gruppen & Teams</span>
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-panel-elevated text-muted border border-border">
|
||||
{teams.length}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xs text-muted mt-0.5">
|
||||
Erstelle und verwalte Gruppen (z. B. Familie, WG oder Projektteams) für gemeinsame Notizen, Aufgaben und Listen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setShowCreateModal(true);
|
||||
}}
|
||||
className="btn-primary h-8 px-3.5 text-xs flex items-center gap-1.5 self-start sm:self-auto cursor-pointer"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Neue Gruppe</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status Messages */}
|
||||
{statusMsg && (
|
||||
<div
|
||||
className={`p-3 text-xs flex items-center justify-between gap-2 rounded-card ${
|
||||
statusMsg.type === 'ok' ? 'alert-ok' : 'alert-err'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{statusMsg.type === 'ok' ? (
|
||||
<Check className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
) : (
|
||||
<AlertCircle className="w-4 h-4 text-status-err flex-shrink-0" />
|
||||
)}
|
||||
<span>{statusMsg.text}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setStatusMsg(null)}
|
||||
className="text-muted hover:text-main text-[11px] cursor-pointer"
|
||||
>
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal: Neue Gruppe erstellen */}
|
||||
{showCreateModal && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4 animate-in fade-in duration-150"
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md bg-panel border border-border rounded-xl shadow-panel p-5 space-y-4 animate-in zoom-in-95 duration-150"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between pb-3 border-b border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
<h3 className="font-bold text-sm text-main">Neue Gruppe erstellen</h3>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
className="p-1 text-muted hover:text-main rounded-btn transition-colors cursor-pointer"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleCreateGroup} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-muted text-xs mb-1 font-medium">
|
||||
Name der Gruppe *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newGroupName}
|
||||
onChange={(e) => setNewGroupName(e.target.value)}
|
||||
placeholder="z. B. Familie, WG, Arbeit, Projekt X…"
|
||||
required
|
||||
autoFocus
|
||||
className="w-full h-8 px-2.5 input-field text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-muted text-xs mb-1 font-medium">
|
||||
Beschreibung (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newGroupDesc}
|
||||
onChange={(e) => setNewGroupDesc(e.target.value)}
|
||||
placeholder="z. B. Gemeinsame Einkaufslisten & Notizen…"
|
||||
className="w-full h-8 px-2.5 input-field text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-canvas border border-border rounded-btn text-[11px] text-muted space-y-1">
|
||||
<p className="font-semibold text-main flex items-center gap-1.5">
|
||||
<Shield className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Du wirst Gruppen-Admin</span>
|
||||
</p>
|
||||
<p>
|
||||
Als Ersteller kannst du weitere Mitglieder hinzufügen, Rollen zuweisen und die Gruppe verwalten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
className="btn-action h-8 px-3 text-xs cursor-pointer"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creating || !newGroupName.trim()}
|
||||
className="btn-primary h-8 px-4 text-xs flex items-center gap-1.5 cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Gruppe anlegen</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content Area */}
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-muted text-xs">Lade Gruppen…</div>
|
||||
) : teams.length === 0 ? (
|
||||
<div className="p-10 bg-canvas border border-border rounded-card text-center space-y-3">
|
||||
<div className="w-12 h-12 rounded-full bg-panel-elevated text-muted mx-auto flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-accent opacity-75" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-main text-sm">Noch keine Gruppen vorhanden</h3>
|
||||
<p className="text-muted text-xs mt-1 max-w-md mx-auto">
|
||||
Erstelle deine erste Gruppe, um Aufgaben, Einkaufslisten oder Dokumente gemeinsam mit anderen zu nutzen.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setShowCreateModal(true);
|
||||
}}
|
||||
className="btn-primary h-8 px-4 text-xs inline-flex items-center gap-1.5 cursor-pointer"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Erste Gruppe anlegen</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* SECTION 1: Gruppen, die ich verwalte */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xs font-bold text-main uppercase tracking-wider text-muted flex items-center gap-2">
|
||||
<Shield className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Gruppen, die ich verwalte ({managedTeams.length})</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{managedTeams.length === 0 ? (
|
||||
<div className="p-4 bg-canvas border border-border rounded-card text-xs text-muted">
|
||||
Du bist derzeit noch in keiner Gruppe als Admin eingetragen. Klicke oben auf "Neue Gruppe", um eine eigene Gruppe zu erstellen.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{managedTeams.map((team) => {
|
||||
const members = team.members || [];
|
||||
const isEditing = editingTeamId === team.id;
|
||||
const memberUserIds = members.map((m) => m.userId);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={team.id}
|
||||
className="p-4 bg-canvas border border-border rounded-card space-y-4 shadow-sm"
|
||||
>
|
||||
{/* Team Header */}
|
||||
<div className="flex items-start justify-between gap-3 border-b border-border pb-3">
|
||||
<div className="flex items-start gap-2.5 flex-1 min-w-0">
|
||||
<div className="w-8 h-8 rounded-btn bg-accent/15 text-accent flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
{isEditing ? (
|
||||
<div className="flex-1 space-y-2 max-w-lg">
|
||||
<input
|
||||
type="text"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
placeholder="Gruppenname"
|
||||
className="w-full h-8 px-2.5 input-field text-xs font-bold"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={editDesc}
|
||||
onChange={(e) => setEditDesc(e.target.value)}
|
||||
placeholder="Optionale Beschreibung"
|
||||
className="w-full h-7 px-2.5 input-field text-xs"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSaveEdit(team.id)}
|
||||
className="btn-primary h-7 px-3 text-[11px] cursor-pointer"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingTeamId(null)}
|
||||
className="btn-action h-7 px-2.5 text-[11px] cursor-pointer"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-bold text-sm text-main truncate">
|
||||
{team.name}
|
||||
</span>
|
||||
<span className="badge-accent text-[10px] py-0.5 px-2">
|
||||
Gruppen-Admin
|
||||
</span>
|
||||
<span className="text-[11px] px-1.5 py-0.5 rounded-full bg-panel-elevated text-muted border border-border">
|
||||
{members.length} {members.length === 1 ? 'Mitglied' : 'Mitglieder'}
|
||||
</span>
|
||||
</div>
|
||||
{team.description && (
|
||||
<p className="text-xs text-muted mt-1 break-words">
|
||||
{team.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isEditing && (
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleStartEdit(team)}
|
||||
className="btn-action h-7 px-2.5 text-xs flex items-center gap-1 cursor-pointer"
|
||||
title="Gruppe bearbeiten"
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" />
|
||||
<span className="hidden sm:inline">Bearbeiten</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteTeam(team)}
|
||||
className="btn-icon btn-icon-danger"
|
||||
title="Gruppe löschen"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Members List */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-[11px] font-semibold text-muted uppercase tracking-wider">
|
||||
Mitglieder ({members.length})
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
{members.map((m) => {
|
||||
const isSelf = m.userId === currentUser.id;
|
||||
const isAdmin = m.role === 'admin';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={m.userId}
|
||||
className="p-2.5 bg-panel border border-border rounded-btn flex items-center justify-between gap-2 text-xs"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className="w-6 h-6 rounded-full bg-accent/20 text-accent text-[10px] font-bold flex items-center justify-center flex-shrink-0">
|
||||
{(m.displayName || 'U').slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-main font-medium truncate text-xs">
|
||||
{m.displayName} {isSelf && <span className="text-faint">(Du)</span>}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted truncate">
|
||||
{m.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={(e) =>
|
||||
handleChangeMemberRole(
|
||||
team.id,
|
||||
m.userId,
|
||||
e.target.value as 'admin' | 'member'
|
||||
)
|
||||
}
|
||||
className={`h-6 px-1.5 text-[10px] rounded border ${
|
||||
isAdmin
|
||||
? 'bg-accent/15 border-accent/40 text-accent font-semibold'
|
||||
: 'bg-canvas border-border text-muted'
|
||||
}`}
|
||||
title="Rolle ändern"
|
||||
>
|
||||
<option value="member">Mitglied</option>
|
||||
<option value="admin">Gruppen-Admin</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={() => handleRemoveMember(team.id, m.userId, m.displayName)}
|
||||
className="p-1 text-faint hover:text-status-err rounded transition-colors cursor-pointer"
|
||||
title={isSelf ? 'Gruppe verlassen' : 'Mitglied entfernen'}
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Member Row */}
|
||||
<div className="pt-3 border-t border-border flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
|
||||
<div className="flex-1 min-w-[220px]">
|
||||
<UserAutocomplete
|
||||
users={directoryUsers}
|
||||
selectedUser={selectedUserByTeam[team.id] || null}
|
||||
onSelectUser={(u) =>
|
||||
setSelectedUserByTeam((prev) => ({ ...prev, [team.id]: u }))
|
||||
}
|
||||
excludeUserIds={memberUserIds}
|
||||
placeholder="Benutzer suchen zum Hinzufügen…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={memberRoleByTeam[team.id] || 'member'}
|
||||
onChange={(e) =>
|
||||
setMemberRoleByTeam((prev) => ({
|
||||
...prev,
|
||||
[team.id]: e.target.value as 'admin' | 'member',
|
||||
}))
|
||||
}
|
||||
className="h-8 px-2.5 input-field text-xs bg-panel"
|
||||
>
|
||||
<option value="member">Mitglied</option>
|
||||
<option value="admin">Gruppen-Admin</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAddMember(team.id)}
|
||||
disabled={!selectedUserByTeam[team.id]}
|
||||
className="btn-primary h-8 px-3.5 text-xs flex items-center justify-center gap-1.5 cursor-pointer disabled:opacity-40"
|
||||
>
|
||||
<UserPlus className="w-3.5 h-3.5" />
|
||||
<span>Hinzufügen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* SECTION 2: Meine Mitgliedschaften (als Mitglied) */}
|
||||
{memberTeams.length > 0 && (
|
||||
<div className="space-y-3 pt-2">
|
||||
<h2 className="text-xs font-bold text-main uppercase tracking-wider text-muted flex items-center gap-2">
|
||||
<Users className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Meine Mitgliedschaften ({memberTeams.length})</span>
|
||||
</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
{memberTeams.map((team) => {
|
||||
const members = team.members || [];
|
||||
const admins = members.filter((m) => m.role === 'admin');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={team.id}
|
||||
className="p-4 bg-canvas border border-border rounded-card space-y-3 shadow-sm"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3 border-b border-border pb-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<div className="w-8 h-8 rounded-btn bg-panel-elevated text-muted flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-sm text-main">{team.name}</span>
|
||||
<span className="text-[11px] px-1.5 py-0.5 rounded-full bg-panel-elevated text-muted border border-border">
|
||||
{members.length} {members.length === 1 ? 'Mitglied' : 'Mitglieder'}
|
||||
</span>
|
||||
</div>
|
||||
{team.description && (
|
||||
<p className="text-xs text-muted mt-1">{team.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleRemoveMember(team.id, currentUser.id, currentUser.displayName)}
|
||||
className="btn-action text-status-err hover:bg-status-err-bg h-7 px-2.5 text-xs flex items-center gap-1.5 cursor-pointer"
|
||||
title="Gruppe verlassen"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
<span>Gruppe verlassen</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Admins & Members list in read-only mode */}
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-[11px] font-semibold text-muted">
|
||||
Gruppen-Admins:{' '}
|
||||
<span className="text-main font-normal">
|
||||
{admins.map((a) => a.displayName).join(', ') || 'Keiner'}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-[11px] font-semibold text-muted">
|
||||
Alle Mitglieder:{' '}
|
||||
<span className="text-faint font-normal">
|
||||
{members.map((m) => m.displayName).join(', ')}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -723,6 +723,13 @@ export const api = {
|
||||
});
|
||||
},
|
||||
|
||||
async updateTeam(teamId: string, name: string, description = ''): Promise<Team> {
|
||||
return request<Team>(`/api/v1/teams/${teamId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ name, description }),
|
||||
});
|
||||
},
|
||||
|
||||
async deleteTeam(teamId: string): Promise<void> {
|
||||
await request(`/api/v1/teams/${teamId}`, { method: 'DELETE' });
|
||||
},
|
||||
@@ -742,6 +749,17 @@ export const api = {
|
||||
});
|
||||
},
|
||||
|
||||
async updateTeamMemberRole(
|
||||
teamId: string,
|
||||
userId: string,
|
||||
role: 'admin' | 'member'
|
||||
): Promise<void> {
|
||||
await request(`/api/v1/teams/${teamId}/members/${userId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ role }),
|
||||
});
|
||||
},
|
||||
|
||||
async removeTeamMember(teamId: string, userId: string): Promise<void> {
|
||||
await request(`/api/v1/teams/${teamId}/members/${userId}`, { method: 'DELETE' });
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export type ThoughtStatus = 'inbox' | 'kept' | 'discarded' | 'converted';
|
||||
export type PriorityLevel = 'low' | 'normal' | 'high' | 'urgent';
|
||||
export type UserRole = 'admin' | 'team_admin' | 'member';
|
||||
export type UserRole = 'admin' | 'member';
|
||||
|
||||
export interface AuthStatus {
|
||||
needsSetup: boolean;
|
||||
@@ -119,7 +119,7 @@ export interface Organization {
|
||||
|
||||
export interface Team {
|
||||
id: string;
|
||||
orgId: string;
|
||||
orgId?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
members?: TeamMember[];
|
||||
@@ -131,7 +131,7 @@ export interface TeamMember {
|
||||
userId: string;
|
||||
displayName: string;
|
||||
email: string;
|
||||
role: 'owner' | 'team_admin' | 'editor' | 'member' | 'viewer';
|
||||
role: 'admin' | 'member';
|
||||
joinedAt: string;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user