Added ESlint to client and applied rules
This commit is contained in:
Alexis
@@ -1,159 +1,297 @@
|
||||
<template>
|
||||
<b-modal
|
||||
<b-modal
|
||||
ref="add_spell_modal"
|
||||
size="lg"
|
||||
modal-class="b-modal">
|
||||
modal-class="b-modal"
|
||||
>
|
||||
<template #modal-header="{ close }">
|
||||
<div
|
||||
id="spell_show_edit_modal"
|
||||
class="h1 modal-title font-display font-weight-bold"
|
||||
>
|
||||
<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">×</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<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">×</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #default>
|
||||
<form
|
||||
id="add-spell"
|
||||
@submit="addSpell"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_name"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Nom :</label>
|
||||
<input
|
||||
id="spell_name"
|
||||
v-model="spell.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="spell_name"
|
||||
placeholder="(256 caractères max.)"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_description"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Description :</label>
|
||||
<textarea
|
||||
id="spell_description"
|
||||
v-model="spell.description"
|
||||
class="form-control"
|
||||
name="spell_description"
|
||||
placeholder="(2048 caractères max.)"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
id="spell_ritual"
|
||||
v-model="spell.is_ritual"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
name="spell_ritual"
|
||||
>
|
||||
<label
|
||||
for="spell_ritual"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Rituel ? </label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_level"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Niveau :</label>
|
||||
<input
|
||||
id="spell_level"
|
||||
v-model="spell.level"
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="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
|
||||
id="spell_schools"
|
||||
v-model="spell.schools"
|
||||
class="form-control"
|
||||
name="spell_schools"
|
||||
multiple
|
||||
>
|
||||
<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 :</label>
|
||||
<input
|
||||
id="spell_charge"
|
||||
v-model="spell.charge"
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="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édient(s) :</label>
|
||||
<select
|
||||
id="spell_ingredients"
|
||||
v-model="spell.ingredients"
|
||||
class="form-control"
|
||||
name="spell_ingredients"
|
||||
multiple
|
||||
>
|
||||
<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 :</label>
|
||||
<input
|
||||
id="spell_cost"
|
||||
v-model="spell.cost"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="spell_cost"
|
||||
placeholder="(32 caractères max.)"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_variables"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Variable(s) :</label>
|
||||
<select
|
||||
id="spell_variables"
|
||||
v-model="spell.variables"
|
||||
class="form-control"
|
||||
name="spell_variables"
|
||||
multiple
|
||||
>
|
||||
<option
|
||||
v-for="(variable,index) in all_variables"
|
||||
:key="index"
|
||||
:value="'variable_' + variable.id"
|
||||
>
|
||||
{{ variable.description }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</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 :</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 :</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 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 ? </label>
|
||||
</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-model="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 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 :</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) :</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 :</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">Variable(s) :</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 #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"
|
||||
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')
|
||||
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,
|
||||
level: 0,
|
||||
cost: "0",
|
||||
charge: 0,
|
||||
schools: [],
|
||||
variables: [],
|
||||
ingredients: [],
|
||||
},
|
||||
all_schools: [],
|
||||
all_variables: [],
|
||||
all_ingredients: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Gets all relevant info for multiple selects
|
||||
let fetchSchools = Schools.getAll()
|
||||
let fetchVariables = Variables.getAll()
|
||||
let fetchIngredients = Ingredients.getAll()
|
||||
'name': 'AddSpellCard',
|
||||
data() {
|
||||
return {
|
||||
spell: {
|
||||
type: Object,
|
||||
name: "",
|
||||
description: "",
|
||||
is_ritual: false,
|
||||
level: 0,
|
||||
cost: "0",
|
||||
charge: 0,
|
||||
schools: [],
|
||||
variables: [],
|
||||
ingredients: [],
|
||||
},
|
||||
all_schools: [],
|
||||
all_variables: [],
|
||||
all_ingredients: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// Gets all relevant info for multiple selects
|
||||
let fetchSchools = Schools.getAll();
|
||||
let fetchVariables = Variables.getAll();
|
||||
let fetchIngredients = Ingredients.getAll();
|
||||
|
||||
Promise.all([fetchSchools, fetchVariables, fetchIngredients])
|
||||
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.addOne(data)
|
||||
.then(v => {
|
||||
this.all_schools = v[0].data
|
||||
this.all_variables = v[1].data
|
||||
this.all_ingredients = v[2].data
|
||||
this.$emit('addSpell', v.data);
|
||||
this.$refs["add_spell_modal"].hide();
|
||||
})
|
||||
.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.addOne(data)
|
||||
.then(v => {
|
||||
this.$emit('addSpell', v.data)
|
||||
this.$refs["add_spell_modal"].hide()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,197 +1,341 @@
|
||||
<template>
|
||||
<b-modal
|
||||
<b-modal
|
||||
ref="edit_spell_modal"
|
||||
size="lg"
|
||||
modal-class="b-modal"
|
||||
:spell="computeSpell">
|
||||
:spell="computeSpell"
|
||||
>
|
||||
<template #modal-header="{ close }">
|
||||
<div
|
||||
id="spell_show_edit_modal"
|
||||
class="h1 modal-title font-display font-weight-bold"
|
||||
>
|
||||
<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">×</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<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">×</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template v-slot:default>
|
||||
<form id="update-spell" ref="update-spell" @submit="updateSpell">
|
||||
<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-model="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-model="spell.description"></textarea>
|
||||
</div>
|
||||
<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 ? </label>
|
||||
</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-model="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 v-model="spell.spell_school_ids_value">
|
||||
<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 :</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) :</label>
|
||||
<select class="form-control" id="spell_ingredients" name="spell_ingredients" multiple v-model="spell.spell_ingredient_ids_value">
|
||||
<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 :</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">Variable(s) :</label>
|
||||
<select class="form-control" id="spell_variables" name="spell_variables" multiple v-model="spell.spell_variable_ids_value">
|
||||
<option v-for="(variable,index) in all_variables" :key="index" :value="'variable_' + variable.id">{{variable.description}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
<template #default>
|
||||
<form
|
||||
id="update-spell"
|
||||
ref="update-spell"
|
||||
@submit="updateSpell"
|
||||
>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_name"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Nom :</label>
|
||||
<input
|
||||
id="spell_name"
|
||||
v-model="spell.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="spell_name"
|
||||
placeholder="(256 caractères max.)"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_description"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Description :</label>
|
||||
<textarea
|
||||
id="spell_description"
|
||||
v-model="spell.description"
|
||||
class="form-control"
|
||||
name="spell_description"
|
||||
placeholder="(2048 caractères max.)"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
id="spell_ritual"
|
||||
v-model="spell.is_ritual"
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
name="spell_ritual"
|
||||
>
|
||||
<label
|
||||
for="spell_ritual"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Rituel ? </label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_level"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Niveau :</label>
|
||||
<input
|
||||
id="spell_level"
|
||||
v-model="spell.level"
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="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
|
||||
id="spell_schools"
|
||||
v-model="spell.spell_school_ids_value"
|
||||
class="form-control"
|
||||
name="spell_schools"
|
||||
multiple
|
||||
>
|
||||
<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 :</label>
|
||||
<input
|
||||
id="spell_charge"
|
||||
v-model="spell.charge"
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="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édient(s) :</label>
|
||||
<select
|
||||
id="spell_ingredients"
|
||||
v-model="spell.spell_ingredient_ids_value"
|
||||
class="form-control"
|
||||
name="spell_ingredients"
|
||||
multiple
|
||||
>
|
||||
<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 :</label>
|
||||
<input
|
||||
id="spell_cost"
|
||||
v-model="spell.cost"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="spell_cost"
|
||||
placeholder="(32 caractères max.)"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label
|
||||
for="spell_variables"
|
||||
class="font-weight-bold col-form-label"
|
||||
>Variable(s) :</label>
|
||||
<select
|
||||
id="spell_variables"
|
||||
v-model="spell.spell_variable_ids_value"
|
||||
class="form-control"
|
||||
name="spell_variables"
|
||||
multiple
|
||||
>
|
||||
<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-danger" data-dismiss="modal" @click="close()">Fermer</button>
|
||||
<!-- <input type="button" class="btn btn-success" value="Enregistrer comme nouveau" @click="cloneSpell()"> -->
|
||||
<input type="submit" class="btn btn-primary" value="Enregistrer" form="update-spell">
|
||||
</template>
|
||||
</b-modal>
|
||||
<template #modal-footer="{ close }">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-danger"
|
||||
data-dismiss="modal"
|
||||
@click="close()"
|
||||
>
|
||||
Fermer
|
||||
</button>
|
||||
<!-- <input type="button" class="btn btn-success" value="Enregistrer comme nouveau" @click="cloneSpell()"> -->
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
value="Enregistrer"
|
||||
form="update-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')
|
||||
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: {
|
||||
type: Object,
|
||||
required: true,
|
||||
id: Number,
|
||||
name: String,
|
||||
description: String,
|
||||
is_ritual: Boolean,
|
||||
schools: Array,
|
||||
variables: Array,
|
||||
ingredients: Array,
|
||||
},
|
||||
name: 'EditSpellCard',
|
||||
props: {
|
||||
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: [],
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
all_schools: [],
|
||||
all_variables: [],
|
||||
all_ingredients: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
computeSpell() {
|
||||
let output = this.spell;
|
||||
output.spell_school_ids = [];
|
||||
output.spell_variable_ids = [];
|
||||
output.spell_ingredient_ids = [];
|
||||
output.spell_school_ids_value = [];
|
||||
output.spell_variable_ids_value = [];
|
||||
output.spell_ingredient_ids_value = [];
|
||||
|
||||
output.schools.forEach(element => {
|
||||
output.spell_school_ids.push(element['id']);
|
||||
});
|
||||
output.variables.forEach(element => {
|
||||
output.spell_variable_ids.push(element['id']);
|
||||
});
|
||||
output.ingredients.forEach(element => {
|
||||
output.spell_ingredient_ids.push(element['id']);
|
||||
});
|
||||
|
||||
output.spell_school_ids.forEach(element => {
|
||||
output.spell_school_ids_value.push("school_" + element);
|
||||
});
|
||||
output.spell_variable_ids.forEach(element => {
|
||||
output.spell_variable_ids_value.push("variable_" + element);
|
||||
});
|
||||
output.spell_ingredient_ids.forEach(element => {
|
||||
output.spell_ingredient_ids_value.push("ingredient_" + element);
|
||||
});
|
||||
|
||||
return output;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
computeSpell: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.$refs["edit_spell_modal"].show();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Gets all relevant info for multiple selects
|
||||
let fetchSchools = Schools.getAll();
|
||||
let fetchVariables = Variables.getAll();
|
||||
let fetchIngredients = Ingredients.getAll();
|
||||
|
||||
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["edit_spell_modal"].show();
|
||||
this.$root.$on('bv::modal::hide', () => {
|
||||
this.$emit('editSpell', {});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
cloneSpell() {
|
||||
},
|
||||
computed: {
|
||||
computeSpell() {
|
||||
let output = this.spell
|
||||
output.spell_school_ids = []
|
||||
output.spell_variable_ids = []
|
||||
output.spell_ingredient_ids = []
|
||||
output.spell_school_ids_value = []
|
||||
output.spell_variable_ids_value = []
|
||||
output.spell_ingredient_ids_value = []
|
||||
updateSpell(e) {
|
||||
e.preventDefault();
|
||||
|
||||
output.schools.forEach(element => {
|
||||
output.spell_school_ids.push(element['id'])
|
||||
})
|
||||
output.variables.forEach(element => {
|
||||
output.spell_variable_ids.push(element['id'])
|
||||
})
|
||||
output.ingredients.forEach(element => {
|
||||
output.spell_ingredient_ids.push(element['id'])
|
||||
})
|
||||
let schoolsData = Object.values(this.spell.spell_school_ids_value).map(v => {
|
||||
return parseInt(v.slice(7));
|
||||
});
|
||||
let variablesData = Object.values(this.spell.spell_variable_ids_value).map(v => {
|
||||
return parseInt(v.slice(9));
|
||||
});
|
||||
let ingredientsData = Object.values(this.spell.spell_ingredient_ids_value).map(v => {
|
||||
return parseInt(v.slice(11));
|
||||
});
|
||||
|
||||
output.spell_school_ids.forEach(element => {
|
||||
output.spell_school_ids_value.push("school_" + element)
|
||||
})
|
||||
output.spell_variable_ids.forEach(element => {
|
||||
output.spell_variable_ids_value.push("variable_" + element)
|
||||
})
|
||||
output.spell_ingredient_ids.forEach(element => {
|
||||
output.spell_ingredient_ids_value.push("ingredient_" + element)
|
||||
})
|
||||
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,
|
||||
};
|
||||
|
||||
return output
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Gets all relevant info for multiple selects
|
||||
let fetchSchools = Schools.getAll()
|
||||
let fetchVariables = Variables.getAll()
|
||||
let fetchIngredients = Ingredients.getAll()
|
||||
|
||||
Promise.all([fetchSchools, fetchVariables, fetchIngredients])
|
||||
Spells.updateOne(this.spell.id, data)
|
||||
.then(v => {
|
||||
this.all_schools = v[0].data
|
||||
this.all_variables = v[1].data
|
||||
this.all_ingredients = v[2].data
|
||||
this.$emit('updateSpell', v.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.$refs["edit_spell_modal"].show()
|
||||
this.$root.$on('bv::modal::hide', () => {
|
||||
this.$emit('editSpell', {})
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
computeSpell: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.$refs["edit_spell_modal"].show()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cloneSpell() {
|
||||
},
|
||||
updateSpell(e) {
|
||||
e.preventDefault()
|
||||
|
||||
let schoolsData = Object.values(this.spell.spell_school_ids_value).map(v => { return parseInt(v.slice(7)) })
|
||||
let variablesData = Object.values(this.spell.spell_variable_ids_value).map(v => { return parseInt(v.slice(9)) })
|
||||
let ingredientsData = Object.values(this.spell.spell_ingredient_ids_value).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.updateOne(this.spell.id, data)
|
||||
.then(v => {
|
||||
this.$emit('updateSpell', v.data)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,110 +1,162 @@
|
||||
<template>
|
||||
<div
|
||||
:class="main_school"
|
||||
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 grid-item grid-sizer"
|
||||
>
|
||||
<div
|
||||
:class="main_school"
|
||||
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;">
|
||||
class="spellcard bg-white p-4 rounded text-dark shadow"
|
||||
style="border-left-width:4px;border-left-style:solid;"
|
||||
>
|
||||
<div
|
||||
:title="spell.name"
|
||||
class="h3 font-display font-weight-bold text-wrap word-break"
|
||||
style="line-height:100%;"
|
||||
>
|
||||
<router-link
|
||||
:to="`/sorts/${spell.id}`"
|
||||
class="text-decoration-none"
|
||||
>
|
||||
{{ spell.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div :title="spell.name" class="h3 font-display font-weight-bold text-wrap word-break" style="line-height:100%;">
|
||||
<router-link :to="`/sorts/${spell.id}`" class="text-decoration-none">{{spell.name}}</router-link>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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 spell.schools" :key="index">
|
||||
<span v-if="index!=0">, </span>
|
||||
<router-link :to="`ecoles/${school.id}`" class="text-secondary">{{school.name}}</router-link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="spell.charge!=0" class="small font-weight-bold">
|
||||
<span>Charge {{spell.charge}} tour(s)</span>
|
||||
</div>
|
||||
|
||||
<div v-if="spell.is_ritual" class="small font-weight-bold">
|
||||
<span>Rituel</span>
|
||||
</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>
|
||||
<span>{{ingredient.name}}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-clipboard="spell.description"
|
||||
:id="'spell_description_' + spell.id"
|
||||
v-b-tooltip.click
|
||||
placement="bottom"
|
||||
title="Description copiée !"
|
||||
class="small text-muted mt-2">
|
||||
<span class="prewrap">{{spell.description}}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<div class="font-weight-bold d-inline-block"><span>Coût : </span>{{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 spell.variables" :key="index">
|
||||
<span class="font-weight-bold">
|
||||
<span v-if="index!=0"><br></span>
|
||||
<span>{{String.fromCharCode(120+index)}}</span>
|
||||
</span>
|
||||
<span> = {{variable.description}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<footer v-if="user" class="text-right">
|
||||
<a class="h5 text-secondary mr-1">
|
||||
<i class="mad" @click="editSpell(spell)">edit</i>
|
||||
</a>
|
||||
<a class="h5 text-danger">
|
||||
<i class="mad" @click="deleteSpell(spell)">delete</i>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div>
|
||||
<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 spell.schools"
|
||||
:key="index"
|
||||
>
|
||||
<span v-if="index!=0">, </span>
|
||||
<router-link
|
||||
:to="`ecoles/${school.id}`"
|
||||
class="text-secondary"
|
||||
>{{ school.name }}</router-link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="spell.charge!=0"
|
||||
class="small font-weight-bold"
|
||||
>
|
||||
<span>Charge {{ spell.charge }} tour(s)</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="spell.is_ritual"
|
||||
class="small font-weight-bold"
|
||||
>
|
||||
<span>Rituel</span>
|
||||
</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>
|
||||
<span>{{ ingredient.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:id="'spell_description_' + spell.id"
|
||||
v-clipboard="spell.description"
|
||||
v-b-tooltip.click
|
||||
placement="bottom"
|
||||
title="Description copiée !"
|
||||
class="small text-muted mt-2"
|
||||
>
|
||||
<span class="prewrap">{{ spell.description }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<div class="font-weight-bold d-inline-block">
|
||||
<span>Coût : </span>{{ 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 spell.variables"
|
||||
:key="index"
|
||||
>
|
||||
<span class="font-weight-bold">
|
||||
<span v-if="index!=0"><br></span>
|
||||
<span>{{ String.fromCharCode(120+index) }}</span>
|
||||
</span>
|
||||
<span> = {{ variable.description }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<footer
|
||||
v-if="user"
|
||||
class="text-right"
|
||||
>
|
||||
<a class="h5 text-secondary mr-1">
|
||||
<i
|
||||
class="mad"
|
||||
@click="editSpell(spell)"
|
||||
>edit</i>
|
||||
</a>
|
||||
<a class="h5 text-danger">
|
||||
<i
|
||||
class="mad"
|
||||
@click="deleteSpell(spell)"
|
||||
>delete</i>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// API
|
||||
import { RepositoryFactory } from "@/api/repositories"
|
||||
const Spells = RepositoryFactory.get('spells')
|
||||
import { RepositoryFactory } from "@/api/repositories";
|
||||
const Spells = RepositoryFactory.get('spells');
|
||||
|
||||
export default {
|
||||
name: 'spell-card',
|
||||
name: 'SpellCard',
|
||||
props: {
|
||||
spell: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
main_school: this.spell.schools[0].name,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.main_school = this.main_school.toLowerCase()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.getUserProfile
|
||||
return this.$store.getters.getUserProfile;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.main_school = this.main_school.toLowerCase();
|
||||
},
|
||||
methods: {
|
||||
editSpell(spell) {
|
||||
this.$emit('editSpell', spell)
|
||||
this.$emit('editSpell', spell);
|
||||
},
|
||||
deleteSpell(spell) {
|
||||
Spells.deleteOne(this.spell.id)
|
||||
.then(() => {
|
||||
this.$emit('deleteSpell', spell)
|
||||
})
|
||||
.then(() => {
|
||||
this.$emit('deleteSpell', spell);
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,224 +1,290 @@
|
||||
<template>
|
||||
<div class="spell-list-wrapper">
|
||||
|
||||
<div class="mb-4">
|
||||
<form>
|
||||
<div class="form-group mb-2">
|
||||
<input type="text" class="form-control" v-model="search_text" name="search_terms" id="search_terms" placeholder="Rechercher l'arcane">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="search_term" id="search_fields_name" value="search_fields_name">
|
||||
<label class="form-check-label" for="search_fields_name">Nom</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="search_term" id="search_fields_description" value="search_fields_description" checked>
|
||||
<label class="form-check-label" for="search_fields_description">Description</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="search_term" id="search_fields_schools" value="search_fields_schools" disabled>
|
||||
<label class="form-check-label" for="search_fields_schools">École(s)</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="search_term" id="search_fields_ingredients" value="search_fields_ingredients" disabled>
|
||||
<label class="form-check-label" for="search_fields_ingredients">Ingrédients</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="search_term" id="search_fields_variables" value="search_fields_variables" disabled>
|
||||
<label class="form-check-label" for="search_fields_variables">Variables</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="spell-list-wrapper">
|
||||
<div class="mb-4">
|
||||
<form>
|
||||
<div class="form-group mb-2">
|
||||
<input
|
||||
id="search_terms"
|
||||
v-model="search_text"
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="search_terms"
|
||||
placeholder="Rechercher l'arcane"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="user"
|
||||
@click="showAdd"
|
||||
type="button"
|
||||
class="btn font-display font-weight-bold btn-lg btn-outline-dark btn-block shadow-sm mb-4">
|
||||
|
||||
<i class="mad">add</i>
|
||||
<span>Ajouter un sort</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="filteredSpells.length > 0"
|
||||
class="spell-list-wrapper">
|
||||
<div
|
||||
class="row spells-list"
|
||||
v-masonry
|
||||
transition-duration="1s"
|
||||
item-selector=".spell-card">
|
||||
<spell-card
|
||||
class="spell-card"
|
||||
v-masonry-tile
|
||||
v-for="(spell) in filteredSpells"
|
||||
:key="spell.id"
|
||||
:spell="spell"
|
||||
@editSpell="editSpell"
|
||||
@deleteSpell="deleteSpell" />
|
||||
</div>
|
||||
|
||||
<edit-spell-card
|
||||
v-if="Object.keys(current_edit_spell).length > 0"
|
||||
:spell="current_edit_spell"
|
||||
@editSpell="editSpell"
|
||||
@updateSpell="updateSpell"/>
|
||||
|
||||
<add-spell-card
|
||||
v-if="adding_spell"
|
||||
@cancelAdd="cancelAdd"
|
||||
@addSpell="addSpell"/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="loader-wrapper">
|
||||
<loader/>
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
id="search_fields_name"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="search_term"
|
||||
value="search_fields_name"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="search_fields_name"
|
||||
>Nom</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
id="search_fields_description"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="search_term"
|
||||
value="search_fields_description"
|
||||
checked
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="search_fields_description"
|
||||
>Description</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
id="search_fields_schools"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="search_term"
|
||||
value="search_fields_schools"
|
||||
disabled
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="search_fields_schools"
|
||||
>
|
||||
École(s)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
id="search_fields_ingredients"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="search_term"
|
||||
value="search_fields_ingredients"
|
||||
disabled
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="search_fields_ingredients"
|
||||
>Ingrédients</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
id="search_fields_variables"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="search_term"
|
||||
value="search_fields_variables"
|
||||
disabled
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="search_fields_variables"
|
||||
>Variables</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="user"
|
||||
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>
|
||||
<span>Ajouter un sort</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="filteredSpells.length > 0"
|
||||
class="spell-list-wrapper"
|
||||
>
|
||||
<div
|
||||
v-masonry
|
||||
class="row spells-list"
|
||||
transition-duration="1s"
|
||||
item-selector=".spell-card"
|
||||
>
|
||||
<spell-card
|
||||
v-for="(spell) in filteredSpells"
|
||||
:key="spell.id"
|
||||
v-masonry-tile
|
||||
class="spell-card"
|
||||
:spell="spell"
|
||||
@editSpell="editSpell"
|
||||
@deleteSpell="deleteSpell"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<edit-spell-card
|
||||
v-if="Object.keys(current_edit_spell).length > 0"
|
||||
:spell="current_edit_spell"
|
||||
@editSpell="editSpell"
|
||||
@updateSpell="updateSpell"
|
||||
/>
|
||||
|
||||
<add-spell-card
|
||||
v-if="adding_spell"
|
||||
@cancelAdd="cancelAdd"
|
||||
@addSpell="addSpell"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="loader-wrapper"
|
||||
>
|
||||
<loader />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import SpellCard from "./spell-card"
|
||||
import EditSpellCard from "./edit-spell-card"
|
||||
import AddSpellCard from "./add-spell-card"
|
||||
import SpellCard from "./spell-card";
|
||||
import EditSpellCard from "./edit-spell-card";
|
||||
import AddSpellCard from "./add-spell-card";
|
||||
|
||||
// API
|
||||
import { RepositoryFactory } from "~/api/repositories"
|
||||
const Spells = RepositoryFactory.get('spells')
|
||||
const Schools = RepositoryFactory.get('schools')
|
||||
import { RepositoryFactory } from "@/api/repositories";
|
||||
const Spells = RepositoryFactory.get('spells');
|
||||
const Schools = RepositoryFactory.get('schools');
|
||||
|
||||
export default {
|
||||
name: 'spellslist',
|
||||
components: {
|
||||
'spell-card': SpellCard,
|
||||
'edit-spell-card': EditSpellCard,
|
||||
'add-spell-card': AddSpellCard,
|
||||
name: 'Spellslist',
|
||||
components: {
|
||||
'spell-card': SpellCard,
|
||||
'edit-spell-card': EditSpellCard,
|
||||
'add-spell-card': AddSpellCard,
|
||||
},
|
||||
props: {
|
||||
schoolId: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
props: {
|
||||
school_id: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
spells: [],
|
||||
loading: false,
|
||||
current_edit_spell: {},
|
||||
currentIndex: 1,
|
||||
adding_spell: false,
|
||||
search_text: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredSpells() {
|
||||
return this.spells;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
spells: [],
|
||||
loading: false,
|
||||
current_edit_spell: {},
|
||||
currentIndex: 1,
|
||||
adding_spell: false,
|
||||
search_text: "",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredSpells() {
|
||||
return this.spells
|
||||
},
|
||||
user() {
|
||||
return this.$store.state.user
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.spells = this.filteredSpells
|
||||
if (!this.school_id) {
|
||||
this.getInitialSpells()
|
||||
} else {
|
||||
this.getInitialSchoolSpells()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.school_id) {
|
||||
this.scroll()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInitialSpells() {
|
||||
Spells.getPage(this.currentIndex)
|
||||
.then(v => {
|
||||
this.loading = true
|
||||
let spells = this.filteredSpells
|
||||
spells.push(v.data)
|
||||
this.spells = spells[0]
|
||||
})
|
||||
.then(() => {
|
||||
this.currentIndex++
|
||||
this.loading = false
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getInitialSchoolSpells() {
|
||||
Schools.getSpellsFromOne(this.school_id)
|
||||
.then(v => {
|
||||
this.loading = true
|
||||
let spells = this.filteredSpells
|
||||
spells.push(v.data.spells)
|
||||
this.spells = spells[0]
|
||||
})
|
||||
.then(() => {
|
||||
this.currentIndex++
|
||||
this.loading = false
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
scroll() {
|
||||
window.onscroll = () => {
|
||||
if (((window.innerHeight + window.scrollY) - document.body.offsetHeight) >= -1) {
|
||||
Spells.getPage(this.currentIndex)
|
||||
.then(v => {
|
||||
this.loading = true
|
||||
let spells = this.filteredSpells
|
||||
for (let i = 0; i < v.data.length; i++) {
|
||||
const element = v.data[i];
|
||||
spells.push(element)
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.currentIndex++
|
||||
this.loading = false
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
editSpell(e) {
|
||||
this.current_edit_spell = e;
|
||||
},
|
||||
showAdd() {
|
||||
this.adding_spell = true
|
||||
},
|
||||
cancelAdd() {
|
||||
this.adding_spell = false
|
||||
},
|
||||
// Receives events to update the data
|
||||
addSpell(e) {
|
||||
Spells.getOne(e.id)
|
||||
.then(v => {
|
||||
let spells = this.filteredSpells
|
||||
spells.unshift(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.current_edit_spell = {}
|
||||
},
|
||||
deleteSpell(e) {
|
||||
this.spells.splice(this.spells.indexOf(e), 1)
|
||||
this.current_edit_spell = {}
|
||||
}
|
||||
user() {
|
||||
return this.$store.state.user;
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.spells = this.filteredSpells;
|
||||
if (!this.school_id) {
|
||||
this.getInitialSpells();
|
||||
} else {
|
||||
this.getInitialSchoolSpells();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.school_id) {
|
||||
this.scroll();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInitialSpells() {
|
||||
Spells.getPage(this.currentIndex)
|
||||
.then(v => {
|
||||
this.loading = true;
|
||||
let spells = this.filteredSpells;
|
||||
spells.push(v.data);
|
||||
this.spells = spells[0];
|
||||
})
|
||||
.then(() => {
|
||||
this.currentIndex++;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
getInitialSchoolSpells() {
|
||||
Schools.getSpellsFromOne(this.school_id)
|
||||
.then(v => {
|
||||
this.loading = true;
|
||||
let spells = this.filteredSpells;
|
||||
spells.push(v.data.spells);
|
||||
this.spells = spells[0];
|
||||
})
|
||||
.then(() => {
|
||||
this.currentIndex++;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
scroll() {
|
||||
window.onscroll = () => {
|
||||
if (((window.innerHeight + window.scrollY) - document.body.offsetHeight) >= -1) {
|
||||
Spells.getPage(this.currentIndex)
|
||||
.then(v => {
|
||||
this.loading = true;
|
||||
let spells = this.filteredSpells;
|
||||
for (let i = 0; i < v.data.length; i++) {
|
||||
const element = v.data[i];
|
||||
spells.push(element);
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.currentIndex++;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
};
|
||||
},
|
||||
editSpell(e) {
|
||||
this.current_edit_spell = e;
|
||||
},
|
||||
showAdd() {
|
||||
this.adding_spell = true;
|
||||
},
|
||||
cancelAdd() {
|
||||
this.adding_spell = false;
|
||||
},
|
||||
// Receives events to update the data
|
||||
addSpell(e) {
|
||||
Spells.getOne(e.id)
|
||||
.then(v => {
|
||||
let spells = this.filteredSpells;
|
||||
spells.unshift(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.current_edit_spell = {};
|
||||
},
|
||||
deleteSpell(e) {
|
||||
this.spells.splice(this.spells.indexOf(e), 1);
|
||||
this.current_edit_spell = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user