mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-08 17:12:25 +03:00
Restructured the customer's appointments column and added direct link to editing an appointment.
This commit is contained in:
parent
e2bbef8fff
commit
be85f46158
3 changed files with 43 additions and 91 deletions
|
@ -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="appointment-details" class="card card-body bg-light border-light d-none"></div>
|
||||
<div id="customer-appointments" class="card bg-light border-light"></div>
|
||||
<div id="appointment-details" class="card bg-light border-light d-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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
|
||||
-------------------------------------------------------------------- */
|
||||
|
|
|
@ -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/>', {
|
||||
'text': start + ' - ' + end
|
||||
// Service - Provider
|
||||
|
||||
$('<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/>', {
|
||||
'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
|
||||
$('<br/>'),
|
||||
|
||||
// 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;
|
||||
})();
|
||||
|
|
Loading…
Reference in a new issue