From c7b7fb5d0270db08e9efd439f27f87c71e9c53c6 Mon Sep 17 00:00:00 2001
From: Nick Kleine-Tebbe <nick@kleine-tebbe.de>
Date: Mon, 24 Jan 2022 15:51:54 +0100
Subject: [PATCH] finished editable list

---
 components/AbgabeItem.vue     |  2 +-
 components/KolloquiumItem.vue | 16 +++++++++++++---
 pages/index.vue               | 17 +++++++++++++----
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/components/AbgabeItem.vue b/components/AbgabeItem.vue
index 27c95f0..fcf0f3d 100644
--- a/components/AbgabeItem.vue
+++ b/components/AbgabeItem.vue
@@ -3,7 +3,7 @@
         :selected="selected"
     >
         <div class="flex flex-row w-full">
-            <div v-if="!inEdit" class="w-full select-none text-left mr-1">
+            <div class="w-full select-none text-left mr-1">
                 {{ title }}
             </div>
             <button
diff --git a/components/KolloquiumItem.vue b/components/KolloquiumItem.vue
index 08fd91a..04f87a9 100644
--- a/components/KolloquiumItem.vue
+++ b/components/KolloquiumItem.vue
@@ -12,13 +12,16 @@
                 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()"
+                @click="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"
+                @click="edit()"
                 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>
+                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"
+                @click="deleteMe()"
+            >╳</button>
         </div>
     </ListItem>
 </template>
@@ -48,7 +51,14 @@ export default {
     },
     methods: {
         save() {
-            console.log("save me!")
+            this.$emit("update:inEdit", false);
+            this.$emit("update:title", this.title);
+        },
+        edit() {
+            this.$emit("update:inEdit", true);
+        },
+        deleteMe() {
+            this.$emit("deleteKolloquium")
         }
     }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 16c3613..c7a82dc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,5 @@
 <template>
-    <div
-        class="relative flex flex-col items-center justify-top min-h-screen bg-gray-100 sm:items-top sm:pt-0"
-    >
+    <div class="relative flex flex-col items-center justify-top min-h-screen bg-gray-100 sm:items-top sm:pt-0">
         <box>
             <template slot="title">
                 KolloquiumVR Control Panel
@@ -21,7 +19,10 @@
                     @click.native="selectKolloquium(kolloquium)"
                     :selected="selectedKolloquium===kolloquium.title"
                     :title="kolloquium.title"
+                    @update:title="kolloquium.title=$event"
                     :inEdit="kolloquium.inEdit"
+                    @update:inEdit="toggleEdit(kolloquium, $event)"
+                    @deleteKolloquium="deleteKolloquium(kolloquium)"
                 />
                 <ListItem
                     @click.native="createNewKolloquium()"
@@ -45,7 +46,6 @@
                 <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>
 
@@ -105,6 +105,15 @@ export default {
             this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title.length > 0);
             this.kolloquiums = [...this.kolloquiums, {title: '', inEdit: true}];
 
+        },
+        toggleEdit(kolloquium, status) {
+            this.kolloquiums.forEach(kolloquium => {
+                kolloquium.inEdit = false;
+            });
+            kolloquium.inEdit = status;
+        },
+        deleteKolloquium(kolloquiumToDelete) {
+            this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title != kolloquiumToDelete.title);
         }
     }
 }
-- 
GitLab