v0.10.4 new UI changes
This commit is contained in:
305
frontend/src/pages/GroupManagerPage.jsx
Normal file
305
frontend/src/pages/GroupManagerPage.jsx
Normal file
@@ -0,0 +1,305 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { api } from '../utils/api.js';
|
||||
import { useToast } from '../contexts/ToastContext.jsx';
|
||||
import Avatar from '../components/Avatar.jsx';
|
||||
|
||||
// ── Shared sub-components (identical logic to modal versions) ─────────────────
|
||||
|
||||
function UserCheckList({ allUsers, selectedIds, onChange }) {
|
||||
const [search, setSearch] = useState('');
|
||||
const filtered = allUsers.filter(u => (u.display_name||u.name).toLowerCase().includes(search.toLowerCase()));
|
||||
return (
|
||||
<div>
|
||||
<input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
|
||||
style={{ marginBottom:8 }} autoComplete="new-password" />
|
||||
<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:10, padding:'8px 12px', borderBottom:'1px solid var(--border)', cursor:'pointer' }}>
|
||||
<input type="checkbox" checked={selectedIds.has(u.id)} onChange={() => { const n=new Set(selectedIds); n.has(u.id)?n.delete(u.id):n.add(u.id); onChange(n); }}
|
||||
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:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>No users found</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupCheckList({ allGroups, selectedIds, onChange }) {
|
||||
return (
|
||||
<div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', maxHeight:220, overflowY:'auto' }}>
|
||||
{allGroups.map(g => (
|
||||
<label key={g.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px', borderBottom:'1px solid var(--border)', cursor:'pointer' }}>
|
||||
<input type="checkbox" checked={selectedIds.has(g.id)} onChange={() => { const n=new Set(selectedIds); n.has(g.id)?n.delete(g.id):n.add(g.id); onChange(n); }}
|
||||
style={{ accentColor:'var(--primary)', width:15, height:15 }} />
|
||||
<span className="flex-1 text-sm">{g.name}</span>
|
||||
<span className="text-xs" style={{ color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</span>
|
||||
</label>
|
||||
))}
|
||||
{allGroups.length === 0 && <div style={{ padding:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>No user groups yet</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── All Groups tab ────────────────────────────────────────────────────────────
|
||||
function AllGroupsTab({ allUsers, onRefresh }) {
|
||||
const toast = useToast();
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [selected, setSelected] = useState(null);
|
||||
const [savedMembers, setSavedMembers] = useState(new Set());
|
||||
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 = useCallback(() =>
|
||||
api.getUserGroups().then(({ groups }) => setGroups(groups)).catch(() => {}), []);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const selectGroup = async (g) => {
|
||||
setShowDelete(false);
|
||||
const { members: mems } = await api.getUserGroup(g.id);
|
||||
const ids = new Set(mems.map(m => m.id));
|
||||
setSelected(g); setEditName(g.name); setMembers(ids); setSavedMembers(ids);
|
||||
};
|
||||
const clearSelection = () => { setSelected(null); setEditName(''); setMembers(new Set()); setSavedMembers(new Set()); setShowDelete(false); };
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editName.trim()) return toast('Name required', 'error');
|
||||
setSaving(true);
|
||||
try {
|
||||
if (selected) {
|
||||
await api.updateUserGroup(selected.id, { name: editName.trim(), memberIds: [...members] });
|
||||
toast('Group updated', 'success');
|
||||
const { members: fresh } = await api.getUserGroup(selected.id);
|
||||
const freshIds = new Set(fresh.map(m => m.id));
|
||||
setSavedMembers(freshIds); setMembers(freshIds);
|
||||
setSelected(prev => ({ ...prev, name: editName.trim() }));
|
||||
} else {
|
||||
await api.createUserGroup({ name: editName.trim(), memberIds: [...members] });
|
||||
toast(`Group "${editName.trim()}" created`, 'success');
|
||||
clearSelection();
|
||||
}
|
||||
load(); 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'); clearSelection(); load(); onRefresh(); }
|
||||
catch(e) { toast(e.message, 'error'); }
|
||||
finally { setDeleting(false); }
|
||||
};
|
||||
|
||||
const canDelete = selected && savedMembers.size === 0;
|
||||
const isCreating = !selected;
|
||||
|
||||
return (
|
||||
<div style={{ display:'flex', gap:0, height:'100%', minHeight:0 }}>
|
||||
{/* Sidebar list */}
|
||||
<div style={{ width:220, flexShrink:0, borderRight:'1px solid var(--border)', overflowY:'auto', padding:'12px 8px' }}>
|
||||
<div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>User Groups</div>
|
||||
<button onClick={clearSelection} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
|
||||
background:isCreating?'var(--primary-light)':'transparent', color:isCreating?'var(--primary)':'var(--text-secondary)',
|
||||
cursor:'pointer', fontWeight:isCreating?600:400, fontSize:13, marginBottom:4 }}>+ New Group</button>
|
||||
{groups.map(g => (
|
||||
<button key={g.id} onClick={() => selectGroup(g)} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', 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:13, marginBottom:2 }}>
|
||||
<div style={{ display:'flex', alignItems:'center', gap:8 }}>
|
||||
<div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>UG</div>
|
||||
<div><div style={{ fontSize:13 }}>{g.name}</div><div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</div></div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{groups.length===0 && <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No groups yet</div>}
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div style={{ flex:1, overflowY:'auto', padding:'16px 24px' }}>
|
||||
<div style={{ display:'flex', flexDirection:'column', gap:18, maxWidth:520 }}>
|
||||
<div>
|
||||
<label className="settings-section-label">Group Name</label>
|
||||
<input className="input" value={editName} onChange={e => setEditName(e.target.value)}
|
||||
placeholder="e.g. Coaches" style={{ marginTop:6 }} autoComplete="new-password" />
|
||||
{isCreating && <p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>A matching Direct Message group will be created automatically.</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:5 }}>{members.size} selected</p>
|
||||
</div>
|
||||
<div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
|
||||
<button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving?'Saving…':isCreating?'Create Group':'Save Changes'}</button>
|
||||
{!isCreating && <button className="btn btn-secondary btn-sm" onClick={clearSelection}>Cancel</button>}
|
||||
{!isCreating && (
|
||||
<button className="btn btn-sm" style={{ marginLeft:'auto', background:canDelete?'var(--error)':'var(--surface-variant)', color:canDelete?'white':'var(--text-tertiary)', cursor:canDelete?'pointer':'not-allowed' }}
|
||||
onClick={canDelete ? () => setShowDelete(true) : undefined} disabled={!canDelete}
|
||||
title={canDelete?'Delete group':'Remove all members before deleting'}>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.</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>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Direct Messages tab ───────────────────────────────────────────────────────
|
||||
function DirectMessagesTab({ allUserGroups, onRefresh, refreshKey }) {
|
||||
const toast = useToast();
|
||||
const [dms, setDms] = useState([]);
|
||||
const [selected, setSelected] = useState(null);
|
||||
const [savedGroupIds, setSavedGroupIds] = useState(new Set());
|
||||
const [groupIds, setGroupIds] = useState(new Set());
|
||||
const [dmName, setDmName] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
|
||||
const load = useCallback(() =>
|
||||
api.getMultiGroupDms().then(({ dms }) => setDms(dms||[])).catch(() => {}), []);
|
||||
useEffect(() => { load(); }, [load, refreshKey]);
|
||||
|
||||
const clearSelection = () => { setSelected(null); setDmName(''); setGroupIds(new Set()); setSavedGroupIds(new Set()); setShowDelete(false); };
|
||||
const selectDm = (dm) => {
|
||||
setShowDelete(false); setSelected(dm); setDmName(dm.name);
|
||||
const ids = new Set(dm.memberGroupIds||[]); setGroupIds(ids); setSavedGroupIds(ids);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!dmName.trim()) return toast('Name required', 'error');
|
||||
if (!selected && groupIds.size < 2) return toast('Select at least two user groups', 'error');
|
||||
setSaving(true);
|
||||
try {
|
||||
if (selected) {
|
||||
await api.updateMultiGroupDm(selected.id, { name:dmName.trim(), userGroupIds:[...groupIds] });
|
||||
toast('Multi-group DM updated', 'success');
|
||||
const freshDms = await api.getMultiGroupDms();
|
||||
const fresh = freshDms.dms.find(d => d.id===selected.id);
|
||||
if (fresh) { const ids=new Set(fresh.memberGroupIds||[]); setSavedGroupIds(ids); setGroupIds(ids); setSelected(fresh); }
|
||||
} else {
|
||||
await api.createMultiGroupDm({ name:dmName.trim(), userGroupIds:[...groupIds] });
|
||||
toast(`"${dmName.trim()}" created`, 'success');
|
||||
clearSelection();
|
||||
}
|
||||
load(); onRefresh();
|
||||
} catch(e) { toast(e.message, 'error'); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setDeleting(true);
|
||||
try { await api.deleteMultiGroupDm(selected.id); toast('Deleted', 'success'); clearSelection(); load(); onRefresh(); }
|
||||
catch(e) { toast(e.message, 'error'); }
|
||||
finally { setDeleting(false); }
|
||||
};
|
||||
|
||||
const canDelete = selected && savedGroupIds.size === 0;
|
||||
const isCreating = !selected;
|
||||
|
||||
return (
|
||||
<div style={{ display:'flex', gap:0, height:'100%', minHeight:0 }}>
|
||||
<div style={{ width:220, flexShrink:0, borderRight:'1px solid var(--border)', overflowY:'auto', padding:'12px 8px' }}>
|
||||
<div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>Multi-Group DMs</div>
|
||||
<button onClick={clearSelection} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
|
||||
background:isCreating?'var(--primary-light)':'transparent', color:isCreating?'var(--primary)':'var(--text-secondary)',
|
||||
cursor:'pointer', fontWeight:isCreating?600:400, fontSize:13, marginBottom:4 }}>+ New Multi-Group DM</button>
|
||||
{dms.map(dm => (
|
||||
<button key={dm.id} onClick={() => selectDm(dm)} style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px', borderRadius:'var(--radius)', border:'none',
|
||||
background:selected?.id===dm.id?'var(--primary-light)':'transparent', color:selected?.id===dm.id?'var(--primary)':'var(--text-primary)',
|
||||
cursor:'pointer', fontWeight:selected?.id===dm.id?600:400, fontSize:13, marginBottom:2 }}>
|
||||
<div style={{ display:'flex', alignItems:'center', gap:8 }}>
|
||||
<div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>MG</div>
|
||||
<div><div style={{ fontSize:13 }}>{dm.name}</div><div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{dm.group_count} group{dm.group_count!==1?'s':''}</div></div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{dms.length===0 && <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No multi-group DMs yet</div>}
|
||||
</div>
|
||||
<div style={{ flex:1, overflowY:'auto', padding:'16px 24px' }}>
|
||||
<div style={{ display:'flex', flexDirection:'column', gap:18, maxWidth:520 }}>
|
||||
<div>
|
||||
<label className="settings-section-label">DM Name</label>
|
||||
<input className="input" value={dmName} onChange={e => setDmName(e.target.value)} placeholder="e.g. Coaches + Players" style={{ marginTop:6 }} autoComplete="new-password" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="settings-section-label">Member Groups</label>
|
||||
<p style={{ fontSize:12, color:'var(--text-tertiary)', margin:'4px 0 8px' }}>Select two or more user groups. All their members get access to this conversation.</p>
|
||||
<GroupCheckList allGroups={allUserGroups} selectedIds={groupIds} onChange={setGroupIds} />
|
||||
<p style={{ fontSize:12, color:'var(--text-tertiary)', marginTop:5 }}>{groupIds.size} group{groupIds.size!==1?'s':''} selected</p>
|
||||
</div>
|
||||
<div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
|
||||
<button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving}>{saving?'Saving…':isCreating?'Create Multi-Group DM':'Save Changes'}</button>
|
||||
{!isCreating && <button className="btn btn-secondary btn-sm" onClick={clearSelection}>Cancel</button>}
|
||||
{!isCreating && (
|
||||
<button className="btn btn-sm" style={{ marginLeft:'auto', background:canDelete?'var(--error)':'var(--surface-variant)', color:canDelete?'white':'var(--text-tertiary)', cursor:canDelete?'pointer':'not-allowed' }}
|
||||
onClick={canDelete ? () => setShowDelete(true) : undefined} disabled={!canDelete}
|
||||
title={canDelete?'Delete':'Remove all member groups first'}>Delete</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>? Also deletes the associated DM group.</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>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main page ─────────────────────────────────────────────────────────────────
|
||||
export default function GroupManagerPage() {
|
||||
const [tab, setTab] = useState('all');
|
||||
const [allUsers, setAllUsers] = useState([]);
|
||||
const [allUserGroups, setAllUserGroups] = useState([]);
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const onRefresh = () => setRefreshKey(k => k+1);
|
||||
|
||||
useEffect(() => {
|
||||
api.searchUsers('').then(({ users }) => setAllUsers(users.filter(u => u.status==='active'))).catch(() => {});
|
||||
api.getUserGroups().then(({ groups }) => setAllUserGroups(groups)).catch(() => {});
|
||||
}, [refreshKey]);
|
||||
|
||||
return (
|
||||
<div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:'var(--background)' }}>
|
||||
{/* Page header */}
|
||||
<div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 24px', flexShrink:0 }}>
|
||||
<div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:52 }}>
|
||||
<div style={{ display:'flex', alignItems:'center', gap:10 }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
|
||||
<span style={{ fontWeight:700, fontSize:15 }}>Group Manager</span>
|
||||
</div>
|
||||
<div style={{ display:'flex', gap:8 }}>
|
||||
<button className={`btn btn-sm ${tab==='all'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('all')}>User Groups</button>
|
||||
<button className={`btn btn-sm ${tab==='dm'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('dm')}>Multi-Group DMs</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ flex:1, display:'flex', overflow:'hidden' }}>
|
||||
{tab==='all' && <AllGroupsTab allUsers={allUsers} onRefresh={onRefresh} />}
|
||||
{tab==='dm' && <DirectMessagesTab allUserGroups={allUserGroups} onRefresh={onRefresh} refreshKey={refreshKey} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user