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]
       }
     })
 

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

@@ -2,7 +2,7 @@
   <div id="user-flags">
     <h2
       class="mdi mdi-folder-outline"
-    >My folders</h2>
+    >My folders ({{collsLength}})</h2>
     <ul>
       <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
         <h5
@@ -18,10 +18,11 @@
           />
         </div>
       </li>
-      <li class="create-flag">
+      <li v-if="collsLength<15" class="create-flag">
         <input
           placeholder="new folder"
           v-model="new_folder_name"
+          @keyup.enter.prevent.stop="onCreateFlagColl"
         />
         <span
           class="add-btn mdi"
@@ -48,6 +49,9 @@ export default {
     ...mapState({
       flagcolls: state => state.User.flagcolls
     }),
+    collsLength() {
+      return Object.keys(this.flagcolls).length
+    },
     addFlagBtnClassObj() {
       return {
         'mdi-plus-circle-outline': !this.is_creating_folder,