Add EditChoreModal component for admin chore editing
New component that allows admins to edit existing chores: - Loads chore data and pre-populates form with current values - Multi-user checkbox selection grid - Updates all chore fields: title, description, room, frequency, points, due_date, assigned_user_ids - Loading spinner while fetching chore - Error handling with detailed messages - Admin-only feature called from ChoreCard edit button
This commit is contained in:
303
frontend/src/components/EditChoreModal.tsx
Normal file
303
frontend/src/components/EditChoreModal.tsx
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { choreService, Chore, UpdateChoreRequest } from '../api/chores';
|
||||||
|
import api from '../api/axios';
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
full_name: string;
|
||||||
|
is_active: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EditChoreModalProps {
|
||||||
|
choreId: number;
|
||||||
|
onClose: () => void;
|
||||||
|
onSuccess: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EditChoreModal: React.FC<EditChoreModalProps> = ({ choreId, onClose, onSuccess }) => {
|
||||||
|
const [chore, setChore] = useState<Chore | null>(null);
|
||||||
|
const [formData, setFormData] = useState<UpdateChoreRequest>({});
|
||||||
|
const [users, setUsers] = useState<User[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadChoreAndUsers();
|
||||||
|
}, [choreId]);
|
||||||
|
|
||||||
|
const loadChoreAndUsers = async () => {
|
||||||
|
try {
|
||||||
|
const [choreData, usersData] = await Promise.all([
|
||||||
|
choreService.getChore(choreId),
|
||||||
|
api.get<User[]>('/api/v1/users')
|
||||||
|
]);
|
||||||
|
|
||||||
|
setChore(choreData);
|
||||||
|
setUsers(usersData.data.filter(u => u.is_active));
|
||||||
|
|
||||||
|
// Initialize form with current chore data
|
||||||
|
setFormData({
|
||||||
|
title: choreData.title,
|
||||||
|
description: choreData.description || '',
|
||||||
|
room: choreData.room,
|
||||||
|
frequency: choreData.frequency,
|
||||||
|
points: choreData.points,
|
||||||
|
assigned_user_ids: choreData.assigned_users.map(u => u.id),
|
||||||
|
due_date: choreData.due_date ? choreData.due_date.split('T')[0] : '',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load chore:', error);
|
||||||
|
setError('Failed to load chore details');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError('');
|
||||||
|
setIsSaving(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const submitData = { ...formData };
|
||||||
|
if (submitData.due_date) {
|
||||||
|
submitData.due_date = `${submitData.due_date}T23:59:59`;
|
||||||
|
}
|
||||||
|
|
||||||
|
await choreService.updateChore(choreId, submitData);
|
||||||
|
onSuccess();
|
||||||
|
} catch (err: any) {
|
||||||
|
let errorMessage = 'Failed to update chore';
|
||||||
|
|
||||||
|
if (err.response?.data) {
|
||||||
|
const errorData = err.response.data;
|
||||||
|
if (Array.isArray(errorData.detail)) {
|
||||||
|
errorMessage = errorData.detail
|
||||||
|
.map((e: any) => `${e.loc?.join('.')}: ${e.msg}`)
|
||||||
|
.join(', ');
|
||||||
|
} else if (typeof errorData.detail === 'string') {
|
||||||
|
errorMessage = errorData.detail;
|
||||||
|
} else if (typeof errorData === 'string') {
|
||||||
|
errorMessage = errorData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setError(errorMessage);
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: name === 'points' ? parseInt(value) || 0 : value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleUserAssignment = (userId: number) => {
|
||||||
|
setFormData(prev => {
|
||||||
|
const currentIds = prev.assigned_user_ids || [];
|
||||||
|
const isAssigned = currentIds.includes(userId);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
assigned_user_ids: isAssigned
|
||||||
|
? currentIds.filter(id => id !== userId)
|
||||||
|
: [...currentIds, userId]
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl p-8">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">Loading chore...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!chore) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900">Edit Chore</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Chore Title *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="title"
|
||||||
|
name="title"
|
||||||
|
type="text"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Description
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
name="description"
|
||||||
|
value={formData.description}
|
||||||
|
onChange={handleChange}
|
||||||
|
rows={2}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="room" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Room/Area *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="room"
|
||||||
|
name="room"
|
||||||
|
type="text"
|
||||||
|
value={formData.room}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="frequency" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Frequency *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="frequency"
|
||||||
|
name="frequency"
|
||||||
|
value={formData.frequency}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="on_trigger">On Trigger</option>
|
||||||
|
<option value="daily">Daily</option>
|
||||||
|
<option value="weekly">Weekly</option>
|
||||||
|
<option value="fortnightly">Fortnightly</option>
|
||||||
|
<option value="monthly">Monthly</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="points" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Points ⭐
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="points"
|
||||||
|
name="points"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
value={formData.points}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="due_date" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Due Date
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="due_date"
|
||||||
|
name="due_date"
|
||||||
|
type="date"
|
||||||
|
value={formData.due_date}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Multi-User Assignment */}
|
||||||
|
<div className="border-t border-gray-200 pt-4">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||||
|
Assign To (select multiple)
|
||||||
|
</label>
|
||||||
|
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto border border-gray-200 rounded-lg p-3">
|
||||||
|
{users.map(user => (
|
||||||
|
<label
|
||||||
|
key={user.id}
|
||||||
|
className={`flex items-center p-2 rounded cursor-pointer transition-colors ${
|
||||||
|
formData.assigned_user_ids?.includes(user.id)
|
||||||
|
? 'bg-blue-50 border border-blue-300'
|
||||||
|
: 'hover:bg-gray-50 border border-transparent'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.assigned_user_ids?.includes(user.id) || false}
|
||||||
|
onChange={() => toggleUserAssignment(user.id)}
|
||||||
|
className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-sm text-gray-900">{user.full_name}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{formData.assigned_user_ids && formData.assigned_user_ids.length > 0 && (
|
||||||
|
<p className="mt-2 text-sm text-gray-600">
|
||||||
|
{formData.assigned_user_ids.length} user(s) selected
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSaving}
|
||||||
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditChoreModal;
|
||||||
Reference in New Issue
Block a user