- Added single school page

client/api/schoolsRepository.js

@@ -11,4 +11,7 @@ export default {
     getSchool(id) {
         return api.get(`${resource}/${id}`)
     },
+    getSpellsFromSchool(id) {
+        return api.get(`${resource}/${id}/spells`)
+    }
 }

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

@@ -1,5 +1,9 @@
 <template>
-    <b-modal ref="add_spell_modal">
+    <b-modal
+    ref="add_spell_modal"
+    size="lg"
+    modal-class="b-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">
@@ -11,6 +15,7 @@
                 <span aria-hidden="true">&times;</span>
             </button>
         </template>
+
         <template v-slot:default>
             <form id="add-spell" @submit="addSpell">
                 <div class="form-group">
@@ -21,9 +26,9 @@
                     <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 class="form-check form-check-inline">
+                    <input type="checkbox" class="form-check-input" id="spell_ritual" name="spell_ritual" 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>
@@ -57,10 +62,12 @@
                 </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>
 
@@ -82,6 +89,9 @@ export default {
                 name: "",
                 description: "",
                 is_ritual: false,
+                level: 0,
+                cost: "0",
+                charge: 0,
                 schools: [],
                 variables: [],
                 ingredients: [],

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

@@ -1,11 +1,17 @@
 <template>
-    <b-modal ref="edit_spell_modal" :spell="computeSpell">
+    <b-modal
+    ref="edit_spell_modal"
+    size="lg"
+    modal-class="b-modal"
+    :spell="computeSpell">
+
         <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">{{spell.name}}#{{spell.id}}</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="update-spell" @submit="updateSpell">
                 <div class="form-group">
@@ -16,9 +22,9 @@
                     <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 class="form-check form-check-inline">
+                    <input type="checkbox" class="form-check-input" id="spell_ritual" name="spell_ritual" 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>
@@ -52,6 +58,7 @@
                 </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="update-spell">

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

@@ -18,6 +18,7 @@ import AddSpellCard from "./add-spell-card"
 // API
 import { RepositoryFactory } from "../../../api/repositories"
 const Spells = RepositoryFactory.get('spells')
+const Schools = RepositoryFactory.get('schools')
 
 export default {
     name: 'spellslist',
@@ -26,6 +27,9 @@ export default {
         'edit-spell-card': EditSpellCard,
         'add-spell-card': AddSpellCard,
     },
+    props: {
+        school_id: String
+    },
     data() {
         return {
             loading: false,
@@ -39,8 +43,14 @@ export default {
     },
     methods: {
         async fetchSpells() {
-            const { data } = await Spells.getSpells()
-            return data
+            if (!this.school_id) {
+                const { data } = await Spells.getSpells()
+                return data
+            } else {
+                const { data } = await Schools.getSpellsFromSchool(this.school_id)
+                console.log(data.spells)
+                return data.spells
+            }
         },
         async computeSpells() {
             this.loading = true

client/src/models/Spell.ts

@@ -1,18 +0,0 @@
-class Spell {
-
-    private id: number
-    private name: string
-    private description: string
-    private cost: number
-    private charge: number
-    private schools: Array<string>
-    private ingredients: Array<string>
-    private variables: Array<string>
-
-    constructor(id: number) {
-        this.id = id
-    }
-
-}
-
-export default Spell;

client/src/pages/schools/single-school-page.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="container-fluid p-4" id="spell-container">
+    <h1 class="display-3 font-display mb-3">{{ school.name }}</h1>
+    <spell-list :school_id="id"/>
+  </div>
+</template>
+
+<script>
+import SpellsList from "../../components/spells/spells-list"
+
+// API
+import { RepositoryFactory } from "../../../api/repositories"
+const Schools = RepositoryFactory.get('schools')
+
+export default {
+    name: 'single-school',
+    components: {
+        'spell-list': SpellsList,
+    },
+    data() {
+        return {
+            loading: false,
+            school: {},
+            id: this.$route.params.id
+        }
+    },
+    created() {
+        this.computeSchool()
+    },
+    methods: {
+        async fetchSchool(id) {
+            const { data } = await Schools.getSchool(id)
+            return data
+        },
+        async computeSchool() {
+            this.loading = true
+            const displaySchool = await this.fetchSchool(this.id)
+            this.loading = false
+            this.school = displaySchool
+        },
+        console() {
+            console.log(this.school)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

client/src/routes.js

@@ -4,6 +4,7 @@
 // Pages
 import Index from "./pages/index-page";
 import Spells from "./pages/spells-page";
+import SchoolSingle from "./pages/schools/single-school-page";
 import World from "./pages/world-page";
 
 // Routes
@@ -17,6 +18,9 @@ const routes = [
     {
         path: '/spells', component: Spells,
     },
+    {
+        path: '/school/:id', component: SchoolSingle, props: true
+    },
     {
         path: '/world', component: World,
     }

repositories/ingredient-repository.js

@@ -54,7 +54,7 @@ class IngredientRepository {
         return new Promise((resolve, reject) => {
             model.forge()
             .where({ 'id' : id })
-            .fetch({ withRelated: ['spells']})
+            .fetch({ withRelated: ['spells', 'spells.schools', 'spells.variables', 'spells.ingredients', 'spells.schools.meta_schools']})
             .then(v => {
                 resolve(v.toJSON({ omitPivot: true }))
             })

repositories/school-repository.js

@@ -53,7 +53,7 @@ class SchoolRepository {
         return new Promise((resolve, reject) => {
             model.forge()
             .where({ 'id' : id })
-            .fetch({ withRelated: ['spells', 'meta_schools']})
+            .fetch({ withRelated: ['spells', 'spells.schools', 'spells.variables', 'spells.ingredients', 'spells.schools.meta_schools']})
             .then(v => {
                 resolve(v.toJSON({ omitPivot: true }))
             })

repositories/variable-repository.js

@@ -53,7 +53,7 @@ class VariableRepository {
         return new Promise((resolve, reject) => {
             model.forge()
             .where({ 'id' : id })
-            .fetch({ withRelated: ['spells']})
+            .fetch({ withRelated: ['spells', 'spells.schools', 'spells.variables', 'spells.ingredients', 'spells.schools.meta_schools']})
             .then(v => {
                 resolve(v.toJSON({ omitPivot: true }))
             })