v0.9.26 added a admin tools
This commit is contained in:
306
frontend/src/components/GroupManagerModal.jsx
Normal file
306
frontend/src/components/GroupManagerModal.jsx
Normal file
@@ -0,0 +1,306 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { api } from '../utils/api.js';
|
||||
import { useToast } from '../contexts/ToastContext.jsx';
|
||||
import Avatar from './Avatar.jsx';
|
||||
|
||||
// ── Shared user list checkbox ─────────────────────────────────────────────────
|
||||
function UserCheckList({ allUsers, selectedIds, onChange }) {
|
||||
const [search, setSearch] = useState('');
|
||||
const filtered = allUsers.filter(u =>
|
||||
(u.display_name || u.name).toLowerCase().includes(search.toLowerCase()) ||
|
||||
u.email?.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)} style={{ marginBottom: 8 }} />
|
||||
<div style={{ maxHeight: 220, overflowY: 'auto', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
|
||||
{filtered.map(u => (
|
||||
<label key={u.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '9px 14px', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}>
|
||||
<input type="checkbox" checked={selectedIds.has(u.id)} onChange={() => {
|
||||
const next = new Set(selectedIds);
|
||||
next.has(u.id) ? next.delete(u.id) : next.add(u.id);
|
||||
onChange(next);
|
||||
}} style={{ accentColor: 'var(--primary)', width: 15, height: 15 }} />
|
||||
<Avatar user={u} size="sm" />
|
||||
<span className="flex-1 text-sm">{u.display_name || u.name}</span>
|
||||
<span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>{u.role}</span>
|
||||
</label>
|
||||
))}
|
||||
{filtered.length === 0 && <div style={{ padding: '16px', textAlign: 'center', color: 'var(--text-tertiary)', fontSize: 13 }}>No users found</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── All Groups tab ────────────────────────────────────────────────────────────
|
||||
function AllGroupsTab({ allUsers, onRefresh }) {
|
||||
const toast = useToast();
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [selected, setSelected] = useState(null); // selected user group
|
||||
const [members, setMembers] = useState(new Set());
|
||||
const [editName, setEditName] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
|
||||
const load = () => api.getUserGroups().then(({ groups }) => setGroups(groups)).catch(() => {});
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const selectGroup = async (g) => {
|
||||
const { group, members: mems } = await api.getUserGroup(g.id);
|
||||
setSelected(group);
|
||||
setEditName(group.name);
|
||||
setMembers(new Set(mems.map(m => m.id)));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editName.trim()) return toast('Name required', 'error');
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.updateUserGroup(selected.id, { name: editName.trim(), memberIds: [...members] });
|
||||
toast('Group updated', 'success');
|
||||
load();
|
||||
setSelected(prev => ({ ...prev, name: editName.trim() }));
|
||||
onRefresh();
|
||||
} catch (e) { toast(e.message, 'error'); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setDeleting(true);
|
||||
try {
|
||||
await api.deleteUserGroup(selected.id);
|
||||
toast('Group deleted', 'success');
|
||||
setSelected(null); setShowDelete(false);
|
||||
load(); onRefresh();
|
||||
} catch (e) { toast(e.message, 'error'); }
|
||||
finally { setDeleting(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 24, height: '100%' }}>
|
||||
{/* Group list */}
|
||||
<div style={{ width: 240, flexShrink: 0, borderRight: '1px solid var(--border)', paddingRight: 20 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-secondary)', marginBottom: 10, textTransform: 'uppercase', letterSpacing: '0.5px' }}>User Groups</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{groups.map(g => (
|
||||
<button key={g.id} onClick={() => selectGroup(g)} style={{
|
||||
textAlign: 'left', padding: '9px 12px', borderRadius: 8, border: 'none',
|
||||
background: selected?.id === g.id ? 'var(--primary-light)' : 'transparent',
|
||||
color: selected?.id === g.id ? 'var(--primary)' : 'var(--text-primary)',
|
||||
cursor: 'pointer', fontWeight: selected?.id === g.id ? 600 : 400, fontSize: 14,
|
||||
}}>
|
||||
<div>{g.name}</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{g.member_count} member{g.member_count !== 1 ? 's' : ''}</div>
|
||||
</button>
|
||||
))}
|
||||
{groups.length === 0 && <div style={{ fontSize: 13, color: 'var(--text-tertiary)', padding: '12px 0' }}>No groups yet</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Edit panel */}
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
{!selected ? (
|
||||
<div style={{ color: 'var(--text-tertiary)', fontSize: 14, paddingTop: 40, textAlign: 'center' }}>Select a group to edit</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||
<div>
|
||||
<label className="settings-section-label">Group Name</label>
|
||||
<input className="input" value={editName} onChange={e => setEditName(e.target.value)} style={{ marginTop: 6 }} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="settings-section-label">Members</label>
|
||||
<div style={{ marginTop: 6 }}>
|
||||
<UserCheckList allUsers={allUsers} selectedIds={members} onChange={setMembers} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving ? 'Saving…' : 'Save Changes'}</button>
|
||||
<button className="btn btn-secondary btn-sm" onClick={() => { setSelected(null); setShowDelete(false); }}>Cancel</button>
|
||||
<button className="btn btn-sm" style={{ marginLeft: 'auto', background: 'var(--error)', color: 'white' }} onClick={() => setShowDelete(true)}>Delete Group</button>
|
||||
</div>
|
||||
{showDelete && (
|
||||
<div style={{ background: '#fce8e6', border: '1px solid #f5c6c2', borderRadius: 'var(--radius)', padding: '14px 16px' }}>
|
||||
<p style={{ fontSize: 13, color: 'var(--error)', marginBottom: 12 }}>Delete <strong>{selected.name}</strong>? This also deletes the associated direct message group. This cannot be undone.</p>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-sm" style={{ background: 'var(--error)', color: 'white' }} onClick={handleDelete} disabled={deleting}>{deleting ? 'Deleting…' : 'Yes, Delete'}</button>
|
||||
<button className="btn btn-secondary btn-sm" onClick={() => setShowDelete(false)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Create Group tab ──────────────────────────────────────────────────────────
|
||||
function CreateGroupTab({ allUsers, onRefresh }) {
|
||||
const toast = useToast();
|
||||
const [name, setName] = useState('');
|
||||
const [members, setMembers] = useState(new Set());
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim()) return toast('Group name required', 'error');
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.createUserGroup({ name: name.trim(), memberIds: [...members] });
|
||||
toast(`Group "${name.trim()}" created`, 'success');
|
||||
setName(''); setMembers(new Set());
|
||||
onRefresh();
|
||||
} catch (e) { toast(e.message, 'error'); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 560, display: 'flex', flexDirection: 'column', gap: 20 }}>
|
||||
<div>
|
||||
<label className="settings-section-label">Group Name</label>
|
||||
<input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Coaches" style={{ marginTop: 6 }} onKeyDown={e => e.key === 'Enter' && handleCreate()} />
|
||||
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>A matching Direct Message group will be created automatically with the same name.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="settings-section-label">Members</label>
|
||||
<div style={{ marginTop: 6 }}>
|
||||
<UserCheckList allUsers={allUsers} selectedIds={members} onChange={setMembers} />
|
||||
</div>
|
||||
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>{members.size} user{members.size !== 1 ? 's' : ''} selected</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-primary" onClick={handleCreate} disabled={saving}>{saving ? 'Creating…' : 'Create Group'}</button>
|
||||
<button className="btn btn-secondary" onClick={() => { setName(''); setMembers(new Set()); }}>Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Direct Messages tab ───────────────────────────────────────────────────────
|
||||
function DirectMessagesTab({ allUsers }) {
|
||||
const toast = useToast();
|
||||
const [groups, setGroups] = useState([]); // user groups
|
||||
const [dmGroups, setDmGroups] = useState([]); // managed DM groups
|
||||
const [selectedDm, setSelectedDm] = useState(null);
|
||||
const [dmName, setDmName] = useState('');
|
||||
const [dmGroupMembers, setDmGroupMembers] = useState(new Set()); // selected user group IDs
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = async () => {
|
||||
const [ugRes] = await Promise.all([api.getUserGroups()]);
|
||||
setGroups(ugRes.groups || []);
|
||||
// Also need managed DM groups — these are the paired DMs (from groups table, is_managed=1, is_direct=0)
|
||||
// We get them via the user groups list (each has dm_group_id)
|
||||
setDmGroups(ugRes.groups || []);
|
||||
};
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const selectDm = (g) => {
|
||||
setSelectedDm(g);
|
||||
setDmName(g.name);
|
||||
// Pre-select this group (since each managed DM maps 1:1 to a user group)
|
||||
setDmGroupMembers(new Set([g.id]));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!dmName.trim()) return toast('Name required', 'error');
|
||||
if (!selectedDm) return;
|
||||
saving || setSaving(true);
|
||||
try {
|
||||
await api.updateUserGroup(selectedDm.id, { name: dmName.trim() });
|
||||
toast('Direct message group renamed', 'success');
|
||||
load();
|
||||
setSelectedDm(null); setDmName(''); setDmGroupMembers(new Set());
|
||||
} catch (e) { toast(e.message, 'error'); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
const handleCancel = () => { setSelectedDm(null); setDmName(''); setDmGroupMembers(new Set()); };
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 24, height: '100%' }}>
|
||||
<div style={{ width: 240, flexShrink: 0, borderRight: '1px solid var(--border)', paddingRight: 20 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-secondary)', marginBottom: 10, textTransform: 'uppercase', letterSpacing: '0.5px' }}>Managed DM Groups</div>
|
||||
{dmGroups.map(g => (
|
||||
<button key={g.id} onClick={() => selectDm(g)} style={{
|
||||
display: 'block', width: '100%', textAlign: 'left', padding: '9px 12px', borderRadius: 8, border: 'none',
|
||||
background: selectedDm?.id === g.id ? 'var(--primary-light)' : 'transparent',
|
||||
color: selectedDm?.id === g.id ? 'var(--primary)' : 'var(--text-primary)',
|
||||
cursor: 'pointer', fontWeight: selectedDm?.id === g.id ? 600 : 400, fontSize: 14, marginBottom: 2,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 10, fontWeight: 700, flexShrink: 0 }}>MG</div>
|
||||
{g.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{dmGroups.length === 0 && <div style={{ fontSize: 13, color: 'var(--text-tertiary)', padding: '12px 0' }}>No managed DM groups</div>}
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
{!selectedDm ? (
|
||||
<div style={{ color: 'var(--text-tertiary)', fontSize: 14, paddingTop: 40, textAlign: 'center' }}>Select a group to edit its name</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 460 }}>
|
||||
<div>
|
||||
<label className="settings-section-label">Display Name</label>
|
||||
<input className="input" value={dmName} onChange={e => setDmName(e.target.value)} style={{ marginTop: 6 }} />
|
||||
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>Renaming this also renames the paired user group.</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
|
||||
<button className="btn btn-secondary btn-sm" onClick={handleCancel}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main modal ────────────────────────────────────────────────────────────────
|
||||
export default function GroupManagerModal({ onClose }) {
|
||||
const [tab, setTab] = useState('all');
|
||||
const [allUsers, setAllUsers] = useState([]);
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const onRefresh = () => setRefreshKey(k => k + 1);
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch all active users (ignore allow_dm — admin can add anyone)
|
||||
api.searchUsers('').then(({ users }) => setAllUsers(users.filter(u => u.status === 'active'))).catch(() => {});
|
||||
}, [refreshKey]);
|
||||
|
||||
const tabs = [
|
||||
{ id: 'all', label: 'All Groups' },
|
||||
{ id: 'create', label: 'Create Group' },
|
||||
{ id: 'dm', label: 'Direct Messages' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
|
||||
<div className="modal" style={{ maxWidth: 1024, width: '96vw', height: '85vh', display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between" style={{ marginBottom: 16, flexShrink: 0 }}>
|
||||
<h2 className="modal-title" style={{ margin: 0 }}>Group Manager</h2>
|
||||
<button className="btn-icon" onClick={onClose}>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab buttons */}
|
||||
<div className="flex gap-2" style={{ marginBottom: 20, flexShrink: 0 }}>
|
||||
{tabs.map(t => (
|
||||
<button key={t.id} className={`btn btn-sm ${tab === t.id ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab(t.id)}>{t.label}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
{tab === 'all' && <AllGroupsTab allUsers={allUsers} onRefresh={onRefresh} />}
|
||||
{tab === 'create' && <CreateGroupTab allUsers={allUsers} onRefresh={onRefresh} />}
|
||||
{tab === 'dm' && <DirectMessagesTab allUsers={allUsers} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user