From 388b243955628e710f7dcc7c60ab4759e50f9134 Mon Sep 17 00:00:00 2001
From: busti <mbust@live.de>
Date: Sat, 14 Dec 2019 23:51:06 +0100
Subject: [PATCH] properly implement editing items

---
 .eslintrc.js                |  2 +-
 src/components/EditItem.vue |  7 ++-----
 src/store/index.js          |  5 +++++
 src/views/Items.vue         | 15 ++++++++++-----
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b03b412..c2931c7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,7 +21,7 @@ module.exports = {
             2
         ],
         'linebreak-style': [
-            'error',
+            'off',
             'unix'
         ],
         'quotes': [
diff --git a/src/components/EditItem.vue b/src/components/EditItem.vue
index 61f0471..559b458 100644
--- a/src/components/EditItem.vue
+++ b/src/components/EditItem.vue
@@ -3,7 +3,7 @@
     <img class="img-fluid rounded mx-auto d-block mb-3" :src="`https://c3lf.de/api/1/thumbs/${item.file}`"/>
     <h6>Editing Item <span class="badge badge-secondary">#{{ item[badge] }}</span></h6>
     <form>
-        <div class="form-group" v-for="field in fields" :key="field">
+        <div class="form-group" v-for="field in ['bezeichnung', 'container']" :key="field">
             <label>{{ field }}</label>
             <input type="text" class="form-control" v-model="item[field]">
         </div>
@@ -14,9 +14,6 @@
 <script>
 export default {
   name: 'Add',
-  props: ['item', 'badge', 'fields']
+  props: ['item', 'badge']
 };
 </script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index c40c35c..af4ac76 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -67,6 +67,11 @@ const store = new Vuex.Store({
 
       commit('replaceBoxes', resp.data);
     },
+    async updateItem({ getters }, item) {
+      axios.put(`https://c3lf.de/api/1/${getters.getEventSlug}/item/${item.iid}`, item, {
+        auth: getAuth(),
+      });
+    }
   }
 });
 
diff --git a/src/views/Items.vue b/src/views/Items.vue
index 9be2289..0c842b9 100644
--- a/src/views/Items.vue
+++ b/src/views/Items.vue
@@ -5,12 +5,11 @@
                 <EditItem
                     :item="selectedItem"
                     badge="item_uid"
-                    :fields="['bezeichnung', 'container']"
                 />
             </template>
             <template #buttons>
                 <button type="button" class="btn btn-secondary" @click="closeModal()">Cancel</button>
-                <button type="button" class="btn btn-success">Save Changes</button>
+                <button type="button" class="btn btn-success" @click="saveSelectedItem()">Save Changes</button>
             </template>
         </Modal>
         <div class="row" v-if="layout === 'table'">
@@ -28,7 +27,7 @@
             :items="loadedItems"
             :keyName="'uid'"
             v-slot="{ item }"
-            @itemActivated="selectedItem = $event"
+            @itemActivated="openModalWith($event)"
         >
             <img
                 :src="`https://c3lf.de/api/1/thumbs/${item.file}`"
@@ -57,9 +56,15 @@ export default {
   components: { Table, Cards, Modal, EditItem },
   computed: mapState(['loadedItems', 'layout']),
   methods: {
-    closeModal: function () {
-      console.log('asdasd');
+    openModalWith(item) { // Opens the editing modal with a copy of the selected item.
+      this.selectedItem = { ...item };
+    },
+    closeModal() { // Closes the editing modal and discards the edited copy of the item.
       this.selectedItem = null;
+    },
+    saveSelectedItem() { // Saves the edited copy of the item.
+      this.$store.dispatch('updateItem', this.selectedItem);
+      this.closeModal();
     }
   }
 };