creating folders from ui

config/sync/flag.flag.dossier.yml

@@ -1,32 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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.flag.test_dossier.yml

@@ -1,33 +0,0 @@
-uuid: null
-langcode: en
-status: true
-dependencies:
-  module:
-    - flag_lists
-    - node
-id: test_dossier
-label: 'test 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: ajax_link
-flagTypeConfig:
-  show_in_links: {  }
-  show_as_field: true
-  show_on_form: false
-  show_contextual_link: false
-  extra_permissions:
-    owner: owner
-linkTypeConfig: {  }

config/sync/flag_lists.flag_for_list.dossier.yml

@@ -1,9 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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'

config/sync/system.action.flag_action.dossier_flag.yml

@@ -1,15 +0,0 @@
-uuid: 19f6415c-55ae-4d43-9804-3b6c9725eb29
-langcode: en
-status: true
-dependencies:
-  config:
-    - flag.flag.dossier
-  module:
-    - flag
-id: flag_action.dossier_flag
-label: 'Flag this item'
-type: node
-plugin: 'flag_action:dossier_flag'
-configuration:
-  flag_id: dossier
-  flag_action: flag

config/sync/system.action.flag_action.dossier_unflag.yml

@@ -1,15 +0,0 @@
-uuid: ee3693e6-2a01-4850-a464-099930242d42
-langcode: en
-status: true
-dependencies:
-  config:
-    - flag.flag.dossier
-  module:
-    - flag
-id: flag_action.dossier_unflag
-label: 'Unflag this item'
-type: node
-plugin: 'flag_action:dossier_unflag'
-configuration:
-  flag_id: dossier
-  flag_action: unflag

config/sync/system.action.flag_action.flag_list_template_1_flag.yml

@@ -1,17 +0,0 @@
-uuid: b883b2b8-2955-4df1-987b-10a5e1488fd2
-langcode: en
-status: true
-dependencies:
-  config:
-    - flag.flag.flag_list_template_1
-  module:
-    - flag
-_core:
-  default_config_hash: LkE1QB2Y0oqjrb33mVsdE0cSy6E9wujJklHGqH91GvE
-id: flag_action.flag_list_template_1_flag
-label: 'Add this item to a list'
-type: node
-plugin: 'flag_action:flag_list_template_1_flag'
-configuration:
-  flag_id: flag_list_template_1
-  flag_action: flag

config/sync/system.action.flag_action.flag_list_template_1_unflag.yml

@@ -1,17 +0,0 @@
-uuid: 657ee4d7-61e7-4466-b6d5-37270056d4ef
-langcode: en
-status: true
-dependencies:
-  config:
-    - flag.flag.flag_list_template_1
-  module:
-    - flag
-_core:
-  default_config_hash: dkSOtOrwdYQJVIAi2LOYl8XRZCqSIIIb0Hb9J-2NNug
-id: flag_action.flag_list_template_1_unflag
-label: 'Remove this item from the list'
-type: node
-plugin: 'flag_action:flag_list_template_1_unflag'
-configuration:
-  flag_id: flag_list_template_1
-  flag_action: unflag

config/sync/system.action.flag_action.test_dossier_flag.yml

@@ -1,15 +0,0 @@
-uuid: dbe3c645-f4b1-416c-b9b2-43bf919eb593
-langcode: en
-status: true
-dependencies:
-  config:
-    - flag.flag.test_dossier
-  module:
-    - flag
-id: flag_action.test_dossier_flag
-label: 'Flag this item'
-type: node
-plugin: 'flag_action:test_dossier_flag'
-configuration:
-  flag_id: test_dossier
-  flag_action: flag

config/sync/system.action.flag_action.test_dossier_unflag.yml

@@ -1,15 +0,0 @@
-uuid: c4aa7c16-1473-471b-81b0-3a862238bda7
-langcode: en
-status: true
-dependencies:
-  config:
-    - flag.flag.test_dossier
-  module:
-    - flag
-id: flag_action.test_dossier_unflag
-label: 'Unflag this item'
-type: node
-plugin: 'flag_action:test_dossier_unflag'
-configuration:
-  flag_id: test_dossier
-  flag_action: unflag

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

