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

Made the image size bigger and clearer by replacing image_128 with image_1024,
ensuring responsiveness.
Added image preview functionality for product images in the mobile Kanban view.
Used the useFileViewer hook to enable full-screen and zoomable image previews
for products.

Task- 4618902

Author: nmak-odoo

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,54 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+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 { 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");
+            console.log(imageUrl);
+            
+            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);
+    }
+}
+
+//Adding InheritProductMobileCatalog component to the Kanban renderer for the Kanban view
+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>