From 6d67ebff951b08a55cd617a05bcc9591c16118dd Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 8 Jun 2020 23:16:27 +0200
Subject: [PATCH] - Added edit spell component and started working on edit
 system

---
 .../src/components/spells/edit-spell-card.vue | 75 +++++++++++++++++++
 client/src/components/spells/spell-card.vue   | 41 ++++------
 client/src/components/spells/spells-list.vue  | 27 +++++--
 client/src/pages/spells-page.vue              |  4 +-
 client/src/pages/world-page.vue               | 67 ++---------------
 client/src/routes.js                          | 12 +--
 6 files changed, 124 insertions(+), 102 deletions(-)
 create mode 100644 client/src/components/spells/edit-spell-card.vue

diff --git a/client/src/components/spells/edit-spell-card.vue b/client/src/components/spells/edit-spell-card.vue
new file mode 100644
index 0000000..87a10ee
--- /dev/null
+++ b/client/src/components/spells/edit-spell-card.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="container-fluid">
+      <div class="p-4">
+        <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#spell_show_edit_modal">Spell show/edit modal</button>-->
+        <div class="" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="spell_show_edit_modal" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <div class="h1 modal-title font-display font-weight-bold" id="spell_show_edit_modal"><div class="line-height-100">{{spell.name}}#{{spell.id}}</div></div>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <form>
+                  <div class="form-group">
+                    <label for="spell_name" class="font-weight-bold col-form-label">Nom&nbsp;:</label>
+                    <input type="text" class="form-control" name="spell_name" id="spell_name" placeholder="(256 caractères max.)" v-bind:value="spell.name">
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_description" class="font-weight-bold col-form-label">Description&nbsp;:</label>
+                    <textarea class="form-control" name="spell_description" id="spell_description" placeholder="(2048 caractères max.)" v-bind:value="spell.description"></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_level" class="font-weight-bold col-form-label">Niveau&nbsp;:</label>
+                    <input type="number" class="form-control" name="spell_level" id="spell_level" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)" v-bind:value="spell.level">
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_schools" class="font-weight-bold col-form-label">École(s)&nbsp;:</label>
+                    <select class="form-control" id="spell_schools" name="spell_schools" multiple>
+                      <option value="1">Lumomancie</option>
+                      <option value="2">Vitamancie</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_charge" class="font-weight-bold col-form-label">Charge&nbsp;:</label>
+                    <input type="number" class="form-control" name="spell_charge" id="spell_charge" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)" v-bind:value="spell.charge">
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_ingredients" class="font-weight-bold col-form-label">Ingrédient(s)&nbsp;:</label>
+                    <select class="form-control" id="spell_ingredients" name="spell_ingredients" multiple>
+                      <option value="1">Langue de salamandre</option>
+                      <option value="2">Geste</option>
+                    </select>
+                  </div>
+                  <div class="form-group">
+                    <label for="spell_cost" class="font-weight-bold col-form-label">Coût&nbsp;:</label>
+                    <input type="text" class="form-control" name="spell_cost" id="spell_cost" placeholder="(32 caractères max.)" v-bind:value="spell.cost">
+                  </div>
+                </form>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
+                <button type="button" class="btn btn-primary">Enregistrer</button>
+                <button type="button" class="btn btn-danger">Supprimer</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'edit-spell-card',
+    props: {
+        spell: Object,
+    },
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/client/src/components/spells/spell-card.vue b/client/src/components/spells/spell-card.vue
index c45b5c1..ac5ed6c 100644
--- a/client/src/components/spells/spell-card.vue
+++ b/client/src/components/spells/spell-card.vue
@@ -1,31 +1,28 @@
 <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="name" style="line-height:100%;">
-                <a class="text-decoration-none" href="#">{{name}}</a>
+            <div class="h3 font-display font-weight-bold text-wrap word-break" :title="spell.name" style="line-height:100%;">
+                <a class="text-decoration-none" href="#">{{spell.name}}</a>
             </div>
             <div>
-                <div class="font-weight-700 text-muted d-inline-block">Niveau {{level}}</div><span> · </span>
+                <div class="font-weight-700 text-muted d-inline-block">Niveau {{spell.level}}</div><span> · </span>
                 <div class="text-muted d-inline-block">
-                    <span v-for="(school,index) in schools" :key="index"><span v-if="index!=0">, </span><a :href="'/school/'+school.id" class="text-secondary">{{school.name}}</a></span>
+                    <span v-for="(school,index) in spell.schools" :key="index"><span v-if="index!=0">, </span><a :href="'/school/'+school.id" class="text-secondary">{{school.name}}</a></span>
                 </div>
             </div>
