popover improvement (#93)

* [FIX] Fix popover placement

* [FIX] Fix popover in xs (phones)

* [ADD] folio and reservation buttons

* [ADD] Folio pending highlights

* [FIX] event is not defined in Firefox
This commit is contained in:
Pablo
2019-02-06 16:14:10 +01:00
committed by GitHub
parent 66d3fea324
commit 0d7667f636
6 changed files with 81 additions and 26 deletions

View File

@@ -49,6 +49,8 @@ class BusHotelCalendar(models.TransientModel):
'fix_days': vals['fix_days'],
'fix_room': False,
'overbooking': vals['overbooking'],
'price_room_services_set': vals['price_room_services_set'],
'amount_total': vals['pending_amount'] + vals['invoices_paid'],
'real_dates': vals['real_dates'],
},
'tooltip': {

View File

@@ -92,6 +92,8 @@ class HotelReservation(models.Model):
'fix_room': False, # Fix Rooms
'overbooking': reserv['overbooking'],
'state': reserv['state'],
'price_room_services_set': reserv['price_room_services_set'],
'amount_total': reserv['amount_total'],
'real_dates': [reserv['real_checkin'], reserv['real_checkout']]})
json_reservation_tooltips.update({
reserv['id']: {
@@ -192,6 +194,7 @@ class HotelReservation(models.Model):
hr.price_room_services_set,
hf.id as folio_id, hf.name as folio_name, hf.reservation_type, hf.invoices_paid, hf.pending_amount,
hf.amount_total,
rp.mobile, rp.phone, rp.email, rp.name as partner_name,

View File

@@ -350,6 +350,12 @@ div.diagonal {
left: 40%;
bottom: 0;
}
div.diagonal_pending_amount {
background-color: #A24689;
}
.diagonal_pending_amount::before {
border-top-color: #A24689;
}
div.triangle-right {
overflow: hidden;
@@ -378,3 +384,7 @@ div.pull-right-custom {
color: #777;
text-align: right;
}
@keyframes blinker {
50% { opacity: 0; }
}

View File

@@ -386,6 +386,16 @@ var PMSCalendarController = AbstractController.extend({
$('.hcal-reservation').removeClass("marked-as-having-a-popover");
};
/* destroy popover if mouse click is done out the popover */
/* except if you click in the payment button */
/* TODO: Review because this event is trigger anywhere, even if you click in other buttons! */
$('html').on('click', function(e) {
if (!$(e.target).hasClass("marked-as-having-a-popover") &&
!$(e.target).parents().is('.popover.in') &&
(e.target.id !== 'payment_folio')) {
_destroy_and_clear_popover_mark();
}
});
this._multi_calendar.on_calendar('hcalOnClickReservation', function(ev){
var active_calendar = self._multi_calendar.get_active_calendar();
if ( active_calendar.getSelectionMode() !== HotelCalendar.MODE.NONE
@@ -403,15 +413,9 @@ var PMSCalendarController = AbstractController.extend({
container: 'body',
animation: false,
html: true,
placement: 'bottom',
placement: 'auto bottom',
content: QWeb.render('HotelCalendar.TooltipReservation', qdict)
}).popover('show');
/* destroy popover if mouse click is done out the popover */
$(document).click(function(e){
if( $(e.target).closest(".popover-content").length == 0 && $(e.target).hasClass("marked-as-having-a-popover") == false ) {
_destroy_and_clear_popover_mark();
}
});
/* add actions */
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_folio").on('click',
{folio_id: ev.detail.reservationObj._userData.folio_id}, function(ev){
@@ -433,12 +437,39 @@ var PMSCalendarController = AbstractController.extend({
views: [[false, 'form']]
});
});
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_payment").on('click',
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_payment_folio").on('click',
{reservation: ev.detail.reservationObj}, function(ev){
if (ev.data.reservation.total_folio <= ev.data.reservation.total_reservation ||
$('#payment_reservation').hasClass('in')) {
_destroy_and_clear_popover_mark();
var x = self._rpc({
model: 'hotel.reservation',
method: 'action_pay_folio',
args: [ev.data.reservation.id],
}).then(function (result){
return self.do_action({
name: result.name,
view_type: result.view_type,
view_mode: result.view_mode,
type: result.type,
res_model: result.res_model,
views: [[result.view_id, 'form']],
context: result.context,
target: result.target,
});
});
} else {
$('#payment_folio').css('color', '#A24689');
$('#folio_pending_amount').css('animation', 'blinker 1s linear');
$('#price_room').css('animation', 'blinker 1s linear');
}
});
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_payment_reservation").on('click',
{reservation_id: ev.detail.reservationObj.id}, function(ev){
_destroy_and_clear_popover_mark();
var x = self._rpc({
model: 'hotel.reservation',
method: 'action_pay_folio',
method: 'action_pay_reservation',
args: [ev.data.reservation_id],
}).then(function (result){
return self.do_action({
@@ -771,7 +802,9 @@ var PMSCalendarController = AbstractController.extend({
'unusedZone': false,
'linkedId': false,
'overbooking': json_reserv['overbooking'],
'cancelled': json_reserv['state'] === 'cancelled'
'cancelled': json_reserv['state'] === 'cancelled',
'total_reservation': json_reserv['price_room_services_set'],
'total_folio': json_reserv['amount_total'],
});
nreserv.addUserData({
'folio_id': json_reserv['folio_id'],

View File

@@ -2992,6 +2992,8 @@ function HReservation(/*Dictionary*/rValues) {
this.overbooking = rValues.overbooking || false;
this.cancelled = rValues.cancelled || false;
this.room = rValues.room || null;
this.total_reservation = rValues.total_reservation || 0;
this.total_folio = rValues.total_folio || 0;
this._drawModes = ['hard-start', 'hard-end'];
this._html = false;
@@ -3046,6 +3048,8 @@ HReservation.prototype = {
'overbooking': this.overbooking,
'cancelled': this.cancelled,
'room_id': this.room_id,
'total_reservation': this.total_reservation,
'total_folio': this.total_folio,
});
nreserv._beds = _.clone(this._beds);
nreserv._html = this._html;

View File

@@ -96,12 +96,12 @@
<t t-name="HotelCalendar.TooltipReservation.Channel.direct">
<div class="row row-eq-height">
<div class="col-sm-12 bg-gray-light">
<div class="col-sm-12 col-xs-12 bg-gray-light">
Sales Channel: <b class="mt-10"><t t-esc="channel_type"/></b>
</div>
</div>
<div class="row row-eq-height">
<div class="col-sm-12 bg-gray-light">
<div class="col-sm-12 col-xs-12 bg-gray-light">
<t t-if="channel_type =='call'">
TODO: add call center information
</t>
@@ -111,19 +111,19 @@
<t t-name="HotelCalendar.TooltipReservation.Customer">
<div class="row row-eq-height">
<div class="col-sm-6 bg-gray-light">
<div class="col-sm-6 col-xs-6 bg-gray-light">
<i class="fa fa-user-circle fa-2x fa-pull-left mt-5"/>
<header><t t-esc="name"/></header>
<p><t t-esc="phone"/></p>
<p class="email"><t t-esc="email"/></p>
</div>
<div class="col-sm-6 bg-gray-lighter">
<div class="col-sm-6 col-xs-6 bg-gray-lighter">
<i class="fa fa-hotel fa-2_5x fa-pull-left mt-5 text-gray-dark"/>
<header class="mt-5"><t t-esc="room_type_name"/></header>
<p><t t-esc="board_service_name"/></p>
<span class="circle pull-left"><t t-esc="price_room_services_set" t-widget="monetary"/></span>
<span class="circle pull-left" id="price_room"><t t-esc="price_room_services_set" t-widget="monetary"/></span>
<p>Adults: <t t-esc="adults"/></p>
<p class="children">Children: <t t-esc="children"/></p>
</div>
@@ -132,7 +132,8 @@
<t t-name="HotelCalendar.TooltipReservation.Sale">
<div class="row row-eq-height mt-3">
<div class="col-sm-6 bg-gray-light pb-3 pr-0 diagonal">
<div id="folio_pending_amount"
t-attf-class="col-sm-6 col-xs-6 bg-gray-light pb-3 pr-0 diagonal {{pending_amount gt 0 ? 'diagonal_pending_amount':''}}">
<div class="on-top">
<div class="pull-left">
<p>Folio Pending</p>
@@ -155,7 +156,7 @@
</div>
</div>
<div class="col-sm-6 bg-gray-light">
<div class="col-sm-6 col-xs-6 bg-gray-light">
<t t-if="channel_type == 'web'">
<t t-call="HotelCalendar.TooltipReservation.Channel.ota"/>
</t>
@@ -168,13 +169,13 @@
<t t-name="HotelCalendar.TooltipReservation.Dates">
<div class="row row-eq-height mt-3">
<div class="col-sm-12 triangle-right">
<div class="col-sm-6 px-0">
<div class="col-sm-12 col-xs-12 triangle-right">
<div class="col-sm-6 col-xs-6 px-0">
<i class="fa fa-sign-in fa-2x fa-pull-left pl-5 py-5"/>
<h3><t t-esc="checkin"/></h3>
<p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p>
</div>
<div class="col-sm-6 text-gray-dark">
<div class="col-sm-6 col-xs-6 text-gray-dark">
<i class="fa fa-sign-out fa-2x fa-pull-left pl-5 py-5"/>
<h3><t t-esc="checkout"/></h3>
<p><t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></p>
@@ -201,9 +202,11 @@
<span class="fa fa-envelope fa-2x" role="button"
title="Send Reservation Email" />
</div>
<div class="col-sm-2 btn_popover_open_payment">
<div class="col-sm-2 btn_popover_open_payment_folio" data-toggle="collapse" data-target="#payment_reservation">
<span class="fa fa-money fa-2x" role="button"
title="Folio Payments" />
title="Folio Payments" id="payment_folio" />
<span class="fa fa-money fa-2x collapse btn_popover_open_payment_reservation" role="button"
title="Reservation Payments" id="payment_reservation" />
</div>
<t t-if="reservation_type =='normal'">
<div class="col-sm-2 btn_popover_open_invoice">
@@ -238,13 +241,13 @@
<t t-name="HotelCalendar.TooltipReservation.staff">
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-6 bg-danger">
<div class="col-sm-6 col-xs-6 bg-danger">
<i class="fa fa-black-tie fa-2x fa-pull-left mt-5"/>
<header><t t-esc="name"/></header>
<p><t t-esc="phone"/></p>
<p class="email"><t t-esc="email"/></p>
</div>
<div class="col-sm-6 bg-gray-lighter">
<div class="col-sm-6 col-xs-6 bg-gray-lighter">
<i class="fa fa-hotel fa-2_5x fa-pull-left mt-5"/>
<header class="mt-5"><t t-esc="room_type_name"/></header>
<p><t t-esc="board_service_name"/></p>
@@ -261,12 +264,12 @@
<t t-name="HotelCalendar.TooltipReservation.out">
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-6 bg-gray-lighter">
<div class="col-sm-6 col-xs-6 bg-gray-lighter">
<i class="fa fa-ban fa-2x fa-pull-left"/>
<header><t t-esc="name"/></header>
<p><t t-esc="out_service_description"/></p>
</div>
<div class="col-sm-6 bg-gray-light">
<div class="col-sm-6 col-xs-6 bg-gray-light">
<i class="fa fa-hotel fa-2x fa-pull-left"/>
<header><t t-esc="room_type_name"/></header>