Blade Components #10844

baghirani · 2022-03-21T09:41:42Z

baghirani
Mar 21, 2022

Hi all,

we are planning to use snipe-it for our group at the university and have some stuff we would like to change.

So I found a student and we both started reading Laravel documentations, starring at the code and trying some things to find out what happens. While doing this we found lots of small errors with phpstorm which clearly came from refactoring lots of repetitions of repeating code. Like opening a header level three and closing it with level 6, and so on.

I then tried to find out what the best way is to structure the code, so that there are less repetitions and read about the blade components which are available since Laravel 7 and now, since the beta-version has changed to version 8, as well in snipe-it.

I then, to understand this feature started to try this feature and came to the following code snippets for the dashboard panel:

resources\views\dashboard.blade.php

<x-dashboard.panel :counts="$counts"></x-dashboard.panel>

resources\views\components\dashboard\panel.blade.php

<div class="row">
    <!-- panel -->
    @foreach ($items as $item)
        <x-dashboard.panel.item type="{{ $item }}" :counts="$counts" ></x-dashboard.panel.item>
    @endforeach
</div>

resources\views\components\dashboard\panel\item.blade.php

@props([
    'color' => [
        'assets' => 'bg-teal',
        'licenses' => 'bg-maroon',
        'accessories' => 'bg-orange',
        'consumables' => 'bg-purple',
        'components' => 'bg-yellow',
        'users' => 'bg-light-blue'
    ],
    'icon' => [
        'assets' => 'fas fa-barcode',
        'licenses' => 'far fa-save',
        'accessories' => 'far fa-keyboard',
        'consumables' => 'fas fa-tint',
        'components' => 'far fa-hdd',
        'users' => 'fas fa-users'
    ],
    'model' => [
        'assets' => '\App\Models\Asset::class',
        'licenses' => '\App\Models\License::class',
        'accessories' => '\App\Models\Accessory::class',
        'consumables' => '\App\Models\Consumable::class',
        'components' => '\App\Models\Component::class',
        'users' => '\App\Models\User::class'
    ]
])

<div class="col-lg-2 col-xs-6">
    <a href="{!! $getRoute() !!}">
        <!-- small box -->
        <div class="small-box {{ $color[$type] }}">
            <div class="inner">
                <h3>{!! $getCount() !!}</h3>
                <p>{!! $getName() !!}</p>
            </div>
            <div class="icon" aria-hidden="true">
                <i class="{{ $icon[$type] }}" aria-hidden="true"></i>
            </div>
            @can('index', $model[$type] )
                <a href="{!! $getRoute() !!}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
            @endcan
        </div>
    </a>
</div>

Together with the two corresponding files in app\View\Components\dashboard\ panel.php and panel\item.php, where I had to add a bit stuff, f.e. the functions getCount() and getRoute() it works really good.
One sentence to our motivation to change the code is to make it easier to add for example a new category without copying stuff just by adding an additional configuration.

So here are my questions:

Is it an option for the community to change the code in this direction? When not, why?
What could be changed to make it even better?

What I don't like currently with our code is, that the configuration of the whole panel is currently separated in multiple files. I am not completely sure if I like this or how it could be changed nicely.

I hope for a nice discussion! Thanks!

snipe · 2022-03-31T10:58:17Z

snipe
Mar 31, 2022
Maintainer

In v6, we will be moving away from Vue, which it looks like this example is using. Unless I’m misunderstanding the ask, I don’t see this as being something we’d use moving forward.

3 replies

uberbrady Mar 31, 2022
Collaborator

I don't think this is Vue; I think it's just the "relatively new" Blade component syntax which I don't think was available to us when Snipe-IT first started.

I think I'd be better able to talk about whether or not I'm okay with the change if I could see what code this change was replacing. If it's a lot of deduplication and we're talking fewer lines of code? I could be okay with it. But it's not me you have to convince, it's @snipe

baghirani Mar 31, 2022
Author

I am not sure If I am getting what you want to tell me. Since I am new to the laravel framework I have only a little idea how it works. Maybe I just haven't learned the right vocabulary.

So the current stable version is based completely on *.blade.php files that are lying in the directory resources\views. Is that meant with "vue"?

Since the beta is now using laravel 8. It is possible to use blade components which have a *.blade.php file in resources\views\components and a corresponding class *.php in app\Views\components.

If you say you are moving away from Vue, what else do you want to do? What will be changed? How ill it look like?

baghirani Mar 31, 2022
Author

I don't think this is Vue; I think it's just the "relatively new" Blade component syntax which I don't think was available to us when Snipe-IT first started.

