From aee2f14d234503a71fd7b58b520084e413dfd1f6 Mon Sep 17 00:00:00 2001
From: Earth Patel <eapa@odoo.com>
Date: Tue, 6 Jun 2023 06:00:07 +0000
Subject: [PATCH] [FIX] web: display the date/datetime property field in kanban

Before this commit,
In the knowledge app, the date and datetime property fields are not visible in
the item-kanban.

Technical Reason:
In the previous version's date and datetime property field values are of
string type in a non-ISO format. However, from the version 16.2, the values of
date and datetime property fields are of datetime object, which parsed into the
string type ISO format, that's creates the formatting issue.

After this commit,
Now the date and datetime property fields are visible in the item-kanban.

Task-3324573

closes odoo/odoo#126657

X-original-commit: c2868b0c18bc89fd06c7bee43488a1fb1fc4bb67
Signed-off-by: David Beguin (dbe) <dbe@odoo.com>
---
 .../fields/properties/properties_field.js     | 10 ++--
 .../views/fields/properties_field_tests.js    | 52 +++++++++++++++++++
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/views/fields/properties/properties_field.js b/addons/web/static/src/views/fields/properties/properties_field.js
index b48446fe9b1..959e2175b5b 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.js
+++ b/addons/web/static/src/views/fields/properties/properties_field.js
@@ -91,9 +91,13 @@ export class PropertiesField extends Component {
      * @returns {array}
      */
     get propertiesList() {
-        const propertiesValues = JSON.parse(
-            JSON.stringify(this.props.record.data[this.props.name] || [])
-        );
+        const propertiesValues = (this.props.record.data[this.props.name] || []).map(property => {
+            if (["date", "datetime"].includes(property.type)) {
+                // Date and Datetime are immutable luxon objects.
+                return property;
+            }
+            return JSON.parse(JSON.stringify(property));
+        });
         return propertiesValues.filter((definition) => !definition.definition_deleted);
     }
 
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 75004839f54..fce90b7873c 100644
--- a/addons/web/static/tests/views/fields/properties_field_tests.js
+++ b/addons/web/static/tests/views/fields/properties_field_tests.js
@@ -1357,6 +1357,58 @@ QUnit.module("Fields", (hooks) => {
         assert.equal(items.length, 2);
     });
 
+    QUnit.test("properties: kanban view with date and datetime property fields", async function (assert) {
+        serverData.models.partner.records.push({
+            id: 40,
+            display_name: "fifth partner",
+            properties: [
+                {
+                    name: "property_1",
+                    string: "My Date",
+                    type: "date",
+                    value: "2019-01-01",
+                    view_in_kanban: true,
+                },
+                {
+                    name: "property_2",
+                    string: "My DateTime",
+                    type: "datetime",
+                    value: "2019-01-01 10:00:00",
+                    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 fifth card
+        const property1 = target.querySelector(
+            ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(1) span"
+        );
+        assert.equal(property1.innerText, "01/01/2019");
+        const property2 = target.querySelector(
+            ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(2) span"
+        );
+        assert.equal(property2.innerText, "01/01/2019 11:00:00");
+    });
+
     QUnit.test(
         "properties: kanban view with multiple sources of properties definitions",
         async function (assert) {