Restructured the customer's appointments column and added direct link to editing an appointment.

application/views/backend/customers.php

@@ -149,8 +149,8 @@
 
                 <div class="col-12 col-md-6">
                     <h3><?= lang('appointments') ?></h3>
-                    <div id="customer-appointments" class="card card-body bg-light border-light"></div>
+                    <div id="customer-appointments" class="card bg-light border-light"></div>
-                    <div id="appointment-details" class="card card-body bg-light border-light d-none"></div>
+                    <div id="appointment-details" class="card bg-light border-light d-none"></div>
                 </div>
             </div>
     	</div>

assets/css/backend.css

@@ -614,12 +614,14 @@ body .form-horizontal .controls {
    -------------------------------------------------------------------- */
 
 #customers-page #customer-appointments {
-    height: 370px;
+    min-height: 400px;
+    max-height: 800px;
     max-width: 330px;
     width: 100%;
     margin-bottom: 20px;
     overflow-y: auto;
     outline: none;
+    padding: 15px;
 }
 
 #customers-page #customer-appointments .appointment-row {
@@ -632,24 +634,6 @@ body .form-horizontal .controls {
     border-bottom: none;
 }
 
-#customers-page #customer-appointments .appointment-row:hover:not(.selected) {
-    background-color: #F3F3F3;
-    cursor: pointer;
-}
-
-#customers-page #customer-appointments .appointment-row.selected {
-    background-color: #E2E2E2;
-}
-
-#customers-page #appointment-details {
-    max-width: 330px;
-    margin-bottom: 20px;
-}
-
-#customers-page #appointment-details div {
-    padding: 10px;
-    background: #F8F8F8;
-}
 
 /* BACKEND SERVICES PAGE
    -------------------------------------------------------------------- */

assets/js/backend_customers_helper.js

@@ -74,30 +74,6 @@
             $('#edit-customer, #delete-customer').prop('disabled', false);
         });
 
-        /**
-         * Event: Appointment Row "Click"
-         *
-         * Display appointment data of the selected row.
-         */
-        $(document).on('click', '.appointment-row', function () {
-            $('#customer-appointments .selected').removeClass('selected');
-            $(this).addClass('selected');
-
-            var customerId = $('#filter-customers .selected').attr('data-id');
-
-            var customer = instance.filterResults.find(function (filterResult) {
-                return Number(filterResult.id) === Number(customerId);
-            });
-
-            var appointmentId = $(this).attr('data-id');
-
-            var appointment = customer.appointments.find(function (customerAppointment) {
-                return Number(customerAppointment.id) === Number(appointmentId);
-            });
-
-            instance.displayAppointment(appointment);
-        });
-
         /**
          * Event: Add Customer Button "Click"
          */
@@ -284,7 +260,6 @@
             .prop('disabled', true);
 
         $('#customer-appointments').empty();
-        $('#appointment-details').toggleClass('d-none', true).empty();
         $('#edit-customer, #delete-customer').prop('disabled', true);
         $('#add-edit-delete-group').show();
         $('#save-cancel-group').hide();
@@ -315,6 +290,14 @@
         $('#timezone').val(customer.timezone);
 
         $('#customer-appointments').empty();
+
+        if (!customer.appointments.length) {
+            $('<p/>', {
+                'text': EALang.no_records_found
+            })
+                .appendTo('#customer-appointments');
+        }
+
         customer.appointments.forEach(function (appointment) {
             if (GlobalVariables.user.role_slug === Backend.DB_SLUG_PROVIDER && parseInt(appointment.id_users_provider) !== GlobalVariables.user.id) {
                 return;
@@ -331,22 +314,44 @@
                 'class': 'appointment-row',
                 'data-id': appointment.id,
                 'html': [
-                    $('<span/>', {
+                    // Service - Provider
-                        'text': start + ' - ' + end
+
+                    $('<a/>', {
+                        'href': GlobalVariables.baseUrl + '/index.php/backend/index/' + appointment.hash,
+                        'html': [
+                            $('<i/>', {
+                                'class': 'far fa-edit mr-1'
+                            }),
+                            $('<strong/>', {
+                                'text': appointment.service.name + ' - ' + appointment.provider.first_name + ' ' + appointment.provider.last_name
+                            }),
+                            $('<br/>'),
+                        ]
+                    }),
+
+                    // Start
+
+                    $('<small/>', {
+                        'text': start
                     }),
                     $('<br/>'),
-                    $('<span/>', {
+
-                        'text': appointment.service.name
+                    // End
+
+                    $('<small/>', {
+                        'text': end
                     }),
-                    $('<span/>', {
+                    $('<br/>'),
-                        'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
+
+                    // Timezone
+
+                    $('<small/>', {
+                        'text': GlobalVariables.timezones[GlobalVariables.user.timezone]
                     })
                 ]
             })
                 .appendTo('#customer-appointments');
         });
-
-        $('#appointment-details').empty();
     };
 
     /**
@@ -464,42 +469,5 @@
         }
     };
 
-    /**
-     * Display appointment details on customers backend page.
-     *
-     * @param {Object} appointment Appointment data
-     */
-    CustomersHelper.prototype.displayAppointment = function (appointment) {
-        var start = GeneralFunctions.formatDate(Date.parse(appointment.start_datetime), GlobalVariables.dateFormat, true);
-        var end = GeneralFunctions.formatDate(Date.parse(appointment.end_datetime), GlobalVariables.dateFormat, true);
-        var timezone = GlobalVariables.timezones[GlobalVariables.user.timezone];
-
-        $('#appointment-details').empty();
-
-        $('<div/>', {
-            'html': [
-                $('<strong/>', {
-                    'text': appointment.service.name
-                }),
-                $('<br/>'),
-                $('<span/>', {
-                    'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
-                }),
-                $('<br/>'),
-                $('<span/>', {
-                    'text': start + ' - ' + end
-                }),
-                $('<br/>'),
-                $('<span/>', {
-                    'text': EALang.timezone + ': ' + timezone
-                }),
-                $('<br/>')
-            ]
-        })
-            .appendTo('#appointment-details');
-
-        $('#appointment-details').removeClass('d-none');
-    };
-
     window.CustomersHelper = CustomersHelper;
 })();