Awislabs Engineering blog

Today has been an incredibly productive day for our team as we continue to build and refine our school scheduling system. Here’s a detailed look at what we accomplished:

Enhancing the Schedule Table Component

One of the significant enhancements today was updating the Schedule Table component to handle drag-and-drop functionality for subjects and schedule items. This new feature allows users to drag subjects from a list and drop them directly into the schedule table, simplifying the process of creating and updating schedules.

Drag-and-Drop Implementation

To achieve this, we introduced a subjects section at the top of the schedule table. Each subject can be dragged and dropped into the table cells, where it is automatically assigned to the corresponding time slot and day. We implemented this using Alpine.js for handling the drag-and-drop events and Livewire for server-side updates.

<div class="mb-6">
        <h2 class="text-xl font-semibold mb-4">Subjects</h2>
        <div class="flex flex-wrap gap-4">
            @foreach ($subjects as $subject)
                <div draggable="true"
                     @dragstart="dragSubject(event, '{{ $subject->id }}')"
                     class="bg-gray-200 p-3 rounded-lg shadow-md cursor-pointer">
                    {{ $subject->name }}
                </div>
            @endforeach
        </div>
    </div>

in table cell:

x-on:drop="dropHandler(event, '{{ $timeSlot['value'] }}', '{{ $day }}')" 

js:

function scheduleDragAndDrop() {
    return {
        draggedItemId: null,
        draggedSubjectId: null,

        dragItem(event, itemId) {
            this.draggedItemId = itemId;
            event.dataTransfer.effectAllowed = 'move';
        },

        dragSubject(event, subjectId) {
            this.draggedSubjectId = subjectId;
            event.dataTransfer.effectAllowed = 'move';
        },

        dropHandler(event, timeSlotValue, day) {
            if (this.draggedItemId) {
                @this.call('updateScheduleItem', this.draggedItemId, timeSlotValue, day);
                this.draggedItemId = null;
            } else if (this.draggedSubjectId) {
                Livewire.dispatch('openModal', {
                    component: 'modals.edit-schedule',
                    arguments: { timeSlot: timeSlotValue, day: day, schoolId: '{{ $schoolId }}', scheduleId: '{{ $schedule->id }}', selectedSubject: this.draggedSubjectId }
                })
                this.draggedSubjectId = null;
            }
        }
    }
}

Handling Schedule Clashes

We also implemented a feature to check for time clashes when scheduling. Using the spatie/period package, we now validate whether a schedule item overlaps with another item for the same teacher within the same school session. This ensures that teachers are not double-booked and helps in managing the timetable more efficiently.

Improved UI for Viewing and Managing Data

We enhanced the user interface for viewing and managing teachers, classrooms, and subjects by incorporating tables instead of lists. This provides a more structured and visually appealing layout. Additionally, we added action buttons for editing and deleting entries directly from the table, using Heroicons for intuitive icons.

Adding Roles and Permissions

To enhance security and manageability, we integrated the spatie/laravel-permission package to manage user roles and permissions. Now, superadmins can assign roles to any user, while admins can assign roles to teachers and students within their respective schools.

Importing Data from Spreadsheets

We made significant progress in simplifying the data entry process by enabling the import of subjects, teachers, and classrooms from spreadsheets. Users can now paste data directly from Google Sheets or Excel into a textarea, and the system will parse and save the entries, significantly reducing manual entry time.

Next Steps

As we move forward, we plan to:

• Further refine the drag-and-drop functionality for a more seamless user experience.

• Implement additional validation checks to ensure data integrity.

• Continue enhancing the UI for better usability and aesthetics.

Conclusion

Today’s updates mark a significant step forward in our journey to build a robust and user-friendly school scheduling system. We are excited about the progress and look forward to continuing to enhance the system to meet the needs of our users.

Stay tuned for more updates as we continue to develop and improve this platform!