improve timezone discovery
This commit is contained in:
Joyce
@@ -3,23 +3,35 @@ import { Participant } from '@/types/calendar';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { UserPlus, Trash2, User } from 'lucide-react';
|
||||
import { UserPlus, Trash2, User, Pencil, Check, X, AlertCircle } from 'lucide-react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { getAvatarColor } from '@/lib/utils';
|
||||
import { TimezoneSelector } from '@/components/TimezoneSelector';
|
||||
|
||||
interface ParticipantManagerProps {
|
||||
participants: Participant[];
|
||||
onAddParticipant: (participant: { name: string; email: string; icsLink: string }) => void;
|
||||
onAddParticipant: (participant: { name: string; email: string; timezone: string; icsLink: string }) => void;
|
||||
onRemoveParticipant: (id: string) => void;
|
||||
onUpdateParticipant?: (id: string, data: { timezone?: string; ics_url?: string }) => Promise<void>;
|
||||
}
|
||||
|
||||
export const ParticipantManager = ({
|
||||
participants,
|
||||
onAddParticipant,
|
||||
onRemoveParticipant,
|
||||
onUpdateParticipant,
|
||||
}: ParticipantManagerProps) => {
|
||||
const [name, setName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [timezone, setTimezone] = useState('America/Toronto');
|
||||
const [icsLink, setIcsLink] = useState('');
|
||||
|
||||
// Edit state
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editTimezone, setEditTimezone] = useState('');
|
||||
const [editIcsLink, setEditIcsLink] = useState('');
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
|
||||
const { toast } = useToast();
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
@@ -34,7 +46,12 @@ export const ParticipantManager = ({
|
||||
return;
|
||||
}
|
||||
|
||||
onAddParticipant({ name: name.trim(), email: email.trim(), icsLink: icsLink.trim() || '' });
|
||||
onAddParticipant({
|
||||
name: name.trim(),
|
||||
email: email.trim(),
|
||||
timezone: timezone.trim() || 'America/Toronto',
|
||||
icsLink: icsLink.trim() || ''
|
||||
});
|
||||
setName('');
|
||||
setEmail('');
|
||||
setIcsLink('');
|
||||
@@ -45,6 +62,43 @@ export const ParticipantManager = ({
|
||||
});
|
||||
};
|
||||
|
||||
const startEditing = (participant: Participant) => {
|
||||
setEditingId(participant.id);
|
||||
setEditTimezone(participant.timezone);
|
||||
setEditIcsLink(participant.icsLink || '');
|
||||
};
|
||||
|
||||
const cancelEditing = () => {
|
||||
setEditingId(null);
|
||||
setEditTimezone('');
|
||||
setEditIcsLink('');
|
||||
};
|
||||
|
||||
const saveEditing = async (participantId: string) => {
|
||||
if (!onUpdateParticipant) return;
|
||||
|
||||
setIsUpdating(true);
|
||||
try {
|
||||
await onUpdateParticipant(participantId, {
|
||||
timezone: editTimezone,
|
||||
ics_url: editIcsLink || undefined,
|
||||
});
|
||||
toast({
|
||||
title: "Participant updated",
|
||||
description: "Changes saved successfully",
|
||||
});
|
||||
setEditingId(null);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Update failed",
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
return name
|
||||
.split(' ')
|
||||
@@ -64,7 +118,7 @@ export const ParticipantManager = ({
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input
|
||||
@@ -89,10 +143,18 @@ export const ParticipantManager = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="icsLink">Calendar ICS Link (optional)</Label>
|
||||
<Label>Timezone</Label>
|
||||
<TimezoneSelector
|
||||
value={timezone}
|
||||
onChange={setTimezone}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="icsLink">Calendar ICS Link</Label>
|
||||
<Input
|
||||
id="icsLink"
|
||||
placeholder="https://calendar.google.com/..."
|
||||
placeholder="https://..."
|
||||
value={icsLink}
|
||||
onChange={(e) => setIcsLink(e.target.value)}
|
||||
className="bg-background"
|
||||
@@ -123,26 +185,117 @@ export const ParticipantManager = ({
|
||||
{participants.map((participant) => (
|
||||
<div
|
||||
key={participant.id}
|
||||
className="flex items-center justify-between p-4 bg-background rounded-lg border border-border"
|
||||
className="p-4 bg-background rounded-lg border border-border"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary">
|
||||
{getInitials(participant.name)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{participant.name}</div>
|
||||
<div className="text-sm text-muted-foreground">{participant.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
{editingId === participant.id ? (
|
||||
// Edit mode
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium text-white"
|
||||
style={{ backgroundColor: getAvatarColor(participant.name) }}
|
||||
>
|
||||
{getInitials(participant.name)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{participant.name}</div>
|
||||
<div className="text-sm text-muted-foreground">{participant.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onRemoveParticipant(participant.id)}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>Timezone</Label>
|
||||
<TimezoneSelector
|
||||
value={editTimezone}
|
||||
onChange={setEditTimezone}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`edit-ics-${participant.id}`}>Calendar ICS Link</Label>
|
||||
<Input
|
||||
id={`edit-ics-${participant.id}`}
|
||||
value={editIcsLink}
|
||||
onChange={(e) => setEditIcsLink(e.target.value)}
|
||||
placeholder="https://..."
|
||||
className="bg-card"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => saveEditing(participant.id)}
|
||||
disabled={isUpdating}
|
||||
>
|
||||
<Check className="w-4 h-4 mr-1" />
|
||||
{isUpdating ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={cancelEditing}
|
||||
disabled={isUpdating}
|
||||
>
|
||||
<X className="w-4 h-4 mr-1" />
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// View mode
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium text-white"
|
||||
style={{ backgroundColor: getAvatarColor(participant.name) }}
|
||||
>
|
||||
{getInitials(participant.name)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{participant.name}</div>
|
||||
<div className="text-sm text-muted-foreground flex flex-wrap gap-x-2">
|
||||
<span>{participant.email}</span>
|
||||
<span className="text-muted-foreground/60">•</span>
|
||||
<span>{participant.timezone}</span>
|
||||
<span className="text-muted-foreground/60">•</span>
|
||||
{participant.icsLink ? (
|
||||
<span className="text-primary truncate max-w-[200px]" title={participant.icsLink}>
|
||||
ICS linked
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-amber-600 flex items-center gap-1">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
No calendar linked
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{onUpdateParticipant && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => startEditing(participant)}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onRemoveParticipant(participant.id)}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user