fix: changed v-model to prop for avatars in MultipleAvatar component

This commit is contained in:
Shariq Ansari 2023-12-27 17:19:07 +05:30
parent bca741c8bc
commit 607d7bff75
3 changed files with 20 additions and 8 deletions

View File

@ -1,8 +1,15 @@
<template> <template>
<div v-if="avatars?.length" class="mr-1.5 flex flex-row-reverse items-center cursor-pointer"> <div
<Tooltip :text="avatar.name" v-for="avatar in reverseAvatars" :key="avatar.name"> v-if="avatars?.length"
class="mr-1.5 flex cursor-pointer flex-row-reverse items-center"
>
<Tooltip
:text="avatar.name"
v-for="avatar in reverseAvatars"
:key="avatar.name"
>
<Avatar <Avatar
class="-mr-1.5 transform border-2 border-white transition hover:z-10 hover:scale-125" class="-mr-1.5 transform border-2 border-white transition hover:z-10 hover:scale-110"
shape="circle" shape="circle"
:image="avatar.image" :image="avatar.image"
:label="avatar.label" :label="avatar.label"
@ -13,8 +20,13 @@
</template> </template>
<script setup> <script setup>
import { Avatar, Tooltip } from 'frappe-ui' import { Avatar, Tooltip } from 'frappe-ui'
import { computed, defineModel } from 'vue' import { computed } from 'vue'
const avatars = defineModel() const props = defineProps({
const reverseAvatars = computed(() => avatars.value.reverse()) avatars: {
type: Array,
default: [],
},
})
const reverseAvatars = computed(() => props.avatars.reverse())
</script> </script>

View File

@ -32,7 +32,7 @@
<Button icon="more-horizontal" /> <Button icon="more-horizontal" />
</Dropdown> </Dropdown>
<MultipleAvatar <MultipleAvatar
v-model="deal.data._assignedTo" :avatars="deal.data._assignedTo"
@click="showAssignmentModal = true" @click="showAssignmentModal = true"
/> />
<Dropdown :options="statusOptions('deal', updateField)"> <Dropdown :options="statusOptions('deal', updateField)">

View File

@ -32,7 +32,7 @@
<Button icon="more-horizontal" /> <Button icon="more-horizontal" />
</Dropdown> </Dropdown>
<MultipleAvatar <MultipleAvatar
v-model="lead.data._assignedTo" :avatars="lead.data._assignedTo"
@click="showAssignmentModal = true" @click="showAssignmentModal = true"
/> />
<Dropdown :options="statusOptions('lead', updateField)"> <Dropdown :options="statusOptions('lead', updateField)">