maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

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

Browse source
This commit is contained in:
Alex Tselegidis 2020-09-08 10:42:58 +03:00
parent e2bbef8fff
commit be85f46158
3 changed files with 43 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
application/views/backend/customers.php
View file

@ -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>

22
assets/css/backend.css
View file

@ -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
-------------------------------------------------------------------- */

108
assets/js/backend_customers_helper.js
View file

@ -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/>'),
$('<span/>', {
'text': appointment.service.name
]
}),
$('<span/>', {
'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
// Start
$('<small/>', {
'text': start
}),
$('<br/>'),
// End
$('<small/>', {
'text': end
}),
$('<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;
})();