deleting flaglist_collection from ui

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

@@ -6,6 +6,11 @@
     <ul>
       <li  v-if="flags" v-for="flag in flags" :key="flag.id">
         <h5>{{ flag.name }}</h5>
+        <span
+          class="mdi mdi-trash-can-outline"
+          :flagid="flag.id"
+          @click.prevent="onDeleteFlag"
+        />
       </li>
       <li ref="create-flag">
         <span class="mdi mdi-folder-plus-outline"/>
@@ -16,7 +21,7 @@
         <span
           class="mdi mdi-plus-box"
           v-if="new_folder_name"
-          @click.prevent="onCreateFlag()"
+          @click.prevent="onCreateFlag"
         />
       </li>
     </ul>
@@ -39,14 +44,25 @@ export default {
   },
   methods: {
     ...mapActions({
-      createFlag: 'User/createFlag'
+      createFlag: 'User/createFlag',
+      deleteFlag: 'User/deleteFlag'
     }),
     onCreateFlag () {
       console.log("UserFlags onCreateFlag", this.new_folder_name)
-      this.createFlag(this.new_folder_name);
-        // .then(({ data }) => {
-        //   console.log("UserFlag new folder", data.status);
-        // })
+      this.createFlag(this.new_folder_name)
+        .then(data => {
+          console.log("onCreateFlag then", data);
+          this.new_folder_name = "";
+        })
+    },
+    onDeleteFlag (e) {
+      let flagid = e.target.getAttribute('flagid');
+      console.log("UserFlags onDeleteFlag", flagid);
+      this.deleteFlag(flagid)
+        .then(data => {
+          console.log("onDeleteFlag then", data);
+          this.new_folder_name = "";
+        })
     }
   }
 }
@@ -54,13 +70,24 @@ export default {
 
 <style lang="scss" scoped>
   li{
+    width:100%;
     // cursor: pointer;
-    // h5{
-    // }
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    flex-wrap: nowrap;
+    h5{
+      // flex-grow:10;
+      width:100%;
+    }
     input{
       border: none
     }
-    span.mdi-plus-box{
+    span.mdi{
+      flex-basis:1em;
+    }
+    span.mdi-plus-box,
+    span.mdi-trash-can-outline{
       cursor: pointer;
     }
   }

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

@@ -172,9 +172,9 @@ export default {
           Promise.reject(error);
         });
     },
+    // https://drupal.stackexchange.com/questions/248539/cant-get-flagging-api-to-accept-post-request
     createFlag({ dispatch, commit, state }, new_flag_name) {
       console.log("user createFlag", new_flag_name);
-      // https://drupal.stackexchange.com/questions/248539/cant-get-flagging-api-to-accept-post-request
       const params = {
         name: new_flag_name
       };
@@ -184,7 +184,21 @@ export default {
           if (data.status) {
             dispatch('getUserFlags');
           }
-          // commit("setFlags", data);
+        })
+        .catch(error => {
+          console.warn("Issue USER MA createFlag", error);
+          Promise.reject(error);
+        });
+    },
+    deleteFlag({ dispatch, commit, state }, flagid) {
+      console.log("user deleteFlag", flagid);
+      const params = {
+        flagid: flagid
+      };
+      return MA.post("materio_flag/delete_user_flagging_collection", params)
+        .then(({ data }) => {
+          console.log("user MA deleteFlag data", data);
+          dispatch('getUserFlags');
         })
         .catch(error => {
           console.warn("Issue USER MA createFlag", error);