feat: Add event automation system for plugins attached to appointments
- Add GlobalEventPlugin model for auto-attaching plugins to all events - Create signals for auto-attachment on new events and rescheduling - Add API endpoints for global event plugins (CRUD, toggle, reapply) - Update CreateTaskModal with "Scheduled Task" vs "Event Automation" choice - Add option to apply to all events or future events only - Display event automations in Tasks page alongside scheduled tasks - Add EditEventAutomationModal for editing trigger and timing - Handle event reschedule - update Celery task timing on time/duration changes - Add Marketplace to Plugins menu in sidebar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
361
frontend/src/components/EventAutomations.tsx
Normal file
361
frontend/src/components/EventAutomations.tsx
Normal file
@@ -0,0 +1,361 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import axios from '../api/client';
|
||||
import { Zap, Plus, Trash2, Clock, CheckCircle2, XCircle, ChevronDown, Power } from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
interface PluginInstallation {
|
||||
id: string;
|
||||
template_name: string;
|
||||
template_description: string;
|
||||
category: string;
|
||||
logo_url?: string;
|
||||
}
|
||||
|
||||
interface EventPlugin {
|
||||
id: string;
|
||||
event: number;
|
||||
plugin_installation: number;
|
||||
plugin_name: string;
|
||||
plugin_description: string;
|
||||
plugin_category: string;
|
||||
plugin_logo_url?: string;
|
||||
trigger: string;
|
||||
trigger_display: string;
|
||||
offset_minutes: number;
|
||||
timing_description: string;
|
||||
is_active: boolean;
|
||||
execution_order: number;
|
||||
}
|
||||
|
||||
interface TriggerOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface OffsetPreset {
|
||||
value: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface EventAutomationsProps {
|
||||
eventId: string | number;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const TRIGGER_OPTIONS: TriggerOption[] = [
|
||||
{ value: 'before_start', label: 'Before Start' },
|
||||
{ value: 'at_start', label: 'At Start' },
|
||||
{ value: 'after_start', label: 'After Start' },
|
||||
{ value: 'after_end', label: 'After End' },
|
||||
{ value: 'on_complete', label: 'When Completed' },
|
||||
{ value: 'on_cancel', label: 'When Canceled' },
|
||||
];
|
||||
|
||||
const OFFSET_PRESETS: OffsetPreset[] = [
|
||||
{ value: 0, label: 'Immediately' },
|
||||
{ value: 5, label: '5 min' },
|
||||
{ value: 10, label: '10 min' },
|
||||
{ value: 15, label: '15 min' },
|
||||
{ value: 30, label: '30 min' },
|
||||
{ value: 60, label: '1 hour' },
|
||||
];
|
||||
|
||||
const EventAutomations: React.FC<EventAutomationsProps> = ({ eventId, compact = false }) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [selectedPlugin, setSelectedPlugin] = useState<string>('');
|
||||
const [selectedTrigger, setSelectedTrigger] = useState<string>('at_start');
|
||||
const [selectedOffset, setSelectedOffset] = useState<number>(0);
|
||||
|
||||
// Fetch installed plugins
|
||||
const { data: plugins = [] } = useQuery<PluginInstallation[]>({
|
||||
queryKey: ['plugin-installations'],
|
||||
queryFn: async () => {
|
||||
const { data } = await axios.get('/api/plugin-installations/');
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch event plugins
|
||||
const { data: eventPlugins = [], isLoading } = useQuery<EventPlugin[]>({
|
||||
queryKey: ['event-plugins', eventId],
|
||||
queryFn: async () => {
|
||||
const { data } = await axios.get(`/api/event-plugins/?event_id=${eventId}`);
|
||||
return data;
|
||||
},
|
||||
enabled: !!eventId,
|
||||
});
|
||||
|
||||
// Add plugin mutation
|
||||
const addMutation = useMutation({
|
||||
mutationFn: async (data: { plugin_installation: string; trigger: string; offset_minutes: number }) => {
|
||||
return axios.post('/api/event-plugins/', {
|
||||
event: eventId,
|
||||
...data,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
|
||||
setShowAddForm(false);
|
||||
setSelectedPlugin('');
|
||||
setSelectedTrigger('at_start');
|
||||
setSelectedOffset(0);
|
||||
toast.success('Automation added');
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Failed to add automation');
|
||||
},
|
||||
});
|
||||
|
||||
// Toggle mutation
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: async (pluginId: string) => {
|
||||
return axios.post(`/api/event-plugins/${pluginId}/toggle/`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
|
||||
},
|
||||
});
|
||||
|
||||
// Delete mutation
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (pluginId: string) => {
|
||||
return axios.delete(`/api/event-plugins/${pluginId}/`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['event-plugins', eventId] });
|
||||
toast.success('Automation removed');
|
||||
},
|
||||
});
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!selectedPlugin) return;
|
||||
addMutation.mutate({
|
||||
plugin_installation: selectedPlugin,
|
||||
trigger: selectedTrigger,
|
||||
offset_minutes: selectedOffset,
|
||||
});
|
||||
};
|
||||
|
||||
const showOffset = !['on_complete', 'on_cancel'].includes(selectedTrigger);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-4 text-center text-gray-500 dark:text-gray-400">
|
||||
Loading automations...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${compact ? 'space-y-3' : 'space-y-4'}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="w-4 h-4 text-purple-600 dark:text-purple-400" />
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
Automations
|
||||
</span>
|
||||
{eventPlugins.length > 0 && (
|
||||
<span className="px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded">
|
||||
{eventPlugins.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!showAddForm && plugins.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowAddForm(true)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded transition-colors"
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
Add
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Existing automations */}
|
||||
{eventPlugins.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{eventPlugins.map((ep) => (
|
||||
<div
|
||||
key={ep.id}
|
||||
className={`flex items-center justify-between p-2 rounded-lg border ${
|
||||
ep.is_active
|
||||
? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700'
|
||||
: 'bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className={`p-1.5 rounded ${ep.is_active ? 'bg-purple-100 dark:bg-purple-900/30' : 'bg-gray-100 dark:bg-gray-800'}`}>
|
||||
<Zap className={`w-3 h-3 ${ep.is_active ? 'text-purple-600 dark:text-purple-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{ep.plugin_name}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>{ep.timing_description}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => toggleMutation.mutate(ep.id)}
|
||||
className={`p-1.5 rounded transition-colors ${
|
||||
ep.is_active
|
||||
? 'text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20'
|
||||
: 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
title={ep.is_active ? 'Disable' : 'Enable'}
|
||||
>
|
||||
<Power className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(ep.id)}
|
||||
className="p-1.5 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
|
||||
title="Remove"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add automation form */}
|
||||
{showAddForm && (
|
||||
<div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800 space-y-3">
|
||||
{/* Plugin selector */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Plugin
|
||||
</label>
|
||||
<select
|
||||
value={selectedPlugin}
|
||||
onChange={(e) => setSelectedPlugin(e.target.value)}
|
||||
className="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value="">Select a plugin...</option>
|
||||
{plugins.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.template_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Timing selector - visual */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
When to run
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
{TRIGGER_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedTrigger(opt.value);
|
||||
if (['on_complete', 'on_cancel'].includes(opt.value)) {
|
||||
setSelectedOffset(0);
|
||||
}
|
||||
}}
|
||||
className={`px-2 py-1.5 text-xs rounded border transition-colors ${
|
||||
selectedTrigger === opt.value
|
||||
? 'bg-purple-600 text-white border-purple-600'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-purple-400'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Offset selector - only for time-based triggers */}
|
||||
{showOffset && (
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Offset
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{OFFSET_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset.value}
|
||||
type="button"
|
||||
onClick={() => setSelectedOffset(preset.value)}
|
||||
className={`px-2 py-1 text-xs rounded border transition-colors ${
|
||||
selectedOffset === preset.value
|
||||
? 'bg-purple-600 text-white border-purple-600'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-purple-400'
|
||||
}`}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Preview */}
|
||||
{selectedPlugin && (
|
||||
<div className="text-xs text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-900/40 px-2 py-1.5 rounded">
|
||||
Will run: <strong>
|
||||
{selectedTrigger === 'on_complete' ? 'When completed' :
|
||||
selectedTrigger === 'on_cancel' ? 'When canceled' :
|
||||
selectedTrigger === 'before_start' && selectedOffset > 0 ? `${selectedOffset} min before start` :
|
||||
selectedTrigger === 'after_end' && selectedOffset > 0 ? `${selectedOffset} min after end` :
|
||||
selectedTrigger === 'after_start' && selectedOffset > 0 ? `${selectedOffset} min after start` :
|
||||
selectedTrigger === 'at_start' && selectedOffset > 0 ? `${selectedOffset} min after start` :
|
||||
selectedTrigger === 'before_start' ? 'At start' :
|
||||
selectedTrigger === 'after_end' ? 'At end' :
|
||||
'At start'}
|
||||
</strong>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<button
|
||||
onClick={() => setShowAddForm(false)}
|
||||
className="px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={!selectedPlugin || addMutation.isPending}
|
||||
className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{addMutation.isPending ? 'Adding...' : 'Add Automation'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{eventPlugins.length === 0 && !showAddForm && (
|
||||
<div className="text-center py-3 text-gray-500 dark:text-gray-400">
|
||||
{plugins.length > 0 ? (
|
||||
<button
|
||||
onClick={() => setShowAddForm(true)}
|
||||
className="text-xs text-purple-600 dark:text-purple-400 hover:underline"
|
||||
>
|
||||
+ Add your first automation
|
||||
</button>
|
||||
) : (
|
||||
<p className="text-xs">
|
||||
Install plugins from the Marketplace to use automations
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventAutomations;
|
||||
Reference in New Issue
Block a user