From d50ae27e49412a38c35d925a2ad2955cbc11a2da Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 10 Aug 2022 09:07:32 +0200
Subject: [PATCH] prework for group list

---
 webapp/components/GroupForm/GroupForm.vue     |  5 ++--
 webapp/components/GroupList/GroupList.vue     | 27 +++++++++++++++++
 webapp/components/GroupTeaser/GroupTeaser.vue |  9 ++++--
 webapp/pages/my-groups.vue                    | 30 +++++++++++++++++++
 4 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 webapp/components/GroupList/GroupList.vue

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index bff03ec8a..1bd4455d7 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/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,
   },
diff --git a/webapp/components/GroupList/GroupList.vue b/webapp/components/GroupList/GroupList.vue
new file mode 100644
index 000000000..bfaceed21
--- /dev/null
+++ b/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>
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
index a199106a5..22df641e9 100644
--- a/webapp/components/GroupTeaser/GroupTeaser.vue
+++ b/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>
+
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 386bb1e51..a861403ed 100644
--- a/webapp/pages/my-groups.vue
+++ b/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>