How to use my own collection in a resource page

[rabol]

Hi

I'm trying to build a simple log viewer for.
Step one is to display a collection of log files, then when one is clicked, open and parse the log and display

so, all files I can get as a collection, the passed log I also have as a collection, but the Resource page is really fixed on a Eloquent collection

I have tried to create a model and then on the fly create 'records' that is not saved to the DB, but then I get an exception that that the collection does not have a method called hasPages()

Am I taking the wrong approach ?

[ryangjchandler]

@rabol Resources are pretty tightly-bound to models. You'd be better off making a custom page and using a Table object instead.

[rabol]

I'm trying :)

    <x-tables::table
        :records="$records"
        :selected="$selected"
        :sort-column="$sortColumn"
        :sort-direction="$sortDirection"
        :table="$this->getTable()"
    />

now I get a new exception:

Call to a member function getKey() on array (View: /......./vendor/filament/filament/packages/tables/resources/views/components/table.blade.php)

[ryangjchandler]

@rabol Could you share some more code. Sounds like it's trying to use it like a model.

[rabol]

I managed to get it working like this - It's not perfect and I'm sure that the pagination will work yet

My custom page

<?php

namespace App\Filament\Pages;


use Filament\Pages\Page;
use Filament\Tables\Table;
use Filament\Tables\Columns;
use File;
use Illuminate\Support\Collection;
use Filament\Resources\Tables\RecordActions;

class LogViewerPage extends Page
{
    public static $icon = 'heroicon-o-document-text';

    public static $view = 'filament.pages.log-viewer-page';

    public static $title = "Log files";

    public $selected;
    public $sortColumn;
    public $sortDirection;
    public $hasPagination = false;

    protected function viewData()
    {
        return [
            'records' => $this->getRecords(),
        ];
    }

    public function getTable()
    {
        return $this->table(
            Table::for($this),
        );
    }

    public function table(Table $table)
    {
        return $table
            ->columns([
                Columns\Text::make('filename')->getValueUsing($callback = fn ($record) => $record->getFileName())->url(fn ($record) => url('details', $record)),
                Columns\Text::make('path')->getValueUsing($callback = fn ($record) => $record->getPath()),
                Columns\Text::make('size')->getValueUsing($callback = fn ($record) => $record->getSize()),
            ])
            ->filters([
                //
            ])
            ->recordActions([
                RecordActions\Link::make('edit')
                    ->label('View')
                    ->url(fn ($record) => url('', $record)),
            ]);
    }

    public function getRecords()
    {
        $logfiles = new Collection();

        foreach (File::files(storage_path('/logs/')) as $file) {
            $logfiles->add($file);
        }

        return $logfiles;
    }

    public function isFilterable()
    {
        return false;
    }

    public function isSearchable()
    {
        return false;
    }

    public function isReorderable()
    {
        return false;
    }

    public function hasPagination()
    {
        return $this->hasPagination;
    }

    public function isSortable()
    {
        return false;
    }
}

I also needed to manually modify the view

<div>
    <x-filament::app-header :title="$title">
    </x-filament::app-header>

    <x-filament::app-content class="space-y-4">
        <div class="items-center justify-between space-y-4 sm:flex sm:space-y-0">

            <x-tables::filter :table="$this->getTable()" />
        </div>

