Implement descriptionExcerpt on group profile

backend/src/db/graphql/groups.js

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

backend/src/schema/types/type/Group.gql

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

webapp/graphql/groups.js

@@ -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 {

webapp/pages/group/_id/_slug.vue

@@ -178,16 +178,18 @@
       </ds-flex-item>
 
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-        <masonry-grid>
+        <!-- Group description -->
-          <!-- TapNavigation -->
+        <ds-space>
-          <!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
+          <base-card class="group-description">
-
+            <!-- TODO: replace editor content with tiptap render view -->
-          <!-- feed -->
+            <!-- eslint-disable vue/no-v-html -->
-          <ds-grid-item :row-span="2" column-span="fullWidth">
+            <div class="content hyphenate-text" v-html="groupDescriptionExcerpt" />
-            <ds-space centered>
+            <!-- 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-if="isGroupMember"
               v-tooltip="{
                 content: $t('contribution.newPost'),
                 placement: 'left',
@@ -201,8 +203,11 @@
             />
           </nuxt-link>
         </ds-space>
-          </ds-grid-item>
+        <masonry-grid>
+          <!-- TapNavigation -->
+          <!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
 
+          <!-- 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>