flagging unflagging cards

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

@@ -5,6 +5,27 @@
       <h4>{{ item.field_short_description }}</h4>
       <span class="ref">{{ item.field_reference }}</span>
     </header>
+    <nav class="tools">
+      <section class="tool flags">
+        <span class="btn mdi mdi-folder-outline"/>
+        <div class="tool-content">
+          <ul>
+            <li  v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
+              <span
+                class="flag mdi"
+                :class="[
+                  flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close isActive' : 'mdi-plus'
+                ]"
+                :collid="coll.id"
+                @click.prevent="onFlagActionCard"
+              >
+                {{ coll.name }}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </nav>
     <section class="images" v-switcher>
       <figure
         v-for="(img, index) in item.images"
@@ -23,15 +44,22 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: "Card",
   props: ['item'],
   data() {
     return {
-      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
+      loadingFlag: false
     }
   },
+  computed: {
+    ...mapState({
+      flagcolls: state => state.User.flagcolls
+    })
+  },
   directives: {
     lazy: {
       bind(img,binding){
@@ -79,6 +107,45 @@ export default {
         img.classList.remove('lazy')
       })
     }, {once : true})
+  },
+  methods: {
+    ...mapActions({
+      flag: 'User/flag',
+      unFlag: 'User/unFlag'
+    }),
+    flagIsActive(collid) {
+      // console.log(this.item.uuid);
+      // console.log(this.flagcolls[collid].items_uuids);
+      return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+    },
+    flagIsLoading(collid) {
+      // console.log(this.item.uuid);
+      // console.log(this.flagcolls[collid].items_uuids);
+      return collid === this.loadingFlag;
+    },
+    onFlagActionCard (e) {
+      console.log("Card onFlagActionCard", isActive, e);
+      if (!this.loadingFlag) {
+        let collid = e.target.getAttribute('collid');
+        let isActive = this.flagIsActive(collid);
+        // console.log('collid', collid);
+        // console.log("this.item", this.item);
+        this.loadingFlag = collid;
+        if (isActive) {
+          this.unFlag({uuid: this.item.uuid, collid: collid})
+          .then(data => {
+            console.log("onFlagActionCard then", data);
+            this.loadingFlag = false;
+          })
+        }else{
+          this.flag({uuid: this.item.uuid, collid: collid})
+          .then(data => {
+            console.log("onFlagActionCard then", data);
+            this.loadingFlag = false;
+          })
+        }    
+      }
+    }
   }
 }
 

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

@@ -4,14 +4,14 @@
       class="mdi mdi-folder-outline"
     >My folders</h2>
     <ul>
-      <li  v-if="flags" v-for="flag in flags" :key="flag.id">
-        <h5>{{ flag.name }}</h5>
+      <li  v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
+        <h5>{{ coll.name }} ({{ coll.items.length }})</h5>
         <div class="actions">
           <span
             class="delete-btn mdi"
             :class="flagDeletingClassObj"
-            :flagid="flag.id"
-            @click.prevent="onDeleteFlag"
+            :flagcollid="coll.id"
+            @click.prevent="onDeleteFlagColl"
           />
         </div>
       </li>
@@ -23,7 +23,7 @@
         <span
           class="add-btn mdi"
           :class="addFlagBtnClassObj"
-          @click.prevent="onCreateFlag"
+          @click.prevent="onCreateFlagColl"
         />
       </li>
     </ul>
@@ -43,7 +43,7 @@ export default {
   }),
   computed: {
     ...mapState({
-      flags: state => state.User.flags
+      flagcolls: state => state.User.flagcolls
     }),
     addFlagBtnClassObj() {
       return {
@@ -63,26 +63,26 @@ export default {
   },
   methods: {
     ...mapActions({
-      createFlag: 'User/createFlag',
-      deleteFlag: 'User/deleteFlag'
+      createFlagColl: 'User/createFlagColl',
+      deleteFlagColl: 'User/deleteFlagColl'
     }),
-    onCreateFlag () {
-      console.log("UserFlags onCreateFlag", this.new_folder_name)
+    onCreateFlagColl () {
+      console.log("UserFlags onCreateFlagColl", this.new_folder_name)
       this.is_creating_folder = true;
-      this.createFlag(this.new_folder_name)
+      this.createFlagColl(this.new_folder_name)
         .then(data => {
-          console.log("onCreateFlag then", data);
+          console.log("onCreateFlagColl then", data);
           this.new_folder_name = "";
           this.is_creating_folder = false;
         })
     },
-    onDeleteFlag (e) {
-      let flagid = e.target.getAttribute('flagid');
-      console.log("UserFlags onDeleteFlag", flagid);
-      this.is_deleting_folder = flagid;
-      this.deleteFlag(flagid)
+    onDeleteFlagColl (e) {
+      let flagcollid = e.target.getAttribute('flagcollid');
+      console.log("UserFlags onDeleteFlagColl", flagcollid);
+      this.is_deleting_folder = flagcollid;
+      this.deleteFlagColl(flagcollid)
         .then(() => {
-          // console.log("onDeleteFlag then", data);
+          // console.log("onDeleteFlagColl then", data);
           this.is_deleting_folder = false;
         })
     }