From da8c4e1be17bc868480f78a6bc09652b2f560694 Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Fri, 27 Sep 2013 12:31:48 +0200
Subject: [PATCH] [IMP] website_sale: sweeter style and size edition on view
 'list'

bzr revid: chm@openerp.com-20130927103148-nwm0amgkn8buk4dd
---
 addons/website/views/views.xml                |  4 +-
 addons/website_event/controllers/main.py      |  1 -
 addons/website_sale/controllers/main.py       | 57 +++++++----------
 addons/website_sale/product.py                |  4 ++
 .../static/src/css/website_sale.css           | 34 ++++++++++
 .../static/src/css/website_sale.sass          | 30 +++++++++
 .../static/src/js/website_sale.js             | 54 ++++++++++++----
 addons/website_sale/views/website_sale.xml    | 62 ++++++++++++++++---
 addons/website_sale/website_sale_data.xml     | 45 --------------
 addons/website_sale/website_sale_demo.xml     |  8 ++-
 10 files changed, 192 insertions(+), 107 deletions(-)

diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 33c0956cb82..0cdb04a4b30 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -344,8 +344,8 @@
         <template id="publish_management">
             <t t-if="editable" t-ignore="true">
               <div t-attf-class="dropdown js_publish_management pull-right #{object.id and object.website_published and 'css_publish' or 'css_unpublish'}" t-att-data-id="object.id" t-att-data-object="object._name">
-                <a t-attf-class="btn btn-#{object.id and object.website_published and 'success' or 'default'}" id="dopprod" role="button" data-toggle="dropdown"> Publish options <span class="caret"></span></a>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dopprod">
+                <a t-attf-class="btn btn-#{object.id and object.website_published and 'success' or 'default'}" t-att-id="'dopprod-%s' % object.id" role="button" data-toggle="dropdown"> Publish options <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % object.id">
                     <t t-raw="0"/>
                     <li>
                         <a href="#" class="js_publish_btn css_unpublish">Unpublish</a>
diff --git a/addons/website_event/controllers/main.py b/addons/website_event/controllers/main.py
index 1e8154cb20b..5c27a985ccf 100644
--- a/addons/website_event/controllers/main.py
+++ b/addons/website_event/controllers/main.py
@@ -30,7 +30,6 @@ from datetime import datetime
 from dateutil.relativedelta import relativedelta
 from openerp import tools
 import urllib
-import werkzeug
 
 
 class website_event(http.Controller):
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 96ce280cd33..1f44c18702a 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -6,13 +6,10 @@ from openerp.addons.web import http
 from openerp.addons.web.http import request
 from openerp.addons.website import website
 import random
-import werkzeug
-import simplejson
 
 def get_order(order_id=None):
     order_obj = request.registry.get('sale.order')
     # check if order allready exists
-    context = {}
     if order_id:
         try:
             order = order_obj.browse(request.cr, SUPERUSER_ID, order_id, request.context)
