- Added edit spell component and started working on edit system
This commit is contained in:
Alexis
75
client/src/components/spells/edit-spell-card.vue
Normal file
75
client/src/components/spells/edit-spell-card.vue
Normal file
@@ -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">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="spell_name" class="font-weight-bold col-form-label">Nom :</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 :</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 :</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) :</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 :</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) :</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 :</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>
|
||||
@@ -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ù :</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ù :</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)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="spell_name" class="font-weight-bold col-form-label">Nom :</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 :</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) :</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 :</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 :</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 :</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 :</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 :</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>
|
||||
.world-page{
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -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,
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user