Changeset 0.37.6 (#218)
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
176
src/js/sw/surfaces/admin/teams.js
Normal file
176
src/js/sw/surfaces/admin/teams.js
Normal file
@@ -0,0 +1,176 @@
|
||||
/**
|
||||
* Admin > People > Teams
|
||||
*/
|
||||
const { html } = window;
|
||||
const { useState, useEffect, useCallback } = hooks;
|
||||
|
||||
export default function TeamsSection() {
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [detail, setDetail] = useState(null); // team object or null
|
||||
const [members, setMembers] = useState([]);
|
||||
const [allUsers, setAllUsers] = useState([]);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [showAddMember, setShowAddMember] = useState(false);
|
||||
|
||||
const loadTeams = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.teams.list();
|
||||
setTeams(Array.isArray(data) ? data : data.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { loadTeams(); }, []);
|
||||
|
||||
async function openDetail(team) {
|
||||
setDetail(team);
|
||||
try {
|
||||
const [m, u] = await Promise.all([
|
||||
sw.api.admin.teams.members(team.id),
|
||||
sw.api.admin.users.list(),
|
||||
]);
|
||||
setMembers(Array.isArray(m) ? m : m.data || []);
|
||||
const uList = Array.isArray(u) ? u : u.users || [];
|
||||
setAllUsers(uList);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function createTeam(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
try {
|
||||
await sw.api.admin.teams.create({ name: form.name.value.trim(), description: form.desc.value.trim() });
|
||||
sw.toast('Team created', 'success');
|
||||
setShowCreate(false);
|
||||
loadTeams();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function deleteTeam(id) {
|
||||
const ok = await sw.confirm('Delete this team? All members will be removed.', true);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await sw.api.admin.teams.del(id);
|
||||
sw.toast('Team deleted', 'success');
|
||||
setDetail(null);
|
||||
loadTeams();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function addMember(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
try {
|
||||
await sw.api.admin.teams.addMember(detail.id, form.userId.value, form.role.value);
|
||||
sw.toast('Member added', 'success');
|
||||
setShowAddMember(false);
|
||||
const m = await sw.api.admin.teams.members(detail.id);
|
||||
setMembers(Array.isArray(m) ? m : m.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function removeMember(mid) {
|
||||
try {
|
||||
await sw.api.admin.teams.removeMember(detail.id, mid);
|
||||
sw.toast('Member removed', 'success');
|
||||
setMembers(prev => prev.filter(m => m.id !== mid));
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function updateMemberRole(mid, role) {
|
||||
try {
|
||||
await sw.api.admin.teams.updateMember(detail.id, mid, role);
|
||||
sw.toast('Role updated', 'success');
|
||||
setMembers(prev => prev.map(m => m.id === mid ? { ...m, role } : m));
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
|
||||
|
||||
// Detail view
|
||||
if (detail) return html`
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
|
||||
<button class="btn-small" onClick=${() => setDetail(null)}>\u2190 Back</button>
|
||||
<h4 style="margin:0;">${detail.name}</h4>
|
||||
<div style="flex:1"></div>
|
||||
<button class="btn-small btn-danger" onClick=${() => deleteTeam(detail.id)}>Delete Team</button>
|
||||
</div>
|
||||
|
||||
${detail.description && html`<p class="text-muted" style="font-size:12px;margin-bottom:12px;">${detail.description}</p>`}
|
||||
|
||||
<h5 style="margin:16px 0 8px;">Members (${members.length})</h5>
|
||||
<div class="admin-list">
|
||||
${members.map(m => html`
|
||||
<div class="admin-surface-row" key=${m.id}>
|
||||
<span style="flex:1;">${m.username || m.user_id}</span>
|
||||
<select value=${m.role} onChange=${e => updateMemberRole(m.id, e.target.value)}
|
||||
style="font-size:11px;padding:2px 4px;">
|
||||
<option value="member">member</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
<button class="btn-small btn-danger" onClick=${() => removeMember(m.id)}>Remove</button>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
${showAddMember
|
||||
? html`
|
||||
<form class="admin-inline-form" style="margin-top:8px;" onSubmit=${addMember}>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>User</label>
|
||||
<select name="userId">
|
||||
<option value="">Select user\u2026</option>
|
||||
${allUsers.map(u => html`<option key=${u.id} value=${u.id}>${u.username}</option>`)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label>Role</label>
|
||||
<select name="role"><option value="member">Member</option><option value="admin">Admin</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top:8px;gap:8px;">
|
||||
<button type="submit" class="btn-small btn-primary">Add</button>
|
||||
<button type="button" class="btn-small" onClick=${() => setShowAddMember(false)}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
`
|
||||
: html`<button class="btn-small" style="margin-top:8px;" onClick=${() => setShowAddMember(true)}>+ Add Member</button>`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// List view
|
||||
return html`
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
|
||||
<div style="flex:1"></div>
|
||||
<button class="btn-md btn-primary" onClick=${() => setShowCreate(true)}>+ Add</button>
|
||||
</div>
|
||||
|
||||
${showCreate && html`
|
||||
<form class="admin-inline-form" style="margin-bottom:16px;" onSubmit=${createTeam}>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>Name</label><input name="name" placeholder="Team name" /></div>
|
||||
<div class="form-group"><label>Description</label><input name="desc" placeholder="Optional" /></div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top:8px;gap:8px;">
|
||||
<button type="submit" class="btn-small btn-primary">Create</button>
|
||||
<button type="button" class="btn-small" onClick=${() => setShowCreate(false)}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
`}
|
||||
|
||||
<div class="admin-list">
|
||||
${teams.length === 0 && html`<div class="empty-hint">No teams</div>`}
|
||||
${teams.map(t => html`
|
||||
<div class="admin-surface-row" key=${t.id} style="cursor:pointer;" onClick=${() => openDetail(t)}>
|
||||
<strong style="flex:1;">${t.name}</strong>
|
||||
<span class="text-muted" style="font-size:12px;">${t.member_count ?? '?'} members</span>
|
||||
<span class="badge ${t.is_active ? 'badge-active' : 'badge-inactive'}">${t.is_active ? 'active' : 'inactive'}</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user