drafted materio_sapi search block vue integration

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/Block/UserBlock.vue

@@ -0,0 +1,29 @@
+<template lang="html">
+  <UserTools v-if="isloggedin" />
+  <Login v-bind:title="title" v-bind:form="form" v-else />
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+import Login from 'vuejs/components/User/Login'
+import UserTools from 'vuejs/components/User/UserTools'
+
+export default {
+  props: ['title', 'form'],
+  computed: {
+    ...mapState({
+      isloggedin: state => state.User.isloggedin
+    })
+  },
+  components: {
+    Login,
+    UserTools
+  }
+}
+
+</script>
+
+<style lang="css" scoped>
+
+</style>