separated logic for list items and kolloquium

components/AbgabeItem.vue

+<template>
+    <ListItem
+        :selected="selected"
+    >
+        <div class="flex flex-row w-full">
+            <div v-if="!inEdit" class="w-full select-none text-left mr-1">
+                {{ title }}
+            </div>
+            <button
+                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900">╳</button>
+        </div>
+    </ListItem>
+</template>
+
+<script>
+import ListItem from '~/components/ListItem'
+
+export default {
+    components: {
+        ListItem
+    },
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        selected: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    methods: {
+    }
+}
+</script>

components/KolloquiumItem.vue

+<template>
+    <ListItem
+        :selected="selected"
+    >
+        <div class="flex flex-row w-full">
+            <div v-if="!inEdit" class="w-full select-none text-left mr-1">
+                {{ title }}
+            </div>
+            <input v-if="inEdit" class="w-full rounded border p-1" v-model="title" placeholder="Neues Kolloquium...">
+            <button
+                v-if="!inEdit"
+                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-blue-500 hover:bg-blue-700 active:bg-blue-900 pb-1">&#9993;</button>
+            <button
+                v-if="inEdit"
+                @click.native="save()"
+                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-green-500 hover:bg-green-700 active:bg-green-900">✓</button>
+            <button
+                v-if="!inEdit"
+                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-yellow-500 hover:bg-yellow-700 active:bg-yellow-900">✎</button>
+            <button
+                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900">╳</button>
+        </div>
+    </ListItem>
+</template>
+
+<script>
+import ListItem from '~/components/ListItem'
+
+export default {
+    components: {
+        ListItem
+    },
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        selected: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        inEdit: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+    },
+    methods: {
+        save() {
+            console.log("save me!")
+        }
+    }
+}
+</script>

components/ListItem.vue

 <template>
     <button
-        class="w-full border rounded mb-1 p-1 bg-blue-50 hover:bg-blue-100 active:bg-blue-300"
-        :class="selected ? 'bg-blue-200' : ''"
+        class="w-full border rounded mb-1 p-1 bg-blue-50 active:bg-blue-300"
+        :class="selected ? 'bg-blue-200' : 'hover:bg-blue-100'"
     >
         <div class="flex flex-row">
-            <div class="w-full select-none text-left mr-1">
-                <slot></slot>
-            </div>
-            <button v-if="shareAction" class="bg-blue-500 hover:bg-blue-700 text-white pb-1 text-center rounded-md select-none w-9 h-8">&#9993;</button>
-            <button v-if="saveAction" class="bg-green-500 hover:bg-green-700 active:bg-green-900 text-white ml-1 pb-1 text-center rounded-md select-none w-9 h-8">✓</button>
-            <button v-if="editAction" class="bg-yellow-500 hover:bg-yellow-700 active:bg-yellow-900 text-white ml-1 pb-1 text-center rounded-md select-none w-9 h-8">✎</button>
-            <button v-if="deleteAction" class="bg-red-500 hover:bg-red-700 active:bg-red-900 text-white ml-1 pb-1 text-center rounded-md select-none w-9 h-8">╳</button>
+            <slot></slot>
         </div>
     </button>
 </template>
@@ -18,11 +12,11 @@
 <script>
 export default {
     props: {
-        selected: Boolean,
-        shareAction: String,
-        editAction: String,
-        deleteAction: String,
-        saveAction: String
+        selected: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     }
 }
-</script>
\ No newline at end of file
+</script>

pages/index.vue

@@ -15,23 +15,18 @@
                 Kolloquien
             </template>
             <template slot="content">
-                <ListItem
+                <KolloquiumItem
                     v-for="kolloquium in kolloquiums"
-                    :key="kolloquium"
+                    :key="kolloquium.title"
                     @click.native="selectKolloquium(kolloquium)"
-                    :selected="selectedKolloquium===kolloquium"
-                    :shareAction="'link'"
-                    :editAction="'edit me'"
-                    :deleteAction="'delete_this'"
-                >{{ kolloquium }}</ListItem>
-                <ListItem
-                    :saveAction="'saveMe'"
-                    :deleteAction="'abort'">
-                    <input class="w-full rounded border p-1" v-model="neuesKolloquium" placeholder="Neues Kolloquium...">
-                </ListItem>
+                    :selected="selectedKolloquium===kolloquium.title"
+                    :title="kolloquium.title"
+                    :inEdit="kolloquium.inEdit"
+                />
                 <ListItem
                     @click.native="createNewKolloquium()"
-                >+ Neues Kolloquium erstellen...</ListItem>
+                >+ Neues Kolloquium erstellen...
+                </ListItem>
             </template>
         </box>
         <box>
@@ -41,15 +36,16 @@
             <template slot="content">
                 <p class="text-xl"><span class="font-semibold">Titel:</span> {{ selectedKolloquium }}</p>
                 <p class="font-semibold mt-4">Abgaben:</p>
-                <ListItem
+                <AbgabeItem
                     v-for="abgabe in abgaben"
                     :key="abgabe"
                     @click.native="selectAbgabe(abgabe)"
-                    :deleteAction="'delete_this'"
-                >{{ abgabe }}</ListItem>
+                    :title="abgabe"
+                />
                 <button class="border rounded mt-4 p-2 font-semibold text-white bg-green-500 hover:bg-green-600 focus:bg-green-700">Aktivieren</button>
             </template>
         </box>
+        {{ kolloquiums }}
     </div>
 </template>
 
@@ -57,23 +53,35 @@
 import Box from '~/components/Box'
 import List from '~/components/List'
 import ListItem from '~/components/ListItem'
+import KolloquiumItem from '~/components/KolloquiumItem'
+import AbgabeItem from '~/components/AbgabeItem'
 
 export default {
     components: {
         Box,
         List,
-        ListItem
+        ListItem,
+        KolloquiumItem,
+        AbgabeItem
     },
     data() {
-        return {
+      return {
             selectedKolloquium: "",
             selectedAbgabe: "",
             kolloquiums: [
-                "Hier ist eine Liste von Kolloquien.",
-                "Man kann eines auswählen um zu sehen, welche Abgaben eingereicht wurden.",
-                "Man kann ein Kolloquium erstellen oder löschen.",
+                {
+                    title: "Hier ist eine Liste von Kolloquien.",
+                    inEdit: false,
+                },
+                {
+                    title: "Man kann eines auswählen um zu sehen, welche Abgaben eingereicht wurden.",
+                    inEdit: false,
+                },
+                {
+                    title: "Man kann ein Kolloquium erstellen oder löschen.",
+                    inEdit: false,
+                },
             ],
-            newKolloquium: "",
             abgaben: [
                 "Hier ist eine Liste von Abgaben für das ausgewählte Kolloquium.",
                 "Man kann einzelne Abgaben löschen.",
@@ -83,14 +91,20 @@ export default {
     },
     methods: {
         selectKolloquium(kolloquium) {
-            this.selectedKolloquium = kolloquium
+            this.selectedKolloquium = kolloquium.title
             this.selectedAbgabe = ''
         },
         selectAbgabe(abgabe) {
             this.selectedAbgabe = abgabe
         },
         createNewKolloquium() {
-            this.kolloquiums = [...this.kolloquiums, 'Neues Kolloquium']
+            this.kolloquiums.forEach(kolloquium => {
+                kolloquium.inEdit = false;
+            });
+            this.selectedKolloquium = "";
+            this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title.length > 0);
+            this.kolloquiums = [...this.kolloquiums, {title: '', inEdit: true}];
+
         }
     }
 }