enabled flag_lists, started flags front ui

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