From d4674dd463040026d9069a2faae4357424d9042e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 12 Jun 2020 18:49:26 +0200
Subject: [PATCH] - Api client before I blow my brains out

---
 client/api/ingredientsRepository.js           |  14 ++
 client/api/metaschoolsRepository.js           |  14 ++
 client/api/repositories.js                    |  10 +-
 client/api/schoolsRepository.js               |  14 ++
 client/api/spellsRepository.js                |   6 +
 client/api/variablesRepository.js             |  14 ++
 client/public/libs/style.css                  |   4 +-
 client/src/assets/scss/_global.scss           |   6 +-
 .../src/components/spells/edit-spell-card.vue | 149 ++++++++++++++++--
 client/src/components/spells/spells-list.vue  |  11 +-
 client/src/main.js                            |   3 +
 11 files changed, 213 insertions(+), 32 deletions(-)
 create mode 100644 client/api/ingredientsRepository.js
 create mode 100644 client/api/metaschoolsRepository.js
 create mode 100644 client/api/schoolsRepository.js
 create mode 100644 client/api/variablesRepository.js

diff --git a/client/api/ingredientsRepository.js b/client/api/ingredientsRepository.js
new file mode 100644
index 0000000..ab63ca7
--- /dev/null
+++ b/client/api/ingredientsRepository.js
@@ -0,0 +1,14 @@
+import api from './api'
+
+// URL for spells
+const resource = "/ingredients"
+
+// CRUD methods for spells
+export default {
+    getIngredients() {
+        return api.get(`${resource}`)
+    },
+    getIngredient(id) {
+        return api.get(`${resource}/${id}`)
+    },
+}
\ No newline at end of file
diff --git a/client/api/metaschoolsRepository.js b/client/api/metaschoolsRepository.js
new file mode 100644
index 0000000..7d8d018
--- /dev/null
+++ b/client/api/metaschoolsRepository.js
@@ -0,0 +1,14 @@
+import api from './api'
+
+// URL for spells
+const resource = "/meta_schools"
+
+// CRUD methods for spells
+export default {
+    getMetaSchools() {
+        return api.get(`${resource}`)
+    },
+    getMetaSchool(id) {
+        return api.get(`${resource}/${id}`)
+    },
+}
\ No newline at end of file
diff --git a/client/api/repositories.js b/client/api/repositories.js
index cd4abd1..a663bfa 100644
--- a/client/api/repositories.js
+++ b/client/api/repositories.js
@@ -1,8 +1,16 @@
 import spellsRepository from './spellsRepository'
+import schoolsRepository from './schoolsRepository'
+import metaschoolsRepository from './metaschoolsRepository'
+import variablesRepository from './variablesRepository'
+import ingredientsRepository from './ingredientsRepository'
 
 // List of possible repositories
 const repositories = {
-    spells: spellsRepository
+    spells: spellsRepository,
+    schools: schoolsRepository,
+    metaschools: metaschoolsRepository,
+    variables: variablesRepository,
+    ingredients: ingredientsRepository,
 }
 
 // Usage : RepositoryFactoryInstance.get('reponame');
diff --git a/client/api/schoolsRepository.js b/client/api/schoolsRepository.js
new file mode 100644
index 0000000..c24117c
--- /dev/null
+++ b/client/api/schoolsRepository.js
@@ -0,0 +1,14 @@
+import api from './api'
+
+// URL for spells
+const resource = "/schools"
+
+// CRUD methods for spells
+export default {
+    getSchools() {
+        return api.get(`${resource}`)
+    },
+    getSchool(id) {
+        return api.get(`${resource}/${id}`)
+    },
+}
\ No newline at end of file
diff --git a/client/api/spellsRepository.js b/client/api/spellsRepository.js
index 5f26d7b..c9ed6cd 100644
--- a/client/api/spellsRepository.js
+++ b/client/api/spellsRepository.js
@@ -11,4 +11,10 @@ export default {
     getSpell(id) {
         return api.get(`${resource}/${id}`)
     },
+    addSpell(data) {
+        return api.post(`${resource}`, data)
+    },
+    updateSpell(id, data) {
+        return api.put(`${resource}/${id}`, data)
+    }
 }
