creating folders from ui

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 => {