@@ -73,8 +70,8 @@ class Ecommerce(http.Controller):
     def get_bin_packing_products(self, product_ids, fill_hole, col_number=4):
         """
         Packing all products of the search into a table of #col_number columns in function of the product sizes
-        The size datas of website_style_ids is use for fill table (default 1x1)
-        The other website_style_ids datas are concatenate in a html class
+        The website_size_x, website_size_y is use for fill table (default 1x1)
+        The website_style_ids datas are concatenate in a html class
 
         @values:
 
@@ -111,17 +108,11 @@ class Ecommerce(http.Controller):
             index = len(product_list)
 
             # get size and all html classes
-            _class = ""
-            x = 1
-            y = 1
-            for style_id in product.website_style_ids:
-                if style_id.id in size_ids:
-                    size = size_ids[style_id.id]
-                    x = size[0]
-                    y = size[1]
-                elif style_id.html_class:
-                    _class += " " + style_id.html_class
-            product_list.append({'product': product, 'x': x, 'y': y, 'class': _class })
+            x = product.website_size_x or 1
+            y = product.website_size_y or 1
+            html_class = " ".join([str(style_id.html_class) for style_id in product.website_style_ids])
+
+            product_list.append({'product': product, 'x': x, 'y': y, 'class': html_class })
 
             # bin packing products
             insert = False
@@ -196,7 +187,7 @@ class Ecommerce(http.Controller):
             col = 0
             while col < col_number:
                 if fill_hole and fill_hole_products and bin_packing[line].get(col) == None:
-                    bin_packing[line][col] = {'product': fill_hole_products.pop(), 'x': 1, 'y': 1, 'class': _class }
+                    bin_packing[line][col] = {'product': fill_hole_products.pop(), 'x': 1, 'y': 1, 'class': "" }
                 bin_packing_list[line].append(bin_packing[line].get(col))
                 col += 1
             line += 1
@@ -238,6 +229,12 @@ class Ecommerce(http.Controller):
         product_ids = product_obj.search(request.cr, request.uid, domain, limit=step, offset=pager['offset'], order=self._order, context=request.context)
         fill_hole = product_obj.search(request.cr, request.uid, domain, limit=step, offset=pager['offset']+step, order=self._order, context=request.context)
 
+        styles = []
+        if not request.context['is_public_user']:
+            style_obj = request.registry.get('website.product.style')
+            style_ids = style_obj.search(request.cr, request.uid, [(1, '=', 1)], context=request.context)
+            styles = style_obj.browse(request.cr, request.uid, style_ids, context=request.context)
+
         values = {
             'get_categories': self.get_categories,
             'category_id': cat_id,
@@ -247,6 +244,7 @@ class Ecommerce(http.Controller):
             'get_products': self.get_products,
             'search': post.get("search"),
             'pager': pager,
+            'styles': styles,
         }
         return request.website.render("website_sale.products", values)
 
@@ -272,15 +270,6 @@ class Ecommerce(http.Controller):
 
         product = product_obj.browse(request.cr, request.uid, product_id, context=request.context)
 
-        styles = []
-        styles_used = []
-        if not request.context['is_public_user']:
-            style_obj = request.registry.get('website.product.style')
-            style_ids = style_obj.search(request.cr, request.uid, [(1, '=', 1)], context=request.context)
-            styles = style_obj.browse(request.cr, request.uid, style_ids, context=request.context)
-            for style in product.website_style_ids:
-                styles_used.append(style.id)
-
         values = {
             'category_id': post.get('category_id') and int(post.get('category_id')) or None,
             'category': category,
@@ -288,8 +277,6 @@ class Ecommerce(http.Controller):
             'get_categories': self.get_categories,
             'category_list': category_list,
             'product': product,
-            'styles': styles,
-            'styles_used': styles_used,
         }
         return request.website.render("website_sale.product", values)
 
@@ -587,7 +574,8 @@ class Ecommerce(http.Controller):
 
     @website.route(['/shop/change_styles/'], type='json', auth="public")
     def change_styles(self, id, style_id):
-        product = request.registry.get('product.template').browse(request.cr, request.uid, id, request.context)
+        product_obj = request.registry.get('product.template')
+        product = product_obj.browse(request.cr, request.uid, id, request.context)
 
         remove = []
         active = False
@@ -599,12 +587,6 @@ class Ecommerce(http.Controller):
 
         style = request.registry.get('website.product.style').browse(request.cr, request.uid, style_id, request.context)
 
-        if 'size_' in style.html_class and style.html_class.index('size_') == 0:
-            remove = []
-            for pstyle in product.website_style_ids:
-                if 'size_' in pstyle.html_class and pstyle.html_class.index('size_') == 0:
-                    remove.append(pstyle.id)
-
         if remove:
             print "remove", remove
             product.write({'website_style_ids': [(3, rid) for rid in remove]})
@@ -615,5 +597,10 @@ class Ecommerce(http.Controller):
 
         return not active
 
+    @website.route(['/shop/change_size/'], type='json', auth="public")
+    def change_size(self, id, x, y):
+        product_obj = request.registry.get('product.template')
+        product = product_obj.browse(request.cr, request.uid, id, request.context)
+        return product.write({'website_size_x': x, 'website_size_y': y})
 
 # vim:expandtab:tabstop=4:softtabstop=4:shiftwidth=4:
diff --git a/addons/website_sale/product.py b/addons/website_sale/product.py
index 4c07127617b..d70a34782b4 100644
--- a/addons/website_sale/product.py
+++ b/addons/website_sale/product.py
@@ -37,10 +37,14 @@ class product_template(osv.Model):
         'website_description': fields.html('Description for the website'),
         'suggested_product_id': fields.many2one('product.template', 'Suggested For Product'),
         'suggested_product_ids': fields.one2many('product.template', 'suggested_product_id', 'Suggested Products'),
+        'website_size_x': fields.integer('Size X'),
+        'website_size_y': fields.integer('Size Y'),
         'website_style_ids' : fields.many2many('website.product.style','product_website_style_rel', 'product_id', 'style_id', 'Styles'),
         'website_sequence': fields.integer('Sequence', help="Determine the display order in the Website E-commerce"),
     }
     _defaults = {
+        'website_size_x': 1,
+        'website_size_y': 1,
         'website_sequence': 1,
         'website_published': False,
     }
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index e1c06bd2687..38ef8927e0f 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -138,3 +138,37 @@
 .oe_website_sale .row .row .col-md-12 {
   float: none;
 }
+
+/* ---- Publish managment and options ---- */
+#products_grid .css_options {
+  display: none;
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  z-index: 10;
+}
+#products_grid .css_options .dropdown {
+  position: relative;
+  left: -50%;
+}
+#products_grid .css_options .dropdown [name="size"] table {
+  margin-left: 20px;
+}
+#products_grid .css_options .dropdown [name="size"] td {
+  margin: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  border: 1px #dddddd solid;
+  cursor: pointer;
+}
+#products_grid .css_options .dropdown [name="size"] td.selected, #products_grid .css_options .dropdown [name="size"] td.select {
+  background-color: #b1d4f1;
+}
+#products_grid .css_options .dropdown [name="size"] table.oe_hover td.selected:not(.select) {
+  background-color: transparent;
+}
+
+.cke_editable #products_grid td:hover > .css_options {
+  display: block;
+}
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index ab14b943372..fdfb8a0333b 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -128,3 +128,33 @@
 
 .oe_website_sale .row .row .col-md-12
     float: none
+
+
+/* ---- Publish managment and options ---- */
+#products_grid .css_options
+    display: none
+    position: absolute
+    top: -6px
+    left: 50%
+    z-index: 10
+    .dropdown
+        position: relative
+        left: -50%
+        [name="size"]
+            table
+                margin-left: 20px
+            td
+                margin: 0
+                padding: 0
+                width: 20px
+                height: 20px
+                border: 1px #dddddd solid
+                cursor: pointer
+                &.selected, &.select
+                    background-color: #B1D4F1
+            table.oe_hover td.selected:not(.select)
+                background-color: transparent
+
+.cke_editable
+    #products_grid td:hover > .css_options
+        display: block
\ No newline at end of file
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index ef0fde17731..de77319d4de 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -50,25 +50,57 @@ $(document).ready(function () {
         return false;
     });
 
-    $('.js_publish_management .js_go_to_top,.js_publish_management .js_go_to_bottom').on('click', function () {
-        var $data = $(this).parents(".js_publish_management:first");
-        openerp.jsonRpc('/shop/change_sequence/', 'call', {'id': $data.data('id'), 'top': $(this).hasClass('js_go_to_top')});
+    $(document).on('click', '.js_publish_management .js_go_to_top,.js_publish_management .js_go_to_bottom', function (event) {
+        var $a = $(event.currentTarget);
+        var $data = $a.parents(".js_publish_management:first");
+        openerp.jsonRpc('/shop/change_sequence/', 'call', {'id': $data.data('id'), 'top': $a.hasClass('js_go_to_top')});
     });
 
-    $('.js_publish_management ul[name="style"] a').on('click', function () {
-        var $a = $(this);
+    $(document).on('click', '#products_grid .js_options ul[name="style"] a', function (event) {
+        var $a = $(event.currentTarget);
         var $li = $a.parent();
-        var $data = $(this).parents(".js_publish_management:first");
+        var $data = $a.parents(".js_options:first");
+        var $product = $a.parents(".oe_product:first");
 
-        var data = $a.data();
-        if (data.class.toLowerCase().indexOf('size_') === 0) {
-            $('.js_publish_management ul[name="style"] li:has(a[data-class^="size_"])').removeClass("active");
-        }
         $li.parent().removeClass("active");
-        openerp.jsonRpc('/shop/change_styles/', 'call', {'id': $data.data('id'), 'style_id': data.value})
+        openerp.jsonRpc('/shop/change_styles/', 'call', {'id': $data.data('id'), 'style_id': $a.data("id")})
             .then(function (result) {
+                $product.toggleClass($a.data("class"));
                 $li.toggleClass("active", result);
             });
     });
 
+    $(document).on('mouseenter', '#products_grid .js_options ul[name="size"] table', function (event) {
+        $(event.currentTarget).addClass("oe_hover");
+    });
+    $(document).on('mouseleave', '#products_grid .js_options ul[name="size"] table', function (event) {
+        $(event.currentTarget).removeClass("oe_hover");
+    });
+    $(document).on('mouseover', '#products_grid .js_options ul[name="size"] td', function (event) {
+        var $td = $(event.currentTarget);
+        var $table = $td.parents("table:first");
+        var x = $td.index()+1;
+        var y = $td.parent().index()+1;
+
+        var tr = [];
+        for (var yi=0; yi<y; yi++) tr.push("tr:eq("+yi+")");
+        var $select_tr = $table.find(tr.join(","));
+        var td = [];
+        for (var xi=0; xi<x; xi++) td.push("td:eq("+xi+")");
+        var $select_td = $select_tr.find(td.join(","));
+
+        $table.find("td").removeClass("select");
+        $select_td.addClass("select");
+    });
+    $(document).on('click', '#products_grid .js_options ul[name="size"] td', function (event) {
+        var $td = $(event.currentTarget);
+        var $data = $td.parents(".js_options:first");
+        var x = $td.index()+1;
+        var y = $td.parent().index()+1;
+        openerp.jsonRpc('/shop/change_size/', 'call', {'id': $data.data('id'), 'x': x, 'y': y})
+            .then(function () {
+                location.href =  location.href.replace(/\?|$/, '?') + '&unable_editor=1';
+            });
+    });
+
 });
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 04a9ca37c41..f1142ade0a1 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -156,6 +156,56 @@
                                 t-att-rowspan="td_product['y']"
                                 t-attf-class="oe_product #{ td_product['class'] }"
                                 t-att-data-publish="product.website_published and 'on' or 'off'">
+
+                                <div class="css_options" t-ignore="true">
+                                  <div t-attf-class="dropdown js_options" t-att-data-id="product.id">
+                                    <a class="btn btn-default" t-att-id="'dopprod-%s' % product.id" role="button" data-toggle="dropdown"> Style options <span class="caret"></span></a>
+                                    <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % product.id">
+                                      <li class='dropdown-submenu'>
+                                        <a tabindex="-1" href="#">Size</a>
+                                        <ul class="dropdown-menu" name="size">
+                                          <li><a href="#">
+                                            <table>
+                                              <tr>
+                                                <td class="selected"></td>
+                                                <td t-att-class="product.website_size_x > 1 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_x > 2 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_x > 3 and 'selected'"></td>
+                                              </tr>
+                                              <tr>
+                                                <td t-att-class="product.website_size_y > 1 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 1 and product.website_size_x > 1 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 1 and product.website_size_x > 2 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 1 and product.website_size_x > 3 and 'selected'"></td>
+                                              </tr>
+                                              <tr>
+                                                <td t-att-class="product.website_size_y > 2 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 2 and product.website_size_x > 1 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 2 and product.website_size_x > 2 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 2 and product.website_size_x > 3 and 'selected'"></td>
+                                              </tr>
+                                              <tr>
+                                                <td t-att-class="product.website_size_y > 3 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 3 and product.website_size_x > 1 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 3 and product.website_size_x > 2 and 'selected'"></td>
+                                                <td t-att-class="product.website_size_y > 3 and product.website_size_x > 3 and 'selected'"></td>
+                                              </tr>
+                                            </table>
+                                          </a></li>
+                                        </ul>
+                                      </li>
+                                      <li class='dropdown-submenu'>
+                                        <a tabindex="-1" href="#">Styles</a>
+                                        <ul class="dropdown-menu" name="style">
+                                          <t t-foreach="styles" t-as="style">
+                                            <li t-att-class="style.id in [s.id for s in product.website_style_ids] and 'active' or ''"><a href="#" t-att-data-id="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
+                                          </t>
+                                        </ul>
+                                      </li>
+                                    </ul>
+                                  </div>
+                                </div>
+
                                 <t t-call="website_sale.products_cart"/>
                             </td>
                             </t>
@@ -226,27 +276,19 @@
                   <div class="col-sm-5">
                       <ol class="breadcrumb">
                           <li><a t-href="/shop">Products</a></li>
-                          <li t-if="category"><a t-href="'/shop/category/%s' % (category_id,)"><span t-field="category.name"/></a></li>
+                          <li t-if="category"><a t-att-href="'/shop/category/%s' % (category_id,)"><span t-field="category.name"/></a></li>
                           <li class="active" t-field="product.name">Product Name</li>
                       </ol>
                   </div><div class="col-sm-3">
                       <t t-call="website.publish_management">
                         <t t-set="object" t-value="product"/>
                         <li class='dropdown-submenu'>
-                            <a tabindex="-1" href="#">Sequence</a>
+                            <a tabindex="-1" href="#">Promote</a>
                             <ul class="dropdown-menu" name="sequence">
                                 <li><a href="#" class="js_go_to_top">Push on top</a></li>
                                 <li><a href="#" class="js_go_to_bottom">Push on bottom</a></li>
                             </ul>
                         </li>
-                        <li class='dropdown-submenu'>
-                            <a tabindex="-1" href="#">Styles</a>
-                            <ul class="dropdown-menu" name="style">
-                                <t t-foreach="styles" t-as="style">
-                                    <li t-att-class="style.id in styles_used and 'active' or ''"><a href="#" t-att-data-value="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
-                                </t>
-                            </ul>
-                        </li>
                       </t>
                   </div><div class="col-sm-3 col-sm-offset-1">
                       <form t-action="/shop/#{ category_id and ('category/%s/' % category_id) or ''}" method="get" class="pull-right">
diff --git a/addons/website_sale/website_sale_data.xml b/addons/website_sale/website_sale_data.xml
index bbbab31eedf..14707a0dad1 100644
--- a/addons/website_sale/website_sale_data.xml
+++ b/addons/website_sale/website_sale_data.xml
@@ -17,50 +17,5 @@
             <field name="html_class">oe_image_full</field>
         </record>
 
-        <record id="website_sale.size2x1" model="website.product.style">
-            <field name="name">Size 2x1</field>
-            <field name="html_class">size_2x1</field>
-        </record>
-        <record id="website_sale.size3x1" model="website.product.style">
-            <field name="name">Size 3x1</field>
-            <field name="html_class">size_3x1</field>
-        </record>
-        <record id="website_sale.size1x2" model="website.product.style">
-            <field name="name">Size 1x2</field>
-            <field name="html_class">size_1x2</field>
-        </record>
-        <record id="website_sale.size1x3" model="website.product.style">
-            <field name="name">Size 1x3</field>
-            <field name="html_class">size_1x3</field>
-        </record>
-        <record id="website_sale.size2x2" model="website.product.style">
-            <field name="name">Size 2x2</field>
-            <field name="html_class">size_2x2</field>
-        </record>
-        <record id="website_sale.size2x3" model="website.product.style">
-            <field name="name">Size 2x3</field>
-            <field name="html_class">size_2x3</field>
-        </record>
-        <record id="website_sale.size3x2" model="website.product.style">
-            <field name="name">Size 3x2</field>
-            <field name="html_class">size_3x2</field>
-        </record>
-        <record id="website_sale.size3x3" model="website.product.style">
-            <field name="name">Size 3x3</field>
-            <field name="html_class">size_3x3</field>
-        </record>
-        <record id="website_sale.size4x1" model="website.product.style">
-            <field name="name">Size 4x1</field>
-            <field name="html_class">size_4x1</field>
-        </record>
-        <record id="website_sale.size4x2" model="website.product.style">
-            <field name="name">Size 4x2</field>
-            <field name="html_class">size_4x2</field>
-        </record>
-        <record id="website_sale.size4x3" model="website.product.style">
-            <field name="name">Size 4x3</field>
-            <field name="html_class">size_4x3</field>
-        </record>
-
     </data>
 </openerp>
diff --git a/addons/website_sale/website_sale_demo.xml b/addons/website_sale/website_sale_demo.xml
index bf0edd63cd6..eb112344764 100644
--- a/addons/website_sale/website_sale_demo.xml
+++ b/addons/website_sale/website_sale_demo.xml
@@ -8,7 +8,9 @@
         
         <record id="product.product_product_4" model="product.product">
             <field name="website_published" eval="True"/>
-            <field name="website_style_ids" eval="[(6,0,[ref('website_sale.size2x2')])]"/>
+            <field name="website_size_x">2</field>
+            <field name="website_size_y">2</field>
+            <field name="website_style_ids" eval="[(6,0,[ref('website_sale.image_full')])]"/>
             <field name="website_description" type="html">
                 <section snippet-id="text-image" class="mt16 mb16 dark">
                     <div class="container">
@@ -57,7 +59,7 @@
         </record>
         <record id="product.product_product_5" model="product.product">
             <field name="website_published" eval="True"/>
-            <field name="website_style_ids" eval="[(6,0,[ref('website_sale.size2x1')])]"/>
+            <field name="website_size_x">2</field>
         </record>
         <record id="product.product_product_6" model="product.product">
             <field name="website_published" eval="True"/>
@@ -74,7 +76,7 @@
         </record>
         <record id="product.product_product_11" model="product.product">
             <field name="website_published" eval="True"/>
-            <field name="website_style_ids" eval="[(6,0,[ref('website_sale.size1x2')])]"/>
+            <field name="website_size_y">2</field>
         </record>
     </data>
 </openerp>