enabled flag_lists, started flags front ui

web/modules/custom/materio_flag/materio_flag.info.yml

@@ -0,0 +1,7 @@
+name: Materio FLAG
+type: module
+description: Defines api behaviours for flaglist.
+core: 8.x
+package: Materio
+dependencies:
+  - drupal:flag_lists

web/modules/custom/materio_flag/materio_flag.module

@@ -0,0 +1 @@
+<?php

web/modules/custom/materio_flag/materio_flag.permissions.yml

@@ -0,0 +1,9 @@
+materio_jsonapi roles:
+  title: 'view role info'
+  description: 'View any role info in jsonapi.'
+  restrict access: true
+
+materio_jsonapi ownroles:
+  title: 'view own role info'
+  description: 'View own role info in jsonapi.'
+  restrict access: true

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

@@ -0,0 +1,7 @@
+materio_flag.user_flagging_collections:
+  path: 'materio_flag/user_flagging_collections'
+  defaults:
+    _controller: '\Drupal\materio_flag\Controller\MaterioFlagController::getUsersFlaggingCollections'
+    _title: 'User Flagging Colleciton'
+  requirements:
+    _permission: 'access content'

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

@@ -0,0 +1,113 @@
+<?php
+
+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\flag_lists\FlagListsService;
+
+/**
+ * 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.
+   */
+  // 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;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('flaglists'),
+    );
+  }
+
+  /**
+   * Hello.
+   *
+   * @return string
+   *   Return Hello string.
+   */
+  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 = [];
+    foreach ($colls as $id => $collection) {
+      $data[] = array(
+        "id" => $id,
+        "name" => $collection->getName()
+      );
+    }
+
+    return new JsonResponse($data);
+  }
+
+}

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -55,16 +55,18 @@ import 'theme/assets/styles/main.scss'
     function checkNoVuePages(){
       // return drupalDecoupled.sys_path != '/cart'
       // && drupalDecoupled.sys_path.indexOf('checkout') != 1;
-      if( drupalDecoupled.route_name.indexOf('commerce') == -1 ){
-        return true;
-      }else{
+      if( drupalDecoupled.route_name.indexOf('commerce') == -1 &&
+          drupalDecoupled.route_name.indexOf('flagging_collection') == -1 &&
+          drupalDecoupled.route_name.indexOf('user') == -1){
         return false;
+      }else{
+        return true;
       }
     }
 
     function initVues(){
       // only launch views if we are not in commerce pages
-      if(checkNoVuePages()){
+      if(!checkNoVuePages()){
         initVRouter();
         initVSiteBrandingBlock()
         initVPagetitleBlock()

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

@@ -0,0 +1,47 @@
+<template lang="html">
+  <div id="user-flags">
+    <h4
+      class="mdi mdi-folder-outline"
+    >My folders</h4>
+    <ul>
+      <li v-for="flag in flags" :key="flag.id">
+        <h5>{{ flag.name }}</h5>
+      </li>
+      <li ref="create-flag">
+        <h5
+          class="mdi mdi-folder-plus-outline"
+          @click.prevent="onCreateFlag()"
+        >new folder</h5>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "userFlags",
+  data: () => ({
+
+  }),
+  computed: {
+    ...mapState({
+      flags: state => state.User.flags
+    })
+  },
+  methods: {
+    ...mapActions({
+      createFlag: 'User/createFlag'
+    }),
+    onLogout () {
+      console.log("UserFlags onCreateFlag")
+      this.userLogout()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -13,13 +13,19 @@
       class="mdi mdi-logout"
       title="logout"
     ></a>
+    <UserFlags v-if="flags"/>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
+import UserFlags from 'vuejs/components/User/UserFlags'
+
 export default {
+  components: {
+    UserFlags
+  },
   // data () {
   //   return {
   //     mail: "Hello User!"
@@ -28,7 +34,8 @@ export default {
   computed: {
     ...mapState({
       mail: state => state.User.mail,
-      isAdmin: state => state.User.isAdmin
+      isAdmin: state => state.User.isAdmin,
+      flags: state => state.User.flags
     })
   },
   methods: {
@@ -36,7 +43,7 @@ export default {
       userLogout: 'User/userLogout'
     }),
     onLogout () {
-      console.log('UserTools onLogout');
+      console.log("UserTools onLogout")
       this.userLogout()
     }
   }

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

@@ -1,3 +1,4 @@
+import { REST } from 'vuejs/api/rest-axios'
 import { JSONAPI } from 'vuejs/api/json-axios'
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring'

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

@@ -1,15 +1,16 @@
-import { REST } from 'vuejs/api/rest-axios'
-import { JSONAPI } from 'vuejs/api/json-axios'
-import qs from 'querystring'
+import { REST } from "vuejs/api/rest-axios";
+// import { JSONAPI } from 'vuejs/api/json-axios';
+import { MA } from "vuejs/api/ma-axios";
+import qs from "querystring";
 
 export default {
   namespaced: true,
 
   // initial state
-  state : {
-    uid:null,
+  state: {
+    uid: null,
     // username: '',
-    mail:'',
+    mail: "",
     token: null,
     csrftoken: null,
     logout_token: null,
@@ -17,150 +18,185 @@ export default {
     isAdmin: false,
     isAdherent: false,
     canSearch: false,
-    roles: []
+    roles: [],
+    flags: false
   },
 
   // getters
-  getters : {},
+  getters: {},
 
   // mutations
-  mutations : {
-    SetCsrftoken (state, token) {
-      state.csrftoken = token
+  mutations: {
+    SetCsrftoken(state, token) {
+      state.csrftoken = token;
     },
-    setToken (state, data) {
-      state.uid = data.current_user.uid
-      // state.username = data.username
-      state.mail = data.current_user.mail
-      state.token = data.csrf_token
-      state.isloggedin = true
-      state.logout_token = data.logout_token
+    setToken(state, data) {
+      state.uid = data.current_user.uid;
+      // state.username = data.username;
+      state.mail = data.current_user.mail;
+      state.token = data.csrf_token;
+      state.isloggedin = true;
+      state.logout_token = data.logout_token;
     },
-    setUid (state, uid) {
-      state.uid = uid
-      state.isloggedin = true
+    setUid(state, uid) {
+      state.uid = uid;
+      state.isloggedin = true;
     },
-    setUser (state, data) {
-      state.mail = data.mail[0].value
-      state.uuid = data.uuid[0].value
+    setUser(state, data) {
+      state.mail = data.mail[0].value;
+      state.uuid = data.uuid[0].value;
     },
-    setRoles (state, roles) {
+    setRoles(state, roles) {
       console.log("User setRoles", roles);
-      state.roles = []
-      for (var i = 0; i < roles.length; i++) {
-        state.roles.push(roles[i].target_id)
+      state.roles = [];
+      for (let i = 0; i < roles.length; i++) {
+        state.roles.push(roles[i].target_id);
       }
       // check if admin
-      if(state.roles.indexOf('admin') != -1 || state.roles.indexOf('root') != -1){
+      if (
+        state.roles.indexOf("admin") !== -1 ||
+        state.roles.indexOf("root") !== -1
+      ) {
         // console.log('is admin');
-        state.isAdmin = true
+        state.isAdmin = true;
       }
       // check if has access to search
-      if(state.roles.indexOf('adherent') != -1){
+      if (state.roles.indexOf("adherent") !== -1) {
         // console.log('is admin');
-        state.canSearch = true
-        state.isAdherent = true
+        state.canSearch = true;
+        state.isAdherent = true;
       }
     },
-    setLoggedOut (state) {
+    setLoggedOut(state) {
       console.log("setLoggedOut state", state);
-      state.uid= null
-      state.mail = ''
-      state.token = null
-      state.isloggedin = false
-      state.logout_token = null
-      if (state.isAdmin){
+      state.uid = null;
+      state.mail = "";
+      state.token = null;
+      state.isloggedin = false;
+      state.logout_token = null;
+      if (state.isAdmin) {
         // TODO: what if on a page where login is needed (as commerce checkout and cart)
         window.location.reload(true);
       }
-      state.asAdmin = false
-      state.canSearch = false
+      state.asAdmin = false;
+      state.canSearch = false;
+    },
+    setFlags(state, flags) {
+      console.log("User setFlags", flags);
+      state.flags = flags;
     }
   },
 
   // actions
-  actions : {
-    userRegister({ dispatch, commit, state }, credentials){
+  actions: {
+    userRegister({ dispatch, commit, state }, credentials) {
       return new Promise((resolve, reject) => {
-        REST.get('/session/token')
-          .then(({token}) => {
-            commit('SetCsrftoken', token)
-            REST.post('/user/register?_format=json',
-              credentials,
-              {'X-CSRF-Token':state.csrftoken}
-            )
-              .then(({ data }) => {
-                console.log('user REST registered', data);
-                dispatch('userLogin', credentials)
-                  .then(() => {
-                    resolve()
-                  })
-              })
-              .catch(( error ) => {
-                console.warn('Issue with register', error)
-                Promise.reject(error)
-              })
-
+        REST.get("/session/token").then(({ token }) => {
+          commit("SetCsrftoken", token);
+          REST.post("/user/register?_format=json", credentials, {
+            "X-CSRF-Token": state.csrftoken
           })
-      })
-    },
-    userLogin({ dispatch, commit, state }, credentials){
-      return new Promise((resolve, reject) => {
-        dispatch('getToken', credentials)
-          .then(() => {
-            dispatch('getUser').then((userdata) => {
-              console.log('User Loggedin');
-              if (state.isAdmin){
-                window.location.reload(true);
-              }
-              resolve()
+            .then(({ data }) => {
+              console.log("user REST registered", data);
+              dispatch("userLogin", credentials).then(() => {
+                resolve();
+              });
             })
-          })
-      })
+            .catch(error => {
+              console.warn("Issue with register", error);
+              Promise.reject(error);
+            });
+        });
+      });
     },
-    getToken ({ dispatch, commit, state }, credentials) {
-      return REST.post('/user/login?_format=json', credentials)
+    userLogin({ dispatch, commit, state }, credentials) {
+      return new Promise((resolve, reject) => {
+        dispatch("getToken", credentials).then(() => {
+          dispatch("getUser").then(userdata => {
+            console.log("User Loggedin");
+            if (state.isAdmin) {
+              window.location.reload(true);
+            }
+            resolve();
+          });
+        });
+      });
+    },
+    getToken({ dispatch, commit, state }, credentials) {
+      return REST.post("/user/login?_format=json", credentials)
         .then(({ data }) => {
-          console.log('user REST getToken data', data)
-          commit('setToken', data)
-        })
-        .catch(( error ) => {
-          console.warn('Issue with getToken', error)
-          Promise.reject(error)
+          console.log("user REST getToken data", data);
+          commit("setToken", data);
         })
+        .catch(error => {
+          console.warn("Issue with getToken", error);
+          Promise.reject(error);
+        });
     },
-    getUser ({ dispatch, commit, state }) {
-      let params = {
+    getUser({ dispatch, commit, state }) {
+      const params = {
         token: state.token
-      }
+      };
       return REST.get(`/user/${state.uid}?_format=json`, params)
         .then(({ data }) => {
-          console.log('user REST getUser data', data)
-          console.log('roles', data['roles'])
-          commit('setUser', data)
-          if(data.roles){
-            commit('setRoles', data.roles)
+          console.log("user REST getUser data", data);
+          console.log("roles", data.roles);
+          commit("setUser", data);
+          if (data.roles) {
+            commit("setRoles", data.roles);
           }
+          dispatch("getUserFlags");
         })
-        .catch(( error ) => {
-            console.warn('Issue with getUser', error)
-            Promise.reject(error)
-        })
+        .catch(error => {
+          console.warn("Issue with getUser", error);
+          Promise.reject(error);
+        });
     },
-    userLogout ({ commit, state }) {
-      let credentials = qs.stringify({
+    getUserFlags({ dispatch, commit, state }) {
+      // flags
+      // REST.get('/flagging_collection/1?_format=json')
+      //   .then(( data ) => {
+      //     console.log('TEST FLAG REST data', data)
+      //   })
+      //   .catch(error => {
+      //       console.warn('Issue USER TEST FLAG REST', error)
+      //       Promise.reject(error)
+      //   })
+      return MA.get("materio_flag/user_flagging_collections")
+        .then(({ data }) => {
+          console.log("user MA getFlags data", data);
+          commit("setFlags", data);
+        })
+        .catch(error => {
+          console.warn("Issue USER MA getFlags", error);
+          Promise.reject(error);
+        });
+    },
+    createFlag({ dispatch, commit, state }) {
+      // https://drupal.stackexchange.com/questions/248539/cant-get-flagging-api-to-accept-post-request
+      return REST.post("/entity/flagging_collection?_format=json")
+        .then(({ data }) => {
+          console.log("user REST createFlag data", data);
+          // commit("setFlags", data);
+        })
+        .catch(error => {
+          console.warn("Issue USER MA createFlag", error);
+          Promise.reject(error);
+        });
+    },
+    userLogout({ commit, state }) {
+      const credentials = qs.stringify({
         token: state.token
-      })
-      REST.post('/user/logout', credentials)
-        .then((resp) => {
-          console.log('userLogout resp', resp)
-          commit('setLoggedOut')
-        })
-        .catch(( error ) => {
-            console.warn('Issue with logout', error)
-            Promise.reject(error)
+      });
+      REST.post("/user/logout", credentials)
+        .then(resp => {
+          console.log("userLogout resp", resp);
+          commit("setLoggedOut");
         })
+        .catch(error => {
+          console.warn("Issue with logout", error);
+          Promise.reject(error);
+        });
     }
   }
-
-}
+};