\ No newline at end of file
diff --git a/client/api/variablesRepository.js b/client/api/variablesRepository.js
new file mode 100644
index 0000000..ec91f56
--- /dev/null
+++ b/client/api/variablesRepository.js
@@ -0,0 +1,14 @@
+import api from './api'
+
+// URL for spells
+const resource = "/variables"
+
+// CRUD methods for spells
+export default {
+    getVariables() {
+        return api.get(`${resource}`)
+    },
+    getVariable(id) {
+        return api.get(`${resource}/${id}`)
+    },
+}
\ No newline at end of file
diff --git a/client/public/libs/style.css b/client/public/libs/style.css
index 4d449f7..724f610 100644
--- a/client/public/libs/style.css
+++ b/client/public/libs/style.css
@@ -1,4 +1,6 @@
-@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext');/*&display=swap*/
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,latin-ext');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 @font-face {
   font-family: "stgeorge";
   src: url("/public/resources/stgeorge.woff2") format("woff2");
diff --git a/client/src/assets/scss/_global.scss b/client/src/assets/scss/_global.scss
index 64fc700..3b2e685 100644
--- a/client/src/assets/scss/_global.scss
+++ b/client/src/assets/scss/_global.scss
@@ -3,14 +3,10 @@
 @import '_mixins';
 @import '_fonts';
 
-// Theme fonts
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:wght@600;700&display=swap');
-
 // RESETS
 html {
-    box-sizing: border-box;
     font-size: $font-size-root;
-    font-family: $font-family;
+    font-family: $font-family !important;
     height: 100%;
     -webkit-overflow-scrolling: touch;
     line-height: 1.15;
diff --git a/client/src/components/spells/edit-spell-card.vue b/client/src/components/spells/edit-spell-card.vue
index 87a10ee..629d27a 100644
--- a/client/src/components/spells/edit-spell-card.vue
+++ b/client/src/components/spells/edit-spell-card.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="container-fluid">
+    <div
+        :spell="computeSpell"
+        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">
@@ -12,46 +14,54 @@
                 </button>
               </div>
               <div class="modal-body">
-                <form>
+                <form id="update-spell" @submit="updateSpell">
                   <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">
+                    <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-bind:value="spell.description"></textarea>
+                    <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-bind:value="spell.level">
+                    <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>
-                      <option value="1">Lumomancie</option>
-                      <option value="2">Vitamancie</option>
+                    <select class="form-control" id="spell_schools" name="spell_schools" multiple v-model="spell_school_ids">
+                        <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-bind:value="spell.charge">
+                    <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>
-                      <option value="1">Langue de salamandre</option>
-                      <option value="2">Geste</option>
+                    <select class="form-control" id="spell_ingredients" name="spell_ingredients" multiple v-model="spell_ingredient_ids">
+                        <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-bind:value="spell.cost">
+                    <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_variable_ids">
+                        <option v-for="(variable,index) in all_variables" :key="index" :value="'variable_' + variable.id">{{variable.description}}</option>
+                    </select>
                   </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>
+                <input type="submit" class="btn btn-primary" value="Enregistrer" form="update-spell">
                 <button type="button" class="btn btn-danger">Supprimer</button>
               </div>
             </div>
@@ -62,14 +72,119 @@
 </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: 'edit-spell-card',
     props: {
-        spell: Object,
+        spell: {
+            type: Object,
+            required: true,
+            id: Number,
+            name: String,
+            description: String,
+            is_ritual: Boolean,
+            schools: Array,
+            variables: Array,
+            ingredients: Array,
+        },
     },
+    data() {
+        return {
+            all_schools: [],
+            all_variables: [],
+            all_ingredients: [],
+
+            spell_school_ids: [],
+            spell_variable_ids: [],
+            spell_ingredient_ids: [],
+        }
+    },
+    computed: {
+        computeSpell() {
+            let output = this.spell
+            console.log(output)
+            return output
+        }
+    },
+    created() {
+        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
+            this.getAssociatedValues(this.spell)
+        })
+        .catch(err => {
+            console.log(err)
+        })
+    },
+    mounted() {
+
+    },
+    watch: {
+        spell: {
+            deep: true,
+            handler() {
+                this.getAssociatedValues(this.spell)
+            }
+        }
+    },
+    methods: {
+        setSpell(spell) {
+            this.spell = spell
+        },
+        getAssociatedValues(spell) {
+            this.spell_school_ids = []
+            this.spell_variable_ids = []
+            this.spell_ingredient_ids = []
+
+            spell.schools.forEach(element => {
+                this.spell_school_ids.push(element['id'])
+            })
+            spell.variables.forEach(element => {
+                this.spell_variable_ids.push(element['id'])
+            })
+            spell.ingredients.forEach(element => {
+                this.spell_ingredient_ids.push(element['id'])
+            })
+        },
+        updateSpell(e) {
+            e.preventDefault()
+
+            let schoolsData = Object.values(this.spell_school_ids).map(v => { return parseInt(v.slice(7)) })
+            let variablesData = Object.values(this.spell_variable_ids).map(v => { return parseInt(v.slice(9)) })
+            let ingredientsData = Object.values(this.spell_ingredient_ids).map(v => { return parseInt(v.slice(11)) })
+
+            let data = {
+                name: this.spell.name,
+                description: this.spell.description,
+                is_ritual: !!+this.spell.is_ritual,
+                schools: schoolsData,
+                variables: variablesData,
+                ingredients: ingredientsData,
+            }
+
+            Spells.updateSpell(this.spell.id, data)
+            .then(v => {
+                this.setSpell(v.data)
+            })
+        }
+    }
 }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+    textarea, select {
+        min-height: 10rem;
+    }
 </style>
