Merge pull request #5411 from Ocelot-Social-Community/5059-groups/5395-have-my-groups-in-the-user-menu

feat: 🍰  Have My Groups In The User Menu And Configure Groups Button In Header

webapp/components/AvatarMenu/AvatarMenu.spec.js

@@ -90,6 +90,13 @@ describe('AvatarMenu.vue', () => {
           expect(profileLink.exists()).toBe(true)
         })
 
+        it('displays a link to "My groups"', () => {
+          const profileLink = wrapper
+            .findAll('.ds-menu-item span')
+            .at(wrapper.vm.routes.findIndex((route) => route.path === '/my-groups'))
+          expect(profileLink.exists()).toBe(true)
+        })
+
         it('displays a link to the notifications page', () => {
           const notificationsLink = wrapper
             .findAll('.ds-menu-item span')
@@ -103,6 +110,11 @@ describe('AvatarMenu.vue', () => {
             .at(wrapper.vm.routes.findIndex((route) => route.path === '/settings'))
           expect(settingsLink.exists()).toBe(true)
         })
+
+        it('displays a total of 4 links', () => {
+          const allLinks = wrapper.findAll('.ds-menu-item')
+          expect(allLinks).toHaveLength(4)
+        })
       })
 
       describe('role moderator', () => {
@@ -125,9 +137,9 @@ describe('AvatarMenu.vue', () => {
           expect(moderationLink.exists()).toBe(true)
         })
 
-        it('displays a total of 4 links', () => {
+        it('displays a total of 5 links', () => {
           const allLinks = wrapper.findAll('.ds-menu-item')
-          expect(allLinks).toHaveLength(4)
+          expect(allLinks).toHaveLength(5)
         })
       })
 
@@ -151,9 +163,9 @@ describe('AvatarMenu.vue', () => {
           expect(adminLink.exists()).toBe(true)
         })
 
-        it('displays a total of 5 links', () => {
+        it('displays a total of 6 links', () => {
           const allLinks = wrapper.findAll('.ds-menu-item')
-          expect(allLinks).toHaveLength(5)
+          expect(allLinks).toHaveLength(6)
         })
       })
     })

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -72,10 +72,15 @@ export default {
       }
       const routes = [
         {
-          name: this.$t('profile.name'),
+          name: this.$t('header.avatarMenu.myProfile'),
           path: `/profile/${this.user.id}/${this.user.slug}`,
           icon: 'user',
         },
+        {
+          name: this.$t('header.avatarMenu.myGroups'),
+          path: '/my-groups',
+          icon: 'users',
+        },
         {
           name: this.$t('notifications.pageLink'),
           path: '/notifications',

webapp/components/Group/GroupButton.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <nuxt-link to="/my-groups"><base-button icon="users" circle ghost /></nuxt-link>
+  </div>
+</template>

webapp/constants/groups.js

@@ -2,3 +2,4 @@
 export const NAME_LENGTH_MIN = 3
 export const NAME_LENGTH_MAX = 50
 export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags
+export const SHOW_GROUP_BUTTON_IN_HEADER = true

webapp/layouts/default.vue

@@ -88,6 +88,9 @@
                       <invite-button placement="top" />
                     </client-only>
                   </div>
+                  <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
+                    <group-button />
+                  </client-only>
                   <client-only>
                     <avatar-menu placement="top" />
                   </client-only>
@@ -112,20 +115,22 @@
 </template>
 
 <script>
-import Logo from '~/components/Logo/Logo'
-import LOGOS from '../constants/logos.js'
-import headerMenu from '../constants/headerMenu.js'
 import { mapGetters } from 'vuex'
+import Logo from '~/components/Logo/Logo'
+import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
+import headerMenu from '~/constants/headerMenu.js'
+import LOGOS from '~/constants/logos.js'
+import seo from '~/mixins/seo'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
 import Modal from '~/components/Modal'
-import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
-import seo from '~/mixins/seo'
-import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu'
+import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+import GroupButton from '~/components/Group/GroupButton'
 import InviteButton from '~/components/InviteButton/InviteButton'
-import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
+import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
+import PageFooter from '~/components/PageFooter/PageFooter'
 
 export default {
   components: {
@@ -139,11 +144,13 @@ export default {
     PageFooter,
     InviteButton,
     CategoriesMenu,
+    GroupButton,
   },
   mixins: [seo],
   data() {
     return {
       LOGOS,
+      SHOW_GROUP_BUTTON_IN_HEADER,
       isHeaderMenu: headerMenu.MENU.length > 0,
       menu: headerMenu.MENU,
       mobileSearchVisible: false,

webapp/locales/de.json

@@ -443,6 +443,12 @@
     "hashtag-search": "Suche nach #{hashtag}",
     "title": "Deine Filterblase"
   },
+  "header": {
+    "avatarMenu": {
+      "myGroups": "Mein Gruppen",
+      "myProfile": "Mein Profil"
+    }
+  },
   "index": {
     "change-filter-settings": "Verändere die Filter-Einstellungen, um mehr Ergebnisse zu erhalten.",
     "no-results": "Keine Beiträge gefunden."
@@ -601,7 +607,6 @@
       "title": "Lade jemanden zu {APPLICATION_NAME} ein!"
     },
     "memberSince": "Mitglied seit",
-    "name": "Mein Profil",
     "network": {
       "andMore": "und {number} weitere …",
       "followedBy": "wird gefolgt von:",

webapp/locales/en.json

@@ -443,6 +443,12 @@
     "hashtag-search": "Searching for #{hashtag}",
     "title": "Your filter bubble"
   },
+  "header": {
+    "avatarMenu": {
+      "myGroups": "My groups",
+      "myProfile": "My profile"
+    }
+  },
   "index": {
     "change-filter-settings": "Change your filter settings to get more results.",
     "no-results": "No contributions found."
@@ -601,7 +607,6 @@
       "title": "Invite somebody to {APPLICATION_NAME}!"
     },
     "memberSince": "Member since",
-    "name": "My Profile",
     "network": {
       "andMore": "and {number} more …",
       "followedBy": "is followed by:",