I think I'd be better able to talk about whether or not I'm okay with the change if I could see what cochade this change was replacing. If it's a lot of deduplication and we're talking fewer lines of code? I could be okay with it. But it's not me you have to convince, it's @snipe

Yes, thank you. it is, or should be, the blade component way. I experimented with it to reduce the code for the dashboard. I found several code where duplications bring the effect that adding just one item or changing all items brings a lot of overhead in work or code.

uberbrady · 2022-03-31T11:19:58Z

uberbrady
Mar 31, 2022
Collaborator

Another thing - and this will be a much, much harder part, after convincing us to take the changes in the first place - is to be able to present these changes in a way that we can actually consume them - one PR with a bajillion file changes is going to be extremely hard for us to merge. If there's any way that we can take the changes in an incremental fashion, that will be much easier for us to take. One thing you might be able to do is publish a 'raw' PR of all of your changes all at once, maybe, and then we can say "okay, give us one PR with just this bit here, and we can take that...but first things first, we need to know that these changes simplify the code enough for us to want it in the first place.

2 replies

baghirani Mar 31, 2022
Author

Sure. the good news with this new approach is that you can change one thing after the other without loosing any of the working functionality of the current code.

But if this is a possible way it would be helpful to talk as well about a folder structure. Because I think there are so much elements needed on the long way , that it might get a little chaotic if they all are stored in the same folder. The blades are currently sorted by the types (asset, component, consumables, people, ...), that they represent. I think this makes no sense when it comes to blade components, because they represent modular html stuff that has not necessarily something to do with the data they represent.
In my example there is some data-dependency and there the question is if it might be useful to have both a representation of the data and a blade component for html. So that if you for example want to create a dashboard panel you just have a list of lets call it view objects (asset, components, ...) and the blade component for the panel and the component can the ask the objects how they want to be displayed or something like that. I am not sure if something like this would work, I am just thinking how this could work.

WollysWolfPack Apr 13, 2022

regarding the quote

one PR with a bajillion file changes is going to be extremely hard for us to merge. If there's any way that we can take the changes in an incremental fashion, that will be much easier for us to take.

i have the following effect using Blade components:

this is the current code for the navbar-tabs in snipeit/ressources/views/hardware/view.blade.php while displaying an Asset:

<li class="active">
     <a href="#details" data-toggle="tab">
          <span class="hidden-lg hidden-md">
               <i class="fas fa-info-circle fa-2x"x></i>
          </span>
          <span class="hidden-xs hidden-sm">{{ trans('admin/users/general.info') }}</span>
     </a>
</li>