\ No newline at end of file
diff --git a/client/src/components/spells/spells-list.vue b/client/src/components/spells/spells-list.vue
index 0b159e8..06fdfbc 100644
--- a/client/src/components/spells/spells-list.vue
+++ b/client/src/components/spells/spells-list.vue
@@ -3,7 +3,7 @@
         <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"/>
+        <edit-spell-card v-if="Object.keys(active_spell).length > 0" v-bind:spell="active_spell"/>
     </div>
 </template>
 
@@ -14,7 +14,7 @@ import EditSpellCard from "./edit-spell-card"
 
 // API
 import { RepositoryFactory } from "../../../api/repositories"
-const spellsRepository = RepositoryFactory.get('spells')
+const Spells = RepositoryFactory.get('spells')
 
 export default {
     name: 'spellslist',
@@ -36,11 +36,7 @@ export default {
     },
     methods: {
         async fetchSpells() {
-            const { data } = await spellsRepository.getSpells()
-            return data
-        },
-        async fetchSpell(id) {
-            const { data } = await spellsRepository.getSpell(id)
+            const { data } = await Spells.getSpells()
             return data
         },
         async computeSpells() {
@@ -51,7 +47,6 @@ export default {
         },
         async editSpell(e) {
             this.active_spell = e;
-            console.log(this.active_spell)
         }
     }
 }
diff --git a/client/src/main.js b/client/src/main.js
index e3a0572..b586a9a 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -17,6 +17,9 @@ window.jquery = jquery
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap/dist/js/bootstrap.js'
 
+// Styles
+import './assets/scss/_global.scss'
+
 Vue.config.productionTip = false
 Vue.use(VueRouter)
 Vue.use(VueMasonryPlugin)