folders beta 1

web/themes/custom/materiotheme/vuejs/components/User/FlagCollection.vue

@@ -13,8 +13,9 @@
         v-for="item in loadedItems"
         :key="item.id"
       >
-        <MiniCard :item="item"/>
+        <MiniCard :item="item" :collid="collection.id"/>
       </li>
+      <span v-if="loadedItems.length === 0">No items in your folder</span>
     </ul>
     <span v-else class="loading">Loading</span>
   </section>
@@ -33,6 +34,7 @@ export default {
   computed: {
     ...mapState({
       flagcolls: state => state.User.flagcolls,
+      flagcollsLoadedItems: state => state.User.flagcollsLoadedItems,
       openedCollid: state => state.User.openedCollid
     })
   },
@@ -45,11 +47,11 @@ export default {
   //   }
   // },
   created() {
-    if (typeof this.collection.loadedItems !== 'undefined') {
+    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
-      this.loadedItems = this.collection.loadedItems
+      this.loadedItems = this.flagcollsLoadedItems[this.openedCollid]
     }
 
     this.unsubscribe = this.$store.subscribe((mutation, state) => {
@@ -57,7 +59,7 @@ export default {
         console.log("mutation setLoadedCollItems collid", this.openedCollid)
         // mutation is triggered before the component update
         // so this.collection.id is not good
-        this.loadedItems = state.User.flagcolls[this.openedCollid].loadedItems
+        this.loadedItems = state.User.flagcollsLoadedItems[this.openedCollid]
       }
     })