Rename prop 'user' of 'profile-avatar' to 'profile'

This commit is contained in:
Wolfgang Huß 2022-08-29 18:39:51 +02:00
parent 615ee2991a
commit 5f43a51c6a
9 changed files with 32 additions and 32 deletions

View File

@ -11,7 +11,7 @@
"
@click.prevent="toggleMenu"
>
<profile-avatar :user="user" size="small" />
<profile-avatar :profile="user" size="small" />
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
</template>

View File

@ -5,7 +5,7 @@
</div>
<div v-else :class="[{ 'disabled-content': user.disabled }]" placement="top-start">
<nuxt-link :to="userLink" :class="['user-teaser']">
<profile-avatar v-if="showAvatar" :user="user" size="small" />
<profile-avatar v-if="showAvatar" :profile="user" size="small" />
<div class="info">
<span class="text">
<span class="slug">{{ userSlug }}</span>

View File

@ -23,39 +23,39 @@ describe('ProfileAvatar', () => {
expect(wrapper.find(BaseIcon).exists()).toBe(true)
})
describe('given a user', () => {
describe('given a profile', () => {
describe('with no image', () => {
beforeEach(() => {
propsData = {
user: {
profile: {
name: 'Matt Rider',
},
}
wrapper = Wrapper()
})
describe('no user name', () => {
describe('no profile name', () => {
it('renders an icon', () => {
propsData = { user: { name: null } }
propsData = { profile: { name: null } }
wrapper = Wrapper()
expect(wrapper.find(BaseIcon).exists()).toBe(true)
})
})
describe("user name is 'Anonymous'", () => {
describe("profile name is 'Anonymous'", () => {
it('renders an icon', () => {
propsData = { user: { name: 'Anonymous' } }
propsData = { profile: { name: 'Anonymous' } }
wrapper = Wrapper()
expect(wrapper.find(BaseIcon).exists()).toBe(true)
})
})
it('displays user initials', () => {
it('displays profile initials', () => {
expect(wrapper.find('.initials').text()).toEqual('MR')
})
it('displays no more than 3 initials', () => {
propsData = { user: { name: 'Ana Paula Nunes Marques' } }
propsData = { profile: { name: 'Ana Paula Nunes Marques' } }
wrapper = Wrapper()
expect(wrapper.find('.initials').text()).toEqual('APN')
})
@ -64,7 +64,7 @@ describe('ProfileAvatar', () => {
describe('with a relative avatar url', () => {
beforeEach(() => {
propsData = {
user: {
profile: {
name: 'Not Anonymous',
avatar: {
url: '/avatar.jpg',
@ -82,7 +82,7 @@ describe('ProfileAvatar', () => {
describe('with an absolute avatar url', () => {
beforeEach(() => {
propsData = {
user: {
profile: {
name: 'Not Anonymous',
avatar: {
url: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',

View File

@ -31,47 +31,47 @@ storiesOf('ProfileAvatar', module)
data: () => ({
user: userWithAvatar,
}),
template: '<profile-avatar :user="user" />',
template: '<profile-avatar :profile="user" />',
}))
.add('normal without image, anonymous user', () => ({
components: { ProfileAvatar },
data: () => ({
user: anonymousUser,
}),
template: '<profile-avatar :user="user" />',
template: '<profile-avatar :profile="user" />',
}))
.add('normal without image, user initials', () => ({
components: { ProfileAvatar },
data: () => ({
user: userWithoutAvatar,
}),
template: '<profile-avatar :user="user" />',
template: '<profile-avatar :profile="user" />',
}))
.add('small, with image', () => ({
components: { ProfileAvatar },
data: () => ({
user: userWithAvatar,
}),
template: '<profile-avatar :user="user" size="small"/>',
template: '<profile-avatar :profile="user" size="small"/>',
}))
.add('small', () => ({
components: { ProfileAvatar },
data: () => ({
user: userWithoutAvatar,
}),
template: '<profile-avatar :user="user" size="small"/>',
template: '<profile-avatar :profile="user" size="small"/>',
}))
.add('large, with image', () => ({
components: { ProfileAvatar },
data: () => ({
user: userWithAvatar,
}),
template: '<profile-avatar :user="user" size="large"/>',
template: '<profile-avatar :profile="user" size="large"/>',
}))
.add('large', () => ({
components: { ProfileAvatar },
data: () => ({
user: userWithoutAvatar,
}),
template: '<profile-avatar :user="user" size="large"/>',
template: '<profile-avatar :profile="user" size="large"/>',
}))

View File

@ -5,10 +5,10 @@
<base-icon v-if="isAnonymous" name="eye-slash" />
<img
v-if="isAvatar"
:src="user.avatar | proxyApiUrl"
:src="profile.avatar | proxyApiUrl"
class="image"
:alt="user.name"
:title="user.name"
:alt="profile.name"
:title="profile.name"
@error="$event.target.style.display = 'none'"
/>
</div>
@ -25,23 +25,23 @@ export default {
return value.match(/(small|large)/)
},
},
user: {
profile: {
type: Object,
default: null,
},
},
computed: {
isAnonymous() {
return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
return !this.profile || !this.profile.name || this.profile.name.toLowerCase() === 'anonymous'
},
isAvatar() {
// TODO may we could test as well if the image is reachable? otherwise the background gets white and the initails can not be read
return this.user && this.user.avatar
return this.profile && this.profile.avatar
},
userInitials() {
if (this.isAnonymous) return ''
return this.user.name.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
return this.profile.name.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
},
},
}

View File

@ -8,9 +8,9 @@
style="position: relative; height: auto; overflow: visible"
>
<avatar-uploader v-if="isMyGroup" :profile="group">
<!-- Wolle: <profile-avatar :user="user" class="profile-page-avatar" size="large"></profile-avatar> -->
<!-- Wolle: <profile-avatar :profile="user" class="profile-page-avatar" size="large" /> -->
</avatar-uploader>
<!-- Wolle: <profile-avatar v-else :user="user" class="profile-page-avatar" size="large" /> -->
<!-- Wolle: <profile-avatar v-else :profile="user" class="profile-page-avatar" size="large" /> -->
<!-- Menu -->
<!-- Wolle: <client-only>
<content-menu

View File

@ -8,9 +8,9 @@
style="position: relative; height: auto; overflow: visible"
>
<avatar-uploader v-if="myProfile" :profile="user">
<profile-avatar :user="user" class="profile-page-avatar" size="large"></profile-avatar>
<profile-avatar :profile="user" class="profile-page-avatar" size="large" />
</avatar-uploader>
<profile-avatar v-else :user="user" class="profile-page-avatar" size="large" />
<profile-avatar v-else :profile="user" class="profile-page-avatar" size="large" />
<!-- Menu -->
<client-only>
<content-menu

View File

@ -28,7 +28,7 @@
params: { id: scope.row.id, slug: scope.row.slug },
}"
>
<profile-avatar :user="scope.row" size="small" />
<profile-avatar :profile="scope.row" size="small" />
</nuxt-link>
</template>
<template #name="scope">

View File

@ -25,7 +25,7 @@
params: { id: scope.row.id, slug: scope.row.slug },
}"
>
<profile-avatar :user="scope.row" size="small" />
<profile-avatar :profile="scope.row" size="small" />
</nuxt-link>
</template>
<template #name="scope">