creating folders from ui

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

@@ -4,14 +4,20 @@
       class="mdi mdi-folder-outline"
     >My folders</h4>
     <ul>
-      <li v-for="flag in flags" :key="flag.id">
+      <li  v-if="flags" v-for="flag in flags" :key="flag.id">
         <h5>{{ flag.name }}</h5>
       </li>
       <li ref="create-flag">
-        <h5
-          class="mdi mdi-folder-plus-outline"
+        <span class="mdi mdi-folder-plus-outline"/>
+        <input
+          placeholder="new folder"
+          v-model="new_folder_name"
+        />
+        <span
+          class="mdi mdi-plus-box"
+          v-if="new_folder_name"
           @click.prevent="onCreateFlag()"
-        >new folder</h5>
+        />
       </li>
     </ul>
   </div>
@@ -24,7 +30,7 @@ import { mapState, mapActions } from 'vuex'
 export default {
   name: "userFlags",
   data: () => ({
-
+    new_folder_name: ""
   }),
   computed: {
     ...mapState({
@@ -35,13 +41,27 @@ export default {
     ...mapActions({
       createFlag: 'User/createFlag'
     }),
-    onLogout () {
-      console.log("UserFlags onCreateFlag")
-      this.userLogout()
+    onCreateFlag () {
+      console.log("UserFlags onCreateFlag", this.new_folder_name)
+      this.createFlag(this.new_folder_name);
+        // .then(({ data }) => {
+        //   console.log("UserFlag new folder", data.status);
+        // })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+  li{
+    // cursor: pointer;
+    // h5{
+    // }
+    input{
+      border: none
+    }
+    span.mdi-plus-box{
+      cursor: pointer;
+    }
+  }
 </style>

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

@@ -13,7 +13,7 @@
       class="mdi mdi-logout"
       title="logout"
     ></a>
-    <UserFlags v-if="flags"/>
+    <UserFlags/>
   </div>
 </template>