MODEL/usda-vision
10
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Enhance AvailabilityCalendar component with loading state, toast notifications, and delete confirmation modal

Browse Source 
- Added loading state to indicate data fetching progress.
- Implemented toast notifications for success and error messages during availability operations.
- Introduced a delete confirmation modal for improved user experience when removing availability slots.
- Enhanced TimeSlotModal with validation error handling and loading indicators for adding time slots.
This commit is contained in:
salirezav
2025-12-18 15:56:20 -05:00
parent 0ef87a9aea
commit a3f18b2186
4 changed files with 372 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
scheduling-remote/src/components/scheduling/ui/TimeSlotModal.tsx
View File

@@ -11,6 +11,8 @@ interface TimeSlotModalProps {
onTimeSlotChange: (timeSlot: { startTime: string; endTime: string }) => void
onAdd: () => void
onCancel: () => void
isAdding?: boolean
validationError?: string | null
}
export function TimeSlotModal({
@@ -19,7 +21,9 @@ export function TimeSlotModal({
existingEvents,
onTimeSlotChange,
onAdd,
onCancel
onCancel,
isAdding = false,
validationError = null
}: TimeSlotModalProps) {
const getEventsForDate = (date: Date) => {
return existingEvents.filter(event => {
@@ -28,6 +32,18 @@ export function TimeSlotModal({
})
}
// Validate time slot
const isValid = () => {
if (!newTimeSlot.startTime || !newTimeSlot.endTime) {
return false
}
const [startHour, startMinute] = newTimeSlot.startTime.split(':').map(Number)
const [endHour, endMinute] = newTimeSlot.endTime.split(':').map(Number)
const startMinutes = startHour * 60 + startMinute
const endMinutes = endHour * 60 + endMinute
return startMinutes < endMinutes
}
return (
<div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
<div
@@ -69,7 +85,12 @@ export function TimeSlotModal({
type="time"
value={newTimeSlot.startTime}
onChange={(e) => onTimeSlotChange({ ...newTimeSlot, startTime: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
validationError || !isValid() && newTimeSlot.startTime && newTimeSlot.endTime
? 'border-red-300 dark:border-red-600'
: 'border-gray-300 dark:border-gray-600'
}`}
disabled={isAdding}
/>
</div>
@@ -81,8 +102,18 @@ export function TimeSlotModal({
type="time"
value={newTimeSlot.endTime}
onChange={(e) => onTimeSlotChange({ ...newTimeSlot, endTime: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white ${
validationError || !isValid() && newTimeSlot.startTime && newTimeSlot.endTime
? 'border-red-300 dark:border-red-600'
: 'border-gray-300 dark:border-gray-600'
}`}
disabled={isAdding}
/>
{(validationError || (!isValid() && newTimeSlot.startTime && newTimeSlot.endTime)) && (
<p className="mt-1 text-sm text-red-600 dark:text-red-400">
{validationError || 'End time must be after start time'}
</p>
)}
</div>
</div>
@@ -105,15 +136,27 @@ export function TimeSlotModal({
<div className="flex justify-end space-x-3 mt-6">
<button
onClick={onCancel}
className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
disabled={isAdding}
className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Cancel
</button>
<button
onClick={onAdd}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
disabled={!isValid() || isAdding}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
>
Add Time Slot
{isAdding ? (
<>
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Adding...
</>
) : (
'Add Time Slot'
)}
</button>
</div>
</div>