[ADD] mobile_catalogue_view: redesign product catalog view under sale orders

mobile_catalogue_view/__manifest__.py

@@ -0,0 +1,20 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+{
+    'name': "Mobile Catalog View",
+    'description': "Redesign the mobile catalog view",
+    'version': '1.0',
+    'author': "nmak",
+    'depends': ["sale"],
+    'data': [
+        'views/product_template_views.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'mobile_catalogue_view/static/src/scss/style.scss',
+            'mobile_catalogue_view/static/src/js/product_image_popup.js',
+        ],
+    },
+    'installable': True,
+    'license': "LGPL-3",
+}

mobile_catalogue_view/static/src/js/product_image_popup.js

@@ -0,0 +1,52 @@
+/** @odoo-module **/
+
+import { ProductCatalogKanbanRecord } from "@product/product_catalog/kanban_record";
+import { productCatalogKanbanView } from "@product/product_catalog/kanban_view";
+import { ProductCatalogKanbanRenderer } from "@product/product_catalog/kanban_renderer";
+
+import { registry } from "@web/core/registry";
+import { useFileViewer } from "@web/core/file_viewer/file_viewer_hook";
+
+export class InheritProductMobileCatalog extends ProductCatalogKanbanRecord {
+  setup() {
+    super.setup();
+    this.fileViewer = useFileViewer();
+  }
+
+  onGlobalClick(e) {
+    const imageContainer = e.target.closest(".o_product_image");
+    if (imageContainer) {
+      const imageUrl = e.target.getAttribute("src");
+      if (imageUrl) {
+        this.openImagePreview(imageUrl);
+        return;
+      }
+    }
+    super.onGlobalClick(e);
+  }
+
+  openImagePreview(imageUrl) {
+    const fileModel = {
+      isImage: true,
+      isViewable: true,
+      displayName: imageUrl,
+      defaultSource: imageUrl,
+      downloadUrl: imageUrl,
+    };
+    this.fileViewer.open(fileModel);
+  }
+}
+
+export class InheritProductMobileCatalogRenderer extends ProductCatalogKanbanRenderer {
+  static components = {
+    ...ProductCatalogKanbanRenderer.components,
+    KanbanRecord: InheritProductMobileCatalog,
+  };
+}
+
+export const ProductMobileKanbanCatalogView = {
+  ...productCatalogKanbanView,
+  Renderer: InheritProductMobileCatalogRenderer,
+};
+
+registry.category("views").add("product_mobile_kanban_catalog", ProductMobileKanbanCatalogView);

mobile_catalogue_view/static/src/scss/style.scss

@@ -0,0 +1,9 @@
+@media (max-width: 768px) {
+    .o_product_image img {
+        max-width: 150px !important;
+        max-height: 150px !important;
+        width: 150px !important;
+        height: 150px !important;
+        object-fit: cover;
+    }
+}

mobile_catalogue_view/views/product_template_views.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="product_product_view_kanban_inherit" model="ir.ui.view">
+        <field name="name">product.product.view.kanban.inherit</field>
+        <field name="model">product.product</field>
+        <field name="inherit_id" ref="product.product_view_kanban_catalog" />
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='image_128']" position="replace">
+                <field name="image_1920" class=" ms-auto o_product_image img-fluid" widget="image" />
+            </xpath>
+            <xpath expr="//kanban" position="attributes">
+                <attribute name="js_class">product_mobile_kanban_catalog</attribute>
+            </xpath>
+        </field>
+    </record>
+</odoo>