@@ -5,3 +5,11 @@ materio_flag.user_flagging_collections:
     _title: 'User Flagging Colleciton'
   requirements:
     _permission: 'access content'
+
+materio_flag.create_user_flagging_collection:
+  path: 'materio_flag/create_user_flagging_collection'
+  defaults:
+    _controller: '\Drupal\materio_flag\Controller\MaterioFlagController::createUserFlaggingCollection'
+    _title: 'Create User Flagging Collection'
+  requirements:
+    _permission: 'access content'

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

@@ -4,66 +4,27 @@ namespace Drupal\materio_flag\Controller;
 
 use Drupal\Core\Controller\ControllerBase;
 use Symfony\Component\DependencyInjection\ContainerInterface;
-// use Drupal\Core\Entity\EntityManagerInterface;
-// use Drupal\language\ConfigurableLanguageManagerInterface;
-// use Drupal\Core\Render\RendererInterface;
-// use Drupal\Core\Entity\EntityTypeManagerInterface;
-// use Drupal\Core\Cache\CacheableJsonResponse;
-// use Drupal\Core\Cache\CacheableMetadata;
-use Symfony\Component\HttpFoundation\JsonResponse;
-// use Drupal\Core\Url;
-// use Drupal\core\render\RenderContext;
+use Drupal\Core\Session\AccountProxy;
+use Drupal\Core\Session\AccountProxyInterface;
 use Drupal\flag_lists\FlagListsService;
