big refactoring, opening flagcollection (folder) on the left of main-content

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

@@ -1,11 +1,20 @@
 <template>
   <section class="flag-collection">
-    <h3>{{collection.name}}</h3>
+    <header>
+      <h3 class="mdi mdi-folder-outline">{{collection.name}}</h3>
+      <span
+        class="mdi mdi-close"
+        title="close"
+        @click.prevent="onCloseFlagColl"
+      />
+    </header>
     <ul v-if="loadedItems">
       <li
         v-for="item in loadedItems"
         :key="item.id"
-      >{{item.attributes.title}}</li>
+      >
+        <MiniCard :item="item"/>
+      </li>
     </ul>
     <span v-else class="loading">Loading</span>
   </section>
@@ -13,6 +22,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
+import MiniCard from 'vuejs/components/Content/MiniCard'
 
 export default {
   name: "FlagCollection",
@@ -22,8 +32,8 @@ export default {
   }),
   computed: {
     ...mapState({
-      flagcolls: state => state.User.flagcolls
-      // openedCollid: state => state.User.openedCollid
+      flagcolls: state => state.User.flagcolls,
+      openedCollid: state => state.User.openedCollid
     })
   },
   // watch: {
@@ -35,11 +45,22 @@ export default {
   //   }
   // },
   created() {
+    if (typeof this.collection.loadedItems !== '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.unsubscribe = this.$store.subscribe((mutation, state) => {
       if (mutation.type === 'User/setLoadedCollItems') {
-        this.loadedItems = state.User.flagcolls[this.collection.id].loadedItems
+        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
       }
-    });
+    })
+
   },
   beforeDestroy() {
     this.unsubscribe()
@@ -49,11 +70,17 @@ export default {
   //     this.
   //   }
   // },
-  // methods: {
-  //   ...mapActions({
-  //     loadFlagCollItems: 'User/loadFlagCollItems'
-  //   })
-  // }
+  methods: {
+    ...mapActions({
+      closeFlagColl: 'User/closeFlagColl'
+    }),
+    onCloseFlagColl(e) {
+      this.closeFlagColl()
+    }
+  },
+  components: {
+    MiniCard
+  }
 }
 </script>
 <style lang="scss" scoped>

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

@@ -26,7 +26,7 @@
         <span
           class="add-btn mdi"
           :class="addFlagBtnClassObj"
-          @click.prevent="onCreateFlagColl"
+          @click.prevent.stop="onCreateFlagColl"
         />
       </li>
     </ul>
@@ -92,7 +92,7 @@ export default {
     },
     onOpenFlagColl (e) {
       const flagcollid = e.target.getAttribute('flagcollid');
-      console.log("UserFlags onDeleteFlagColl", flagcollid);
+      console.log("UserFlags onOpenFlagColl", flagcollid);
       this.openFlagColl(flagcollid)
         .then(() => {
           // console.log("onDeleteFlagColl then", data);