From 5fdd95a1c602d953fadb0eb68b75d7fd1f2a8c39 Mon Sep 17 00:00:00 2001
From: Vivek Pathak <vivp@odoo.com>
Date: Wed, 31 May 2023 07:25:50 +0000
Subject: [PATCH] [IMP] web: enhance property field display in kanban view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit improves the appearance of property fields in the Kanban view of
item Kanban. A label will be shown for the integer, float, date and datetime
property fields. Additionally, The boolean field now has a badge appearance
with a label.

Task-3291930

closes odoo/odoo#126707

X-original-commit: 25e8fbe0a1327c289df826cf6eb7882098a4c325
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
---
 .../properties/kanban_properties_field.scss   |   6 +
 .../properties/kanban_properties_field.xml    |  10 +-
 .../views/fields/properties_field_tests.js    | 107 +++++++++++++++++-
 3 files changed, 119 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/fields/properties/kanban_properties_field.scss b/addons/web/static/src/views/fields/properties/kanban_properties_field.scss
index 35dbc965a04..09920c6a18f 100644
--- a/addons/web/static/src/views/fields/properties/kanban_properties_field.scss
+++ b/addons/web/static/src/views/fields/properties/kanban_properties_field.scss
@@ -1,3 +1,9 @@
 .o_kanban_property_field {
     max-width: 300px;
+    font-size: 0.875rem;
+
+    .form-check {
+        margin-bottom: 0;
+    }
 }
+
diff --git a/addons/web/static/src/views/fields/properties/kanban_properties_field.xml b/addons/web/static/src/views/fields/properties/kanban_properties_field.xml
index a4d5ac5da3d..5c0b582e966 100644
--- a/addons/web/static/src/views/fields/properties/kanban_properties_field.xml
+++ b/addons/web/static/src/views/fields/properties/kanban_properties_field.xml
@@ -1,13 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="web.KanbanPropertiesField" owl="1">
-        <div t-ref="properties" class="w-100">
+        <div t-ref="properties" class="w-100 mt-2 fw-normal text-muted">
             <div class="o_kanban_property_field d-inline-flex flex-column justify-content-center align-items-start w-100 my-1"
                 t-foreach="propertiesList"
                 t-as="propertyConfiguration"
                 t-key="propertyConfiguration.name"
-                t-if="(propertyConfiguration.value || ['integer', 'float'].includes(propertyConfiguration.type)) and propertyConfiguration.view_in_kanban">
-                <div class="mw-100 text-truncate">
+                t-if="propertyConfiguration.value and propertyConfiguration.view_in_kanban">
+                <!-- We purposefully hide 'Falsy' values such as a False boolean or a 0 value integer field. -->
+                <div class="mw-100 text-truncate d-flex gap-2"
+                    t-att-class="{'border rounded-3 ps-2' : propertyConfiguration.type === 'boolean'}">
+                    <label t-if="['integer', 'float', 'date', 'datetime', 'boolean'].includes(propertyConfiguration.type)"
+                        t-att-class="{'fw-bold' : propertyConfiguration.type !== 'boolean'}" t-out="propertyConfiguration.string"/>
                     <PropertyValue
                         id="generateUniqueDomID()"
                         canChangeDefinition="state.canChangeDefinition"
diff --git a/addons/web/static/tests/views/fields/properties_field_tests.js b/addons/web/static/tests/views/fields/properties_field_tests.js
index e3a1f354200..75004839f54 100644
--- a/addons/web/static/tests/views/fields/properties_field_tests.js
+++ b/addons/web/static/tests/views/fields/properties_field_tests.js
@@ -1411,12 +1411,117 @@ QUnit.module("Fields", (hooks) => {
                     "Company 1 second partner char valueCchar value 4",
                     "Company 1 third partner ",
                     "Company 1 fourth partner ",
-                    "Company 2 other partner 1",
+                    "Company 2 other partner My Integer1",
                 ]
             );
         }
     );
 
+    /**
+     * To check label for int, float, boolean, date and datetime fields.
+     *  Also check if border class is applied to boolean field or not.
+     */
+    QUnit.test("properties: kanban view with label and border", async function (assert) {
+        serverData.models.partner.records.push({
+            id: 12,
+            display_name: "fifth partner",
+            properties: [
+                {
+                    name: "property_integer",
+                    string: "My Integer",
+                    type: "integer",
+                    value: 12,
+                    view_in_kanban: true,
+                },
+                {
+                    name: "property_float",
+                    string: "My Float",
+                    type: "float",
+                    value: 12.2,
+                    view_in_kanban: true,
+                },
+                {
+                    name: "property_date",
+                    string: "My Date",
+                    type: "date",
+                    value: "2023-06-05",
+                    view_in_kanban: true,
+                },
+                {
+                    name: "property_datetime",
+                    string: "My Datetime",
+                    type: "datetime",
+                    value: "2023-06-05 11:05:00",
+                    view_in_kanban: true,
+                },
+                {
+                    name: "property_checkbox",
+                    string: "My Checkbox",
+                    type: "boolean",
+                    value: true,
+                    view_in_kanban: true,
+                },
+            ],
+            company_id: 37,
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="company_id"/> <hr/>
+                                <field name="display_name"/> <hr/>
+                                <field name="properties" widget="properties"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        // check for label in integer, float, date and datetime field
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(1) label"
+            ).innerText,
+            "My Integer"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(2) label"
+            ).innerText,
+            "My Float"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(3) label"
+            ).innerText,
+            "My Date"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(4) label"
+            ).innerText,
+            "My Datetime"
+        );
+
+        //check that label and border class is present for checkbox field
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(5) .border"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(5) label"
+            ).innerText,
+            "My Checkbox"
+        );
+    });
+
     /**
      * Check that the properties are shown when switching view.
      */