@php
$table = $this->getTable();
@endphp
        <div class="overflow-x-auto bg-white rounded shadow-xl">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-200">
                <tr>
                    <th class="w-4 p-4 whitespace-nowrap">
                        <input

                            wire:click="toggleSelectAll"
                            type="checkbox"
                            class="border-gray-300 rounded shadow-sm text-primary-600 focus:border-primary-600 focus:ring focus:ring-primary-200 focus:ring-opacity-50"
                        />
                    </th>

                    @foreach ($table->getVisibleColumns() as $column)
                        <th class="px-6 py-3 text-left text-gray-600" scope="col">
                            @if ($this->isSortable() && $column->isSortable())
                                <button
                                    wire:click="sortBy('{{ $column->getName() }}')"
                                    type="button"
                                    class="flex items-center space-x-1 rtl:space-x-reverse text-xs font-medium tracking-wider text-left uppercase group focus:outline-none focus:underline"
                                >
                                    <span>{{ __($column->getLabel()) }}</span>

                                    <span class="relative flex items-center">
                                    @if ($sortColumn === $column->getName())
                                            <span>
                                            @if ($sortDirection === 'asc')
                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                                @elseif ($sortDirection === 'desc')
                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
                                                @endif
                                        </span>
                                        @else
                                            <svg class="w-3 h-3 transition-opacity duration-300 opacity-0 group-hover:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                        @endif
                                </span>
                                </button>
                            @else
                                <span class="text-xs font-medium tracking-wider uppercase">{{ __($column->getLabel()) }}</span>
                            @endif
                        </th>
                    @endforeach

                    <th scope="col"></th>

                    @if ($this->isReorderable())
                        <th scope="col"></th>
                    @endif
                </tr>
                </thead>

                <tbody
                    @if ($this->isReorderable()) wire:sortable="reorder" @endif
                class="text-sm leading-tight divide-y divide-gray-200"
                >
                @forelse ($records as $record)
                    <tr

                        wire:loading.class="opacity-50"

                        class="{{ $loop->index % 2 ? 'bg-gray-50' : 'bg-white' }}"
                    >
                        <td class="p-4 whitespace-nowrap">
                            <input

                                type="checkbox"
                                class="border-gray-300 rounded shadow-sm text-primary-600 focus:border-primary-600 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
                            />
                        </td>

                        @foreach ($table->getVisibleColumns() as $column)
                            <td class="px-6 whitespace-nowrap">
                                {{ $column->renderCell($record) }}
                            </td>
                        @endforeach

                        <td class="px-6 py-4 whitespace-nowrap flex justify-end items-center space-x-2 rtl:space-x-reverse">
                            @foreach ($table->getRecordActions() as $recordAction)
                                {{ $recordAction->render($record) }}
                            @endforeach
                        </td>

                        @if ($this->isReorderable())
                            <td wire:sortable.handle class="px-6 border-l cursor-move whitespace-nowrap">
                                <x-heroicon-o-menu-alt-4 class="w-4 h-4 text-gray-500 mx-auto"/>
                            </td>
                        @endif
                    </tr>
                @empty
                    <tr>
                        <td
                            class="px-6 py-4 whitespace-nowrap"
                            colspan="{{ count($table->getVisibleColumns()) + ($this->isReorderable() ? 3 : 2) }}"
                        >
                            <div class="flex items-center justify-center h-16">
                                <p class="font-mono text-xs text-gray-500">
                                    {{ __('tables::table.messages.noRecords') }}
                                </p>
                            </div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>


    @if ($this->hasPagination())
            <x-tables::pagination.paginator :paginator="$records" />
        @endif
    </x-filament::app-content>
</div>

Any improvements are highly appreciated

[rabol]

I have made one, that helps a little

I have created a new class and each file is now 'object' of type LaravelLogFile
on that class I have added a getKey()

in my page, the new getRecords() looks like this

    public function getRecords()
    {
        $logfiles = new Collection();
        foreach (File::files(storage_path('/logs/')) as $file) {
            $logfiles->add(new LaravelLogFile($file->getFilename(), $file->getPath(), $file->getSize()));
        }

        return $logfiles;
    }

and now my view for the page is much simpler

<div>
    <x-filament::app-header :title="$title">
        <x-slot name="actions">
            @if ($this->canCreate())
                <x-filament::button color="primary" :href="static::getResource()::generateUrl($createRoute)">
                    {{ __(static::$createButtonLabel) }}
                </x-filament::button>
            @endif
            <button wire:click="getFromStripe" class="cursor-pointer font-medium border rounded transition duration-200 shadow-sm focus:ring focus:ring-opacity-50 border-transparent bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-200  text-sm py-2 px-4">Get from Stripe</button>
        </x-slot>
    </x-filament::app-header>

    <x-filament::app-content class="space-y-4">
        <div class="items-center justify-between space-y-4 sm:flex sm:space-y-0">
            <div>
                @if ($this->canDelete())
                    <x-tables::delete-selected :disabled="! $this->canDeleteSelected()" />
                @endif
            </div>

            <x-tables::filter :table="$this->getTable()" />
        </div>

        <x-tables::table :records="$records" :selected="$selected" :sort-column="$sortColumn" :sort-direction="$sortDirection" :table="$this->getTable()" />

        @if ($this->hasPagination())
            <x-tables::pagination.paginator :paginator="$records" />
        @endif
    </x-filament::app-content>
</div>

Pagination is still an issue