shopfloor_mobile: add icons to qty picker packagings

camptocamp · Dec 19, 2023 · 79f7602 · 79f7602
1 parent 7d6cafb
commit 79f7602
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 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:icon", self._packaging_icon_data),
             "qty",
         ]
 
@@ -316,6 +317,15 @@ def _product_packaging(self, rec, field):
             multi=True,
         )
 
+    def _packaging_icon_data(self, rec, field):
+        icon_data = {"alt_text": "Icon for packaging " + rec.packaging_type_id.name}
+        if not rec.packaging_type_id.icon:
+            return icon_data
+        icon_data["url"] = "/web/image/product.packaging.type/{}/icon/".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},
+            "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
@@ -6,4 +6,4 @@
 class ProductPackagingType(models.Model):
     _inherit = "product.packaging.type"
 
-    icon = fields.Image()
+    icon = fields.Binary()
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.icon.url', '')">
+                        <img
+                            class="qty-picker-packaging-icon"
+                            :src="_.result(contained_packaging[pkg.id], 'pkg.icon.url', '')"
+                            :alt="_.result(contained_packaging[pkg.id], 'pkg.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;
+}