bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored user blocks using ajax loaded drupal's html as template for vue

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-05-31 23:05:37 +02:00
parent a48b7262eb
commit d21bd5ef4e
22 changed files with 492 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

41
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@@ -30,45 +30,27 @@ import 'theme/assets/styles/main.scss'
}
function initVues(){
initUserVBlock()
initVUserBlock()
initVMainContent()
initVSearchBlock()
}
function initUserVBlock(){
let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
function initVUserBlock(){
let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
let props = {
title: "",
form:""
loginblock:""
};
switch (mount_point) {
case '#block-userlogin':
// let $form = document.getElementById('user-login-form');
// console.log('login form html', $form);
// props.form = $form.outerHTML
let $block = document.querySelector(mount_point);
props = {
title: $block.querySelector('h2').textContent,
form: {
ph_email: $block.querySelector('input#edit-name').getAttribute('placeholder'),
ph_pass: $block.querySelector('input#edit-pass').getAttribute('placeholder'),
btn_value: $block.querySelector('input#edit-submit').getAttribute('value'),
register: {
title: $block.querySelector('a.create-account-link').textContent,
href: $block.querySelector('a.create-account-link').getAttribute('href')
},
reset: {
title: $block.querySelector('a.request-password-link').textContent,
href: $block.querySelector('a.request-password-link').getAttribute('href')
}
}
}
case 'block-userlogin':
let $block = document.getElementById(mount_point);
console.log('initVUserBlock login form html', $block);
props.loginblock = $block.outerHTML.trim()
break;
case '#block-userblock':
case 'block-userblock':
default:
break;
}
// console.log(props);
_v_user_block = new Vue({
store,
@@ -78,14 +60,15 @@ import 'theme/assets/styles/main.scss'
// })
// },
created () {
// if already loggedin, call store.user to get the user infos
if(drupalSettings.user.uid !== 0){
this.$store.commit('User/setUid', drupalSettings.user.uid)
this.$store.dispatch('User/getUser')
}
},
render: h => h(VUserBlock, {props:props})
}).$mount(mount_point)
// console.log('initUserVBlock', _v_user_block);
}).$mount('#'+mount_point)
// console.log('initVUserBlock', _v_user_block);
}
function initVMainContent(){

45
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -52,7 +52,7 @@ header[role="banner"]{
&>section{
background-color: #fff;
overflow: hidden;
width:14em;
width:11em;
height:1px;
padding:0.01em 1em;
// margin:0 0 0 -1em;
@@ -63,6 +63,7 @@ header[role="banner"]{
position: absolute;
right:0;
top:1.7em;
box-sizing: content-box;
}
&:hover{
&>section{
@@ -72,6 +73,48 @@ header[role="banner"]{
box-shadow: 0 0 10px #ccc;
}
}
.form-item{
margin:0;
position: relative;
width:100%;
&.form-item-name{
margin:2px 0 0.5em 0;
input{
width:90%;
padding:0;
box-sizing: content-box;
}
}
&.form-item-pass{
margin:0 0 0.5em 0;
input{
width:90%;
padding:0;
box-sizing: content-box;
}
}
&.form-item-persistent-login{
font-size: 0.756em;
label{
vertical-align: top;
}
}
}
#edit-actions{
margin:0;
}
.item-list{
ul{
margin:0;
li{
list-style: none;
margin:0;
a{
font-size: 0.756em;
}
}
}
}
}
#block-languageswitcher{

4
web/themes/custom/materiotheme/vuejs/api/msapi-axios.js → web/themes/custom/materiotheme/vuejs/api/ma-axios.js
View File

@@ -4,8 +4,8 @@ import axios from 'axios'
// console.log('drupalSettings', drupalSettings);
export const MSAPI = axios.create({
baseURL: window.location.origin + '/' + drupalSettings.path.pathPrefix + `materio_sapi`,
export const MA = axios.create({
baseURL: window.location.origin + '/' + drupalSettings.path.pathPrefix,
withCredentials: true,
headers: {
"Content-Type": "application/json"

84
web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue Normal file
View File

@@ -0,0 +1,84 @@
<script>
import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
export default {
props: ['title', 'block'],
data () {
return {
template: null,
mail: '',
password: ''
}
},
computed: {
...mapState(['User'])
},
methods: {
...mapActions({
userLogin: 'User/userLogin'
}),
login () {
this.userLogin({
mail: this.mail,
pass: this.password
})
},
request_password () {
console.log('request_password');
},
create_account () {
console.log('create_account');
}
},
beforeMount() {
console.log('LoginBlock beforeMount', this._props.block);
if(this._props.block){
// console.log('LoginBlock beforeMount if this._props.block ok');
this.template = Vue.compile(this._props.block)
this.$options.staticRenderFns = [];
this._staticTrees = [];
this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
}
},
mounted(){
// console.log('LoginBlock mounted');
Drupal.attachBehaviors(this.$el);
},
render(h) {
// console.log('LoginBlock render');
if(!this.template){
// console.log('LoginBlock render NAN');
return h('span', 'Loading ...')
}else{
// console.log('LoginBlock render template');
return this.template.render.call(this)
}
}
}
</script>
<style lang="scss" scoped>
// section{
// max-width:300px;
// }
// input{
// display:block;
// max-width:100%;
// margin:0.5em 0 0 0;
// }
// button{
// margin:0.5em 0 0 0;
// }
// ul{
// margin:0; padding:0.5em 0 0 0;
// }
// li{
// list-style:none;
// margin:0.5em 0 0 0; padding:0;
// font-size:0.882em;
// }
// a{
// }
</style>

12
web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue
View File

@@ -9,7 +9,7 @@
<script>
import SearchForm from 'vuejs/components/Form/SearchForm'
import { mapState, mapActions } from 'vuex'
import { MSAPI } from 'vuejs/api/msapi-axios'
import { MA } from 'vuejs/api/ma-axios'
export default {
props: ['blockid', 'formhtml'],
@@ -23,17 +23,17 @@ export default {
canSearch: state => state.User.canSearch
}),
displayform(){
console.log('computed displayform');
// console.log('computed displayform');
return this.canSearch && this.form
}
},
beforeMount() {
console.log('SearchBlock 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);
// console.log('canSearch changed, old: '+old_value+", new: "+new_value);
if(new_value && !this.form){
this.getSearchForm()
}
@@ -44,9 +44,9 @@ export default {
},
methods: {
getSearchForm(){
MSAPI.get(`/search_form`)
MA.get(`/materio_sapi/search_form`)
.then(({data}) => {
console.log("getSearchForm");
// console.log("getSearchForm");
this.form = data.rendered
})
.catch(( error ) => {

36
web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue
View File

@@ -1,23 +1,51 @@
<template lang="html">
<UserTools v-if="isloggedin" />
<Login v-bind:title="title" v-bind:form="form" v-else />
<LoginBlock v-bind:title="title" v-bind:block="block" v-else/>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import Login from 'vuejs/components/User/Login'
import LoginBlock from 'vuejs/components/Block/LoginBlock'
import UserTools from 'vuejs/components/User/UserTools'
import { MA } from 'vuejs/api/ma-axios'
export default {
props: ['title', 'form'],
props: ['title', 'loginblock'],
data(){
return {
block: null
}
},
computed: {
...mapState({
isloggedin: state => state.User.isloggedin
})
},
beforeMount() {
console.log('UserBlock beforeMount');
if(this.loginblock){
this.block = this.loginblock
}else{
this.getLoginBlock()
}
},
methods: {
getLoginBlock(){
MA.get(`/materio_user/login_block`)
.then(({data}) => {
// console.log("getLoginBlock data", data);
this.block = data.rendered
})
.catch(( error ) => {
console.warn('Issue with getLoginBlock', error)
})
}
},
components: {
Login,
LoginBlock,
UserTools
}
}

0
web/themes/custom/materiotheme/vuejs/components/User/Login.vue → web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.back.vue
View File

62
web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
View File

@@ -1,16 +1,15 @@
<script>
import Vue from 'vue'
import { MSAPI } from 'vuejs/api/msapi-axios'
export default {
props: ['form'],
data() {
return {
template: null,
typed: ""
}
},
props: ['form'],
methods: {
keyup() {
console.log("search typed", this.typed);
@@ -20,66 +19,29 @@ export default {
}
},
beforeMount() {
console.log('SearchForm 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
// console.log('SearchForm beforeMount if this._props.form ok');
this.template = Vue.compile(this._props.form)
// https://github.com/vuejs/vue/issues/9911
this.$options.staticRenderFns = [];
this._staticTrees = [];
this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
}
},
mounted(){
console.log('SearchForm mounted');
// Drupal.attachBehaviors(this.$el);
},
updated(){
console.log('SearchForm updated');
// Drupal.attachBehaviors(this.$el);
// console.log('SearchForm mounted');
Drupal.attachBehaviors(this.$el);
},
render(h) {
console.log('searchForm render');
// console.log('searchForm render');
if(!this.template){
return h('span', 'Loading ...')
}else{
return this.template()
return this.template.render.call(this)
}
}
}
// 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>