-            <div v-if="charge!=0" class="small font-weight-bold">Charge {{charge}} tour(s)</div>
-            <div v-if="ingredients.length>0" class="small"><span class="font-weight-bold">Nécessite</span> <span v-for="(ingredient,index) in ingredients" :key="index"><span v-if="index!=0">, </span>{{ingredient.name}}</span></div>
-            <div class="small text-muted font-italic mt-2">{{description}}</div>
+            <div v-if="spell.charge!=0" class="small font-weight-bold">Charge {{spell.charge}} tour(s)</div>
+            <div v-if="spell.ingredients.length>0" class="small"><span class="font-weight-bold">Nécessite</span> <span v-for="(ingredient,index) in spell.ingredients" :key="index"><span v-if="index!=0">, </span>{{ingredient.name}}</span></div>
+            <div class="small text-muted font-italic mt-2">{{spell.description}}</div>
             <div class="mt-2">
-                <div class="font-weight-bold d-inline-block">Coût {{cost}}</div>
-                <div v-if="variables.length>0" class="small d-inline-block">, où&nbsp;:</div>
+                <div class="font-weight-bold d-inline-block">Coût {{spell.cost}}</div>
+                <div v-if="spell.variables.length>0" class="small d-inline-block">, où&nbsp;:</div>
                 <div class=small>
-                    <span v-for="(variable,index) in variables" :key="index"><span class="font-weight-bold"><span v-if="index!=0"><br></span>{{String.fromCharCode(120+index)}}</span> = {{variable.description}}</span>
+                    <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>
-            <!--<div class="text-right">
-                <a class="h5 text-secondary mr-1" :href="'/spell/'+id+'/edit'"><i class="mad">edit</i></a>
-                <a class="h5 text-danger" :href="'/spell/'+id+'/delete'"><i class="mad">delete</i></a>
-            </div>-->
         </div>
     </div>
 </template>
@@ -35,26 +32,20 @@
 export default {
     name: 'spell-card',
     props: {
-        // Model validation
-        id: Number,
-        name: String,
-        description: String,
-        level: Number,
-        charge: Number,
-        cost: String,
-        schools: Array,
-        ingredients: Array,
-        variables: Array,
+        spell: Object,
     },
     data() {
         return {
-            main_school: this.schools[0].name,
+            main_school: this.spell.schools[0].name,
         }
     },
     created() {
         this.main_school = this.main_school.toLowerCase();
     },
     methods: {
+        editSpell(spell) {
+            this.$emit('editSpell', spell)
+        }
     },
 }
 
diff --git a/client/src/components/spells/spells-list.vue b/client/src/components/spells/spells-list.vue
index 6bf2a3a..0b159e8 100644
--- a/client/src/components/spells/spells-list.vue
+++ b/client/src/components/spells/spells-list.vue
@@ -1,12 +1,16 @@
 <template>
-    <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"/>
+    <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"/>
+        </div>
+        <edit-spell-card v-bind:spell="active_spell"/>
     </div>
 </template>
 
 <script>
 // Components
-import spellcard from "./spell-card"
+import SpellCard from "./spell-card"
+import EditSpellCard from "./edit-spell-card"
 
 // API
 import { RepositoryFactory } from "../../../api/repositories"
