feat(15-06): /admin/groups table + create/rename modal with AD radio-select binding
- page.tsx: sixth admin route, table (Name/AD-Bindung/Standardgruppe/ Mitglieder/Aktionen), empty state matching AdminUsersPage's noUsers pattern, optimistic default-group star toggle (PATCH /groups/:id isDefault) with rollback + visible error div on failure, full refetch on success since setting one group default unsets all others server-side (D-13 transaction) - GroupFormModal.tsx: create/rename dialog; AD binding section reuses GET /ldap/groups (D-18) with a radio list (D-05: exactly one AD group per Tessera group) instead of the LDAP page's checkbox multi-select; visible discoverError/noResults states instead of a silent-empty list (UI-SPEC backstop); create-with-binding does POST then a second PATCH since CreateGroupDto only accepts `name` - groups-page.test.tsx: empty state, populated table, star-toggle optimistic PATCH + rollback-on-failure
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useAuthStore } from '@/lib/stores/auth-store';
|
||||
import { GroupFormModal } from './components/GroupFormModal';
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
|
||||
export interface Group {
|
||||
id: string;
|
||||
tenantId: string;
|
||||
name: string;
|
||||
ldapDn: string | null;
|
||||
isDefault: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
memberCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Admin group management page (PERM-01, D-14). Sixth admin nav entry.
|
||||
* ADMIN and SUPER_ADMIN can access — the role check here is display only,
|
||||
* not enforcement; every /groups route is protected server-side by
|
||||
* RolesGuard (T-15-22).
|
||||
*/
|
||||
export default function AdminGroupsPage() {
|
||||
const t = useTranslations('admin.groups');
|
||||
const tCommon = useTranslations('common');
|
||||
const currentUser = useAuthStore((s) => s.user);
|
||||
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [togglingDefaultId, setTogglingDefaultId] = useState<string | null>(null);
|
||||
|
||||
const [showFormModal, setShowFormModal] = useState(false);
|
||||
const [editingGroup, setEditingGroup] = useState<Group | null>(null);
|
||||
const [membersGroup, setMembersGroup] = useState<Group | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<Group | null>(null);
|
||||
|
||||
const hasAccess =
|
||||
currentUser?.role === 'ADMIN' || currentUser?.role === 'SUPER_ADMIN';
|
||||
|
||||
const fetchGroups = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/groups`, { credentials: 'include' });
|
||||
if (res.ok) {
|
||||
setGroups(await res.json());
|
||||
}
|
||||
} catch {
|
||||
// silently fail — matches the read-path precedent of the other admin pages
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasAccess) {
|
||||
fetchGroups();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [hasAccess, fetchGroups]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingGroup(null);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
const openEdit = (group: Group) => {
|
||||
setEditingGroup(group);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
const handleToggleDefault = async (group: Group) => {
|
||||
setTogglingDefaultId(group.id);
|
||||
setError(null);
|
||||
const nextValue = !group.isDefault;
|
||||
// Optimistic update, same pattern as AdminModulesPage.toggleModule.
|
||||
setGroups((prev) =>
|
||||
prev.map((g) => (g.id === group.id ? { ...g, isDefault: nextValue } : g)),
|
||||
);
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/groups/${group.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ isDefault: nextValue }),
|
||||
});
|
||||
if (res.ok) {
|
||||
// Setting one group's default flag unsets it on every other group
|
||||
// in the tenant (D-13, server-side transaction) — a full refetch
|
||||
// is the only way the table reflects that exclusivity correctly.
|
||||
fetchGroups();
|
||||
} else {
|
||||
setGroups((prev) =>
|
||||
prev.map((g) => (g.id === group.id ? { ...g, isDefault: group.isDefault } : g)),
|
||||
);
|
||||
const body = await res.text().catch(() => '');
|
||||
setError(`${res.status}: ${body}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setGroups((prev) =>
|
||||
prev.map((g) => (g.id === group.id ? { ...g, isDefault: group.isDefault } : g)),
|
||||
);
|
||||
setError(String(err));
|
||||
} finally {
|
||||
setTogglingDefaultId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (!hasAccess) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<p className="text-lg text-muted-foreground">{tCommon('accessDenied')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-foreground">{t('title')}</h1>
|
||||
<button
|
||||
onClick={openCreate}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity"
|
||||
>
|
||||
{t('create')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<p className="text-muted-foreground">{tCommon('loading')}</p>
|
||||
) : groups.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-2">{t('noGroups')}</h2>
|
||||
<p className="text-sm text-muted-foreground mb-6">{t('noGroupsBody')}</p>
|
||||
<button
|
||||
onClick={openCreate}
|
||||
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity"
|
||||
>
|
||||
{t('create')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-md border border-border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
|
||||
{t('name')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
|
||||
{t('ldapBinding')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
|
||||
{t('defaultGroup')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
|
||||
{t('memberCount')}
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right font-medium text-muted-foreground">
|
||||
{t('actions')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{groups.map((group) => (
|
||||
<tr key={group.id} className="hover:bg-muted/30 transition-colors">
|
||||
<td className="px-4 py-3 font-medium text-foreground">{group.name}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${
|
||||
group.ldapDn
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
: 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{group.ldapDn ? t('boundBadge') : t('manualBadge')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleDefault(group)}
|
||||
disabled={togglingDefaultId === group.id}
|
||||
aria-label={group.isDefault ? t('isDefault') : t('setDefault')}
|
||||
title={group.isDefault ? t('isDefault') : t('setDefault')}
|
||||
className={`rounded px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-wait ${
|
||||
group.isDefault
|
||||
? 'text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill={group.isDefault ? 'currentColor' : 'none'}
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{group.memberCount}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
onClick={() => openEdit(group)}
|
||||
className="rounded px-2 py-1 text-xs text-foreground hover:bg-muted transition-colors"
|
||||
>
|
||||
{tCommon('edit')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMembersGroup(group)}
|
||||
className="rounded px-2 py-1 text-xs text-foreground hover:bg-muted transition-colors"
|
||||
>
|
||||
{t('membersButton')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteTarget(group)}
|
||||
className="rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10 transition-colors"
|
||||
>
|
||||
{tCommon('delete')}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showFormModal && (
|
||||
<GroupFormModal
|
||||
group={editingGroup}
|
||||
onClose={() => setShowFormModal(false)}
|
||||
onSaved={fetchGroups}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* GroupMembersModal / DeleteGroupDialog are wired in here by Task 3
|
||||
(member/delete state above is already in place for that). */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user