fix #1008, create folder from card and auto flag it

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -24,6 +24,18 @@
               {{ coll.name }}
               </span>
             </li>
+            <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"
+                :class="addFlagBtnClassObj"
+                @click.prevent.stop="onCreateFlagColl"
+              />
+            </li>
           </ul>
         </div>
       </section>
@@ -91,7 +103,9 @@ export default {
   data() {
     return {
       blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
-      loadingFlag: false
+      loadingFlag: false,
+      new_folder_name: "",
+      is_creating_folder: false
       // lightbox_index: null
     }
   },
@@ -99,12 +113,41 @@ export default {
     ...mapState({
       flagcolls: state => state.User.flagcolls,
       isloggedin: state => state.User.isloggedin
-    })
+    }),
+    collsLength() {
+      return Object.keys(this.flagcolls).length
+    },
+    addFlagBtnClassObj() {
+      return {
+        'mdi-plus-circle-outline': !this.is_creating_folder,
+        'mdi-loading': this.is_creating_folder,
+        active: this.new_folder_name.length > 4 && !this.is_creating_folder,
+        loading: this.is_creating_folder
+      }
+    }
   },
   methods: {
     ...mapActions({
+      createFlagColl: 'User/createFlagColl',
       flagUnflag: 'User/flagUnflag'
     }),
+    onCreateFlagColl () {
+      console.log("Card onCreateFlagColl", this.new_folder_name)
+      this.is_creating_folder = true;
+      this.createFlagColl(this.new_folder_name)
+        .then(data => {
+          console.log("Card onCreateFlagColl then", data);
+          this.new_folder_name = "";
+          this.is_creating_folder = false;
+          let collid = data.id
+          this.loadingFlag = collid;
+          this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid})
+          .then(data => {
+            console.log("onFlagActionCard then", data);
+            this.loadingFlag = false;
+          })
+        })
+    },
     flagIsActive(collid) {
       // console.log("Card flagIsActive",
       //   this.item.id,

web/themes/custom/materiotheme/vuejs/components/Content/HeaderMenu.vue

@@ -63,7 +63,7 @@ export default {
   },
   watch: {
     html(n, o) {
-      console.log('header_menu html changed', o, n)
+      // console.log('header_menu html changed', o, n)
       this.compileTemplate()
     },
     isloggedin(n, o) {

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -278,7 +278,7 @@ export default {
             console.log('user MA createFlagColl data', data)
             if (data.status) {
               dispatch('getUserFlagColls').then(() => {
-                resolve()
+                resolve(data)
               })
             }
           })