flagging unflagging cards

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