[IMP] web: change kanban properties field to card properties field

Purpose:
--------
This commit rewords the "KanbanPropertiesField" to "CardPropertiesField"
and add it as widget to use for properties fields in calendar views.

The rationale is that the "Show in cards" option of properties should
allow to enable the visibility of properties in kanban cards and in
calendar popovers (as it is currently the case in knowledge).

Task-3458627

Part-of: odoo/odoo#132578

addons/web/static/src/views/fields/properties/card_properties_field.js

@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { propertiesField, PropertiesField } from "./properties_field";
+
+export class CardPropertiesField extends PropertiesField {
+    static template = "web.CardPropertiesField";
+
+    async _checkDefinitionAccess() {
+        // can not edit properties definition in cards
+        this.state.canChangeDefinition = false;
+    }
+}
+
+export const cardPropertiesField = {
+    ...propertiesField,
+    component: CardPropertiesField,
+};
+
+registry.category("fields").add("calendar.properties", cardPropertiesField);
+registry.category("fields").add("kanban.properties", cardPropertiesField);

addons/web/static/src/views/fields/properties/card_properties_field.scss

@@ -1,4 +1,4 @@
-.o_kanban_property_field {
+.o_card_property_field {
     max-width: 300px;
     font-size: 0.875rem;
 

addons/web/static/src/views/fields/properties/card_properties_field.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-    <t t-name="web.KanbanPropertiesField">
-        <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 t-name="web.CardPropertiesField">
+        <div t-ref="properties" class="w-100 fw-normal text-muted">
+            <div class="o_card_property_field d-inline-flex flex-column justify-content-center align-items-start w-100 mb-1"
                 t-foreach="propertiesList"
                 t-as="propertyConfiguration"
                 t-key="propertyConfiguration.name"

addons/web/static/src/views/fields/properties/kanban_properties_field.js

@@ -1,20 +0,0 @@
-/** @odoo-module **/
-
-import { registry } from "@web/core/registry";
-import { propertiesField, PropertiesField } from "./properties_field";
-
-export class KanbanPropertiesField extends PropertiesField {
-    static template = "web.KanbanPropertiesField";
-
-    async _checkDefinitionAccess() {
-        // can not edit properties definition in the kanban view
-        this.state.canChangeDefinition = false;
-    }
-}
-
-export const kanbanPropertiesField = {
-    ...propertiesField,
-    component: KanbanPropertiesField,
-};
-
-registry.category("fields").add("kanban.properties", kanbanPropertiesField);

addons/web/static/src/views/fields/properties/properties_field.scss

@@ -2,6 +2,7 @@
     width: 100%;
     // be sure that the property field can take zero height
     // in case no property exists
+    display: block;
     margin-bottom: 0 !important;
 }
 

addons/web/static/tests/views/calendar/calendar_view_tests.js

@@ -4811,6 +4811,7 @@ QUnit.module("Views", ({ beforeEach }) => {
                 string: "My Char",
                 type: "char",
                 value: "hello",
+                view_in_kanban: true,
             },
             {
                 name: "property_2",
@@ -4823,6 +4824,14 @@ QUnit.module("Views", ({ beforeEach }) => {
                 ],
                 value: "b",
                 default: "c",
+                view_in_kanban: true,
+            },
+            {
+                name: "property_3",
+                string: "Hidden Char",
+                type: "char",
+                value: "hidden",
+                view_in_kanban: false,
             },
         ];
 
@@ -4845,10 +4854,10 @@ QUnit.module("Views", ({ beforeEach }) => {
 
         await clickEvent(target, 1);
         assert.deepEqual(
-            [...target.querySelectorAll(".o_popover [name='properties'] .o_property_field")].map(
+            [...target.querySelectorAll(".o_popover [name='properties'] .o_card_property_field")].map(
                 (el) => el.textContent
             ),
-            ["My Charhello", "My SelectionB"]
+            ["hello", "B"]
         );
     });
 

addons/web/static/tests/views/fields/properties_field_tests.js

@@ -1480,7 +1480,7 @@ QUnit.module("Fields", (hooks) => {
 
         // check second card
         const property3 = target.querySelector(
-            ".o_kanban_record:nth-child(2) .o_kanban_property_field:nth-child(3) span"
+            ".o_kanban_record:nth-child(2) .o_card_property_field:nth-child(3) span"
         );
         assert.notEqual(
             property3.innerText,
@@ -1489,17 +1489,17 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.equal(property3.innerText, "char value 4");
         const property1 = target.querySelector(
-            ".o_kanban_record:nth-child(2) .o_kanban_property_field:nth-child(1) span"
+            ".o_kanban_record:nth-child(2) .o_card_property_field:nth-child(1) span"
         );
         assert.equal(property1.innerText, "char value");
         const property2 = target.querySelector(
-            ".o_kanban_record:nth-child(2) .o_kanban_property_field:nth-child(2) span"
+            ".o_kanban_record:nth-child(2) .o_card_property_field:nth-child(2) span"
         );
         assert.equal(property2.innerText, "C");
 
         // check first card
         const items = target.querySelectorAll(
-            ".o_kanban_record:nth-child(1) .o_kanban_property_field"
+            ".o_kanban_record:nth-child(1) .o_card_property_field"
         );
         assert.equal(items.length, 2);
     });
@@ -1549,11 +1549,11 @@ QUnit.module("Fields", (hooks) => {
 
             // check fifth card
             const property1 = target.querySelector(
-                ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(1) span"
+                ".o_kanban_record:nth-child(5) .o_card_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"
+                ".o_kanban_record:nth-child(5) .o_card_property_field:nth-child(2) span"
             );
             assert.equal(property2.innerText, "01/01/2019 11:00:00");
         }
@@ -1688,25 +1688,25 @@ QUnit.module("Fields", (hooks) => {
         // 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"
+                ".o_kanban_record:nth-child(5) .o_card_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"
+                ".o_kanban_record:nth-child(5) .o_card_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"
+                ".o_kanban_record:nth-child(5) .o_card_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"
+                ".o_kanban_record:nth-child(5) .o_card_property_field:nth-child(4) label"
             ).innerText,
             "My Datetime"
         );
@@ -1714,11 +1714,11 @@ QUnit.module("Fields", (hooks) => {
         //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"
+            ".o_kanban_record:nth-child(5) .o_card_property_field:nth-child(5) .border"
         );
         assert.strictEqual(
             target.querySelector(
-                ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(5) label"
+                ".o_kanban_record:nth-child(5) .o_card_property_field:nth-child(5) label"
             ).innerText,
             "My Checkbox"
         );