- Finished methods to delete and update a spell, reactive components

client/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: [
+    presets: [
-    '@vue/cli-plugin-babel/preset'
+        '@vue/cli-plugin-babel/preset'
-  ],
+    ],
 }

client/src/components/spells/edit-spell-card.vue

@@ -55,7 +55,6 @@
         <template v-slot:modal-footer="{ close }">
             <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="close()">Fermer</button>
             <input type="submit" class="btn btn-primary" value="Enregistrer" form="update-spell">
-            <button type="button" class="btn btn-danger" @click="deleteSpell()">Supprimer</button>
         </template>
     </b-modal>
 </template>
@@ -171,16 +170,10 @@ export default {
             }
 
             Spells.updateSpell(this.spell.id, data)
-            .then(() => {
+            .then(v => {
-                this.$refs["edit_spell_modal"].hide()
+                this.$emit('updateSpell', v.data)
             })
         },
-        deleteSpell() {
-            Spells.deleteSpell(this.spell.id)
-            .then(() => {
-                this.$refs["edit_spell_modal"].hide()
-            })
-        }
     }
 }
 </script>

client/src/components/spells/spell-card.vue

@@ -1,7 +1,6 @@
 <template>
     <div
         :class="main_school"
-        @click="editSpell(spell)"
         class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 grid-item grid-sizer">
         <div class="spellcard bg-white p-4 rounded text-dark shadow" style="border-left-width:4px;border-left-style:solid;">
             <div class="h3 font-display font-weight-bold text-wrap word-break" :title="spell.name" style="line-height:100%;">
@@ -22,12 +21,23 @@
                 <div class=small>
                     <span v-for="(variable,index) in spell.variables" :key="index"><span class="font-weight-bold"><span v-if="index!=0"><br></span>{{String.fromCharCode(120+index)}}</span> = {{variable.description}}</span>
                 </div>
+                <div class="text-right">
+                    <a class="h5 text-secondary mr-1">
+                        <i class="mad" @click="editSpell(spell)">edit</i>
+                    </a>
+                    <a class="h5 text-danger">
+                        <i class="mad" @click="deleteSpell(spell)">delete</i>
+                    </a>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+// API
+import { RepositoryFactory } from "../../../api/repositories"
+const Spells = RepositoryFactory.get('spells')
 
 export default {
     name: 'spell-card',
@@ -45,6 +55,12 @@ export default {
     methods: {
         editSpell(spell) {
             this.$emit('editSpell', spell)
+        },
+        deleteSpell(spell) {
+            Spells.deleteSpell(this.spell.id)
+            .then(() => {
+                this.$emit('deleteSpell', spell)
+            })
         }
     },
 }

client/src/components/spells/spells-list.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="spell-list-wrapper">
         <div v-masonry transition-duration=".5s" item-selector=".spell-card" class="row spells-list">
-            <spell-card v-masonry-tile class="spell-card" v-for="(spell, index) in spells" :key="index" v-bind:spell="spell" @editSpell="editSpell"/>
+            <spell-card v-masonry-tile class="spell-card" v-for="(spell) in spells" :key="spell.id" v-bind:spell="spell" @editSpell="editSpell" @deleteSpell="deleteSpell"/>
         </div>
-        <edit-spell-card v-if="Object.keys(active_spell).length > 0" v-bind:spell="active_spell" @editSpell="editSpell"/>
+        <edit-spell-card v-if="Object.keys(active_spell).length > 0" v-bind:spell="active_spell" @updateSpell="updateSpell"/>
     </div>
 </template>
 
@@ -43,8 +43,17 @@ export default {
             this.loading = false
             this.spells = displaySpells
         },
-        async editSpell(e) {
+        editSpell(e) {
             this.active_spell = e;
+        },
+        updateSpell(e) {
+            let oldSpell = this.spells.find(x => x.id === e.id)
+            this.spells.splice(this.spells.indexOf(oldSpell), 1, e)
+            this.active_spell = {}
+        },
+        deleteSpell(e) {
+            this.spells.splice(this.spells.indexOf(e), 1)
+            this.active_spell = {}
         }
     }
 }