[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:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user