[IMP] web: TagsList supports icon props

This commits makes the TagsList component able to display icons as well
as images were previously supported. A test has been added to verify the
presence of the icon set in each tag.

closes odoo/odoo#117751

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
luvi
2023-04-06 12:48:31 +02:00
parent 0b2b151784
commit ae075ec5c9
2 changed files with 28 additions and 0 deletions
@@ -5,6 +5,7 @@
<t t-foreach="visibleTags" t-as="tag" t-key="tag.id or tag_index">
<span t-attf-class="{{`o_tag_color_${ tag.colorIndex or 0 } ${props.displayBadge ? 'badge rounded-pill' : ''}`}} o_tag d-inline-flex align-items-center" t-att-class="tag.className" tabindex="-1" t-att-data-color="tag.colorIndex" t-att-title="tag.text" t-on-click="(ev) => tag.onClick and tag.onClick(ev)" t-on-keydown="tag.onKeydown">
<img t-if="tag.img" t-att-src="tag.img" class="o_m2m_avatar rounded-circle"/>
<i t-if="tag.icon" t-attf-class="p-1 fa {{ tag.icon }}"/>
<div t-if="props.displayBadge and props.displayText" class="o_tag_badge_text px-1" t-esc="tag.text" />
<t t-elif="props.displayText">
<span />
@@ -98,6 +98,33 @@ QUnit.module("Web Components", (hooks) => {
);
});
QUnit.test("Tags can be displayed with an icon", async (assert) => {
class Parent extends Component {
setup() {
this.tags = [
{
icon: "fa-trash",
id: "tag1",
text: "Bad",
},
{
icon: "fa-check",
id: "tag2",
text: "Good",
},
];
}
}
Parent.components = { TagsList };
Parent.template = xml`
<TagsList tags="tags" />`;
await mount(Parent, target, { env });
assert.containsN(target, ".o_tag", 2);
assert.hasClass(target.querySelector(".o_tag:nth-of-type(1) i"), "fa fa-trash");
assert.hasClass(target.querySelector(".o_tag:nth-of-type(2) i"), "fa fa-check");
});
QUnit.test("Limiting the visible tags displays a counter", async (assert) => {
class Parent extends Component {
setup() {