mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
905f34c827
- if there is no user.avatar, we show a user's initials - up to 3
characters unless there is no name or the name is 'Anonymous'. This is
to support users who on the old alpha were allowed to be anonymous (do
we still want to support this?)
- Add test cases for ☝️
- Refactor to not use any styleguide components and move UserAvatar to
generic directory
122 lines
3.4 KiB
Vue
122 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<ds-space>
|
|
<ds-card :header="$t('settings.blocked-users.name')">
|
|
<ds-text>
|
|
{{ $t('settings.blocked-users.explanation.intro') }}
|
|
</ds-text>
|
|
<ds-list>
|
|
<ds-list-item>
|
|
{{ $t('settings.blocked-users.explanation.your-perspective') }}
|
|
</ds-list-item>
|
|
<ds-list-item>
|
|
{{ $t('settings.blocked-users.explanation.their-perspective') }}
|
|
</ds-list-item>
|
|
<ds-list-item>
|
|
{{ $t('settings.blocked-users.explanation.search') }}
|
|
</ds-list-item>
|
|
<ds-list-item>
|
|
{{ $t('settings.blocked-users.explanation.notifications') }}
|
|
</ds-list-item>
|
|
</ds-list>
|
|
<ds-text>
|
|
{{ $t('settings.blocked-users.explanation.closing') }}
|
|
</ds-text>
|
|
</ds-card>
|
|
</ds-space>
|
|
<ds-card v-if="blockedUsers && blockedUsers.length">
|
|
<ds-table :data="blockedUsers" :fields="fields" condensed>
|
|
<template slot="avatar" slot-scope="scope">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'profile-id-slug',
|
|
params: { id: scope.row.id, slug: scope.row.slug },
|
|
}"
|
|
>
|
|
<user-avatar :user="scope.row" size="small" />
|
|
</nuxt-link>
|
|
</template>
|
|
<template slot="name" slot-scope="scope">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'profile-id-slug',
|
|
params: { id: scope.row.id, slug: scope.row.slug },
|
|
}"
|
|
>
|
|
<b>{{ scope.row.name | truncate(20) }}</b>
|
|
</nuxt-link>
|
|
</template>
|
|
<template slot="slug" slot-scope="scope">
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'profile-id-slug',
|
|
params: { id: scope.row.id, slug: scope.row.slug },
|
|
}"
|
|
>
|
|
<b>{{ scope.row.slug | truncate(20) }}</b>
|
|
</nuxt-link>
|
|
</template>
|
|
|
|
<template slot="unblock" slot-scope="scope">
|
|
<base-button circle size="small" @click="unblock(scope)" icon="user-plus" />
|
|
</template>
|
|
</ds-table>
|
|
</ds-card>
|
|
<ds-card v-else>
|
|
<ds-space>
|
|
<ds-placeholder>
|
|
{{ $t('settings.blocked-users.empty') }}
|
|
</ds-placeholder>
|
|
</ds-space>
|
|
<ds-space>
|
|
<ds-text align="center">
|
|
{{ $t('settings.blocked-users.how-to') }}
|
|
</ds-text>
|
|
</ds-space>
|
|
</ds-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { BlockedUsers, Unblock } from '~/graphql/settings/BlockedUsers'
|
|
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
|
|
|
|
export default {
|
|
components: {
|
|
UserAvatar,
|
|
},
|
|
data() {
|
|
return {
|
|
blockedUsers: [],
|
|
}
|
|
},
|
|
computed: {
|
|
fields() {
|
|
return {
|
|
avatar: '',
|
|
name: this.$t('settings.blocked-users.columns.name'),
|
|
slug: this.$t('settings.blocked-users.columns.slug'),
|
|
unblock: this.$t('settings.blocked-users.columns.unblock'),
|
|
}
|
|
},
|
|
},
|
|
apollo: {
|
|
blockedUsers: { query: BlockedUsers, fetchPolicy: 'cache-and-network' },
|
|
},
|
|
methods: {
|
|
async unblock(user) {
|
|
await this.$apollo.mutate({ mutation: Unblock(), variables: { id: user.row.id } })
|
|
this.$apollo.queries.blockedUsers.refetch()
|
|
const { name } = user.row
|
|
this.$toast.success(this.$t('settings.blocked-users.unblocked', { name }))
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ds-table-col {
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|