Filament•2mo ago

Full page Livewire component not apply filament page layout

Hello I try creating custom view page on my resource. But I cant apply filament layout. Just there some couple of form element. My resource file:

<?php

namespace App\Filament\Client\Resources\Payroll;
use Filament\Resources\Resource;
use Filament\Forms;
use Filament\Tables;
use App\Models\Payroll\Salary;
use Filament\Forms\Form;
use Filament\Tables\Table;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\DeleteAction;
use App\Filament\Client\Resources\Payroll\SalaryResource\Pages;

use App\Models\Payroll\Allowance;
use App\Models\Payroll\Commission;
use App\Models;
class SalaryResource extends Resource
{
    protected static ?string $model = Salary::class;

    protected static ?string $navigationIcon = "heroicon-o-currency-dollar";
    protected static ?string $navigationGroup = "HR";

    public static function form(Form $form): Form
    {
        return $form->schema([
           .....
        ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
               ...
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make()->url(
                    fn($record) => SalaryResource::getUrl(
                        "edit-salary-details",
                        ["record" => $record->id]
                    )
                ),
            ])
            ->bulkActions([Tables\Actions\DeleteBulkAction::make()]);
    }

    public static function getRelations(): array
    {
        return [];
    }

    public static function getPages(): array
    {
        return [
            "index" => Pages\ListSalaries::route("/"),
            "create" => Pages\CreateSalary::route("/create"),
            "edit" => Pages\EditSalary::route("/{record}/edit"),
            "edit-salary-details" => Pages\EditSalaryDetails::route(
                "/{record}/edit-salary-details"
            ),
        ];
    }
}

<?php

namespace App\Filament\Client\Resources\Payroll;
use Filament\Resources\Resource;
use Filament\Forms;
use Filament\Tables;
use App\Models\Payroll\Salary;
use Filament\Forms\Form;
use Filament\Tables\Table;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\DeleteAction;
use App\Filament\Client\Resources\Payroll\SalaryResource\Pages;

use App\Models\Payroll\Allowance;
use App\Models\Payroll\Commission;
use App\Models;
class SalaryResource extends Resource
{
    protected static ?string $model = Salary::class;

    protected static ?string $navigationIcon = "heroicon-o-currency-dollar";
    protected static ?string $navigationGroup = "HR";

    public static function form(Form $form): Form
    {
        return $form->schema([
           .....
        ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
               ...
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make()->url(
                    fn($record) => SalaryResource::getUrl(
                        "edit-salary-details",
                        ["record" => $record->id]
                    )
                ),
            ])
            ->bulkActions([Tables\Actions\DeleteBulkAction::make()]);
    }

    public static function getRelations(): array
    {
        return [];
    }

    public static function getPages(): array
    {
        return [
            "index" => Pages\ListSalaries::route("/"),
            "create" => Pages\CreateSalary::route("/create"),
            "edit" => Pages\EditSalary::route("/{record}/edit"),
            "edit-salary-details" => Pages\EditSalaryDetails::route(
                "/{record}/edit-salary-details"
            ),
        ];
    }
}

` EditSalaryDetails.php

<?php

namespace App\Filament\Client\Resources\Payroll\SalaryResource\Pages;

use App\Filament\Client\Resources\Payroll\SalaryResource;
...

class EditSalaryDetails extends Page implements HasForms
{
    use InteractsWithForms;
    protected static string $resource = SalaryResource::class;
    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form
            ->schema([TextInput::make("name")->required()])
            ->statePath("data");
    }
 
    public function render(): View
    {
        // Dönüş tipi belirtildi
        $this->calculateAndUpdateSalary();

        return view("payroll.salary-resource.pages.edit-salary-details");
    }
    public function mount(): void
    {
        $this->form->fill();
    }
}

<?php

namespace App\Filament\Client\Resources\Payroll\SalaryResource\Pages;

use App\Filament\Client\Resources\Payroll\SalaryResource;
...

class EditSalaryDetails extends Page implements HasForms
{
    use InteractsWithForms;
    protected static string $resource = SalaryResource::class;
    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form
            ->schema([TextInput::make("name")->required()])
            ->statePath("data");
    }
 
    public function render(): View
    {
        // Dönüş tipi belirtildi
        $this->calculateAndUpdateSalary();

        return view("payroll.salary-resource.pages.edit-salary-details");
    }
    public function mount(): void
    {
        $this->form->fill();
    }
}

edit-salary-details.blade.php

<x-filament-panels::page>
    <x-filament-panels::form>
        {{ $this->form }}
    </x-filament-panels::form>
</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament-panels::form>
        {{ $this->form }}
    </x-filament-panels::form>
</x-filament-panels::page>

my layout:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">

        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ config('app.name') }}</title>

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
        @livewireStyles
        @FilamentStyles
        @vite('resources/css/app.css')
    </head>

    <body class="antialiased">

        {{ $slot }}

        @FilamentScripts
        @vite('resources/js/app.js')
        @livewireScripts

    </body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">

        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ config('app.name') }}</title>

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
        @livewireStyles
        @FilamentStyles
        @vite('resources/css/app.css')
    </head>

    <body class="antialiased">

        {{ $slot }}

        @FilamentScripts
        @vite('resources/js/app.js')
        @livewireScripts

    </body>
</html>

but my custom page seen like this: there is no filament menu, header etc. But I think applied css and js files. Thank you

5 Replies

Vp•2mo ago

It looks like you're trying to create this https://filamentphp.com/docs/3.x/panels/resources/custom-pages And this page doesn't require additional layouts.

Tarık•2mo ago

But I need using blade page layout.

Vp•2mo ago

May I ask why? because by looking at your edit-salary-details file, you're not using your custom layout tho, but I may be wrong

Tarık•2mo ago

The codes in the article are simplified. I need to show 8 tables on this page. In fact, if I create a special page action and run it with the blade page, it will be enough for me.

Vp•2mo ago

Okay.. about your OP I don't have any idea now..

Gaming

Programming

Full page Livewire component not apply filament page layout