Add 'GroupContentMenu' on group profile page

webapp/components/Group/GroupContentMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <dropdown class="group-menu" :placement="placement" offset="5">
+  <dropdown class="group-content-menu" :placement="placement" offset="5">
     <template #default="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <base-button
@@ -42,7 +42,6 @@ export default {
   props: {
     placement: { type: String, default: 'bottom-end' },
     resource: { type: Object, required: true },
-    group: { type: Object, required: true },
     resourceType: {
       type: String,
       required: true,
@@ -54,15 +53,17 @@ export default {
   computed: {
     routes() {
       const routes = []
+      console.log('resource: ', this.resource)
 
       if (this.resourceType === 'group') {
+        console.log('this.resourceType: ', this.resourceType)
         routes.push({
           label: this.$t('group.contentMenu.visitGroupPage'),
           icon: 'home',
           name: 'group-id-slug',
-          params: { id: this.group.id, slug: this.group.slug },
+          params: { id: this.resource.id, slug: this.resource.slug },
         })
-        if (this.group.myRole === 'owner') {
+        if (this.resource.myRole === 'owner') {
           routes.push({
             label: this.$t('admin.settings.name'),
             path: `/group/edit/${this.resource.id}`,

webapp/pages/group/_id/_slug.vue

@@ -16,20 +16,20 @@
           </avatar-uploader>
           <profile-avatar v-else :profile="group" class="profile-page-avatar" size="large" />
           <!-- Menu -->
-          <!-- <client-only>
-            <content-menu
+          <client-only>
+            <group-content-menu
               placement="bottom-end"
-              resource-type="user"
-              :resource="user"
-              :is-owner="isGroupOwner"
-              class="user-content-menu"
-              @mute="muteUser"
+              :resourceType="'group'"
+              :resource="group || {}"
+              class="group-content-menu"
+            />
+            <!-- TODO: implement later on -->
+              <!-- @mute="muteUser"
               @unmute="unmuteUser"
               @block="blockUser"
               @unblock="unblockUser"
-              @delete="deleteUser"
-            />
-          </client-only> -->
+              @delete="deleteUser" -->
+          </client-only>
           <ds-space margin="small">
             <!-- Group name -->
             <ds-heading tag="h3" align="center" no-margin>
@@ -314,12 +314,12 @@ import { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/gr
 import postListActions from '~/mixins/postListActions'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
 import Category from '~/components/Category'
-// 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'
 // import FollowList from '~/components/features/ProfileList/FollowList'
+import GroupContentMenu from '~/components/Group/GroupContentMenu'
 import JoinLeaveButton from '~/components/Button/JoinLeaveButton'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
@@ -341,12 +341,12 @@ export default {
   components: {
     AvatarUploader,
     Category,
-    // ContentMenu,
     ContentViewer,
     CountTo,
     Empty,
     // FollowButton,
     // FollowList,
+    GroupContentMenu,
     JoinLeaveButton,
     PostTeaser,
     ProfileAvatar,
@@ -636,8 +636,8 @@ export default {
   margin: auto;
   margin-top: -60px;
 }
-.page-name-profile-id-slug {
-  .ds-flex-item:first-child .content-menu {
+.page-name-group-id-slug {
+  .ds-flex-item:first-child .group-content-menu {
     position: absolute;
     top: $space-x-small;
     right: $space-x-small;