enabled flag_lists, started flags front ui

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

@@ -0,0 +1,47 @@
+<template lang="html">
+  <div id="user-flags">
+    <h4
+      class="mdi mdi-folder-outline"
+    >My folders</h4>
+    <ul>
+      <li v-for="flag in flags" :key="flag.id">
+        <h5>{{ flag.name }}</h5>
+      </li>
+      <li ref="create-flag">
+        <h5
+          class="mdi mdi-folder-plus-outline"
+          @click.prevent="onCreateFlag()"
+        >new folder</h5>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "userFlags",
+  data: () => ({
+
+  }),
+  computed: {
+    ...mapState({
+      flags: state => state.User.flags
+    })
+  },
+  methods: {
+    ...mapActions({
+      createFlag: 'User/createFlag'
+    }),
+    onLogout () {
+      console.log("UserFlags onCreateFlag")
+      this.userLogout()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -13,13 +13,19 @@
       class="mdi mdi-logout"
       title="logout"
     ></a>
+    <UserFlags v-if="flags"/>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
+import UserFlags from 'vuejs/components/User/UserFlags'
+
 export default {
+  components: {
+    UserFlags
+  },
   // data () {
   //   return {
   //     mail: "Hello User!"
@@ -28,7 +34,8 @@ export default {
   computed: {
     ...mapState({
       mail: state => state.User.mail,
-      isAdmin: state => state.User.isAdmin
+      isAdmin: state => state.User.isAdmin,
+      flags: state => state.User.flags
     })
   },
   methods: {
@@ -36,7 +43,7 @@ export default {
       userLogout: 'User/userLogout'
     }),
     onLogout () {
-      console.log('UserTools onLogout');
+      console.log("UserTools onLogout")
       this.userLogout()
     }
   }