Rendre le rattachement et le périmètre modifiables

L'onglet montrait les équipes et le périmètre sans jamais permettre de les
changer : un salarié rattaché à la mauvaise équipe n'apparaissait pas sur
la bonne grille, et rien à l'écran n'y remédiait.

Deux formulaires et deux capacités, parce que ce sont deux décisions.
Élargir un périmètre revient à donner accès à des dossiers et des
plannings qu'on n'avait pas : c'est distribuer des droits, donc
`settings.roles.manage`. Rattacher à une équipe relève de l'organisation
du travail, donc `settings.teams.manage`. Les réunir donnerait à l'une le
pouvoir de l'autre.

Le périmètre est remplacé, pas fusionné : un périmètre qui ne fait que
grandir ne se réduit jamais, et retirer un établissement resterait sans
effet — l'exact contraire de ce que l'écran promet. Un périmètre vide sans
accès généralisé est refusé : il ne laisserait plus rien voir.

L'établissement de rattachement reste en lecture seule. Il est porté par
le contrat, et le changer sans avenant ferait diverger le planning du
document opposable.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 5 committed 2026-08-10 12:05:01 +02:00
1 parent 91f3b240e1
commit 93724b9d66
4 files changed
+477 -3

No files matched your search

@@ -0,0 +1,186 @@
'use client';
import { useActionState, useState } from 'react';
import { InfoCard } from '@/app/(app)/equipe/[id]/InfoCard';
import { Button } from '@/components/ui/Button';
import { FormError, SubmitButton } from '@/components/ui/Form';
import {
updateScopeAction,
updateTeamsAction,
type PlacementActionState,
} from '@/server/employees/placement-actions';
import type { ContractLocation } from '@/server/employees/queries';
/**
* Périmètre et rattachement, en saisie.
*
* Deux formulaires plutôt qu'un : ils ne portent ni la même décision ni la
* même capacité, et les réunir donnerait à l'un le pouvoir de l'autre.
*/
const empty: PlacementActionState = {};
export function ScopeForm({
membershipId,
locations,
allLocations,
scopedLocationIds,
}: {
membershipId: string;
locations: ContractLocation[];
allLocations: boolean;
scopedLocationIds: string[];
}) {
const [state, save] = useActionState(updateScopeAction, empty);
const [acknowledged, setAcknowledged] = useState<PlacementActionState>(empty);
const [editing, setEditing] = useState(false);
const [all, setAll] = useState(allLocations);
if (state !== acknowledged && state.ok) {
setAcknowledged(state);
setEditing(false);
}
if (!editing) {
return (
<Button onClick={() => setEditing(true)}>Modifier le périmètre</Button>
);
}
return (
<form action={save} className="flex flex-col gap-3 pt-3">
<input type="hidden" name="membershipId" value={membershipId} />
<label className="flex items-start gap-2 text-sm">
<input
type="checkbox"
name="allLocations"
checked={all}
onChange={(event) => setAll(event.target.checked)}
className="mt-0.5 size-4 accent-[var(--accent)]"
/>
<span>
<span className="font-medium">Accès généralisé</span>
<span className="block text-micro text-ink-3">
Tous les établissements, y compris ceux qui ouvriront plus tard.
</span>
</span>
</label>
{all ? null : (
<fieldset className="flex flex-col gap-2 rounded-3 border border-line-1 p-3">
<legend className="px-1 text-micro font-semibold text-ink-1">
Établissements
</legend>
{locations.map((location) => (
<label key={location.id} className="flex items-center gap-2 text-sm">
<input
type="checkbox"
name="locationIds"
value={location.id}
defaultChecked={scopedLocationIds.includes(location.id)}
className="size-4 accent-[var(--accent)]"
/>
{location.name}
</label>
))}
</fieldset>
)}
<FormError>{state.error}</FormError>
<div className="flex items-center gap-3">
<SubmitButton>Enregistrer le périmètre</SubmitButton>
<Button type="button" onClick={() => setEditing(false)}>
Annuler
</Button>
</div>
</form>
);
}
export function TeamsForm({
membershipId,
locations,
teamIds,
primaryTeamId,
}: {
membershipId: string;
locations: ContractLocation[];
teamIds: string[];
primaryTeamId: string | null;
}) {
const [state, save] = useActionState(updateTeamsAction, empty);
const [acknowledged, setAcknowledged] = useState<PlacementActionState>(empty);
const [editing, setEditing] = useState(false);
if (state !== acknowledged && state.ok) {
setAcknowledged(state);
setEditing(false);
}
const withTeams = locations.filter((location) => location.teams.length > 0);
if (!editing) {
return (
<Button onClick={() => setEditing(true)}>Modifier les équipes</Button>
);
}
return (
<form action={save} className="flex flex-col gap-3 pt-3">
<input type="hidden" name="membershipId" value={membershipId} />
{withTeams.length === 0 ? (
<p className="text-sm text-ink-2">
Aucune équipe déclarée. Elles se créent dans les réglages des
établissements.
</p>
) : (
<InfoCard title="Équipes">
{withTeams.map((location) => (
<fieldset key={location.id} className="flex flex-col gap-2 py-2">
<legend className="text-micro font-semibold text-ink-1">
{location.name}
</legend>
{location.teams.map((team) => (
<div key={team.id} className="flex flex-wrap items-center gap-3">
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
name="teamIds"
value={team.id}
defaultChecked={teamIds.includes(team.id)}
className="size-4 accent-[var(--accent)]"
/>
{team.name}
</label>
<label className="flex items-center gap-2 text-micro text-ink-2">
<input
type="radio"
name="primaryTeamId"
value={team.id}
defaultChecked={primaryTeamId === team.id}
className="size-3.5 accent-[var(--accent)]"
/>
Principale
</label>
</div>
))}
</fieldset>
))}
</InfoCard>
)}
<FormError>{state.error}</FormError>
<div className="flex items-center gap-3">
<SubmitButton>Enregistrer les équipes</SubmitButton>
<Button type="button" onClick={() => setEditing(false)}>
Annuler
</Button>
</div>
</form>
);
}
@@ -1,15 +1,25 @@
import { notFound } from 'next/navigation';
import { InfoCard, InfoGrid, InfoRow } from '@/app/(app)/equipe/[id]/InfoCard';
import {
ScopeForm,
TeamsForm,
} from '@/app/(app)/equipe/[id]/planification/PlacementPanel';
import { Badge } from '@/components/ui/Badge';
import { getEmployee, getMemberPlacement } from '@/server/employees/queries';
import { can } from '@/domain/access/authorize';
import { requireSession } from '@/server/context';
import {
getEmployee,
getMemberPlacement,
listPlacementOptions,
} from '@/server/employees/queries';
export const dynamic = 'force-dynamic';
/**
* Rattachement et périmètre.
*
* L'établissement de rattachement est en lecture seule : il est porté par le
* L'établissement de rattachement reste en lecture seule : il est porté par le
* contrat, et le changer sans avenant ferait diverger le planning du document
* opposable.
*/
@@ -22,7 +32,14 @@ export default async function PlacementTab({
const employee = await getEmployee(id);
if (!employee) notFound();
const placement = await getMemberPlacement(id);
const [placement, locations, session] = await Promise.all([
getMemberPlacement(id),
listPlacementOptions(),
requireSession(),
]);
const canScope = can(session.actor, 'settings.roles.manage');
const canTeams = can(session.actor, 'settings.teams.manage');
return (
<InfoGrid>
@@ -48,6 +65,21 @@ export default async function PlacementTab({
label="Responsable hiérarchique"
value={employee.headline.lineManagerName}
/>
<p className="pt-3 text-micro text-ink-3">
L’établissement vient du contrat : il se change par avenant, pas ici.
</p>
{canTeams ? (
<div className="pt-3">
<TeamsForm
membershipId={employee.id}
locations={locations}
teamIds={placement?.teamIds ?? []}
primaryTeamId={placement?.primaryTeamId ?? null}
/>
</div>
) : null}
</InfoCard>
<InfoCard title="Périmètre d’accès">
@@ -76,6 +108,22 @@ export default async function PlacementTab({
value={placement?.scopedTeams.join(', ') ?? ''}
/>
<InfoRow label="Rôle" value={employee.roleName} />
{canScope ? (
<div className="pt-3">
<ScopeForm
membershipId={employee.id}
locations={locations}
allLocations={placement?.allLocations ?? false}
scopedLocationIds={placement?.scopedLocationIds ?? []}
/>
</div>
) : (
<p className="pt-3 text-micro text-ink-3">
Élargir un périmètre revient à distribuer des droits : la capacité
« Gérer les rôles » est requise.
</p>
)}
</InfoCard>
</InfoGrid>
);
+202
View File
@@ -0,0 +1,202 @@
'use server';
import { revalidatePath } from 'next/cache';
import { z } from 'zod';
import { AuthorizationError } from '@/domain/access/authorize';
import { recordAudit } from '@/server/audit';
import { mutate } from '@/server/context';
/**
* Rattachement et périmètre.
*
* Deux capacités distinctes, parce que ce sont deux décisions distinctes :
*
* - le **périmètre** dit ce qu'une personne voit du compte. L'élargir revient à
* lui donner accès à des dossiers et des plannings qu'elle n'avait pas :
* c'est distribuer des droits, donc `settings.roles.manage` ;
* - le **rattachement** dit sur quelle grille elle apparaît. C'est de
* l'organisation du travail, donc `settings.teams.manage`.
*
* L'établissement du contrat n'est modifiable ni par l'une ni par l'autre : il
* est porté par le contrat, et ne se change que par avenant.
*/
export interface PlacementActionState {
error?: string;
ok?: boolean;
}
class ValidationError extends Error {}
const scopeInput = z.object({
membershipId: z.string().min(1),
allLocations: z.boolean(),
locationIds: z.array(z.string().min(1)),
});
export async function updateScopeAction(
_previous: PlacementActionState,
formData: FormData,
): Promise<PlacementActionState> {
const parsed = scopeInput.safeParse({
membershipId: formData.get('membershipId') ?? '',
allLocations: formData.get('allLocations') === 'on',
locationIds: formData.getAll('locationIds').map(String),
});
if (!parsed.success) {
return { error: parsed.error.issues[0]?.message ?? 'Formulaire invalide' };
}
const { membershipId, allLocations, locationIds } = parsed.data;
if (!allLocations && locationIds.length === 0) {
return {
error:
'Sans accès généralisé, désignez au moins un établissement — sinon cette personne ne verrait plus rien.',
};
}
try {
await mutate('settings.roles.manage', async (db, actor) => {
const membership = await db.membership.findUnique({
where: { id: membershipId },
select: { id: true },
});
if (!membership) throw new ValidationError('Salarié introuvable.');
const known = await db.location.findMany({
where: { id: { in: locationIds } },
select: { id: true },
});
if (known.length !== locationIds.length) {
throw new ValidationError('Établissement inconnu.');
}
const before = await db.membershipScope.findMany({
where: { membershipId },
select: { allLocations: true, locationId: true },
});
// Remplacement et non fusion : un périmètre qui ne fait que grandir ne
// se réduit jamais, et le retrait d'un établissement resterait sans
// effet — l'exact contraire de ce que l'écran promet.
await db.membershipScope.deleteMany({ where: { membershipId } });
if (allLocations) {
await db.membershipScope.create({
data: { membershipId, allLocations: true } as never,
});
} else {
for (const locationId of locationIds) {
await db.membershipScope.create({
data: { membershipId, allLocations: false, locationId } as never,
});
}
}
await recordAudit(db, {
actorMembershipId: actor.membershipId,
action: 'membership.scope.update',
entityType: 'Membership',
entityId: membershipId,
before: { scopes: before },
after: { allLocations, locationIds },
});
});
} catch (error) {
if (error instanceof ValidationError) return { error: error.message };
if (error instanceof AuthorizationError) {
return {
error:
'Modifier un périmètre revient à distribuer des droits : la capacité « Gérer les rôles » est requise.',
};
}
throw error;
}
revalidatePath(`/equipe/${membershipId}/planification`);
return { ok: true };
}
const teamsInput = z.object({
membershipId: z.string().min(1),
teamIds: z.array(z.string().min(1)),
primaryTeamId: z.string().trim(),
});
export async function updateTeamsAction(
_previous: PlacementActionState,
formData: FormData,
): Promise<PlacementActionState> {
const parsed = teamsInput.safeParse({
membershipId: formData.get('membershipId') ?? '',
teamIds: formData.getAll('teamIds').map(String),
primaryTeamId: formData.get('primaryTeamId') ?? '',
});
if (!parsed.success) {
return { error: parsed.error.issues[0]?.message ?? 'Formulaire invalide' };
}
const { membershipId, teamIds, primaryTeamId } = parsed.data;
if (primaryTeamId && !teamIds.includes(primaryTeamId)) {
return {
error: 'L’équipe principale doit figurer parmi les équipes cochées.',
};
}
try {
await mutate('settings.teams.manage', async (db, actor) => {
const known = await db.team.findMany({
where: { id: { in: teamIds } },
select: { id: true },
});
if (known.length !== teamIds.length) {
throw new ValidationError('Équipe inconnue.');
}
const before = await db.teamMember.findMany({
where: { membershipId },
select: { teamId: true, isPrimary: true },
});
await db.teamMember.deleteMany({ where: { membershipId } });
for (const teamId of teamIds) {
await db.teamMember.create({
data: {
teamId,
membershipId,
// Une seule principale : c'est elle qui décide de la colonne où la
// personne apparaît quand la grille n'en montre qu'une.
isPrimary: teamId === (primaryTeamId || teamIds[0]),
} as never,
});
}
await recordAudit(db, {
actorMembershipId: actor.membershipId,
action: 'membership.teams.update',
entityType: 'Membership',
entityId: membershipId,
before: { teams: before },
after: { teamIds, primaryTeamId: primaryTeamId || teamIds[0] || null },
});
});
} catch (error) {
if (error instanceof ValidationError) return { error: error.message };
if (error instanceof AuthorizationError) {
return {
error: 'La capacité « Gérer les équipes » est requise.',
};
}
throw error;
}
revalidatePath(`/equipe/${membershipId}/planification`);
revalidatePath('/equipe');
return { ok: true };
}
+38
View File
@@ -570,6 +570,10 @@ export interface MemberPlacement {
allLocations: boolean;
scopedLocations: string[];
scopedTeams: string[];
/** Les mêmes, par identifiant : ce que les formulaires cochent. */
scopedLocationIds: string[];
teamIds: string[];
primaryTeamId: string | null;
}
export const getMemberPlacement = cache(async function getMemberPlacement(
@@ -600,6 +604,7 @@ export const getMemberPlacement = cache(async function getMemberPlacement(
scopes: {
select: {
allLocations: true,
locationId: true,
location: { select: { name: true } },
team: { select: { name: true } },
},
@@ -640,6 +645,39 @@ export const getMemberPlacement = cache(async function getMemberPlacement(
.filter((name): name is string => Boolean(name)),
),
],
scopedLocationIds: [
...new Set(
membership.scopes
.map((scope) => scope.locationId)
.filter((id): id is string => Boolean(id)),
),
],
teamIds: membership.teams.map((member) => member.team.id),
primaryTeamId:
membership.teams.find((member) => member.isPrimary)?.team.id ?? null,
};
});
});
/** Établissements et équipes où rattacher quelqu'un. */
export const listPlacementOptions = cache(
async function listPlacementOptions(): Promise<ContractLocation[]> {
// `members.view` suffit : ces noms sont déjà affichés par l'annuaire, et
// exiger davantage fermerait l'écran à qui a le droit de le lire.
return query('members.view', async (db) =>
db.location.findMany({
where: { archivedAt: null },
select: {
id: true,
name: true,
teams: {
where: { archivedAt: null },
select: { id: true, name: true },
orderBy: { position: 'asc' },
},
},
orderBy: { name: 'asc' },
}),
);
},
);