drafted materio_sapi search block vue integration

This commit is contained in:
2019-05-31 15:01:54 +02:00
parent ea2fd59c63
commit a48b7262eb
29 changed files with 758 additions and 195 deletions

View File

@@ -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>

View File

@@ -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>

View File

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