[IMP] point_of_sale: put the customer's name in the customer change button instead of the order tabs

addons/point_of_sale/static/src/css/pos.css

@@ -622,6 +622,7 @@ td {
     border-bottom-left-radius: 4px;
 }
 .pos .actionpad .button {
+    position: relative;
     display: block;
     height: 54px;
     width: 100%;
@@ -671,6 +672,26 @@ td {
     left: 3px;
 }
 
+.pos .actionpad .button.set-customer{
+    padding-left: 40px;
+    padding-right: 40px;
+}
+.pos .actionpad .button.set-customer.decentered {
+    padding-left: 40px;
+    padding-right: 5px;
+}
+.pos .actionpad .button .fa-user {
+    position: absolute;
+    left: 13px;
+    top: 13px;
+    margin-right: 8px;
+    font-size: 18px;
+    background: rgba(255, 255, 255, 0.5);
+    line-height: 30px;
+    width: 30px;
+    border-radius: 100%;
+}
+
 /*  ********* The Numpad ********* */
 
 .pos .numpad {

addons/point_of_sale/static/src/js/models.js

@@ -69,12 +69,21 @@ exports.PosModel = Backbone.Model.extend({
             'synch':            { state:'connected', pending:0 }, 
             'orders':           new OrderCollection(),
             'selectedOrder':    null,
+            'selectedClient':   null,
         });
 
         this.get('orders').bind('remove', function(order,_unused_,options){ 
             self.on_removed_order(order,options.index,options.reason); 
         });
 
+        // Forward the 'client' attribute on the selected order to 'selectedClient'
+        function update_client() {
+            var order = self.get_order();
+            this.set('selectedClient', order ? order.get_client() : null );
+        }
+        this.get('orders').bind('add remove change', update_client, this);
+        this.bind('change:selectedOrder', update_client, this);
+
         // We fetch the backend data on the server asynchronously. this is done only when the pos user interface is launched,
         // Any change on this data made on the server is thus not reflected on the point of sale until it is relaunched. 
         // when all the data has loaded, we compute some stuff, and declare the Pos ready to be used. 
@@ -588,6 +597,14 @@ exports.PosModel = Backbone.Model.extend({
         return this.get('selectedOrder');
     },
 
+    get_client: function() {
+        var order = this.get_order();
+        if (order) {
+            return order.get_client();
+        }
+        return null;
+    },
+
     // change the current order
     set_order: function(order){
         this.set({ selectedOrder: order });

addons/point_of_sale/static/src/js/screens.js

@@ -381,6 +381,14 @@ var NumpadWidget = PosBaseWidget.extend({
 
 var ActionpadWidget = PosBaseWidget.extend({
     template: 'ActionpadWidget',
+    init: function(parent, options) {
+        var self = this;
+        this._super(parent, options);
+
+        this.pos.bind('change:selectedClient', function() {
+            self.renderElement();
+        });
+    },
     renderElement: function() {
         var self = this;
         this._super();
@@ -1506,6 +1514,11 @@ var PaymentScreenWidget = ScreenWidget.extend({
             self.payment_input(key);
             event.preventDefault();
         };
+
+        this.pos.bind('change:selectedClient', function() {
+            console.log('Customer changed');
+            self.customer_changed();
+        }, this);
     },
     // resets the current input buffer
     reset_input: function(){
@@ -1660,6 +1673,10 @@ var PaymentScreenWidget = ScreenWidget.extend({
             }
         });
     },
+    customer_changed: function() {
+        var client = this.pos.get_client();
+        this.$('.js_customer_name').text( client ? client.name : _t('Customer') ); 
+    },
     click_set_customer: function(){
         this.gui.show_screen('clientlist');
     },

addons/point_of_sale/static/src/xml/pos.xml

@@ -102,8 +102,14 @@
 
     <t t-name="ActionpadWidget">
         <div class="actionpad">
-            <button class='button set-customer'>
-                <i class='fa fa-user' /> Customer
+            <button t-attf-class='button set-customer #{ ( widget.pos.get_client() and widget.pos.get_client().name.length > 10) ? "decentered" : "" }' >
+                <i class='fa fa-user' /> 
+                <t t-if="widget.pos.get_client()">
+                    <t t-esc="widget.pos.get_client().name" />
+                </t>
+                <t t-if="!widget.pos.get_client()">
+                    Customer
+                </t>
             </button>
             <button class='button pay'>
                 <div class='pay-circle'>
@@ -595,7 +601,15 @@
 
                     <div class='payment-buttons'>
                         <div class='button js_set_customer'>
-                            <i class='fa fa-user' />Customer
+                            <i class='fa fa-user' /> 
+                            <span class='js_customer_name'> 
+                                <t t-if="widget.pos.get_client()">
+                                    <t t-esc="widget.pos.get_client().name" />
+                                </t>
+                                <t t-if="!widget.pos.get_client()">
+                                    Customer
+                                </t>
+                            </span>
                         </div>
                         <t t-if='widget.pos.config.iface_invoicing'>
                             <t t-if='widget.pos.get_order()'>
@@ -1204,10 +1218,7 @@
                             <span class='order-sequence'>
                                 <t t-esc='order.sequence_number' />
                             </span>
-                            <t t-if="order.get_client()">
-                                <i class='fa fa-user'/>
-                            </t>
-                            <t t-esc="(order.get_client() ? order.get_client_name()+' : ':'') + moment(order.creation_date).format('hh:mm')"/>
+                            <t t-esc="moment(order.creation_date).format('hh:mm')"/>
                         </span>
                     </t>
                     <t t-if='order !== widget.pos.get_order()'>