updating header menu while loggin (show base link)

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-08 21:11:14 +01:00
parent b7459cf014
commit d1e54b72b3
5 changed files with 206 additions and 22 deletions

View File

@ -5,3 +5,11 @@ materio_decoupled.path_translation_links:
_title: 'Path translation links' _title: 'Path translation links'
requirements: requirements:
_permission: 'access content' _permission: 'access content'
materio_decoupled.header_menu_block:
path: 'materio_decoupled/ajax/getheadermenu'
defaults:
_controller: '\Drupal\materio_decoupled\Controller\AjaxHeaderMenuBlock::getBlock'
_title: 'Header Menu'
requirements:
_permission: 'access content'

View File

@ -0,0 +1,54 @@
<?php
namespace Drupal\materio_decoupled\Controller;
use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\Request;
use Drupal\block\Entity\Block;
use Symfony\Component\HttpFoundation\JsonResponse;
// use Drupal\Core\Cache\CacheableJsonResponse;
// use Drupal\Core\Cache\CacheableMetadata;
// use Drupal\core\render\RenderContext;
/**
* Defines a route controller.
*/
class AjaxHeaderMenuBlock extends ControllerBase {
private function getBlockDefinition(){
// $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
// \Drupal::logger('materio_user')->notice($language);
$this->bid = "header";
$this->block = Block::load($this->bid);
$this->block_builded = \Drupal::entityManager()->getViewBuilder('block')->view($this->block);
}
/**
* Handler for getBlock request.
*/
public function getBlock(Request $request) {
$this->getBlockDefinition();
$rendered = \Drupal::service('renderer')->renderRoot($this->block_builded);
$data = [
'rendered' => $rendered,
// '#cache' => [
// 'max-age' => \Drupal\Core\Cache\Cache::PERMANENT,
// 'tags' => [
// 'materio_sapi-search_form-cache',
// ]
// ]
];
$response = new JsonResponse();
$response->setData($data);
// $response = new CacheableJsonResponse($data);
// $response->addCacheableDependency(CacheableMetadata::createFromRenderArray($data));
return $response;
}
}

File diff suppressed because one or more lines are too long

View File

@ -38,6 +38,7 @@ import VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent' import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock' import VSearchBlock from 'vuejs/components/Block/SearchBlock'
import VLeftContent from 'vuejs/components/Content/LeftContent' import VLeftContent from 'vuejs/components/Content/LeftContent'
import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
import { mapState } from 'vuex' import { mapState } from 'vuex'
@ -287,30 +288,16 @@ import { MA } from 'vuejs/api/ma-axios'
function initVHeaderMenu () { function initVHeaderMenu () {
// console.log('initVHeaderMenu'); // console.log('initVHeaderMenu');
// adding vuejs attributes has it wont work on twig template (see menu--header.html.twig) const id = 'block-header'
// not working : String contains an invalid character const $html_obj = document.querySelector('#' + id)
// document.querySelectorAll(`#block-header a`).forEach(link => { // console.log('main-content', $main_content);
// console.log(link); const html = $html_obj.outerHTML
// link.setAttribute('@click.prevent', 'onclick')
// });
_v_header_menu = new Vue({ _v_header_menu = new Vue({
store, store,
i18n, i18n,
router, router,
el: '#block-header', render: h => h(VHeaderMenu, { props: { id: id, dom_html: html } })
methods: { }).$mount('#' + id)
onclick (event) {
// console.log("Clicked on header menu link", event);
const href = event.target.getAttribute('href')
// let title = event.target.innerText;
// console.log("Clicked on header menu link : href", href);
this.$router.push(href)
// replaced by router.beforeEach
// this.$store.commit('Common/setPagetitle', title)
}
}
})
} }
function initVMainContent () { function initVMainContent () {

View File

@ -0,0 +1,79 @@
<script>
import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
import { MA } from 'vuejs/api/ma-axios'
import router from 'vuejs/route'
export default {
router,
props:['id','dom_html'],
data() {
return {
html: null,
template: null
}
},
computed: {
...mapState({
isloggedin: state => state.User.isloggedin
})
},
beforeMount() {
// console.log("beforeMount header_menu", this.html);
if(!this.template){
// console.log('no home_template');
if(this.dom_html){ // if html prop is available
this.html = this.dom_html
this.compileTemplate()
}else{ // else get it from ajax
this.getMenuBlockHtml()
}
}
},
methods: {
compileTemplate(){
this.template = Vue.compile(this.html)
},
getMenuBlockHtml(){
MA.get('materio_decoupled/ajax/getheadermenu')
.then(({data}) => {
// console.log('HeaderMenu getMenuBlockHtml data', data);
this.html = data.rendered // record the html src into data
})
.catch(( error ) => {
console.warn('Issue with getMenuBlockHtml', error)
})
},
onclick (event) {
// console.log("Clicked on header menu link", event);
const href = event.target.getAttribute('href')
this.$router.push(href)
}
},
render(h) {
// console.log('headerMenu render');
if(!this.template){
return h('span', 'Loading ...')
}else{
return this.template.render.call(this)
}
},
watch: {
html(n, o) {
console.log('header_menu html changed', o, n)
this.compileTemplate()
},
isloggedin(n, o) {
console.log("HeaderMenu isloggedin changed", o, n)
this.getMenuBlockHtml()
}
}
}
</script>
<style lang="scss" scoped>
</style>