add tab to group page to have all groups and my groups

webapp/graphql/groups.js

@@ -145,8 +145,8 @@ export const changeGroupMemberRoleMutation = () => {
 export const groupQuery = (i18n) => {
   const lang = i18n ? i18n.locale().toUpperCase() : 'EN'
   return gql`
-    query ($isMember: Boolean, $id: ID, $slug: String) {
-      Group(isMember: $isMember, id: $id, slug: $slug) {
+    query ($isMember: Boolean, $id: ID, $slug: String, $first: Int, $offset: Int) {
+      Group(isMember: $isMember, id: $id, slug: $slug, first: $first, offset: $offset) {
         id
         name
         slug
@@ -190,3 +190,11 @@ export const groupMembersQuery = () => {
     }
   `
 }
+
+export const groupCountQuery = () => {
+  return gql`
+    query ($isMember: Boolean) {
+      GroupCount(isMember: $isMember)
+    }
+  `
+}

webapp/locales/de.json

@@ -407,6 +407,7 @@
     "addMemberToGroup": "Zur Gruppe hinzufügen",
     "addUser": "Benutzer hinzufügen",
     "addUserPlaceholder": "eindeutiger Benutzername > @slug-from-user",
+    "allGroups": "Alle Gruppen",
     "categories": "Thema ::: Themen",
     "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
     "contentMenu": {

webapp/locales/en.json

@@ -407,6 +407,7 @@
     "addMemberToGroup": "Add to group",
     "addUser": "Add User",
     "addUserPlaceholder": "unique username > @slug-from-user",
+    "allGroups": "All Groups",
     "categories": "Topic ::: Topics",
     "changeMemberRole": "The role has been changed to “{role}”!",
     "contentMenu": {

webapp/pages/my-groups.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-space margin="small">
-      <ds-heading tag="h1">{{ $t('group.myGroups') }}</ds-heading>
+      <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
     </ds-space>
     <ds-space margin="large" />
     <ds-container>
@@ -29,22 +29,68 @@
 
 <script>
 import GroupList from '~/components/Group/GroupList'
-import { groupQuery } from '~/graphql/groups.js'
+import { groupQuery, groupCountQuery } from '~/graphql/groups.js'
+import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+
+const tabToFilterMapping = (tab) => {
+  return {
+    myGroups: { isMember: true },
+    allGroups: {},
+  }[tab]
+}
 
 export default {
   name: 'MyGroups',
   components: {
     GroupList,
+    TabNavigation,
   },
   data() {
     return {
       Group: [],
+      groupFilter: { isMember: true },
+      tabActive: 'myGroups',
+      pageSize: 5,
+      currentPage: 1,
+      myGroupsCount: 0,
+      allGroupsCount: 0,
     }
   },
+  methods: {
+    handleTab(tab) {
+      if (this.tabActive !== tab) {
+        this.tabActive = tab
+        this.groupFilter = tabToFilterMapping(tab)
+        this.$apollo.queries.Group.refetch()
+      }
+    },
+  },
   computed: {
+    pagination() {
+      return {
+        first: this.pageSize,
+        offset: (this.currentPage - 1) * this.pageSize,
+      }
+    },
     myGroups() {
       return this.Group ? this.Group : []
     },
+    tabOptions() {
+      return [
+        {
+          type: 'myGroups',
+          title: this.$t('group.myGroups'),
+          count: this.myGroupsCount,
+          disabled: this.myGroupsCount === 0,
+        },
+        {
+          type: 'allGroups',
+          title: this.$t('group.allGroups'),
+          count: this.allGroupsCount,
+          disabled: this.allGroupsCount === 0,
+        },
+      ]
+    },
   },
   apollo: {
     Group: {
@@ -53,7 +99,8 @@ export default {
       },
       variables() {
         return {
-          isMember: true,
+          ...this.groupFilter,
+          ...this.pagination,
         }
       },
       error(error) {
@@ -62,6 +109,29 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
     },
+    MyGroupsCount: {
+      query() {
+        return groupCountQuery()
+      },
+      variables() {
+        return {
+          isMember: true,
+        }
+      },
+      update({ GroupCount }) {
+        this.myGroupsCount = GroupCount
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+    AllGroupsCount: {
+      query() {
+        return groupCountQuery()
+      },
+      update({ GroupCount }) {
+        this.allGroupsCount = GroupCount
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>