folders beta 1

config/sync/block.block.views_block__my_flag_list_items_block_1.yml

@@ -0,0 +1,35 @@
+uuid: b3a7a1d3-79a0-4874-abdd-4a49c48d0f5d
+langcode: en
+status: false
+dependencies:
+  config:
+    - views.view.my_flag_list_items
+  module:
+    - context
+    - views
+  theme:
+    - materiotheme
+id: views_block__my_flag_list_items_block_1
+theme: materiotheme
+region: content_left
+weight: 0
+provider: null
+plugin: 'views_block:my_flag_list_items-block_1'
+settings:
+  id: 'views_block:my_flag_list_items-block_1'
+  label: ''
+  provider: views
+  label_display: visible
+  views_label: ''
+  items_per_page: none
+visibility:
+  view_inclusion:
+    id: view_inclusion
+    negate: null
+    view_inclusion: {  }
+    context_mapping: {  }
+  request_path_exclusion:
+    id: request_path_exclusion
+    pages: ''
+    negate: null
+    context_mapping: {  }

config/sync/image.style.card_medium_half.yml

@@ -3,13 +3,13 @@ langcode: en
 status: true
 dependencies: {  }
 name: card_medium_half
-label: 'card-medium-half (205x100)'
+label: 'minicard (170x100)'
 effects:
   34e936a0-1fee-4327-9553-b4f48bde14e6:
     uuid: 34e936a0-1fee-4327-9553-b4f48bde14e6
     id: image_scale_and_crop
     weight: 1
     data:
-      width: 205
+      width: 170
       height: 100
       anchor: center-center

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -102,11 +102,13 @@ main[role="main"]{
       display: flex;
       flex-direction: row-reverse;
       #content-left{
-        flex-basis: $column_width+$column_goutiere;
+        flex-basis: $column_width;
         flex-shrink: 0;
         // width:$column_width*2+$column_goutiere;
         >*{
           width:100%;
+          box-sizing: border-box;
+          padding:0.5em $column_goutiere;
         }
       }
       #content-center{

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -9,3 +9,6 @@ $column_width: 205px;
 $column_goutiere: 13px;
 
 $card_height: 295px;
+
+$minicard_width: 170px;
+$minicard_height: 100px;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -164,11 +164,12 @@ header[role="banner"]{
       right:0;
       top:1.7em;
       box-sizing: content-box;
+      z-index: 30;
     }
     &:hover{
       ul{
         transition-delay: 0s;
-        max-height:12em;
+        max-height:50em;
         padding:1em 1em;
         box-shadow: 0 0 10px #ccc;
       }
@@ -415,6 +416,7 @@ aside.messages{
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      padding-bottom: $column_goutiere;
       h3{
         // flex-basis: calc(100% - 1em);
       }
@@ -430,8 +432,9 @@ aside.messages{
         margin:0 0 $column_goutiere 0;
         padding:0;
         article.card.minicard{
-          width:100%;
-
+          width:$minicard_width;
+          height:$minicard_height;
+          margin:auto;
           >header{
             padding: 0.3em 0.3em 0.1em;
             h1{
@@ -439,7 +442,13 @@ aside.messages{
             }
           }
           >nav.tools{
+            top: auto;
+            bottom: 0;
             padding:0 0.2em;
+            background:transparent;
+            .mdi.unflag{
+              cursor: pointer;
+            }
           }
         }
       }
@@ -752,7 +761,8 @@ article.card{
     top: 0;
     right: 0;
     z-index: 21;
-    width: 1em;
+    $toolbar_width: 15px;
+    width: $toolbar_width;
     background-color: #fff;
     box-sizing: content-box;
     padding: 0.3em 0.1em;
@@ -767,14 +777,36 @@ article.card{
         position: absolute;
         top: 0px;
         right: 100%;
-        width: 5em;
-        box-sizing: content-box;
+        // width: 5em;
+        width: $column_width - $toolbar_width - 10px;
+        box-sizing: border-box;
         padding: 0.3em;
         background-color: #fff;
         box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
+        opacity: 0;
+        max-height: 0; max-width:0;
+        overflow: hidden;
+        transition: all 0.2s ease-in-out;
+      }
+      &:hover{
+        .tool-content{
+          transition: all 0.3s ease-in-out;
+          opacity: 1;
+          max-height: 195px;
+          max-width:200px;
+        }
       }
     }
     .tool.flags{
+      .tool-content{
+        ul{
+          display: flex;
+          flex-flow: row wrap;
+          li{
+            padding:0 0.5em 0 0;
+          }
+        }
+      }
       span.flag{
         cursor: pointer;
         font-size: 0.756em;
@@ -785,6 +817,13 @@ article.card{
         }
       }
     }
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+  &:hover{
+    nav.tools{
+      opacity:1;
+    }
   }
   section.images{
     position: relative;

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()
-            })
-          })
-          .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()
+              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 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 }) {