pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: enhance property field display in kanban view

Browse Source 
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>
This commit is contained in:
Vivek Pathak
2023-06-28 19:08:56 +02:00
parent dc91f30008
commit 5fdd95a1c6
3 changed files with 119 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/views/fields/properties/kanban_properties_field.scss
+6
View File
@@ -1,3 +1,9 @@
.o_kanban_property_field {
max-width: 300px;
font-size: 0.875rem;
.form-check {
margin-bottom: 0;
}
}
addons/web/static/src/views/fields/properties/kanban_properties_field.xml
+7 -3
View File
@@ -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"
addons/web/static/tests/views/fields/properties_field_tests.js
+106 -1
View File
@@ -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.
*/