drafted materio_sapi search block vue integration

web/themes/custom/materiotheme/vuejs/api/msapi-axios.js

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings);
+
+export const MSAPI = axios.create({
+  baseURL: window.location.origin + '/' + drupalSettings.path.pathPrefix + `materio_sapi`,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json"
+  }
+})

web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue

@@ -0,0 +1,65 @@
+<template v-slot="default">
+  <div v-bind:id="blockid">
+    <SearchForm
+      v-if="displayform"
+      v-bind:form="form"></SearchForm>
+  </div>
+</template>
+
+<script>
+import SearchForm from 'vuejs/components/Form/SearchForm'
+import { mapState, mapActions } from 'vuex'
+import { MSAPI } from 'vuejs/api/msapi-axios'
+
+export default {
+  props: ['blockid', 'formhtml'],
+  data(){
+    return {
+      form: null
+    }
+  },
+  computed: {
+    ...mapState({
+      canSearch: state => state.User.canSearch
+    }),
+    displayform(){
+      console.log('computed displayform');
+      return this.canSearch && this.form
+    }
+  },
+  beforeMount() {
+    console.log('SearchBlock beforeMount');
+    this.form = this.formhtml
+  },
+  watch: {
+    canSearch(new_value, old_value) {
+      console.log('canSearch changed, old: '+old_value+", new: "+new_value);
+      if(new_value && !this.form){
+        this.getSearchForm()
+      }
+      if(!new_value && this.form){
+        this.form = null
+      }
+    }
+  },
+  methods: {
+    getSearchForm(){
+      MSAPI.get(`/search_form`)
+        .then(({data}) => {
+          console.log("getSearchForm");
+          this.form = data.rendered
+        })
+        .catch(( error ) => {
+            console.warn('Issue with get searchform', error)
+        })
+    }
+  },
+  components: {
+    SearchForm
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -0,0 +1,88 @@
+<script>
+
+import Vue from 'vue'
+import { MSAPI } from 'vuejs/api/msapi-axios'
+
+export default {
+  data() {
+    return {
+      template: null,
+      typed: ""
+    }
+  },
+  props: ['form'],
+  methods: {
+    keyup() {
+      console.log("search typed", this.typed);
+    },
+    submit() {
+      console.log("search clicked");
+    }
+  },
+  beforeMount() {
+    console.log('SearchForm beforeMount');
+    if(this._props.form){
+      console.log('SearchForm beforeMount if this._props.form ok');
+      this.template = Vue.compile(this._props.form).render
+    }
+  },
+  beforeUpdate() {
+    console.log('SearchForm beforeUpdate');
+    if(this._props.form){
+      console.log('SearchForm beforeUpdate if this._props.form ok');
+      this.template = Vue.compile(this._props.form).render
+    }
+  },
+  mounted(){
+    console.log('SearchForm mounted');
+    // Drupal.attachBehaviors(this.$el);
+  },
+  updated(){
+    console.log('SearchForm updated');
+    // Drupal.attachBehaviors(this.$el);
+  },
+  render(h) {
+    console.log('searchForm render');
+    if(!this.template){
+      return h('span', 'Loading ...')
+    }else{
+      return this.template()
+    }
+  }
+}
+// searchform: (resolve, reject) => (
+//   MSAPI.get(`/search_form`)
+//     .then(({data}) => {
+//       // console.log("materiosapisearchform", data);
+//       resolve({
+//         data() {
+//           return {
+//             typed:""
+//           }
+//         },
+//         methods: {
+//           keyup() {
+//             console.log("search typed", this.typed);
+//           },
+//           submit() {
+//             console.log("search clicked");
+//           }
+//         },
+//         mounted() {
+//           Drupal.attachBehaviors(this.$el);
+//         },
+//         template: data.rendered
+//       })
+//     })
+//     .catch(( error ) => {
+//         console.warn('Issue with get searchform', error)
+//         Promise.reject(error)
+//     })
+//
+// )
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>

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

@@ -36,6 +36,7 @@ export default {
       userLogout: 'User/userLogout'
     }),
     onLogout () {
+      console.log('UserTools onLogout');
       this.userLogout()
     }
   }

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

@@ -13,7 +13,8 @@ export default {
     token: null,
     logout_token: null,
     isloggedin: false,
-    isAdmin: false
+    isAdmin: false,
+    canSearch: false
   },
 
   // getters
@@ -38,25 +39,35 @@ export default {
       state.uuid = data.uuid[0].value
     },
     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)
       }
-      if(state.roles.indexOf('admin') != -1){
-        console.log('is admin');
+      // check if admin
+      if(state.roles.indexOf('admin') != -1 || state.roles.indexOf('root') != -1){
+        // console.log('is admin');
         state.isAdmin = true
       }
+      // check if has access to search
+      if(state.roles.indexOf('adherent') != -1){
+        // console.log('is admin');
+        state.canSearch = true
+      }
     },
     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){
+
         window.location.reload(true);
       }
       state.asAdmin = false
+      state.canSearch = false
     }
   },
 
@@ -96,34 +107,19 @@ export default {
           if(data.roles){
             commit('setRoles', data.roles)
           }
-          // JSONAPI.get(`/user/user/${state.uuid}?include=roles`)
-          //   .then(({ data }) => {
-          //     console.log('user JSONAPI getUser data', data)
-          //   })
-          //   .catch(( error ) => {
-          //       console.warn('Issue with getUser', error)
-          //       Promise.reject(error)
-          //   })
         })
         .catch(( error ) => {
             console.warn('Issue with getUser', error)
             Promise.reject(error)
         })
     },
-    // checkLoginRole ({ commit, state }){
-    //   console.log('checkLoginRole', state.roles, state.roles.indexOf('admin'))
-    //   if(state.roles.indexOf('admin') != -1){
-    //     console.log('is admin')
-    //     window.
-    //   }
-    // },
     userLogout ({ commit, state }) {
       let credentials = qs.stringify({
         token: state.token
       })
       REST.post('/user/logout', credentials)
         .then((resp) => {
-          console.log('resp', resp)
+          console.log('userLogout resp', resp)
           commit('setLoggedOut')
         })
         .catch(( error ) => {