[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>

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);
     }
 

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) {