add group button in menu, change text

webapp/components/Group/GroupButton.vue

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

webapp/components/Group/GroupCard.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <ds-container class="group-card">
-      <ds-page-title heading="Groups"></ds-page-title>
       <ds-card v-for="item in items" :key="item.id" space="xx-small">
         <nuxt-link :to="`/group/${item.id}`">{{ item.name }}</nuxt-link>
         {{ item.categories ? item.categories.map((category) => category.name) : [] }}

webapp/components/Group/GroupMember.vue

@@ -1,18 +1,22 @@
 <template>
   <div>
     <ds-space><h3>Members</h3></ds-space>
+    <base-card>
     <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
       <template slot="avatar">
         <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
       </template>
       <template slot="myRoleInGroup" slot-scope="scope">
-        <ds-select
-          v-if="scope.row.myRoleInGroup !== 'owner'"
+        <select
+        v-if="scope.row.myRoleInGroup !== 'owner'"
           :options="['usual', 'admin']"
-          v-model="scope.row.myRoleInGroup"
-          :value="scope.row.myRoleInGroup"
-          @input="changeMemberRole(scope.row.id, scope.row.myRoleInGroup)"
-        ></ds-select>
+          :value="`${scope.row.myRoleInGroup}`"
+          v-on:change="changeMemberRole(scope.row.id, $event)"
+            > 
+            <option v-for="value in ['usual', 'admin']" :key="value">
+                {{ value }}
+            </option>
+          </select> 
       </template>
       <template slot="edit" slot-scope="scope">
         <ds-button
@@ -24,6 +28,7 @@
         </ds-button>
       </template>
     </ds-table>
+  </base-card>
     <ds-modal
       v-if="isOpen"
       v-model="isOpen"
@@ -60,13 +65,14 @@ export default {
     }
   },
   methods: {
-    async changeMemberRole(id, value) {
+    async changeMemberRole(id, event) {
+      const newRole = event.target.value
       try {
         await this.$apollo.mutate({
           mutation: changeGroupMemberRoleMutation,
-          variables: { groupId: this.groupId, userId: id, roleInGroup: value },
+          variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success('Die Rolle wurde auf ('+value+') geändert!')
+        this.$toast.success('Die Rolle wurde auf ('+newRole+') geändert!')
       } catch (error) {
         this.$toast.error(error.message)
       }

webapp/layouts/default.vue

@@ -64,6 +64,9 @@
                       <invite-button placement="top" />
                     </client-only>
                   </div>
+                  <client-only>
+                    <group-button />
+                  </client-only>
                   <client-only>
                     <avatar-menu placement="top" />
                   </client-only>
@@ -100,6 +103,8 @@ import PageFooter from '~/components/PageFooter/PageFooter'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
+import GroupButton from '~/components/Group/GroupButton.vue'
+
 
 export default {
   components: {
@@ -113,6 +118,7 @@ export default {
     PageFooter,
     InviteButton,
     CategoriesMenu,
+    GroupButton,
   },
   mixins: [seo],
   data() {

webapp/pages/group/edit/_id.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ds-page-title heading="Group Setting"></ds-page-title>
+
+    <h1 class="ds-heading ds-heading-h1">{{group.name}}</h1>
+    <div class="">Group Setting</div>
+    
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -12,7 +15,7 @@
       </ds-flex-item>
     </ds-flex>
     <ds-space centered>
-      <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+      <nuxt-link to="/my-groups">zurück</nuxt-link>
     </ds-space>
   </div>
 </template>

webapp/pages/my-groups.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>my groups</div>
+    <h1 class="ds-heading ds-heading-h1">My Groups</h1>
     <group-teaser />
     <br />
     <br />