From 912980c6e62f2c0cf3015083515a4f573ad8b2a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 15 Sep 2022 18:28:13 +0200
Subject: [PATCH] Implement 'description', 'descriptionExcerpt', and collapse
 on group profile

---
 webapp/pages/group/_id/_slug.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 04be4f268..4d554860c 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -189,8 +189,22 @@
           <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" />
+            <div
+              v-if="isDescriptionCollapsed"
+              class="content hyphenate-text"
+              v-html="groupDescriptionExcerpt"
+            />
+            <content-viewer v-else class="content hyphenate-text" :content="group.description" />
             <!-- eslint-enable vue/no-v-html -->
+            <base-button
+              class="collaps"
+              size="small"
+              ghost
+              @click="isDescriptionCollapsed = !isDescriptionCollapsed"
+            >
+              <!-- Wolle: locales, full description -->
+              {{ isDescriptionCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
+            </base-button>
           </base-card>
         </ds-space>
         <ds-space v-if="isGroupMemberNonePending" centered>
@@ -260,6 +274,7 @@ import { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/gr
 import postListActions from '~/mixins/postListActions'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
 // import ContentMenu from '~/components/ContentMenu/ContentMenu'
+import ContentViewer from '~/components/Editor/ContentViewer'
 import CountTo from '~/components/CountTo.vue'
 import Empty from '~/components/Empty/Empty'
 // import FollowButton from '~/components/Button/FollowButton'
@@ -285,6 +300,7 @@ export default {
   components: {
     AvatarUploader,
     // ContentMenu,
+    ContentViewer,
     CountTo,
     Empty,
     // FollowButton,
@@ -325,6 +341,7 @@ export default {
       membersCountStartValue: 0,
       membersCountToLoad: Infinity,
       updateGroupMutation,
+      isDescriptionCollapsed: true,
     }
   },
   computed: {
@@ -610,4 +627,7 @@ export default {
   //   }
   // }
 }
+.collaps {
+  float: right;
+}
 </style>