pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website_event: change the configure tickets button display

Browse Source 
The 'Configure Tickets' button has been extracted to a template to ease
re-usability.
The template's structure has been modified to allow improvement about
this button's display.
We also removed some seemingly useless steps during the end-suer testing tours.

Task-2459617

closes odoo/odoo#71584

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
ram
2021-06-02 07:40:14 +00:00
parent 85c8a47844
commit 4907698611
6 changed files with 70 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_event/static/src/js/website_event_ticket_details.js
+8 -3
View File
@@ -32,15 +32,20 @@ odoo.define('website_event.ticket_details', function (require) {
//--------------------------------------------------------------------------
/**
* When the "Fold Tickets Details" option is active, this will be called each
* time the user expand or fold the tickets (o_wevent_registration_btn). This
* allows to show/hide elements depending on the folding state.
*
* @private
* @param {*} ev
*/
_onTicketDetailsClick: function (ev){
ev.preventDefault();
if (this.foldedByDefault){
$(ev.currentTarget).toggleClass('btn-primary text-left pl-0');
$(ev.currentTarget).siblings().toggleClass('d-none');
this.$('.close').toggleClass('d-none');
let $target = $(ev.currentTarget);
$target.toggleClass('btn-primary');
$target.children().toggleClass('d-none');
$target.siblings('.o_wevent_registration_title, .o_wevent_price_range').toggleClass('d-none');
}
},
/**
addons/website_event/static/src/scss/event_templates_page.scss
+10 -14
View File
@@ -34,24 +34,20 @@
}
}
.o_wevent_registration_title {
font-weight: $font-weight-bold;
text-transform: uppercase;
}
.o_wevent_registration_btn {
flex: 0 0 100%;
transition: none;
&:not(.collapsed) {
box-shadow: none;
}
&.collapsed {
flex: 0 0 33%;
.close {
display: none;
}
}
.close {
display: block;
}
&:not(.collapsed) {
box-shadow: none;
font-weight: $font-weight-bold;
text-transform: uppercase;
transition: none;
}
}
addons/website_event/views/event_templates_page_registration.xml
+40 -34
View File
@@ -116,21 +116,20 @@
<!-- Event - Registration -->
<template id="registration_template" name="Registration">
<div t-if="request.env.user.has_group('event.group_event_manager')" class="alert alert-info rounded-0 o_website_event_configuration o_not_editable" role="status">
<a t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event">
<i class="fa fa-pencil mr-2" role="img" aria-label="Edit" title="Edit event registration in backend"/><em>Configure Event Tickets</em>
</a>
</div>
<div t-if="toast_message" class="o_wevent_register_toaster d-none" t-att-data-message="toast_message"/>
<div t-if="not event.event_registrations_open" class="bg-white mb-5">
<div class="alert alert-info mb-0 d-flex justify-content-between align-items-center" role="status">
<t t-if="not event.event_registrations_started">
<em class="col-md-8">Ticket Sales starting on
<span class="" t-esc="event.start_sale_datetime"
<div class="col-md-8 d-flex">
<em class="mr-2">Ticket Sales starting on
<span class="" t-esc="event.start_sale_datetime"
t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
<span t-esc="event.date_tz"/>
<span t-esc="event.date_tz"/>
</em>
<button class="btn btn-danger mr-1 ml-3 col-md-4" disabled="1">Registrations not yet open</button>
<t t-call="website_event.registration_configure_tickets_button"
t-if="request.env.user.has_group('event.group_event_manager')"/>
</div>
<button class="btn btn-danger ml-2 col-md-4" disabled="1">Registrations not yet open</button>
</t>
<t t-else="">
<div class="col-md-8">
@@ -154,19 +153,17 @@
<t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
<!-- If some tickets expired and there is only one type left, we keep the same layout -->
<t t-if="len(event.event_ticket_ids) &gt; 1 or tickets.description">
<div class="d-flex justify-content-between align-items-center py-2 pl-3 pr-2 border-bottom">
<div id="price-range" class="pr-3 d-none"/>
<div class="d-flex align-items-center py-2 pl-3 pr-2 border-bottom">
<span class="py-2 o_wevent_registration_title text-left">Tickets</span>
<div class="o_wevent_price_range d-none"/>
<t t-call="website_event.registration_configure_tickets_button"
t-if="request.env.user.has_group('event.group_event_manager')"/>
<span t-if="not event.event_registrations_open" class="text-danger">
<i class="fa fa-ban mr-2"/>Sold Out
</span>
<div t-if="event.is_participating" id="registered" class="ml-auto pr-3 d-none">
<span class="o_wevent_badge badge badge-success ml-3">
<i class="fa fa-check mr-2"/>Registered
</span>
</div>
<a href="#" role="button" class="btn o_wevent_registration_btn text-left" data-target="#o_wevent_tickets_collapse">
<span class="py-2">Tickets</span>
<span class="close d-none">×</span>
<a href="#" role="button" class="o_wevent_registration_btn d-none" data-target="#o_wevent_tickets_collapse">
<span>Tickets</span>
<span class="btn p-0 close d-none">×</span>
</a>
</div>
<div id="o_wevent_tickets_collapse" class="collapse show">
@@ -225,18 +222,20 @@
<div t-else="" class="o_wevent_registration_single">
<div class="row p-2 pl-3">
<div class="col-lg-8 d-flex flex-columns align-items-center" itemscope="itemscope" itemtype="http://schema.org/Offer">
<h6 itemprop="name" class="my-0 pr-3 border-right text-dark">
<h6 itemprop="name" class="my-0 pr-3 border-right text-dark o_wevent_single_ticket_name">
<span t-if="tickets" t-field="tickets.name"/>
<span t-else="">Registration</span>
</h6>
<small t-if="tickets.end_sale_datetime and tickets.sale_available and not tickets.is_expired" class="text-muted mr-3" itemprop="availabilityEnds">Sales end on
<span itemprop="priceValidUntil" t-esc="tickets.end_sale_datetime"
t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
<span t-esc="tickets.event_id.date_tz"/>
<span t-esc="tickets.event_id.date_tz"/>
</small>
<t t-call="website_event.registration_configure_tickets_button"
t-if="request.env.user.has_group('event.group_event_manager')"/>
<div class="ml-auto o_wevent_nowrap">
<t t-if="event.event_registrations_open">
<span class="text-dark font-weight-bold align-middle pr-2">Qty</span>
<span class="text-dark font-weight-bold align-middle px-2">Qty</span>
<link itemprop="availability" content="http://schema.org/InStock"/>
<select t-att-name="'nb_register-%s' % (tickets.id if tickets else 0)" class="w-auto custom-select">
<t t-set="seats_max_ticket" t-value="(not tickets or not tickets.seats_limited or tickets.seats_available &gt; 9) and 10 or tickets.seats_available + 1"/>
@@ -403,26 +402,33 @@
</t>
</template>
<!-- Edit Options -->
<!-- Button to configure Tickets -->
<template id="registration_configure_tickets_button" name="Registration Configure Ticket Button">
<div class="o_not_editable mx-2" role="link">
<a class="text-nowrap" t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event">
<i class="fa fa-gear mr-1" role="img" aria-label="Configure" title="Configure event tickets"/><em>Configure Tickets</em>
</a>
</div>
</template>
<!-- This template is called whenever the "Fold Ticket Details" option is checked on the website (Customize > Fold Tickets Details) -->
<template id="fold_register_details" inherit_id="website_event.registration_template" active="False" customize_show="True" name="Fold ticket details">
<xpath expr="//div[@id='o_wevent_tickets']" position="attributes">
<attribute name="data-folded-by-default">1</attribute>
</xpath>
<xpath expr="//div[@id='registered']" position="attributes">
<attribute name="class">ml-auto pr-3</attribute>
</xpath>
<xpath expr="//div[@id='price-range']" position="attributes">
<attribute name="class">ml-0 pr-3</attribute>
</xpath>
<xpath expr="//div[@id='o_wevent_tickets_collapse']" position="attributes">
<attribute name="class">collapse</attribute>
</xpath>
<xpath expr="//a[hasclass('o_wevent_registration_btn')]" position="attributes">
<attribute name="class">btn btn-primary o_wevent_registration_btn collapsed</attribute>
<attribute name="data-toggle">collapse</attribute>
<xpath expr="//span[hasclass('o_wevent_registration_title')]" position="attributes">
<attribute name="class" add="d-none" separator=" "/>
</xpath>
<xpath expr="//span[hasclass('close')]" position="attributes">
<attribute name="class">close d-none</attribute>
<xpath expr="//div[hasclass('o_wevent_price_range')]" position="attributes">
<attribute name="class">o_wevent_price_range</attribute>
</xpath>
<xpath expr="//a[hasclass('o_wevent_registration_btn')]" position="attributes">
<attribute
name="class">btn btn-primary o_wevent_registration_btn collapsed ml-auto</attribute>
<attribute name="data-toggle">collapse</attribute>
</xpath>
</template>
addons/website_event_questions/static/tests/tours/tickets_questions.js
-3
View File
@@ -8,9 +8,6 @@ tour.register('test_tickets_questions', {
}, [{
content: "Click on the Design Fair event",
trigger: 'article:contains("Design Fair New York")',
}, {
content: "Click on Buy tickets button",
trigger: 'a:contains("Tickets")',
}, {
content: "Select 2 'Free' tickets to buy",
trigger: 'div.row:contains("Free") select.custom-select',
addons/website_event_sale/static/tests/tours/website_event_sale.js
-4
View File
@@ -12,10 +12,6 @@ tour.register('event_buy_tickets', {
content: "Go to the `Events` page",
trigger: 'a[href*="/event"]:contains("Conference for Architects TEST"):first',
},
{
content: "Show available Tickets",
trigger: '.o_wevent_registration_btn',
},
{
content: "Select 1 unit of `Standard` ticket type",
extra_trigger: '#wrap:not(:has(a[href*="/event"]:contains("Conference for Architects")))',
addons/website_event_sale/views/website_event_templates.xml
+12 -8
View File
@@ -15,17 +15,21 @@
</t>
<span t-else="" class="font-weight-bold text-uppercase">Free</span>
</xpath>
<xpath expr="//div[@id='price-range']" position="inside">
<span class="text-dark">
From
<span t-esc="event.event_ticket_ids[0].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
to
<span t-esc="event.event_ticket_ids[-1].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
</span>
<xpath expr="//div[hasclass('o_wevent_price_range')]" position="inside">
<t t-if="event.event_ticket_ids[-1].price_reduce > 0">
<span class="text-dark">
From
<span t-esc="event.event_ticket_ids[0].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
<t t-if="event.event_ticket_ids[-1].price_reduce != event.event_ticket_ids[0].price_reduce">
to
<span t-esc="event.event_ticket_ids[-1].price_reduce" t-options="{'widget': 'monetary', 'display_currency': website.pricelist_id.currency_id}"/>
</t>
</span>
</t>
</xpath>
<!-- Add price information on tickets (mono ticket, aka not in collapse) -->
<xpath expr="//div[hasclass('o_wevent_registration_single')]//h6" position="after">
<div class="px-2 text-dark mr-2 d-flex align-items-center align-self-stretch">
<div class="px-2 text-dark d-flex align-items-center align-self-stretch">
<t t-if="tickets.price">
<t t-if="(tickets.price-website.get_current_pricelist().currency_id._convert(tickets.price_reduce, event.company_id.sudo().currency_id, event.company_id, datetime.date.today())) &gt; 1 and website.get_current_pricelist().discount_policy == 'without_discount'">
<del class="text-danger mr-1" t-field="tickets.price" t-options="{'widget': 'monetary', 'from_currency': event.company_id.sudo().currency_id, 'display_currency': website.get_current_pricelist().currency_id}"/>