deleting flaglist_collection from ui

config/sync/flag.flag.dossier.yml

@@ -0,0 +1,32 @@
+uuid: 4183b53b-30db-4b2d-b087-cb903f23fe27
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: dossier
+label: Dossier
+bundles:
+  - article
+  - materiau
+  - thematique
+entity_type: node
+global: false
+weight: 0
+flag_short: 'Flag this item'
+flag_long: ''
+flag_message: ''
+unflag_short: 'Unflag this item'
+unflag_long: ''
+unflag_message: ''
+unflag_denied_text: ''
+flag_type: 'entity:node'
+link_type: reload
+flagTypeConfig:
+  show_in_links: {  }
+  show_as_field: true
+  show_on_form: false
+  show_contextual_link: true
+  extra_permissions:
+    owner: owner
+linkTypeConfig: {  }

config/sync/flag.flag.flag_list_template_1.yml

@@ -0,0 +1,32 @@
+uuid: cc972bc9-a9d6-4715-bde0-b686a22069d2
+langcode: en
+status: true
+dependencies:
+  module:
+    - flag_lists
+    - node
+_core:
+  default_config_hash: gv5HCXt_zANnxz5g4ygaALNMnN5yQzI4jy3A7c8phFc
+id: flag_list_template_1
+label: 'Flag list template 1'
+bundles: {  }
+entity_type: node
+global: false
+weight: 0
+flag_short: 'Add this item to the [flagging_collection:name] list'
+flag_long: 'Add this to your flag list'
+flag_message: 'Added to the flag list'
+unflag_short: 'Remove this item from the [flagging_collection:name] list'
+unflag_long: 'Remove this item from your flag list'
+unflag_message: 'Removed from the flag list'
+unflag_denied_text: ''
+flag_type: 'entity:node'
+link_type: ajax_link
+flagTypeConfig:
+  show_in_links: {  }
+  show_as_field: true
+  show_on_form: false
+  show_contextual_link: false
+  extra_permissions:
+    owner: '0'
+linkTypeConfig: {  }

config/sync/flag_lists.flag_for_list.dossier.yml

@@ -0,0 +1,9 @@
+uuid: null
+langcode: en
+status: true
+dependencies: {  }
+id: dossier
+label: Dossier
+base_flag: dossier
+owner: root
+weight: null

config/sync/flag_lists.flag_for_list.flag_list_template_1.yml

@@ -0,0 +1,11 @@
+uuid: e0111fa4-31c3-483a-918f-aca9c752190f
+langcode: en
+status: true
+dependencies: {  }
+_core:
+  default_config_hash: is37xp2En_K1r0KAxyELb0cyrB6aQH5Ygr7o6tICk24
+id: flag_list_template_1
+label: 'Flag list template 1'
+base_flag: flag_list_template_1
+owner: 'Drupal Master'
+weight: null

config/sync/flag_lists.flagging_collection_type.flagging_collection_type_1.yml

@@ -0,0 +1,8 @@
+uuid: 93164e3c-1d21-4129-bafc-e8956664f1db
+langcode: en
+status: true
+dependencies: {  }
+_core:
+  default_config_hash: FgMUj7Lcs3yxNwSGpVwKZ6N00JNmxn3FndQcd-230hM
+id: flagging_collection_type_1
+label: 'Flagging collection type 1'

web/modules/custom/materio_flag/materio_flag.routing.yml

@@ -12,4 +12,12 @@ materio_flag.create_user_flagging_collection:
     _controller: '\Drupal\materio_flag\Controller\MaterioFlagController::createUserFlaggingCollection'
     _title: 'Create User Flagging Collection'
   requirements:
-    _permission: 'access content'
+    _permission: 'add flag lists'
+
+materio_flag.delete_user_flagging_collection:
+  path: 'materio_flag/delete_user_flagging_collection'
+  defaults:
+    _controller: '\Drupal\materio_flag\Controller\MaterioFlagController::deleteUserFlaggingCollection'
+    _title: 'Delete User Flagging Collection'
+  requirements:
+    _permission: 'edit own flag lists'

web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php

@@ -88,5 +88,19 @@ class MaterioFlagController extends ControllerBase {
     return new JsonResponse($data);
   }
 
+  public function deleteUserFlaggingCollection(Request $request) {
+    // dpm($request);
+    $post_data = json_decode( $request->getContent(),TRUE);
+    $flagid = $post_data['flagid'];
+
+    $flagcoll = $this->flaglists->getFlaggingCollectionById($flagid);
+    $result = $flagcoll->delete();
+
+    $data = [
+      'result' => $result,
+      'id' => $flagid
+    ];
+    return new JsonResponse($data);
+  }
 
 }

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

@@ -61,11 +61,25 @@ fieldset[data-v-340aa566] {
 }
 
 
+li[data-v-0e1971fa] {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+li h5[data-v-0e1971fa] {
+    width: 100%;
+}
 li input[data-v-0e1971fa] {
-  border: none;
+    border: none;
+}
+li span.mdi[data-v-0e1971fa] {
+    flex-basis: 1em;
 }
-li span.mdi-plus-box[data-v-0e1971fa] {
-  cursor: pointer;
+li span.mdi-plus-box[data-v-0e1971fa],
+  li span.mdi-trash-can-outline[data-v-0e1971fa] {
+    cursor: pointer;
 }
 
 

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