- woo finished addspell methods, need some error handling now but not now

client/public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>img/favicon.ico">
-    <title>Spellsaurus</title>
+    <title>Auracle</title>
     <link rel="stylesheet" href="<%= BASE_URL %>libs/style.css">
     <script src="<%= BASE_URL %>libs/clipboard.min.js"></script>
   </head>

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

@@ -0,0 +1,154 @@
+<template>
+    <b-modal ref="add_spell_modal">
+        <template v-slot:modal-header="{ close }">
+            <div class="h1 modal-title font-display font-weight-bold" id="spell_show_edit_modal">
+                <div class="line-height-100">
+                    <span v-if="!spell.name">Nouveau sort</span>
+                    <span v-if="spell.name">{{spell.name}}</span>
+                </div>
+            </div>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="close()">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </template>
+        <template v-slot:default>
+            <form id="add-spell" @submit="addSpell">
+                <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-model="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-model="spell.description"></textarea>
+                </div>
+                <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="spell_rituel" v-model="spell.is_ritual">
+                    <label for="spell_ritual" class="font-weight-bold col-form-label">Rituel ?&nbsp;:</label>
+                </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-model="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 v-model="spell.schools">
+                        <option v-for="(school, index) in all_schools" :key="index" :value="'school_' + school.id">{{school.name}}</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-model="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 v-model="spell.ingredients">
+                        <option v-for="(ingredient,index) in all_ingredients" :key="index" :value="'ingredient_' + ingredient.id">{{ingredient.name}}</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-model="spell.cost">
+                </div>
+                <div class="form-group">
+                    <label for="spell_variables" class="font-weight-bold col-form-label">Variables(s)&nbsp;:</label>
+                    <select class="form-control" id="spell_variables" name="spell_variables" multiple v-model="spell.variables">
+                        <option v-for="(variable,index) in all_variables" :key="index" :value="'variable_' + variable.id">{{variable.description}}</option>
+                    </select>
+                </div>
+            </form>
+        </template>
+        <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="add-spell">
+        </template>
+    </b-modal>
+</template>
+
+<script>
+// API
+import { RepositoryFactory } from "../../../api/repositories"
+
+const Spells = RepositoryFactory.get('spells')
+const Schools = RepositoryFactory.get('schools')
+const Variables = RepositoryFactory.get('variables')
+const Ingredients = RepositoryFactory.get('ingredients')
+
+export default {
+    'name': 'add-spell-card',
+    data() {
+        return {
+            spell: {
+                type: Object,
+                name: "",
+                description: "",
+                is_ritual: false,
+                schools: [],
+                variables: [],
+                ingredients: [],
+            },
+            all_schools: [],
+            all_variables: [],
+            all_ingredients: [],
+        }
+    },
+    created() {
+        // Gets all relevant info for multiple selects
+        let fetchSchools = Schools.getSchools()
+        let fetchVariables = Variables.getVariables()
+        let fetchIngredients = Ingredients.getIngredients()
+
+        Promise.all([fetchSchools, fetchVariables, fetchIngredients])
+        .then(v => {
+            this.all_schools = v[0].data
+            this.all_variables = v[1].data
+            this.all_ingredients = v[2].data
+        })
+        .catch(err => {
+            console.log(err)
+        })
+    },
+    mounted() {
+        this.$refs["add_spell_modal"].show()
+        this.$root.$on('bv::modal::hide', () => {
+            this.$emit('cancelAdd')
+        })
+    },
+    methods: {
+        addSpell(e) {
+            e.preventDefault()
+
+            let schoolsData = Object.values(this.spell.schools).map(v => { return parseInt(v.slice(7)) })
+            let variablesData = Object.values(this.spell.variables).map(v => { return parseInt(v.slice(9)) })
+            let ingredientsData = Object.values(this.spell.ingredients).map(v => { return parseInt(v.slice(11)) })
+
+            let data = {
+                name: this.spell.name,
+                description: this.spell.description,
+                is_ritual: !!+this.spell.is_ritual,
+                level: parseInt(this.spell.level),
+                cost: this.spell.cost,
+                charge: parseInt(this.spell.charge),
+                schools: schoolsData,
+                variables: variablesData,
+                ingredients: ingredientsData,
+            }
+
+            Spells.addSpell(data)
+            .then(v => {
+                this.$emit('addSpell', v.data)
+                this.$refs["add_spell_modal"].hide()
+            })
+            .catch(err => {
+                console.log(err)
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    textarea, select {
+        min-height: 10rem;
+        max-height: 20rem;
+    }
+</style>

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

@@ -164,6 +164,9 @@ export default {
                 name: this.spell.name,
                 description: this.spell.description,
                 is_ritual: !!+this.spell.is_ritual,
+                level: parseInt(this.spell.level),
+                cost: this.spell.cost,
+                charge: parseInt(this.spell.charge),
                 schools: schoolsData,
                 variables: variablesData,
                 ingredients: ingredientsData,
@@ -173,6 +176,9 @@ export default {
             .then(v => {
                 this.$emit('updateSpell', v.data)
             })
+            .catch(err => {
+                console.log(err)
+            })
         },
     }
 }
@@ -181,5 +187,6 @@ export default {
 <style lang="scss" scoped>
     textarea, select {
         min-height: 10rem;
+        max-height: 20rem;
     }
 </style>

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

@@ -1,9 +1,11 @@
 <template>
     <div class="spell-list-wrapper">
+        <button type="button" class="btn font-display font-weight-bold btn-lg btn-outline-dark btn-block shadow-sm mb-4" @click="showAdd"><i class="mad">add</i> Ajouter un sort</button>
         <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) 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" @updateSpell="updateSpell"/>
+        <edit-spell-card v-if="Object.keys(current_edit_spell).length > 0" v-bind:spell="current_edit_spell" @editSpell="editSpell" @updateSpell="updateSpell"/>
+        <add-spell-card v-if="adding_spell" @cancelAdd="cancelAdd" @addSpell="addSpell"/>
     </div>
 </template>
 
@@ -11,6 +13,7 @@
 // Components
 import SpellCard from "./spell-card"
 import EditSpellCard from "./edit-spell-card"
+import AddSpellCard from "./add-spell-card"
 
 // API
 import { RepositoryFactory } from "../../../api/repositories"
@@ -21,12 +24,14 @@ export default {
     components: {
         'spell-card': SpellCard,
         'edit-spell-card': EditSpellCard,
+        'add-spell-card': AddSpellCard,
     },
     data() {
         return {
             loading: false,
             spells: [],
-            active_spell: {},
+            current_edit_spell: {},
+            adding_spell: false,
         }
     },
     created() {
@@ -44,16 +49,35 @@ export default {
             this.spells = displaySpells
         },
         editSpell(e) {
-            this.active_spell = e;
+            this.current_edit_spell = e;
+        },
+        showAdd() {
+            this.adding_spell = true
+        },
+        cancelAdd() {
+            this.adding_spell = false
+        },
+        addSpell(e) {
+            console.log(e)
+            Spells.getSpell(e.id)
+            .then(v => {
+                this.spells.push(v.data)
+            })
+            .then(() => {
+                this.adding_spell = false
+            })
+            .catch(err => {
+                console.log(err)
+            })
         },
         updateSpell(e) {
             let oldSpell = this.spells.find(x => x.id === e.id)
             this.spells.splice(this.spells.indexOf(oldSpell), 1, e)
-            this.active_spell = {}
+            this.current_edit_spell = {}
         },
         deleteSpell(e) {
             this.spells.splice(this.spells.indexOf(e), 1)
-            this.active_spell = {}
+            this.current_edit_spell = {}
         }
     }
 }

client/src/pages/spells-page.vue

@@ -29,7 +29,6 @@
           </div>
         </div>
       </form>
-      <button type="button" class="btn font-display font-weight-bold btn-lg btn-outline-dark btn-block shadow-sm"><i class="mad">add</i> Ajouter un sort</button>
     </div>
     <spell-list/>
   </div>