mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-03-01 12:44:28 +00:00
65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<template>
|
|
<div class="ds-my-xxx-small ds-space-centered">
|
|
<div class="ds-mb-small"></div>
|
|
<h4 class="ds-heading ds-heading-h4">
|
|
{{ $t('contribution.comment.commenting-disabled.no-group-member.reason') }}
|
|
<nuxt-link
|
|
:to="{
|
|
name: 'groups-id-slug',
|
|
params: { slug: group.slug, id: group.id },
|
|
}"
|
|
>
|
|
{{ group.name }}
|
|
</nuxt-link>
|
|
</h4>
|
|
<p class="ds-text">
|
|
{{ $t('contribution.comment.commenting-disabled.no-group-member.call-to-action') }}
|
|
</p>
|
|
<join-leave-button
|
|
:group="group"
|
|
:userId="$store.getters['auth/user'].id"
|
|
:isMember="isGroupMember"
|
|
:isNonePendingMember="isGroupMemberNonePending"
|
|
:filled="true"
|
|
@update="updateJoinLeave"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import JoinLeaveButton from '~/components/Button/JoinLeaveButton'
|
|
|
|
export default {
|
|
name: 'CtaJoinLeaveGroup',
|
|
components: {
|
|
JoinLeaveButton,
|
|
},
|
|
props: {
|
|
group: {
|
|
type: Object,
|
|
require: true,
|
|
},
|
|
},
|
|
computed: {
|
|
isGroupMember() {
|
|
return this.group ? !!this.group.myRole : false
|
|
},
|
|
isGroupMemberNonePending() {
|
|
return this.group ? ['usual', 'admin', 'owner'].includes(this.group.myRole) : false
|
|
},
|
|
},
|
|
methods: {
|
|
async updateJoinLeave(data) {
|
|
this.$emit('update', data)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.join-leave-button {
|
|
width: auto;
|
|
margin: auto !important;
|
|
}
|
|
</style>
|