php - Nested blade layouts, section names overlapping

So, my application has an area in which you can manage 'defects', and another area where you can manage 'assets'. An asset can have multiple defects. When you select a defect it shows the asset and I am wanting to be able to click the asset and have a dialog open up with the same view that you get when you click an asset on the assets page using blade templating.

I have successfully achieved this but I have had to use a hack after hours of trying to fix it using pure blade.

I have a few layouts, the first is a layout for a page with a sidenav, the sidenav is used to show the list of entities and I then have a layout for an entity that has a toolbar and an area for the entity to be viewed.

This is my sidenav page layout:

<div layout="column" flex ng-controller="{!! $ngController !!}" axs-on-show>
    <div layout="row" flex>
        @yield('sidebar')
        @yield('content')
    </div>
    @yield('dialogs')
</div>
Copy code

This is my entity page layout:

@php
    $sectionPrefix = isset($sectionPrefix) ? $sectionPrefix : '';
@endphp
<div layout="column" flex @if(isset($ngController))ng-controller="{!! $ngController !!}"@endif axs-on-show>
    <div flex layout="column" layout-align="center center" ng-if="!{!! $entity !!}">
        <md-progress-circular md-mode="indeterminate" ng-if="{!! $entity !!} === undefined">.   </md-progress-circular>
    <div layout="column" layout-align="center center" ng-if="{!! $entity !!} === null">
        <span>Error Loading {{ $entityName }}</span>
        <md-button ng-click="{!! $refresh !!}">
            <md-icon>refresh</md-icon>
        </md-button>
    </div>
</div>
<div flex layout="column" ng-if="{!! $entity !!}">
    @yield($sectionPrefix.'toolbar')
    @yield($sectionPrefix.'entity')
</div>


@yield($sectionPrefix.'dialogs')
Copy code

You can ignore the @sectionPrefix stuff, this is the hack that I have used to get this to work. The reasoning for the 'dialogs' section is that my dialogs must exist within the AngularJS controller to control them, incase you were wondering.

So, given these 2 layouts. I have constructed the blade for the defects view like so:

the enclosing manage defects blade with a sidenav list

@extends('layouts.pages.sidebar_layout.layout', ['ngController' => 'manageDefectsController'])

@section('sidebar')
    @include('_partials.maintenance.defects.manage_defects.layout._sidebar')
@overwrite

@section('content')
    <div ng-if="isScreenSize('md,lg')" flex layout="column" layout-align="center center" ng-show="!defectDataService.defectId">
        <span>Select a defect to view more details</span>
    </div>
    <div flex layout="column" ng-show="defectDataService.defectId">
        @include('_partials.maintenance.defects.defect.defect')
    </div>
@overwrite
Copy code

The entity view for a single defect once selected, this is the content of the above include (_partials.maintenance.defects.defect.defect)

@extends('layouts.pages.entity_layout.layout',
        [
            'ngController' => 'defectController',
            'entity' => 'defectDataService.defect',
            'entityName' => 'Defect',
            'refresh' => 'defectDataService.refreshDefect'
        ])

@section('toolbar')
    @include('_partials.maintenance.defects.defect.layout._toolbar')
@overwrite

@section('entity')
    <div layout="column" layout-gt-md="row" flex>
        // html view of an asset is here with a button to open up the dialog with the asset view sectioned out below:
    </div>
@overwrite

@section('dialogs')
    <div style="visibility: hidden;" layout="column">
        @include('_partials.maintenance.assets.asset.asset', ['sectionPrefix' => 'from-defect'])
    </div>
@overwrite
Copy code

If you've gotten this far and you're still interested, my issue is that without this $sectionPrefix workaround, the sections are screwed and messing eachother up. Basically _partials.maintenance.assets.asset.asset has a 'dialogs' section too and is then overwriting the ones above it meaning the actual dialog that should be being opened is never in the DOM. It's very confusing I know and I'm struggling to actually put into words all the different behaviour that I've observed.

I am using @overwrite because this was a suggestion i found online previously, @endsection doesn't work because then any sub sections called 'dialogs' are never used/rendered.

Feel free to downvote for being such a convoluted question, it is, but has anyone had any experience with blade i.e. nesting the same layout multiple times and how have you handled the issues presented with the section names? @overwrite apparently fixes this but in my case this was just overwriting everything from the deepest level up to the top level, making it just as destructive and useless. Thanks!

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.