properly implement editing items

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
             2
         ],
         'linebreak-style': [
-            'error',
+            'off',
             'unix'
         ],
         'quotes': [

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>

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(),
+      });
+    }
   }
 });
 

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();
     }
   }
 };