<li>
     <a href="#software" data-toggle="tab">
          <span class="hidden-lg hidden-md">
               <i class="far fa-save fa-2x" aria-hidden="true"></i>
          </span>
          <span class="hidden-xs hidden-sm">{{ trans('general.licenses') }}
                {!! ($asset->licenses->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->licenses->count().'</badge>' : '' !!}
          </span>
     </a>
</li>

<li>
     <a href="#components" data-toggle="tab">
          <span class="hidden-lg hidden-md">
              <i class="far fa-hdd fa-2x" aria-hidden="true"></i>
          </span>
          <span class="hidden-xs hidden-sm">{{ trans('general.components') }}
                {!! ($asset->components->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->components->count().'</badge>' : '' !!}
          </span>
     </a>
</li>

<li>
     <a href="#assets" data-toggle="tab">
         <span class="hidden-lg hidden-md">
              <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
          </span>
          <span class="hidden-xs hidden-sm">{{ trans('general.assets') }}
               {!! ($asset->assignedAssets()->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->assignedAssets()->count().'</badge>' : '' !!}
          </span>
     </a>
</li>

<li>
     <a href="#history" data-toggle="tab">
          <span class="hidden-lg hidden-md">
               <i class="fas fa-history fa-2x" aria-hidden="true"></i>
          </span>
          <span class="hidden-xs hidden-sm">{{ trans('general.history') }}
          </span>
     </a>
</li>

<li>
     <a href="#maintenances" data-toggle="tab">
          <span class="hidden-lg hidden-md">
               <i class="fas fa-wrench fa-2x" aria-hidden="true"></i>
          </span>
          <span class="hidden-xs hidden-sm">{{ trans('general.maintenances') }}
               {!! ($asset->assetmaintenances()->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->assetmaintenances()->count().'</badge>' : '' !!}
          </span>
     </a>
</li>

<li>
     <a href="#files" data-toggle="tab">
          <span class="hidden-lg hidden-md">
               <i class="far fa-file fa-2x" aria-hidden="true"></i>
          </span>
          <span class="hidden-xs hidden-sm">{{ trans('general.files') }}
 {!! ($asset->uploads->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->uploads->count().'</badge>' : '' !!}
          </span>
     </a>
</li>

after replaceing the current code while using Blade Components i got the following three parts
First in snipeit/ressources/views/hardware/view.blade.php replacing the old lines:

<x-navbutton class="active" tabname="details" :asset="$asset">
</x-navbutton>

<x-navbutton tabname="software" :asset="$asset">
{!! ($asset->licenses->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->licenses->count().'</badge>' : '' !!}
</x-navbutton>

<x-navbutton tabname="components"  :asset="$asset">
 {!! ($asset->components->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->components->count().'</badge>' : '' !!}
</x-navbutton>

<x-navbutton tabname="assets" :asset="$asset">
{!! ($asset->assignedAssets()->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->assignedAssets()->count().'</badge>' : '' !!}
</x-navbutton>

<x-navbutton tabname="history" :asset="$asset">
</x-navbutton>

<x-navbutton tabname="maintenances" :asset="$asset">
{!! ($asset->assetmaintenances()->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->assetmaintenances()->count().'</badge>' : '' !!}
</x-navbutton>

<x-navbutton tabname="files" :asset="$asset">
{!! ($asset->uploads->count() > 0 ) ? '<badge class="badge badge-secondary">'.$asset->uploads->count().'</badge>' : '' !!}
</x-navbutton>

second the Blade component in snipeit/ressources/views/components/ in this case named navbutton.blade.php :

@props ([
'type' => ''
])

<li  {{$attributes}} >
    <a href="#{{ $tabname }}" data-toggle="tab">
        <span class="hidden-lg hidden-md">
            <i class="far fa-file fa-2x" aria-hidden="true"></i>
        </span>
        <span class="hidden-xs hidden-sm">
            @if($tabname=='software')
                {{ trans('general.licenses') }}
            @elseif($tabname=='details')
                {{ trans('admin/users/general.info') }}
            @else
                {{ trans('general.' .$tabname ) }}
            @endif
            {{$slot}}
        </span>
    </a>
</li>

and last the automatically generated class navbutton.php in snipeit/app/View/components/

class Navbutton extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */

    public $tabname;
    public $asset;



    public function __construct($tabname, $asset)
    {

        $this->tabname = $tabname;
        $this->asset = $asset;



        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.navbutton');
    }
}

Using the Blade components reduces duplication of code, in this case the needed lines of code are reduced by 50%, its more compact and easier to refactor and extend in future situations.

I am new to Laravel and Blade components, i don't say my code is perfect, but i wanted to share this with you for your further work.

baghirani · 2022-04-01T09:06:25Z

baghirani
Apr 1, 2022
Author

I updated the example above to fix some errors. I had to add a function getName() so that the name for the users is people not users in the dashboard and the can statement was wrong since the type was not selected for the model. Now it works better than the original because the link to all assets etc. was always shown and the German title for accessories now is shown but with the wrong encoding i think because the 'ö' in 'Zubehör' is now a '?'. Before it wasn't shown at all.

0 replies

baghirani · 2022-04-08T09:21:16Z

baghirani
Apr 8, 2022
Author

Currently I have only changed this example. My student has changed another one. For me the most interesting things before continuing:

How to structure it, so that it will not get a mess?
- When to use anonymous components and when to use them together with the class?
Where should the components be configurable? I think it might be confusing if, like with the props in the above example together with parameters where it is used and maybe a little bit in the corresponding class, the configuration is separated into several different files.

I would really appreciate if somebody would discuss this with me here.

0 replies

baghirani · 2022-04-08T10:51:02Z

baghirani
Apr 8, 2022
Author

I created an alternative to the above example. Here the data is now completely defined in the class or given to the class by a parameter and the blade is just the visual presentation. What do you think?

resources\views\dashboard.blade.php

<x-dashboard.panel>
        <x-dashboard.panel.item type="assets" :counts="$counts" ></x-dashboard.panel.item>
        <x-dashboard.panel.item type="licenses" :counts="$counts" ></x-dashboard.panel.item>
        <x-dashboard.panel.item type="accessories" :counts="$counts" ></x-dashboard.panel.item>
        <x-dashboard.panel.item type="consumables" :counts="$counts" ></x-dashboard.panel.item>
        <x-dashboard.panel.item type="components" :counts="$counts" ></x-dashboard.panel.item>
        <x-dashboard.panel.item type="users" :counts="$counts" ></x-dashboard.panel.item>
</x-dashboard.panel>

resources\views\components\dashboard\panel\item.blade.php

<div class="col-lg-2 col-xs-6">
    <a href="{{ $route  }}">
        <!-- small box -->
        <div class="small-box {{ $color }}">
            <div class="inner">
                <h3>{{ $count }}</h3>
                <p>{{ $name }}</p>
            </div>
            <div class="icon" aria-hidden="true">
                <i class="{{ $icon }}" aria-hidden="true"></i>
            </div>
            @can('index', $model )
                <a href="{{ $route }}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
            @endcan
        </div>
    </a>
</div>

app\View\components\dashboard\panel\item.php

<?php

namespace App\View\Components\dashboard\panel;

use Illuminate\View\Component;

class item extends Component
{
protected $properties = [
                        'color' => [
                            'assets' => 'bg-teal',
                            'licenses' => 'bg-maroon',
                            'accessories' => 'bg-orange',
                            'consumables' => 'bg-purple',
                            'components' => 'bg-yellow',
                            'users' => 'bg-light-blue'
                        ],
                        'icon' => [
                            'assets' => 'fas fa-barcode',
                            'licenses' => 'far fa-save',
                            'accessories' => 'far fa-keyboard',
                            'consumables' => 'fas fa-tint',
                            'components' => 'far fa-hdd',
                            'users' => 'fas fa-users'
                        ],
                        'model' => [
                            'assets' => '\App\Models\Asset::class',
                            'licenses' => '\App\Models\License::class',
                            'accessories' => '\App\Models\Accessory::class',
                            'consumables' => '\App\Models\Consumable::class',
                            'components' => '\App\Models\Component::class',
                            'users' => '\App\Models\User::class'
                        ]
];

    public $type;
    public $counts;
    public $color;
    public $icon;
    public $model;
    public $name;
    public $count;
    public $route;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($type, $counts = null, $count = null, $color = null, $icon = null, $model=null, $name =null, $route=null )
    {
        $this->type = $type;
        if ($counts != null) {
            $this->counts = $counts;
            $this->count = $this->getCount();
        } elseif ($count != null) {
            $this->count = $count;
        } else {
            /* When both are not given an exception should be thrown */
        }
        if ($color != null) {
            $this->color = $color;
        } else {
            $this->color = $this->properties['color'][$type];
        }
        if ($icon != null) {
            $this->icon = $icon;
        } else {
            $this->icon = $this->properties['icon'][$type];
        }
        if ($name != null) {
            $this->name = $name;
        } else {
            $this->name = $this->getName();
        }
        if ($model != null) {
            $this->model = $model;
        } else {
            $this->model = $this->properties['model'][$type];
        }
        if ($route != null) {
            $this->route = $route;
        } else {
            $this->route = $this->getRoute();
        }
    }

    protected function getRoute(): string
    {
        if ($this->type == 'assets') {
            $route = 'hardware.index';
        } else {
            $route = $this->type . '.index';
        }
        return route($route);
    }

    protected function getCount(): string
    {
        if ( $this->type == 'accessories') {
            $counts = 'accessory';
        } else {
            $counts = rtrim($this->type, "s");
        }
        return  number_format($this->counts[$counts]);
    }

    protected function getName(): string
    {
        if ( $this->type == 'users') {
            $name = 'people';
        } else {
            $name = $this->type;
        }
        return strtolower(trans('general.' . $name));
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.dashboard.panel.item');
    }

}

1 reply

baghirani Apr 13, 2022
Author

With the last change it is even possible to use the dashboard item like an anonymous component as well if it is needed somewhere else.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blade Components #10844

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Blade Components #10844

baghirani Mar 21, 2022

Replies: 5 comments · 6 replies

snipe Mar 31, 2022 Maintainer

uberbrady Mar 31, 2022 Collaborator

baghirani Mar 31, 2022 Author

baghirani Mar 31, 2022 Author

uberbrady Mar 31, 2022 Collaborator

baghirani Mar 31, 2022 Author

WollysWolfPack Apr 13, 2022

baghirani Apr 1, 2022 Author

baghirani Apr 8, 2022 Author

baghirani Apr 8, 2022 Author

baghirani Apr 13, 2022 Author

baghirani
Mar 21, 2022

Replies: 5 comments 6 replies

snipe
Mar 31, 2022
Maintainer

uberbrady Mar 31, 2022
Collaborator

baghirani Mar 31, 2022
Author

baghirani Mar 31, 2022
Author

uberbrady
Mar 31, 2022
Collaborator

baghirani Mar 31, 2022
Author

baghirani
Apr 1, 2022
Author

baghirani
Apr 8, 2022
Author

baghirani
Apr 8, 2022
Author

baghirani Apr 13, 2022
Author