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,

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -19,6 +19,7 @@ export default {
     canSearch: false,
     roles: [],
     flagcolls: false,
+    flagcollsLoadedItems: {},
     openedCollid: null
   },
 
@@ -83,8 +84,9 @@ export default {
       state.canSearch = false
     },
     setFlagColls (state, flagcolls) {
-      console.log('User setFlagColls', flagcolls)
+      console.log('User pre setFlagColls', state.flagcolls)
       state.flagcolls = flagcolls
+      // console.log('User post setFlagColls', state.flagcolls)
     },
     openFlagColl (state, collid) {
       state.openedCollid = collid
@@ -96,7 +98,7 @@ export default {
       console.log('setLoadedCollItems', data)
       // if no data, we are just calling the mutation to trigger the component update
       if (data) {
-        state.flagcolls[data.collid].loadedItems = data.items
+        state.flagcollsLoadedItems[data.collid] = data.items
       }
     }
   },
@@ -236,66 +238,65 @@ export default {
           })
       })
     },
-    flag ({ dispatch, commit, state }, args) {
-      console.log('user flag', args.uuid, args.collid)
+    flagUnflag ({ dispatch, commit, state }, { action, uuid, collid }) {
+      console.log('user flagUnflag', action, uuid, collid)
       return new Promise((resolve, reject) => {
         const params = {
-          flagid: state.flagcolls[args.collid].flag_id,
-          uuid: args.uuid,
-          flagcollid: args.collid
+          flagid: state.flagcolls[collid].flag_id,
+          uuid: uuid,
+          flagcollid: collid
         }
-        return MA.post('materio_flag/flag', params)
+        return MA.post(`materio_flag/${action}`, params)
           .then(({ data }) => {
             console.log('user MA flag', data)
+            // reload the fulllist of flagcolleciton
             dispatch('getUserFlagColls').then(() => {
-              resolve()
+              if (state.flagcolls[collid].items_uuids.length) {
+                dispatch('loadMaterials', {
+                  uuids: state.flagcolls[collid].items_uuids,
+                  imgStyle: 'card_medium_half',
+                  callBack: 'loadMaterialsCallBack',
+                  callBackArgs: { collid: collid }
+                }).then( () => {
+                  resolve()
+                })
+              }else{
+                commit('setLoadedCollItems', { collid: collid, items: [] })
+                resolve()
+              }
             })
           })
           .catch(error => {
-            console.warn('Issue USER MA flag', error)
-          })
-      })
-    },
-    unFlag ({ dispatch, commit, state }, args) {
-      console.log('user unFlag', args.uuid, args.collid)
-      return new Promise((resolve, reject) => {
-        const params = {
-          flagid: state.flagcolls[args.collid].flag_id,
-          uuid: args.uuid,
-          flagcollid: args.collid
-        }
-        return MA.post('materio_flag/unflag', params)
-          .then(({ data }) => {
-            console.log('user MA unFlag', data)
-            dispatch('getUserFlagColls').then(() => {
-              resolve()
-            })
-          })
-          .catch(error => {
-            console.warn('Issue USER MA unFlag', error)
+            console.warn('Issue USER MA flagUnflag', error)
           })
       })
     },
     openFlagColl ({ commit, dispatch, state }, collid) {
       console.log('user openFlagColl', collid)
       commit('openFlagColl', collid)
-      if (typeof state.flagcolls[collid].loadedItems === 'undefined') {
-        // if no loadedItems, load them
-        // loadMaterials is on mixins
-        // https://github.com/huybuidac/vuex-extensions
-        dispatch('loadMaterials', {
-          uuids: state.flagcolls[collid].items_uuids,
-          imgStyle: 'card_medium_half',
-          callBack: 'loadMaterialsCallBack',
-          callBackArgs: { collid: collid }
-        })
-      } else {
-        // call the mutation without data to only trigger the FlagCollection component update
-        commit('setLoadedCollItems')
+      if (state.flagcolls[collid].items_uuids.length) {
+        if (typeof state.flagcollsLoadedItems[collid] === 'undefined') {
+          console.log('loading flagcoll items')
+          // if no loadedItems, load them
+          // loadMaterials is on mixins
+          // https://github.com/huybuidac/vuex-extensions
+          dispatch('loadMaterials', {
+            uuids: state.flagcolls[collid].items_uuids,
+            imgStyle: 'card_medium_half',
+            callBack: 'loadMaterialsCallBack',
+            callBackArgs: { collid: collid }
+          })
+        } else {
+          // call the mutation without data to only trigger the FlagCollection component update
+          console.log('committing setLoadedCollItems without args')
+          commit('setLoadedCollItems')
+        }
+      }else{
+        commit('setLoadedCollItems', { collid: collid, items: [] })
       }
     },
     loadMaterialsCallBack ({ commit }, { items, callBackArgs }) {
-      console.log('user loadMaterialsCallBack', items)
+      console.log('user loadMaterialsCallBack', items, callBackArgs)
       commit('setLoadedCollItems', { collid: callBackArgs.collid, items: items })
     },
     closeFlagColl ({ commit, dispatch }) {