✨(front) add AttendeesInput component
Add component for managing event attendees with email validation, autocomplete and participation status display. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
@@ -0,0 +1,155 @@
|
||||
.attendees-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
&__field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__participants {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #6a6a6a;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0 0.375rem;
|
||||
background-color: #6a6a6a;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem 1rem;
|
||||
background: white;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
&__status-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--accepted {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
&--pending {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__item-name {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
color: #161616;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__item-email {
|
||||
font-size: 0.875rem;
|
||||
color: #6a6a6a;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__organizer-badge {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
color: #6a6a6a;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: #6a6a6a;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #f0f0f0;
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--remove:hover:not(:disabled) {
|
||||
background-color: #fef0f0;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
import { useState, useCallback, type KeyboardEvent } from 'react';
|
||||
import { Input } from '@gouvfr-lasuite/cunningham-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { IcsAttendee, IcsOrganizer } from 'ts-ics';
|
||||
|
||||
interface AttendeesInputProps {
|
||||
attendees: IcsAttendee[];
|
||||
onChange: (attendees: IcsAttendee[]) => void;
|
||||
organizerEmail?: string;
|
||||
organizer?: IcsOrganizer;
|
||||
}
|
||||
|
||||
// Validate email format
|
||||
const isValidEmail = (email: string): boolean => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
// Get partstat display style
|
||||
const getPartstatStyle = (partstat?: string): { bgColor: string; textColor: string } => {
|
||||
switch (partstat) {
|
||||
case 'ACCEPTED':
|
||||
return { bgColor: '#d4edda', textColor: '#155724' };
|
||||
case 'DECLINED':
|
||||
return { bgColor: '#f8d7da', textColor: '#721c24' };
|
||||
case 'TENTATIVE':
|
||||
return { bgColor: '#fff3cd', textColor: '#856404' };
|
||||
default: // NEEDS-ACTION or undefined
|
||||
return { bgColor: '#e9ecef', textColor: '#495057' };
|
||||
}
|
||||
};
|
||||
|
||||
// Get partstat icon
|
||||
const getPartstatIcon = (partstat?: string): string => {
|
||||
switch (partstat) {
|
||||
case 'ACCEPTED':
|
||||
return 'check_circle';
|
||||
case 'DECLINED':
|
||||
return 'cancel';
|
||||
case 'TENTATIVE':
|
||||
return 'help';
|
||||
default:
|
||||
return 'schedule';
|
||||
}
|
||||
};
|
||||
|
||||
export function AttendeesInput({ attendees, onChange, organizerEmail, organizer }: AttendeesInputProps) {
|
||||
const { t } = useTranslation();
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Calculate total participants (organizer + attendees)
|
||||
const totalParticipants = (organizer ? 1 : 0) + attendees.length;
|
||||
|
||||
const addAttendee = useCallback(() => {
|
||||
const email = inputValue.trim().toLowerCase();
|
||||
|
||||
if (!email) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isValidEmail(email)) {
|
||||
setError(t('calendar.attendees.invalidEmail'));
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if already in list
|
||||
if (attendees.some(a => a.email.toLowerCase() === email)) {
|
||||
setError(t('calendar.attendees.alreadyAdded'));
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it's the organizer
|
||||
if (organizerEmail && email === organizerEmail.toLowerCase()) {
|
||||
setError(t('calendar.attendees.cannotAddOrganizer'));
|
||||
return;
|
||||
}
|
||||
|
||||
const newAttendee: IcsAttendee = {
|
||||
email,
|
||||
partstat: 'NEEDS-ACTION',
|
||||
rsvp: true,
|
||||
role: 'REQ-PARTICIPANT',
|
||||
};
|
||||
|
||||
onChange([...attendees, newAttendee]);
|
||||
setInputValue('');
|
||||
setError(null);
|
||||
}, [inputValue, attendees, onChange, organizerEmail, t]);
|
||||
|
||||
const removeAttendee = useCallback((emailToRemove: string) => {
|
||||
onChange(attendees.filter(a => a.email !== emailToRemove));
|
||||
}, [attendees, onChange]);
|
||||
|
||||
const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
addAttendee();
|
||||
}
|
||||
}, [addAttendee]);
|
||||
|
||||
return (
|
||||
<div className="attendees-input">
|
||||
<div className="attendees-input__field">
|
||||
<Input
|
||||
label={t('calendar.attendees.label')}
|
||||
fullWidth
|
||||
value={inputValue}
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value);
|
||||
if (error) setError(null);
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
state={error ? 'error' : 'default'}
|
||||
text={error || undefined}
|
||||
icon={<span className="material-icons">person_add</span>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{totalParticipants > 0 && (
|
||||
<div className="attendees-input__participants">
|
||||
<div className="attendees-input__header">
|
||||
<h3 className="attendees-input__title">
|
||||
{t('calendar.attendees.participants')}
|
||||
<span className="attendees-input__badge">{totalParticipants}</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="attendees-input__list">
|
||||
{/* Organizer */}
|
||||
{organizer && (
|
||||
<div className="attendees-input__item">
|
||||
<span className="material-icons attendees-input__status-icon attendees-input__status-icon--accepted">
|
||||
check_circle
|
||||
</span>
|
||||
<div className="attendees-input__item-content">
|
||||
<span className="attendees-input__item-name">
|
||||
{organizer.name || organizer.email}
|
||||
</span>
|
||||
<span className="attendees-input__organizer-badge">
|
||||
{t('calendar.attendees.organizer')}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="attendees-input__action-btn"
|
||||
aria-label={t('calendar.attendees.viewProfile')}
|
||||
>
|
||||
<span className="material-icons">person</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="attendees-input__action-btn attendees-input__action-btn--remove"
|
||||
disabled
|
||||
aria-label={t('calendar.attendees.cannotRemoveOrganizer')}
|
||||
>
|
||||
<span className="material-icons">close</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Attendees */}
|
||||
{attendees.map((attendee) => {
|
||||
const icon = getPartstatIcon(attendee.partstat);
|
||||
const isAccepted = attendee.partstat === 'ACCEPTED';
|
||||
|
||||
return (
|
||||
<div key={attendee.email} className="attendees-input__item">
|
||||
<span
|
||||
className={`material-icons attendees-input__status-icon ${
|
||||
isAccepted
|
||||
? 'attendees-input__status-icon--accepted'
|
||||
: 'attendees-input__status-icon--pending'
|
||||
}`}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<div className="attendees-input__item-content">
|
||||
<span className="attendees-input__item-name">
|
||||
{attendee.name || attendee.email}
|
||||
</span>
|
||||
{attendee.name && (
|
||||
<span className="attendees-input__item-email">
|
||||
<{attendee.email}>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="attendees-input__action-btn"
|
||||
aria-label={t('calendar.attendees.viewProfile')}
|
||||
>
|
||||
<span className="material-icons">person</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="attendees-input__action-btn attendees-input__action-btn--remove"
|
||||
onClick={() => removeAttendee(attendee.email)}
|
||||
aria-label={t('calendar.attendees.remove')}
|
||||
>
|
||||
<span className="material-icons">close</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user