Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- dear god lazy loading why but it works good night

Browse Source
This commit is contained in:
Alexis
2020-06-22 23:37:24 +02:00
parent 96d13ec6e9
commit 7819cf004d
5 changed files with 90 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/api/spellsRepository.js
View File

@@ -5,19 +5,22 @@ const resource = "/spells"
// CRUD methods for spells
export default {
getSpells() {
getAll() {
return api.get(`${resource}`)
},
getSpell(id) {
getPage(page) {
return api.get(`${resource}/page/${page}`)
},
getOne(id) {
return api.get(`${resource}/${id}`)
},
addSpell(data) {
addOne(data) {
return api.post(`${resource}`, data)
},
updateSpell(id, data) {
updateOne(id, data) {
return api.put(`${resource}/${id}`, data)
},
deleteSpell(id) {
deleteOne(id) {
return api.delete(`${resource}/${id}`)
}
}

2
client/src/components/spells/add-spell-card.vue
View File

@@ -143,7 +143,7 @@ export default {
ingredients: ingredientsData,
}
Spells.addSpell(data)
Spells.addOne(data)
.then(v => {
this.$emit('addSpell', v.data)
this.$refs["add_spell_modal"].hide()

2
client/src/components/spells/edit-spell-card.vue
View File

@@ -182,7 +182,7 @@ export default {
ingredients: ingredientsData,
}
Spells.updateSpell(this.spell.id, data)
Spells.updateOne(this.spell.id, data)
.then(v => {
this.$emit('updateSpell', v.data)
})

2
client/src/components/spells/spell-card.vue
View File

@@ -93,7 +93,7 @@ export default {
this.$emit('editSpell', spell)
},
deleteSpell(spell) {
Spells.deleteSpell(this.spell.id)
Spells.deleteOne(this.spell.id)
.then(() => {
this.$emit('deleteSpell', spell)
})

101
client/src/components/spells/spells-list.vue
View File

@@ -4,11 +4,35 @@
<i class="mad">add</i>
<span>Ajouter un sort</span>
</button>
<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) in spells" :key="spell.id" v-bind:spell="spell" @editSpell="editSpell" @deleteSpell="deleteSpell"/>
<div
v-if="computedSpells.length > 0"
class="spell-list-wrapper">
<div
class="row spells-list"
v-masonry
transition-duration=".5s"
item-selector=".spell-card">
<spell-card
class="spell-card"
v-masonry-tile
v-for="(spell) in computedSpells"
: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>
<edit-spell-card v-if="Object.keys(current_edit_spell).length > 0" v-bind:spell="current_edit_spell" @editSpell="editSpell" @updateSpell="updateSpell"/>
<add-spell-card v-if="adding_spell" @cancelAdd="cancelAdd" @addSpell="addSpell"/>
</div>
</template>
@@ -21,7 +45,7 @@ import AddSpellCard from "./add-spell-card"
// API
import { RepositoryFactory } from "~/api/repositories"
const Spells = RepositoryFactory.get('spells')
const Schools = RepositoryFactory.get('schools')
// const Schools = RepositoryFactory.get('schools')
export default {
name: 'spellslist',
@@ -31,34 +55,67 @@ export default {
'add-spell-card': AddSpellCard,
},
props: {
school_id: String
school_id: String,
},
data() {
return {
loading: false,
spells: [],
loading: false,
current_edit_spell: {},
currentIndex: 1,
adding_spell: false,
}
},
created() {
this.computeSpells()
computed: {
computedSpells() {
return this.spells
}
},
beforeMount() {
this.spells = this.computedSpells
this.getInitialSpells()
},
mounted() {
this.scroll()
},
methods: {
async fetchSpells() {
if (!this.school_id) {
const { data } = await Spells.getSpells()
return data
} else {
const { data } = await Schools.getSpellsFromSchool(this.school_id)
return data.spells
}
getInitialSpells() {
Spells.getPage(this.currentIndex)
.then(v => {
this.loading = true
let spells = this.computedSpells
spells.push(v.data)
this.spells = spells[0]
})
.then(() => {
this.currentIndex++
this.loading = false
})
.catch(err => {
console.log(err)
})
},
async computeSpells() {
this.loading = true
const displaySpells = await this.fetchSpells()
this.loading = false
this.spells = displaySpells
scroll() {
window.onscroll = () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
Spells.getPage(this.currentIndex)
.then(v => {
this.loading = true
let spells = this.computedSpells
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;