No non-necessary ajax request sent when no staff member selected (#93)

Author: adamspd

appointment/static/js/appointments.js

@@ -180,9 +180,28 @@ function formatTime(date) {
 }
 
 function getAvailableSlots(selectedDate, staffId = null) {
-    // Send an AJAX request to get the available slots for the selected date
-    if (staffId === null) {
-        return;
+    // Update the slot list with the available slots for the selected date
+    const slotList = $('#slot-list');
+    const slotContainer = $('.slot-container');
+    const errorMessageContainer = $('.error-message');
+
+    // Clear previous error messages and slots
+    slotList.empty();
+    errorMessageContainer.find('.djangoAppt_no-availability-text').remove();
+
+    // Remove the "Next available date" message
+    nextAvailableDateSelector = $('.djangoAppt_next-available-date'); // Update the selector
+    nextAvailableDateSelector.remove();
+
+    // Correctly check if staffId is 'none', null, or undefined and exit the function if true
+    // Check if staffId is 'none', null, or undefined and display an error message
+    if (staffId === 'none' || staffId === null || staffId === undefined) {
+        console.log('No staff ID provided, displaying error message.');
+        const errorMessage = $('<p class="djangoAppt_no-availability-text">'+ noStaffMemberSelected + '</p>');
+        errorMessageContainer.append(errorMessage);
+        // Optionally disable the submit button here
+        $('.btn-submit-appointment').attr('disabled', 'disabled');
+        return; // Exit the function early
     }
 
     let ajaxData = {
@@ -200,28 +219,20 @@ function getAvailableSlots(selectedDate, staffId = null) {
             console.error('Failed to get non-working days:', nonWorkingDays);
         }
     });
+
+    // Send an AJAX request to get the available slots for the selected date
     $.ajax({
         url: availableSlotsAjaxURL,
         data: ajaxData,
         dataType: 'json',
         success: function (data) {
-            // Update the slot list with the available slots for the selected date
-            const slotList = $('#slot-list');
-            slotList.empty();
-            const slotContainer = $('.slot-container');
-            // Remove the "Next available date" message
-            nextAvailableDateSelector = $('.djangoAppt_next-available-date'); // Update the selector
-            nextAvailableDateSelector.remove();
-            const errorMessageContainer = $('.error-message');
-
             if (data.available_slots.length === 0) {
                 const selectedDateObj = moment.tz(selectedDate, timezone);
                 const selectedD = selectedDateObj.toDate();
                 const today = new Date();
                 today.setHours(0, 0, 0, 0);
 
                 if (selectedD < today) {
-                    errorMessageContainer.find('.djangoAppt_no-availability-text').remove();
                     // Show an error message
                     errorMessageContainer.append('<p class="djangoAppt_no-availability-text">Date is in the past.</p>');
                     if (slotContainer.find('.djangoAppt_btn-request-next-slot').length === 0) {

appointment/templates/appointment/appointments.html

@@ -111,6 +111,7 @@ <h1 class="page-title">{{ service.name }}</h1>
     </script>
     <script>
         const requestNonAvailableSlotBtnTxt = "{% trans 'Request next available slot' %}";
+        const noStaffMemberSelected = "{% trans 'No staff member selected.' %}"
     </script>
     <script src="{% static 'js/appointments.js' %}"></script>
     <script src="{% static 'js/js-utils.js' %}"></script>

appointment/tests/test_views.py

@@ -76,7 +76,7 @@ def test_get_available_slots_ajax(self):
         url = reverse('appointment:available_slots_ajax')
         response = self.client.get(url, {'selected_date': date.today().isoformat()},
                                    HTTP_X_REQUESTED_WITH='XMLHttpRequest')
-        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.status_code, 403)
         response_data = response.json()
         self.assertIn('date_chosen', response_data)
         self.assertIn('available_slots', response_data)

appointment/views.py

@@ -63,7 +63,7 @@ def get_available_slots_ajax(request):
         custom_data['error'] = False
         message = _('No staff member selected')
         return json_response(message=message, custom_data=custom_data, success=False,
-                             error_code=ErrorCode.STAFF_ID_REQUIRED)
+                             error_code=ErrorCode.STAFF_ID_REQUIRED, status=403)
 
     sm = get_object_or_404(StaffMember, pk=staff_id)
     custom_data['staff_member'] = sm.get_staff_member_name()