-
+use Drupal\flag_lists\Entity\FlaggingCollection;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\JsonResponse;
 /**
  * Class AjaxHomeController.
  */
 class MaterioFlagController extends ControllerBase {
 
-  /**
-   * Drupal\Core\Entity\EntityManagerInterface definition.
-   *
-   * @var \Drupal\Core\Entity\EntityManagerInterface
-   */
-  // protected $entityManager;
-  /**
-   * Drupal\language\ConfigurableLanguageManagerInterface definition.
-   *
-   * @var \Drupal\language\ConfigurableLanguageManagerInterface
-   */
-  // protected $languageManager;
-  /**
-   * Drupal\Core\Render\RendererInterface definition.
-   *
-   * @var \Drupal\Core\Render\RendererInterface
-   */
-  // protected $renderer;
-  /**
-   * Drupal\Core\Render\RendererInterface definition.
-   *
-   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
-   */
-  // protected $entityTypeManager;
 
   /**
-   * Drupal\Core\Render\RendererInterface definition.
-   *
    * @var \Drupal\flag_lists\FlagListsService
    */
   protected $flaglists;
 
   /**
-   * Constructs a new AjaxHomeController object.
+   * @var \Drupal\user\User
    */
-  // public function __construct(EntityManagerInterface $entity_manager, ConfigurableLanguageManagerInterface $language_manager, RendererInterface $renderer, EntityTypeManagerInterface $entity_type_manager) {
-  //   $this->entityManager = $entity_manager;
-  //   $this->languageManager = $language_manager;
-  //   $this->renderer = $renderer;
-  //   $this->entityTypeManager = $entity_type_manager;
-  // }
-  public function __construct(FlagListsService $flag_lists_service ) {
-   $this->flaglists = $flag_lists_service;
-  }
+  protected $user;
 
   /**
    * {@inheritdoc}
@@ -71,9 +32,18 @@ class MaterioFlagController extends ControllerBase {
   public static function create(ContainerInterface $container) {
     return new static(
       $container->get('flaglists'),
+      $container->get('current_user')
     );
   }
 
+  /**
+   * Constructs a new MaterioFlagController object.
+   */
+  public function __construct(FlagListsService $flag_lists_service, AccountProxyInterface $account) {
+   $this->flaglists = $flag_lists_service;
+   $this->user = $account;
+  }
+
   /**
    * Hello.
    *
@@ -82,21 +52,6 @@ class MaterioFlagController extends ControllerBase {
    */
   public function getUsersFlaggingCollections() {
 
-    // $data['data'] = ['test', 'hello'];
-
-    // $data['data'] = $this->flaglists->getUsersFlaggingCollections();
-
-    // $data['#cache'] = [
-    //   // 'max-age' => \Drupal\Core\Cache\Cache::PERMANENT,
-    //   'tags' => ['materio-flag-cache'],
-    //   // 'contexts' => [
-    //   //   'languages:language_content'
-    //   // ]
-    // ];
-    // $response = new CacheableJsonResponse($data);
-    // $response->addCacheableDependency(CacheableMetadata::createFromRenderArray($data));
-    // return $response;
-
     $colls = $this->flaglists->getUsersFlaggingCollections();
 
     $data = [];
@@ -110,4 +65,28 @@ class MaterioFlagController extends ControllerBase {
     return new JsonResponse($data);
   }
 
+  public function createUserFlaggingCollection(Request $request) {
+    // dpm($request);
+    $post_data = json_decode( $request->getContent(),TRUE);
+    $name = $post_data['name'];
+
+    $newFlagColl = FlaggingCollection::Create([
+      'type' => 'flagging_collection_type',
+      'name' => $name,
+      'user_id' => $this->user->id(),
+      'templateflag' => 'dossier'
+    ]);
+
+    $newFlagColl->save();
+
+    $data = [
+      'status' => $newFlagColl->get('status')->value,
+      'id' => $newFlagColl->id(),
+      'name' => $newFlagColl->getName(),
+      'newflagcoll_toarray' => $newFlagColl->toArray()
+    ];
+    return new JsonResponse($data);
+  }
+
+
 }

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

@@ -61,6 +61,13 @@ fieldset[data-v-340aa566] {
 }
 
 
+li input[data-v-0e1971fa] {
+  border: none;
+}
+li span.mdi-plus-box[data-v-0e1971fa] {
+  cursor: pointer;
+}
+
 
 #user-tools[data-v-4e9a834e]{
   margin-right:0.5em;

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

@@ -4,14 +4,20 @@
       class="mdi mdi-folder-outline"
     >My folders</h4>
     <ul>
-      <li v-for="flag in flags" :key="flag.id">
+      <li  v-if="flags" v-for="flag in flags" :key="flag.id">
         <h5>{{ flag.name }}</h5>
       </li>
       <li ref="create-flag">
-        <h5
-          class="mdi mdi-folder-plus-outline"
+        <span class="mdi mdi-folder-plus-outline"/>
+        <input
+          placeholder="new folder"
+          v-model="new_folder_name"
+        />
+        <span
+          class="mdi mdi-plus-box"
+          v-if="new_folder_name"
           @click.prevent="onCreateFlag()"
-        >new folder</h5>
+        />
       </li>
     </ul>
   </div>
@@ -24,7 +30,7 @@ import { mapState, mapActions } from 'vuex'
 export default {
   name: "userFlags",
   data: () => ({
-
+    new_folder_name: ""
   }),
   computed: {
     ...mapState({
@@ -35,13 +41,27 @@ export default {
     ...mapActions({
       createFlag: 'User/createFlag'
     }),
-    onLogout () {
-      console.log("UserFlags onCreateFlag")
-      this.userLogout()
+    onCreateFlag () {
+      console.log("UserFlags onCreateFlag", this.new_folder_name)
+      this.createFlag(this.new_folder_name);
+        // .then(({ data }) => {
+        //   console.log("UserFlag new folder", data.status);
+        // })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+  li{
+    // cursor: pointer;
+    // h5{
+    // }
+    input{
+      border: none
+    }
+    span.mdi-plus-box{
+      cursor: pointer;
+    }
+  }
 </style>

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

@@ -13,7 +13,7 @@
       class="mdi mdi-logout"
       title="logout"
     ></a>
-    <UserFlags v-if="flags"/>
+    <UserFlags/>
   </div>
 </template>
 

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

@@ -172,11 +172,18 @@ export default {
           Promise.reject(error);
         });
     },
-    createFlag({ dispatch, commit, state }) {
+    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
-      return REST.post("/entity/flagging_collection?_format=json")
+      const params = {
+        name: new_flag_name
+      };
+      return MA.post("materio_flag/create_user_flagging_collection", params)
         .then(({ data }) => {
-          console.log("user REST createFlag data", data);
+          console.log("user MA createFlag data", data);
+          if (data.status) {
+            dispatch('getUserFlags');
+          }
           // commit("setFlags", data);
         })
         .catch(error => {