shopfloor_mobile: add icons to qty picker packagings

camptocamp · Jan 11, 2024 · 5eece6b · 5eece6b
1 parent 7d6cafb
commit 5eece6b
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 4 deletions.
diff --git a/shopfloor/actions/data.py b/shopfloor/actions/data.py
@@ -153,6 +153,7 @@ def _packaging_parser(self):
             "id",
             ("packaging_type_id:name", lambda rec, fname: rec.packaging_type_id.name),
             ("packaging_type_id:code", lambda rec, fname: rec.packaging_type_id.code),
+            ("packaging_type_id:shopfloor_icon", self._packaging_icon_data),
             "qty",
         ]
 
@@ -316,6 +317,17 @@ def _product_packaging(self, rec, field):
             multi=True,
         )
 
+    def _packaging_icon_data(self, rec, field):
+        icon_data = {"alt_text": rec.packaging_type_id.name}
+        if not rec.packaging_type_id.shopfloor_icon:
+            return icon_data
+        icon_data[
+            "url"
+        ] = "/web/image/product.packaging.type/{}/shopfloor_icon/30x30".format(
+            rec.packaging_type_id.id
+        )
+        return icon_data
+
     def _product_supplier_code(self, rec, field):
         supplier_info = fields.first(
             rec.seller_ids.filtered(lambda x: x.product_id == rec)

diff --git a/shopfloor/actions/schema.py b/shopfloor/actions/schema.py
@@ -135,6 +135,14 @@ def packaging(self):
             "name": {"type": "string", "nullable": False, "required": True},
             "code": {"type": "string", "nullable": True, "required": True},
             "qty": {"type": "float", "required": True},
+            "shopfloor_icon": {
+                "type": "dict",
+                "required": False,
+                "schema": {
+                    "url": {"type": "string", "required": False},
+                    "alt_text": {"type": "string", "required": False},
+                },
+            },
         }
 
     def delivery_packaging(self):

diff --git a/shopfloor/models/product_packaging_type.py b/shopfloor/models/product_packaging_type.py
@@ -1,9 +1,14 @@
-# Part of Odoo. See LICENSE file for full copyright and licensing details.
+# Copyright 2023 Camptocamp SA (http://www.camptocamp.com)
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 
 from odoo import fields, models
 
 
 class ProductPackagingType(models.Model):
     _inherit = "product.packaging.type"
 
-    icon = fields.Image()
+    shopfloor_icon = fields.Binary(
+        help="Icon to be displayed in the frontend qty picker. "
+        "Its final size will be a 30x30 image, "
+        "which means that square-shaped icons will work best."
+    )
diff --git a/shopfloor/tests/test_actions_data_base.py b/shopfloor/tests/test_actions_data_base.py
@@ -148,9 +148,17 @@ def _expected_packaging(self, record, **kw):
             "code": record.packaging_type_id.code,
             "qty": record.qty,
         }
+        data["shopfloor_icon"] = self._expected_packaging_shopfloor_icon(record)
         data.update(kw)
         return data
 
+    def _expected_packaging_shopfloor_icon(self, record):
+        shopfloor_icon_data = {"alt_text": record.packaging_type_id.name}
+        shopfloor_icon = record.packaging_type_id.shopfloor_icon
+        if shopfloor_icon:
+            shopfloor_icon_data["url"] = shopfloor_icon
+        return shopfloor_icon_data
+
     def _expected_delivery_packaging(self, record, **kw):
         data = {
             "id": record.id,

diff --git a/shopfloor/views/product_packaging_type.xml b/shopfloor/views/product_packaging_type.xml
@@ -10,7 +10,7 @@
         <field name="arch" type="xml">
             <field name="name" position="after">
                 <div>
-                    <field name="icon" widget="image" width="90" />
+                    <field name="shopfloor_icon" widget="image" width="90" />
                 </div>
             </field>
         </field>

diff --git a/shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js b/shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js
@@ -280,10 +280,17 @@ export var PackagingQtyPicker = Vue.component("packaging-qty-picker", {
                     <v-col cols="2" md="2" v-if="!readonly">
                         <span class="qty-todo">/ {{ qty_todo_by_pkg[pkg.id] }}</span>
                     </v-col>
-                    <v-col>
+                    <v-col cols="4">
                         <div :class="qty_by_pkg[pkg.id] > 0 ? 'pkg-name font-weight-bold' : 'pkg-name'"> {{ pkg[pkgNameKey] }}</div>
                         <div v-if="contained_packaging[pkg.id]" :class="qty_by_pkg[pkg.id] > 0 ? 'pkg-qty font-weight-bold' : 'pkg-qty'">(x{{ contained_packaging[pkg.id].qty }} {{ contained_packaging[pkg.id].pkg.name }})</div>
                     </v-col>
+                    <v-col cols="2" v-if="_.result(contained_packaging[pkg.id], 'pkg.shopfloor_icon.url', '')">
+                        <img
+                            class="qty-picker-packaging-icon"
+                            :src="_.result(contained_packaging[pkg.id], 'pkg.shopfloor_icon.url', '')"
+                            :alt="_.result(contained_packaging[pkg.id], 'pkg.shopfloor_icon.alt_text', '')"
+                        />
+                    </v-col>
                 </v-row>
             </v-expansion-panel-content>
         </v-expansion-panel>

diff --git a/shopfloor_mobile/static/wms/src/css/main.css b/shopfloor_mobile/static/wms/src/css/main.css
@@ -80,3 +80,8 @@ I tested only w/ checkout/select_package for now
     top: 5px;
     right: 5px;
 }
+
+.qty-picker-packaging-icon {
+    width: 30px;
+    height: 30px;
+}