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

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1973,6 +1973,25 @@ article.card {
       transition: color 0.3s ease-in-out; }
       article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive {
         color: #1a1a1a; }
+    article.card nav.tools .tool.flags li.create-flag {
+      margin-top: 0.2em;
+      padding: 0; }
+      article.card nav.tools .tool.flags li.create-flag input {
+        align-self: flex-end;
+        border: 1px solid #bbb;
+        border-radius: 5px;
+        width: calc(100% - 2em);
+        font-size: 0.8em; }
+      article.card nav.tools .tool.flags li.create-flag span.add-btn {
+        align-self: flex-end;
+        color: #bbb;
+        font-size: 1em;
+        transition: all 0.2s ease-in-out; }
+        article.card nav.tools .tool.flags li.create-flag span.add-btn.active {
+          cursor: pointer;
+          color: #1a1a1a; }
+        article.card nav.tools .tool.flags li.create-flag span.add-btn.loading:before {
+          animation: rotating 2s linear infinite; }
   article.card:hover nav.tools {
     opacity: 1; }
   article.card section.images {

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1119,6 +1119,31 @@ article.card{
           color:#1a1a1a;
         }
       }
+      li.create-flag{
+        margin-top: 0.2em;
+        padding:0;
+        input{
+          align-self: flex-end;
+          border: 1px solid #bbb;
+          border-radius:5px;
+          width: calc(100% - 2em);
+          font-size:0.8em;
+        }
+        span.add-btn{
+          align-self: flex-end;
+          color: #bbb;
+          font-size: 1em;
+          // padding: 0 0 0 .5em;
+          transition: all 0.2s ease-in-out;
+          &.active{
+            cursor: pointer;
+            color:#1a1a1a;
+          }
+          &.loading:before{
+            animation: rotating 2s linear infinite;
+          }
+        }
+      }
     }
     opacity: 0;
     transition: opacity 0.2s ease-in-out;

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)
               })
             }
           })