Call livewire component from dome module in base resourse view.

[Alexandr120]

Good afternoon. I would like to know about the possibility of calling any livewire component from a module in laravel's base view. What I mean? For example, I have 2 simple modules that are responsible for 2 entities (for example, customers and employees). And for example, I have a Livewire component, let’s say TableIndex or just Index in these 2 modules.
These components are essentially absolutely identical. Regular table, regular filters.
In this case I would like to create an abstract component in the basic Laravel structure, say App/Livewire/Tables/AbstrcatIndex

In my practice of building tables using livewire, I came to the conclusion that I use this approach. I am creating a SomeTableComponent and SomeRow. Why do I use this approach, because for me this option is very convenient when working with filters. the table becomes dynamic.

Example

namespace App\Livewire\Tables;

use Livewire\Component;
use Livewire\WithPagination;
use App\Traits\WithFilters;

abstract class AbstractIndex extends Component
{
     use WithPagination, WithFilters;

     protected string $paginationTheme = 'bootstrap';

    #[Url]
    public array $queryString = [
        'filters' => ['expect' => '']
    ];

    public function getFullData(string $modelClass): Builder
    {
           $model = new $modelClass();
           $collection = $model->repository()->queryBuilder();
           if (!blank($this->filters)) {
                 $collection = $this->filterCollection($collection);
           }
           return $collection;
    }

    public function getBreadcrumbs(string $componentClass): string
    {
        return Str::of($componentClass)
            ->lower()
            ->after('modules\\')
            ->explode('\\')
            ->map(function ($item) {
                return Str::kebab($item);
            })->implode('.');
    }
}

namespace App\Traits;

use Illuminate\Database\Eloquent\Builder;

trait WithFilters 
{
    public array $fields = [];

    public array $filters = [];

    public int $paginate = 20;

    public array $paginates = [10, 20, 30, 50, 100];

    public function filterCollection(Builder $collection): Builder
    {
          foreach ($this->filters as $field => $value) {
                if (!empty($value)) {
                    $fieldItems = $this->fields[$field];
                    $collection->whereRaw(
                            $this->getQueryCondition($field, $value, $fieldItems->type)
                     );
                } else {
                    $this->disableFilter($field);
                }
            }
            return $collection;
    }

    private function getQueryCondition(string $field, string $value, string $type): string
    {
        return match ($type) {
            'text' => "$field like '%$value%'",
            'date' => "DATE($field) = '$value'",
            'time' => "TIME($field) = '$value'",
            default => "$field = '$value'",
        };
    }

    public function disableFilter(string $field)
    {
        unset($this->filters[$field]);
    }

    public function disableAllFilter()
    {
        $this->filters = [];
    }
}

Livewire component in module

namespace Modules\User\Livewire;

use App\Livewire\Tables\AbstractIndex;
use Modules\Customer\App\Models\Customer;

class Customers extends AbstractIndex 
{
     public function mount(Customer $customer)
     {
          $this->fields = $customer->fields();
     }

     public function render()
     {
 // this layout from base laravel resourse. I use this. I not use some layout from module livewire component for this logic. but it the same. 

        return view('livewire.tables.index', [
            'collection' => $this->getFullData(Customer::class)->paginate($this->paginate),
            'breadcrumbs' => $this->getBreadcrumbs($this::class),
        ])
            ->extends('admin.layouts.app')
            ->section('content');
    }
}

namespace Modules\Employee \Livewire;

use App\Livewire\Tables\AbstractIndex;
use Modules\Employee\App\Models\Employee;

class Employees extends AbstractIndex 
{
     public function mount(Employee $employee)
     {
          $this->fields = $employee->fields();
     }

     public function render()
     {
        return view('livewire.tables.index', [
            'collection' => $this->getFullData(Employee ::class)->paginate($this->paginate),
           'breadcrumbs' => $this->getBreadcrumbs($this::class),
        ])
            ->extends('admin.layouts.app')
            ->section('content');
    }
}

namespace App \Livewire;

abstract class AbstractRow extends Component
{
   // some propertise

   // some methods

    public function render()
     {
        return view('livewire.tables.row');
    }
}

namespace Modules\Employee\Livewire;

class Row extends AbstractRow
{
    // some code
}

namespace Modules\Customer\Livewire;

class Row extends AbstractRow
{
     // some code
}

base view (resourses\views\livewire\tables\index.blade.php)

<div class="some-bootstrap-styles">
    <x-wire.breadcrumbs :name="$breadcrumbs">
        <x-wire.table.paginate :paginates="$paginates" :filters="$filters" :fields="$fields" :collection="$collection">
            <table class="some-bootstrap-table">
                <thead>
                <tr>
                    @foreach($fields as $items)
                        <th>{{ $items['label'] }}</th>
                    @endforeach
                    <th>{{ __('Action') }}</th>
                </tr>
                <x-wire.table.filters :fields="$fields"></x-wire.table.filters>
                </thead>
                <tbody>
                    @foreach($collection as $row)
                        @livewire('some.livewire.row', ['row' => $row->id], key($row->id))
                    @endforeach
                </tbody>
            </table>
        </x-wire.table.paginate>
    </x-wire.breadcrumbs>
</div>

And proplem and the problem is here

@livewire('some.livewire.row', ['row' => $row->id], key($row->id))

in ducumentation of https://laravelmodules.com/docs/v10/livewire The documentation indicates how to render the component.

<livewire:some-module::some-component/>

or I often use

@livewire('some-module::some-component') // it work for me

In simple practice, without using a modular structure, I would call the render component like this

@livewire('some-livewire-component-dir.some-component')

In this case, Livewire understands that all its components are located in the App\Livewire directory.

When you call to render a component inside a module, Livewire understands that all module components are located in the Modules\SomeModule\Livewire directory

in my opinion, a problem arises here that when creating such an abstract approach to constructing tables and rows as separate components, there is no way to call one or another modular row component in the abstract views directly in the underlying structure

How could this issue be resolved?

[Alexandr120]

For now I have removed RowComponent.

base view (resourses\views\livewire\tables\index.blade.php)

<div class="some-bootstrap-styles">
    <x-wire.breadcrumbs :name="$breadcrumbs">
        <x-wire.table.paginate :paginates="$paginates" :filters="$filters" :fields="$fields" :collection="$collection">
            <table class="some-bootstrap-table">
                <thead>
                <tr>
                    @foreach($fields as $items)
                        <th>{{ $items['label'] }}</th>
                    @endforeach
                    <th>{{ __('Action') }}</th>
                </tr>
                <x-wire.table.filters :fields="$fields"></x-wire.table.filters>
                </thead>
                <tbody>
                    @foreach($collection as $item)
                       <tr>
                           @foreach(array_keys($fields) as $field)
                                <td>{{ $this->getFieldValue($item, $field) }}</td>
                            @endforeach
                       </tr>
                    @endforeach
                </tbody>
            </table>
        </x-wire.table.paginate>
    </x-wire.breadcrumbs>
</div>