Merge pull request #5419 from Ocelot-Social-Community/5059-groups/5318-implement-content-menu-group-profile

feat: 🍰 Implement Content Menu On Group Profile

webapp/components/ContentMenu/ContentMenu.vue

@@ -7,7 +7,6 @@
           icon="ellipsis-v"
           size="small"
           circle
-          ghost
           @click.prevent="toggleMenu()"
         />
       </slot>

webapp/components/ContentMenu/GroupContentMenu.spec.js

@@ -1,9 +1,12 @@
-import { mount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import GroupContentMenu from './GroupContentMenu.vue'
 
 const localVue = global.localVue
 
+config.stubs['router-link'] = '<span><slot /></span>'
+
 const propsData = {
+  usage: 'groupTeaser',
   resource: {},
   group: {},
   resourceType: 'group',
@@ -29,7 +32,7 @@ describe('GroupContentMenu', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.findAll('.group-menu')).toHaveLength(1)
+      expect(wrapper.findAll('.group-content-menu')).toHaveLength(1)
     })
   })
 })

webapp/components/ContentMenu/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
@@ -40,35 +40,34 @@ export default {
     Dropdown,
   },
   props: {
-    placement: { type: String, default: 'bottom-end' },
-    resource: { type: Object, required: true },
-    group: { type: Object, required: true },
-    resourceType: {
+    usage: {
       type: String,
       required: true,
       validator: (value) => {
-        return value.match(/(group)/)
+        return value.match(/(groupTeaser|groupProfile)/)
       },
     },
+    group: { type: Object, required: true },
+    placement: { type: String, default: 'bottom-end' },
   },
   computed: {
     routes() {
       const routes = []
 
-      if (this.resourceType === 'group') {
+      if (this.usage !== 'groupProfile') {
         routes.push({
           label: this.$t('group.contentMenu.visitGroupPage'),
           icon: 'home',
           name: 'group-id-slug',
           params: { id: this.group.id, slug: this.group.slug },
         })
-        if (this.group.myRole === 'owner') {
-          routes.push({
-            label: this.$t('admin.settings.name'),
-            path: `/group/edit/${this.resource.id}`,
-            icon: 'edit',
-          })
-        }
+      }
+      if (this.group.myRole === 'owner') {
+        routes.push({
+          label: this.$t('admin.settings.name'),
+          path: `/group/edit/${this.group.id}`,
+          icon: 'edit',
+        })
       }
 
       return routes

webapp/components/Group/GroupTeaser.vue

@@ -58,7 +58,7 @@
         <div v-else class="categories-placeholder"></div>
         <!-- group context menu -->
         <client-only>
-          <group-content-menu resource-type="group" :resource="group" :group="group" />
+          <group-content-menu :usage="'groupTeaser'" :group="group || {}" placement="bottom-end" />
         </client-only>
       </footer>
       <footer class="footer">
@@ -78,7 +78,7 @@
 
 <script>
 import Category from '~/components/Category'
-import GroupContentMenu from '~/components/Group/GroupContentMenu'
+import GroupContentMenu from '~/components/ContentMenu/GroupContentMenu'
 
 export default {
   name: 'GroupTeaser',

webapp/pages/group/_id/_slug.spec.js

@@ -6,7 +6,7 @@ const localVue = global.localVue
 localVue.filter('date', (d) => d)
 
 config.stubs['client-only'] = '<span><slot /></span>'
-// config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 // config.stubs['infinite-loading'] = '<span><slot /></span>'
 // config.stubs['follow-list'] = '<span><slot /></span>'
@@ -237,6 +237,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -385,6 +389,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -493,6 +501,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -601,6 +613,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -713,6 +729,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -825,6 +845,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -937,6 +961,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -1049,6 +1077,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -1165,6 +1197,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('investigative-journalism')
@@ -1280,6 +1316,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('investigative-journalism')
@@ -1395,6 +1435,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(false)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has no(!) group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
             expect(wrapper.text()).not.toContain('investigative-journalism')
@@ -1498,6 +1542,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(false)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has no(!) group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
             expect(wrapper.text()).not.toContain('investigative-journalism')

webapp/pages/group/_id/_slug.vue

@@ -16,20 +16,21 @@
           </avatar-uploader>
           <profile-avatar v-else :profile="group" class="profile-page-avatar" size="large" />
           <!-- Menu -->
-          <!-- <client-only>
-            <content-menu
+          <client-only>
+            <group-content-menu
+              v-if="isGroupOwner"
+              class="group-content-menu"
+              :usage="'groupProfile'"
+              :group="group || {}"
               placement="bottom-end"
-              resource-type="user"
-              :resource="user"
-              :is-owner="isGroupOwner"
-              class="user-content-menu"
-              @mute="muteUser"
+            />
+            <!-- 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 +315,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/ContentMenu/GroupContentMenu'
 import JoinLeaveButton from '~/components/Button/JoinLeaveButton'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
@@ -341,12 +342,12 @@ export default {
   components: {
     AvatarUploader,
     Category,
-    // ContentMenu,
     ContentViewer,
     CountTo,
     Empty,
     // FollowButton,
     // FollowList,
+    GroupContentMenu,
     JoinLeaveButton,
     PostTeaser,
     ProfileAvatar,
@@ -636,8 +637,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;