@@ -15,12 +19,14 @@ const spellsRepository = RepositoryFactory.get('spells')
 export default {
     name: 'spellslist',
     components: {
-        'spell-card': spellcard,
+        'spell-card': SpellCard,
+        'edit-spell-card': EditSpellCard,
     },
     data() {
         return {
             loading: false,
-            spells: []
+            spells: [],
+            active_spell: {},
         }
     },
     created() {
@@ -31,14 +37,21 @@ export default {
     methods: {
         async fetchSpells() {
             const { data } = await spellsRepository.getSpells()
-            console.log(data)
+            return data
+        },
+        async fetchSpell(id) {
+            const { data } = await spellsRepository.getSpell(id)
             return data
         },
         async computeSpells() {
             this.loading = true
-            const displaySpells = await this.fetchSpells();
+            const displaySpells = await this.fetchSpells()
             this.loading = false
             this.spells = displaySpells
+        },
+        async editSpell(e) {
+            this.active_spell = e;
+            console.log(this.active_spell)
         }
     }
 }
diff --git a/client/src/pages/spells-page.vue b/client/src/pages/spells-page.vue
index 23fa8d2..1eff260 100644
--- a/client/src/pages/spells-page.vue
+++ b/client/src/pages/spells-page.vue
@@ -36,12 +36,12 @@
 </template>
 
 <script>
-  import spellslist from "../components/spells/spells-list"
+  import SpellsList from "../components/spells/spells-list"
 
   export default {
     name: 'spells',
     components: {
-        'spell-list': spellslist,
+        'spell-list': SpellsList,
     }
   }
 </script>
diff --git a/client/src/pages/world-page.vue b/client/src/pages/world-page.vue
index 667643f..bc8af31 100644
--- a/client/src/pages/world-page.vue
+++ b/client/src/pages/world-page.vue
@@ -1,66 +1,6 @@
 <template>
   <section class="world-page">
-    <div class="container-fluid">
-      <div class="p-4">
-        <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#spell_show_edit_modal">Spell show/edit modal</button>-->
-        <div class="" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="spell_show_edit_modal" aria-hidden="true">
-          <div class="modal-dialog" role="document">
-            <div class="modal-content">
-              <div class="modal-header">
-                <div class="h1 modal-title font-display font-weight-bold" id="spell_show_edit_modal"><div class="line-height-100">Sort #00069420</div></div>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                  <span aria-hidden="true">&times;</span>
-                </button>
-              </div>
-              <div class="modal-body">
-                <form>
-                  <div class="form-group">
-                    <label for="spell_name" class="font-weight-bold col-form-label">Nom&nbsp;:</label>
-                    <input type="text" class="form-control" name="spell_name" id="spell_name" placeholder="(256 caractères max.)">
-                  </div>
-                  <div class="form-group">
-                    <label for="spell_level" class="font-weight-bold col-form-label">Niveau&nbsp;:</label>
-                    <input type="number" class="form-control" name="spell_level" id="spell_level" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)">
-                  </div>
-                  <div class="form-group">
-                    <label for="spell_schools" class="font-weight-bold col-form-label">École(s)&nbsp;:</label>
-                    <select class="form-control" id="spell_schools" name="spell_schools" multiple>
-                      <option value="1">Lumomancie</option>
-                      <option value="2">Vitamancie</option>
-                    </select>
-                  </div>
-                  <div class="form-group">
-                    <label for="spell_charge" class="font-weight-bold col-form-label">Charge&nbsp;:</label>
-                    <input type="number" class="form-control" name="spell_charge" id="spell_charge" min="0" max="100" step="1" placeholder="(Nombre entier de 0 à 100)">
-                  </div>
-                  <div class="form-group">
-                    <label for="spell_ingredients" class="font-weight-bold col-form-label">Ingrédients&nbsp;:</label>
-                    <textarea class="form-control" name="spell_ingredients" id="spell_ingredients" placeholder="(1024 caractères max., 1 ingrédient par ligne)"></textarea>
-                  </div>
-                  <div class="form-group">
-                    <label for="spell_description" class="font-weight-bold col-form-label">Description&nbsp;:</label>
-                    <textarea class="form-control" name="spell_description" id="spell_description" placeholder="(2048 caractères max.)"></textarea>
-                  </div>
-                  <div class="form-group">
-                    <label for="spell_cost" class="font-weight-bold col-form-label">Coût&nbsp;:</label>
-                    <input type="text" class="form-control" name="spell_cost" id="spell_cost" placeholder="(32 caractères max.)">
-                  </div>
-                  <div class="form-group">
-                    <label for="spell_variables" class="font-weight-bold col-form-label">Variables&nbsp;:</label>
-                    <textarea class="form-control" name="spell_variables" id="spell_variables" placeholder="(1024 caractères max., 1 variable par ligne)"></textarea>
-                  </div>
-                </form>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
-                <button type="button" class="btn btn-primary">Enregistrer</button>
-                <button type="button" class="btn btn-danger">Supprimer</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+
   </section>
 </template>
 
@@ -71,4 +11,7 @@ export default {
 </script>
 
 <style lang="scss">
-.world-page{position:relative;}</style>
\ No newline at end of file
+.world-page{
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/client/src/routes.js b/client/src/routes.js
index 72cfdb0..0bb4836 100644
--- a/client/src/routes.js
+++ b/client/src/routes.js
@@ -2,9 +2,9 @@
 
 
 // Pages
-import index from "./pages/index-page";
-import spells from "./pages/spells-page";
-import world from "./pages/world-page";
+import Index from "./pages/index-page";
+import Spells from "./pages/spells-page";
+import World from "./pages/world-page";
 
 // Routes
 const routes = [
@@ -12,13 +12,13 @@ const routes = [
         path: "*", redirect: "/",
     },
     {
-        path: '/', component: index,
+        path: '/', component: Index,
     },
     {
-        path: '/spells', component: spells,
+        path: '/spells', component: Spells,
     },
     {
-        path: '/world', component: world,
+        path: '/world', component: World,
     }
 ];