- Added edit spell component and started working on edit system

This commit is contained in:
Alexis
2020-06-08 23:16:27 +02:00
parent 1042b2df56
commit 6d67ebff95
6 changed files with 124 additions and 102 deletions

View File

@@ -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">, &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">, &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)
}
},
}