Implement descriptionExcerpt on group profile

This commit is contained in:
Wolfgang Huß 2022-09-15 09:55:51 +02:00
parent 12a924764c
commit b23f4ea47b
4 changed files with 72 additions and 21 deletions

View File

@ -142,6 +142,7 @@ export const groupQuery = gql`
deleted
about
description
# descriptionExcerpt # test this as result
groupType
actionRadius
categories {

View File

@ -29,6 +29,7 @@ type Group {
about: String # goal
description: String!
descriptionExcerpt: String!
groupType: GroupType!
actionRadius: GroupActionRadius!

View File

@ -80,6 +80,7 @@ export const updateGroupMutation = gql`
deleted
about
description
descriptionExcerpt
groupType
actionRadius
categories {
@ -142,6 +143,7 @@ export const groupQuery = gql`
deleted
about
description
descriptionExcerpt
groupType
actionRadius
categories {

View File

@ -178,31 +178,36 @@
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<!-- Group description -->
<ds-space>
<base-card class="group-description">
<!-- TODO: replace editor content with tiptap render view -->
<!-- eslint-disable vue/no-v-html -->
<div class="content hyphenate-text" v-html="groupDescriptionExcerpt" />
<!-- eslint-enable vue/no-v-html -->
</base-card>
</ds-space>
<ds-space v-if="isGroupMemberNonePending" centered>
<nuxt-link :to="{ name: 'post-create' }">
<base-button
v-tooltip="{
content: $t('contribution.newPost'),
placement: 'left',
delay: { show: 500 },
}"
:path="{ name: 'post-create' }"
class="profile-post-add-button"
icon="plus"
circle
filled
/>
</nuxt-link>
</ds-space>
<masonry-grid>
<!-- TapNavigation -->
<!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
<!-- feed -->
<ds-grid-item :row-span="2" column-span="fullWidth">
<ds-space centered>
<nuxt-link :to="{ name: 'post-create' }">
<base-button
v-if="isGroupMember"
v-tooltip="{
content: $t('contribution.newPost'),
placement: 'left',
delay: { show: 500 },
}"
:path="{ name: 'post-create' }"
class="profile-post-add-button"
icon="plus"
circle
filled
/>
</nuxt-link>
</ds-space>
</ds-grid-item>
<!-- Group post feed -->
<template v-if="posts && posts.length">
<masonry-grid-item
v-for="post in posts"
@ -332,6 +337,9 @@ export default {
isGroupMember() {
return this.group ? !!this.group.myRole : false
},
isGroupMemberNonePending() {
return this.group ? ['usual', 'admin', 'owner'].includes(this.group.myRole) : false
},
groupName() {
const { name } = this.group || {}
return name || this.$t('profile.userAnonym')
@ -340,6 +348,9 @@ export default {
const { slug } = this.group || {}
return slug && `@${slug}`
},
groupDescriptionExcerpt() {
return this.group ? this.$filters.removeLinks(this.group.descriptionExcerpt) : ''
},
// tabOptions() {
// return [
// {
@ -557,4 +568,40 @@ export default {
.chip {
margin-bottom: $space-x-small;
}
.group-description > .base-card {
display: flex;
flex-direction: column;
height: 100%;
> .content {
flex-grow: 1;
margin-bottom: $space-small;
}
// Wolle: > .footer {
// display: flex;
// justify-content: space-between;
// align-items: center;
// > .categories-placeholder {
// flex-grow: 1;
// }
// > .counter-icon {
// display: block;
// margin-right: $space-small;
// opacity: $opacity-disabled;
// }
// > .content-menu {
// position: relative;
// z-index: $z-index-post-teaser-link;
// }
// .ds-tag {
// margin: 0;
// margin-right: $space-xx-small;
// }
// }
}
</style>