folders beta 1

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -14,7 +14,7 @@
               <span
                 class="flag mdi"
                 :class="[
-                  flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close isActive' : 'mdi-plus'
+                  flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
                 ]"
                 :collid="coll.id"
                 @click.prevent="onFlagActionCard"
@@ -64,8 +64,7 @@ export default {
   },
   methods: {
     ...mapActions({
-      flag: 'User/flag',
-      unFlag: 'User/unFlag'
+      flagUnflag: 'User/flagUnflag'
     }),
     flagIsActive(collid) {
       // console.log(this.item.uuid);
@@ -82,22 +81,15 @@ export default {
       if (!this.loadingFlag) {
         let collid = e.target.getAttribute('collid');
         let isActive = this.flagIsActive(collid);
+        let action = isActive ? 'unflag' : 'flag';
         // console.log('collid', collid);
         // console.log("this.item", this.item);
         this.loadingFlag = collid;
-        if (isActive) {
-          this.unFlag({uuid: this.item.uuid, collid: collid})
-          .then(data => {
-            console.log("onFlagActionCard then", data);
-            this.loadingFlag = false;
-          })
-        }else{
-          this.flag({uuid: this.item.uuid, collid: collid})
-          .then(data => {
-            console.log("onFlagActionCard then", data);
-            this.loadingFlag = false;
-          })
-        }
+        this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
+        .then(data => {
+          console.log("onFlagActionCard then", data);
+          this.loadingFlag = false;
+        })
       }
     }
   }

web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue

@@ -6,7 +6,13 @@
     </header>
     <nav class="tools">
       <section class="tool flags">
-        <span class="mdi mdi-folder-remove-outline"/>
+        <span
+          class="mdi unflag"
+          :class="[
+            itemIsLoading() ? 'mdi-loading mdi-spin' : 'mdi-folder-remove'
+          ]"
+          @click.prevent="onUnFlagCard"
+        />
       </section>
     </nav>
     <section class="images" v-switcher>
@@ -32,57 +38,38 @@ import cardMixins from 'vuejs/components/cardMixins'
 
 export default {
   name: "MiniCard",
-  props: ['item'],
+  props: ['item', 'collid'],
   mixins: [cardMixins],
   data() {
     return {
       blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
-      // loadingFlag: false
+      loadingItem: false
     }
   },
   computed: {
-    // ...mapState({
-    //   flagcolls: state => state.User.flagcolls
-    // })
   },
   methods: {
-    // ...mapActions({
-    //   flag: 'User/flag',
-    //   unFlag: 'User/unFlag'
-    // }),
-    // flagIsActive(collid) {
-    //   // console.log(this.item.uuid);
-    //   // console.log(this.flagcolls[collid].items_uuids);
-    //   return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
-    // },
-    // flagIsLoading(collid) {
-    //   // console.log(this.item.uuid);
-    //   // console.log(this.flagcolls[collid].items_uuids);
-    //   return collid === this.loadingFlag;
-    // },
-    // onFlagActionCard (e) {
-    //   console.log("Card onFlagActionCard", e);
-    //   if (!this.loadingFlag) {
-    //     let collid = e.target.getAttribute('collid');
-    //     let isActive = this.flagIsActive(collid);
-    //     // console.log('collid', collid);
-    //     // console.log("this.item", this.item);
-    //     this.loadingFlag = collid;
-    //     if (isActive) {
-    //       this.unFlag({uuid: this.item.uuid, collid: collid})
-    //       .then(data => {
-    //         console.log("onFlagActionCard then", data);
-    //         this.loadingFlag = false;
-    //       })
-    //     }else{
-    //       this.flag({uuid: this.item.uuid, collid: collid})
-    //       .then(data => {
-    //         console.log("onFlagActionCard then", data);
-    //         this.loadingFlag = false;
-    //       })
-    //     }
-    //   }
-    // }
+    ...mapActions({
+      flagUnflag: 'User/flagUnflag'
+    }),
+    itemIsLoading(id) {
+      return this.loadingItem
+    },
+    onUnFlagCard (e) {
+      console.log("Card onFlagActionCard", e);
+      if (!this.loadingItem) {
+        this.loadingItem = true;
+        this.flagUnflag({
+          action: 'unflag',
+          uuid: this.item.uuid,
+          collid: this.collid
+        })
+        .then(data => {
+          console.log("onUnFlagCard then", data);
+          this.loadingItem = false;
+        })
+      }
+    }
   }
 }
 

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,