prework for group list

webapp/components/GroupForm/GroupForm.vue

@@ -25,8 +25,8 @@
     
       </ds-form>
       <ds-space centered>
-        zurück
-      </ds-space>
+      <nuxt-link to="/my-groups">zurück</nuxt-link>
+    </ds-space>
     </ds-container>
   </div>
 </template>
@@ -35,6 +35,7 @@
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 export default {
+  name: 'GroupForm',
   components: {
     CategoriesSelect,
   },

webapp/components/GroupList/GroupList.vue

@@ -0,0 +1,27 @@
+<template>
+<div>
+     <ds-container class="group-list">
+         <ds-space><h2>Group List</h2></ds-space>
+           <ds-table :data="items" :fields="fields">
+      <template slot="loves" slot-scope="scope">
+        {{ scope.row.name }} loves {{ scope.row.loves }}
+      </template>
+      <template slot="edit" slot-scope="scope">
+        <ds-button
+          size="small"
+          @click="deleteRow(scope.row)">delete</ds-button>
+      </template>
+    </ds-table>
+     </ds-container>
+</div>
+</template>
+<script lang="ts">
+
+export default {
+    name: 'GroupList',
+    props: {
+        items: { type: Array, default: () => [] },
+        fields: { type: Array, default: () => [] }
+    }
+}
+</script>

webapp/components/GroupTeaser/GroupTeaser.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="group-teaser">
-    Group Teaser
-
     <ds-grid-item :row-span="2" column-span="fullWidth">
       <ds-space centered>
         <nuxt-link :to="{ name: 'group-create' }">
@@ -22,3 +20,10 @@
     </ds-grid-item>
   </div>
 </template>
+<script>
+ 
+export default  {
+    name: 'GroupTeaser',
+}
+</script>
+

webapp/pages/my-groups.vue

@@ -2,15 +2,45 @@
   <div>
     <div>my groups</div>
     <group-teaser />
+    <group-list :items="items" :fields="fields"/>
   </div>
 </template>
 <script>
 import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
+import GroupList from  '~/components/GroupList/GroupList.vue'
 
 export default {
   name: 'MyGroups',
   components: {
     GroupTeaser,
+    GroupList
   },
+  data() {
+      return {
+         fields: ['name', 'type', 'loves', 'edit'],
+        items: [
+          {
+            name: 'Rengar',
+            type: 'Jungler',
+            loves: 'Hide and seek'
+          },
+          {
+            name: 'Renekton',
+            type: 'Toplaner',
+            loves: 'Slice and dice'
+          },
+          {
+            name: 'Twitch',
+            type: 'ADC',
+            loves: 'Spray and pray'
+          },
+          {
+            name: 'Blitz',
+            type: 'Support',
+            loves: 'Hook you up'
+          }
+        ]
+      }
+    }
 }
 </script>