FlagCollection.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <section class="flag-collection">
  3. <header>
  4. <h3 class="mdi mdi-folder-outline">{{collection.name}}</h3>
  5. <span
  6. class="mdi mdi-close"
  7. title="close"
  8. @click.prevent="onCloseFlagColl"
  9. />
  10. </header>
  11. <ul v-if="loadedItems">
  12. <li
  13. v-for="item in loadedItems"
  14. :key="item.id"
  15. >
  16. <MiniCard :item="item" :collid="collection.id"/>
  17. </li>
  18. <span v-if="loadedItems.length === 0">No items in your folder</span>
  19. </ul>
  20. <span v-else class="loading">{{ $t('default.Loading…') }}</span>
  21. </section>
  22. </template>
  23. <script>
  24. import { mapState, mapActions } from 'vuex'
  25. import MiniCard from 'vuejs/components/Content/MiniCard'
  26. export default {
  27. name: "FlagCollection",
  28. props: ['collection'],
  29. data: () => ({
  30. loadedItems: false
  31. }),
  32. computed: {
  33. ...mapState({
  34. flagcolls: state => state.User.flagcolls,
  35. flagcollsLoadedItems: state => state.User.flagcollsLoadedItems,
  36. openedCollid: state => state.User.openedCollid
  37. })
  38. },
  39. // watch: {
  40. // flagcolls (newv, oldv) {
  41. // console.log('watching flagcolls')
  42. // if( typeof this.flagcolls[this.collection.id].loadedItems !== 'undefined' ) {
  43. // this.loadedItems = this.flagcolls[this.collection.id].loadedItems
  44. // }
  45. // }
  46. // },
  47. created() {
  48. if (typeof this.flagcollsLoadedItems[this.openedCollid] !== 'undefined') {
  49. // if loadedItems are alredy loaded,
  50. // the mutation occurs before this subscription
  51. // so we first check if they are already available
  52. this.loadedItems = this.flagcollsLoadedItems[this.openedCollid]
  53. }
  54. this.unsubscribe = this.$store.subscribe((mutation, state) => {
  55. if (mutation.type === 'User/setLoadedCollItems') {
  56. console.log("mutation setLoadedCollItems collid", this.openedCollid)
  57. // mutation is triggered before the component update
  58. // so this.collection.id is not good
  59. this.loadedItems = state.User.flagcollsLoadedItems[this.openedCollid]
  60. }
  61. })
  62. },
  63. beforeDestroy() {
  64. this.unsubscribe()
  65. },
  66. // beforeMount () {
  67. // if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
  68. // this.
  69. // }
  70. // },
  71. methods: {
  72. ...mapActions({
  73. closeFlagColl: 'User/closeFlagColl'
  74. }),
  75. onCloseFlagColl(e) {
  76. this.closeFlagColl()
  77. }
  78. },
  79. components: {
  80. MiniCard
  81. }
  82. }
  83. </script>
  84. <style lang="scss" scoped>
  85. </style>