materio-d9/web/themes/custom/materiotheme/vuejs/components/User/FlagCollection.vue

90 lines
2.4 KiB
Vue
Raw Normal View History

<template>
<section class="flag-collection">
<header>
<h3 class="mdi mdi-folder-outline">{{collection.name}}</h3>
<span
class="mdi mdi-close"
title="close"
@click.prevent="onCloseFlagColl"
/>
</header>
<ul v-if="loadedItems">
<li
v-for="item in loadedItems"
:key="item.id"
>
2020-12-01 20:40:37 +01:00
<MiniCard :item="item" :collid="collection.id"/>
</li>
2020-12-01 20:40:37 +01:00
<span v-if="loadedItems.length === 0">No items in your folder</span>
</ul>
<span v-else class="loading">Loading</span>
</section>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import MiniCard from 'vuejs/components/Content/MiniCard'
export default {
name: "FlagCollection",
props: ['collection'],
data: () => ({
loadedItems: false
}),
computed: {
...mapState({
flagcolls: state => state.User.flagcolls,
2020-12-01 20:40:37 +01:00
flagcollsLoadedItems: state => state.User.flagcollsLoadedItems,
openedCollid: state => state.User.openedCollid
})
},
// watch: {
// flagcolls (newv, oldv) {
// console.log('watching flagcolls')
// if( typeof this.flagcolls[this.collection.id].loadedItems !== 'undefined' ) {
// this.loadedItems = this.flagcolls[this.collection.id].loadedItems
// }
// }
// },
created() {
2020-12-01 20:40:37 +01:00
if (typeof this.flagcollsLoadedItems[this.openedCollid] !== 'undefined') {
// if loadedItems are alredy loaded,
// the mutation occurs before this subscription
// so we first check if they are already available
2020-12-01 20:40:37 +01:00
this.loadedItems = this.flagcollsLoadedItems[this.openedCollid]
}
this.unsubscribe = this.$store.subscribe((mutation, state) => {
if (mutation.type === 'User/setLoadedCollItems') {
console.log("mutation setLoadedCollItems collid", this.openedCollid)
// mutation is triggered before the component update
// so this.collection.id is not good
2020-12-01 20:40:37 +01:00
this.loadedItems = state.User.flagcollsLoadedItems[this.openedCollid]
}
})
},
beforeDestroy() {
this.unsubscribe()
},
// beforeMount () {
// if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
// this.
// }
// },
methods: {
...mapActions({
closeFlagColl: 'User/closeFlagColl'
}),
onCloseFlagColl(e) {
this.closeFlagColl()
}
},
components: {
MiniCard
}
}
</script>
<style lang="scss" scoped>
</style>