Updated avatar render

[vinfinity7]

added avatar at the left of name #1599
I wasn't able to locally run the output , kindly review the changes to suggest any discrepancies

What

🤖 Generated by Copilot at 42c3981

Added avatar images to the MultiSelectTagsFilter component. This enhances the user interface and helps users identify the tags more easily.
​

🤖 Generated by Copilot at 42c3981

avatar images
circle and align with tags
autumn filter view

Why

How

🤖 Generated by Copilot at 42c3981

• Add avatar image to multiselect tags filter component (link)
• Define CSS rule for avatar class in MultiSelectTagsFilter.vue (link)

Checklist ✅

• Label appropriately with Feature, Improvement, or Bug.
• Add screehshots to the PR description for relevant FE changes
• New backend functionality has been unit-tested.
• API documentation has been updated (if necessary) (see docs on API documentation).
• Quality standards are met.

[vinfinity7]

Kindly review this @garrrikkotua

[joanagmaia]

I've looked at the code and here are the steps to be able to solve the issue:

1. The correct component to add the avatar is MultiSelectAsyncFilter.vue, since this is an async filter and we are fetching members from API. So in this component you will need to add something like this

<template v-else-if="config.options.showAvatar">
  <app-avatar
    :entity="{
      displayName: option.label,
      avatar: option.avatar,
    }"
    :custom-class="'!mr-3'"
    size="xxs"
  />
</template>

You can add this below the template that renders logos.
To support custom-class you will also need to add this to props in avatar.vuecomponent and add :class="customClass" to the div in the template

2. In the actual filter's config, in frontend/src/modules/activity/config/filters/member/config.ts you will also need to add avatar: member.avatar to the mapped data both in remoteMethod and remotePopulateItems so that it becomes available. At the moment, only label and value are being returned.
   You will also need to add showAvatar: true, in options to be able to only render avatar for this filter in MultiSelectAsyncFilter

3. Since you will be adding showAvatar and avatar to the configs, you will need to update types. You can do so in MultiSelectAsyncFilterConfig.ts by adding avatar?: string; to MultiSelectAsyncFilterOption and showAvatar?: boolean; to MultiSelectAsyncFilterOptions

Are you able to connect DEV or any other integration to test this locally?

[joanagmaia]

Hey! This is not ok. This is not the correct component to update.
Could you please revert the changes on this component?
Also provided a solution in the review comment 😄