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