739b0bf87d
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 3m14s
295 lines
11 KiB
TypeScript
295 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useTransition } from 'react';
|
|
import Link from 'next/link';
|
|
import { Modal } from '@/components/ui/Modal';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Avatar } from '@/components/ui/Avatar';
|
|
import { Select } from '@/components/ui/Select';
|
|
import { getTeamMembersForShare, type TeamWithMembers, type Share } from '@/lib/share-utils';
|
|
import type { ShareRole } from '@prisma/client';
|
|
|
|
type ShareTab = 'teamMember' | 'team' | 'email';
|
|
|
|
interface ShareModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
sessionSubtitle?: string;
|
|
sessionTitle: string;
|
|
shares: Share[];
|
|
isOwner: boolean;
|
|
userTeams?: TeamWithMembers[];
|
|
currentUserId?: string;
|
|
onShareWithEmail: (email: string, role: ShareRole) => Promise<{ success: boolean; error?: string }>;
|
|
onShareWithTeam?: (teamId: string, role: ShareRole) => Promise<{ success: boolean; error?: string }>;
|
|
onRemoveShare: (userId: string) => Promise<unknown>;
|
|
helpText?: React.ReactNode;
|
|
}
|
|
|
|
const ROLE_OPTIONS = [
|
|
{ value: 'EDITOR', label: 'Éditeur' },
|
|
{ value: 'VIEWER', label: 'Lecteur' },
|
|
] as const;
|
|
|
|
export function ShareModal({
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
sessionSubtitle,
|
|
sessionTitle,
|
|
shares,
|
|
isOwner,
|
|
userTeams = [],
|
|
currentUserId = '',
|
|
onShareWithEmail,
|
|
onShareWithTeam,
|
|
onRemoveShare,
|
|
helpText,
|
|
}: ShareModalProps) {
|
|
const teamMembers = getTeamMembersForShare(userTeams, currentUserId);
|
|
const hasTeamShare = !!onShareWithTeam;
|
|
const [shareType, setShareType] = useState<ShareTab>('teamMember');
|
|
const [email, setEmail] = useState('');
|
|
const [teamId, setTeamId] = useState('');
|
|
const [selectedMemberId, setSelectedMemberId] = useState('');
|
|
const [role, setRole] = useState<ShareRole>('EDITOR');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const resetForm = () => {
|
|
setEmail('');
|
|
setTeamId('');
|
|
setSelectedMemberId('');
|
|
};
|
|
|
|
async function handleShare(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
startTransition(async () => {
|
|
let result: { success: boolean; error?: string };
|
|
if (shareType === 'team' && onShareWithTeam) {
|
|
result = await onShareWithTeam(teamId, role);
|
|
} else {
|
|
const targetEmail =
|
|
shareType === 'teamMember'
|
|
? teamMembers.find((m) => m.id === selectedMemberId)?.email ?? ''
|
|
: email;
|
|
result = await onShareWithEmail(targetEmail, role);
|
|
}
|
|
|
|
if (result.success) {
|
|
resetForm();
|
|
} else {
|
|
setError(result.error || 'Erreur lors du partage');
|
|
}
|
|
});
|
|
}
|
|
|
|
async function handleRemove(userId: string) {
|
|
startTransition(async () => {
|
|
await onRemoveShare(userId);
|
|
});
|
|
}
|
|
|
|
const tabs: { value: ShareTab; label: string; icon: string }[] = [
|
|
{ value: 'teamMember', label: 'Membre', icon: '👥' },
|
|
...(hasTeamShare ? [{ value: 'team' as ShareTab, label: 'Équipe', icon: '🏢' }] : []),
|
|
{ value: 'email', label: 'Email', icon: '👤' },
|
|
];
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} title={title}>
|
|
<div className="space-y-6">
|
|
<div>
|
|
{sessionSubtitle && <p className="text-sm text-muted">{sessionSubtitle}</p>}
|
|
<p className="font-medium text-foreground">{sessionTitle}</p>
|
|
</div>
|
|
|
|
{isOwner && (
|
|
<form onSubmit={handleShare} className="space-y-4">
|
|
<div className="flex gap-2 border-b border-border pb-3 flex-wrap">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.value}
|
|
type="button"
|
|
onClick={() => {
|
|
setShareType(tab.value);
|
|
resetForm();
|
|
}}
|
|
className={`flex-1 min-w-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
|
|
shareType === tab.value
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'bg-card-hover text-muted hover:text-foreground'
|
|
}`}
|
|
>
|
|
{tab.icon} {tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{shareType === 'email' && (
|
|
<div className="flex gap-2">
|
|
<Input
|
|
type="email"
|
|
placeholder="Email de l'utilisateur"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="flex-1"
|
|
required
|
|
/>
|
|
<Select
|
|
value={role}
|
|
onChange={(e) => setRole(e.target.value as ShareRole)}
|
|
options={[...ROLE_OPTIONS]}
|
|
wrapperClassName="w-auto shrink-0 min-w-[7rem]"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{shareType === 'teamMember' && (
|
|
<div className="space-y-2">
|
|
{teamMembers.length === 0 ? (
|
|
<p className="text-sm text-muted">
|
|
Vous n'êtes membre d'aucune équipe ou vos équipes n'ont pas d'autres membres.
|
|
Créez une équipe depuis la page{' '}
|
|
<Link href="/teams" className="text-primary hover:underline">
|
|
Équipes
|
|
</Link>
|
|
.
|
|
</p>
|
|
) : (
|
|
<div className="flex gap-2">
|
|
<Select
|
|
value={selectedMemberId}
|
|
onChange={(e) => setSelectedMemberId(e.target.value)}
|
|
options={[
|
|
{ value: '', label: 'Sélectionner un membre', disabled: true },
|
|
...teamMembers.map((m) => ({
|
|
value: m.id,
|
|
label: m.name ? `${m.name} (${m.email})` : m.email,
|
|
})),
|
|
]}
|
|
wrapperClassName="flex-1 min-w-0"
|
|
required
|
|
/>
|
|
<Select
|
|
value={role}
|
|
onChange={(e) => setRole(e.target.value as ShareRole)}
|
|
options={[...ROLE_OPTIONS]}
|
|
wrapperClassName="w-auto shrink-0 min-w-[7rem]"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{shareType === 'team' && hasTeamShare && (
|
|
<div className="space-y-2">
|
|
{userTeams.length === 0 ? (
|
|
<p className="text-sm text-muted">
|
|
Vous n'êtes membre d'aucune équipe. Créez une équipe depuis la page{' '}
|
|
<Link href="/teams" className="text-primary hover:underline">
|
|
Équipes
|
|
</Link>
|
|
.
|
|
</p>
|
|
) : (
|
|
<div className="flex gap-2">
|
|
<Select
|
|
value={teamId}
|
|
onChange={(e) => setTeamId(e.target.value)}
|
|
options={[
|
|
{ value: '', label: 'Sélectionner une équipe', disabled: true },
|
|
...userTeams.map((team) => ({
|
|
value: team.id,
|
|
label: `${team.name}${team.userRole === 'ADMIN' ? ' (Admin)' : ''}`,
|
|
})),
|
|
]}
|
|
wrapperClassName="flex-1 min-w-0"
|
|
required
|
|
/>
|
|
<Select
|
|
value={role}
|
|
onChange={(e) => setRole(e.target.value as ShareRole)}
|
|
options={[...ROLE_OPTIONS]}
|
|
wrapperClassName="w-auto shrink-0 min-w-[7rem]"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{error && <p className="text-sm text-destructive">{error}</p>}
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={
|
|
isPending ||
|
|
(shareType === 'email' && !email) ||
|
|
(shareType === 'teamMember' && !selectedMemberId) ||
|
|
(shareType === 'team' && !teamId)
|
|
}
|
|
className="w-full"
|
|
>
|
|
{isPending ? 'Partage...' : shareType === 'team' ? "Partager à l'équipe" : 'Partager'}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-foreground">Collaborateurs ({shares.length})</p>
|
|
{shares.length === 0 ? (
|
|
<p className="text-sm text-muted">Aucun collaborateur pour le moment</p>
|
|
) : (
|
|
<ul className="space-y-2">
|
|
{shares.map((share) => (
|
|
<li
|
|
key={share.id}
|
|
className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Avatar email={share.user.email} name={share.user.name} size={32} />
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">
|
|
{share.user.name || share.user.email}
|
|
</p>
|
|
{share.user.name && <p className="text-xs text-muted">{share.user.email}</p>}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant={share.role === 'EDITOR' ? 'primary' : 'default'}>
|
|
{share.role === 'EDITOR' ? 'Éditeur' : 'Lecteur'}
|
|
</Badge>
|
|
{isOwner && (
|
|
<button
|
|
onClick={() => handleRemove(share.user.id)}
|
|
disabled={isPending}
|
|
className="rounded p-1 text-muted hover:bg-destructive/10 hover:text-destructive"
|
|
title="Retirer l'accès"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
{helpText && <div className="rounded-lg bg-primary/5 p-3">{helpText}</div>}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|