strated to displaying falgcollection on the left of results

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

@@ -0,0 +1,60 @@
+<template>
+  <section class="flag-collection">
+    <h3>{{collection.name}}</h3>
+    <ul v-if="loadedItems">
+      <li
+        v-for="item in loadedItems"
+        :key="item.id"
+      >{{item.attributes.title}}</li>
+    </ul>
+    <span v-else class="loading">Loading</span>
+  </section>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "FlagCollection",
+  props: ['collection'],
+  data: () => ({
+    loadedItems: false
+  }),
+  computed: {
+    ...mapState({
+      flagcolls: state => state.User.flagcolls
+      // openedCollid: state => state.User.openedCollid
+    })
+  },
+  // watch: {
+  //   flagcolls (newv, oldv) {
+  //     console.log('watching flagcolls');
+  //     if( typeof this.flagcolls[this.collection.id].loadedItems !== 'undefined' ) {
+  //       this.loadedItems = this.flagcolls[this.collection.id].loadedItems
+  //     }
+  //   }
+  // },
+  created() {
+    this.unsubscribe = this.$store.subscribe((mutation, state) => {
+      if (mutation.type === 'User/setLoadedCollItems') {
+        this.loadedItems = state.User.flagcolls[this.collection.id].loadedItems
+      }
+    });
+  },
+  beforeDestroy() {
+    this.unsubscribe()
+  },
+  // beforeMount () {
+  //   if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
+  //     this.
+  //   }
+  // },
+  // methods: {
+  //   ...mapActions({
+  //     loadFlagCollItems: 'User/loadFlagCollItems'
+  //   })
+  // }
+}
+</script>
+<style lang="scss" scoped>
+</style>

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

@@ -4,8 +4,11 @@
       class="mdi mdi-folder-outline"
     >My folders</h2>
     <ul>
-      <li  v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
-        <h5>{{ coll.name }} ({{ coll.items.length }})</h5>
+      <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
+        <h5
+          :flagcollid="coll.id"
+          @click.prevent="onOpenFlagColl"
+        >{{ coll.name }} ({{ coll.items.length }})</h5>
         <div class="actions">
           <span
             class="delete-btn mdi"
@@ -64,7 +67,8 @@ export default {
   methods: {
     ...mapActions({
       createFlagColl: 'User/createFlagColl',
-      deleteFlagColl: 'User/deleteFlagColl'
+      deleteFlagColl: 'User/deleteFlagColl',
+      openFlagColl: 'User/openFlagColl'
     }),
     onCreateFlagColl () {
       console.log("UserFlags onCreateFlagColl", this.new_folder_name)
@@ -77,7 +81,7 @@ export default {
         })
     },
     onDeleteFlagColl (e) {
-      let flagcollid = e.target.getAttribute('flagcollid');
+      const flagcollid = e.target.getAttribute('flagcollid');
       console.log("UserFlags onDeleteFlagColl", flagcollid);
       this.is_deleting_folder = flagcollid;
       this.deleteFlagColl(flagcollid)
@@ -85,6 +89,14 @@ export default {
           // console.log("onDeleteFlagColl then", data);
           this.is_deleting_folder = false;
         })
+    },
+    onOpenFlagColl (e) {
+      const flagcollid = e.target.getAttribute('flagcollid');
+      console.log("UserFlags onDeleteFlagColl", flagcollid);
+      this.openFlagColl(flagcollid)
+        .then(() => {
+          // console.log("onDeleteFlagColl then", data);
+        })
     }
   }
 }