Import Preview

[tonypartridger]

I built a multi step import preview function into an action, but this would be served much better from the filament-import plugin.

The reasoning is people can cross validate date before committing data to the database.

[frankyso]

Can you please attach your package here :) ? Will check on it soon

[tonypartridger]

I didn't write a package persay. Just a custom field which fetched the original file and the changes and showed them in a filament-table here is an example this is the field:

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class CsvPreview extends Field
{
    protected string $view = 'forms.components.csv-preview';

    protected array $csvData = [];

    protected array $csvColumns = [];

    public function getId(): string
    {
        return parent::getId() ?? $this->getStatePath();
    }

    public function csvData(array $data): static
    {
        $this->csvData = $data;
//        $this->csvColumns = $columns;

        return $this;
    }

    public function getCsvData(): array
    {
        return $this->csvData;
    }

    public function getCsvColumns(): array
    {
        return $this->csvColumns;
    }
}

The view

<div>
    @if(isset($csvData) && is_array($csvData) && count($csvData) > 1)
        <p class="pb-4">
            The below data is the data which will be imported, please check that this data matches correctly.
        </p>
        <div
            class="filament-tables-table-container overflow-x-auto relative dark:border-gray-700 border-t h-96">
            <!-- Interact with the `state` property in Alpine.js -->
            <table
                class="filament-tables-table w-full text-start divide-y table-auto dark:divide-gray-700 absolute">
                <thead>
                <tr class="bg-gray-500/5">
                    @foreach($importableFields as $column)
                        <th class="p-4 whitespace-nowrap">
                            {{ $column['label'] }}
                        </th>
                    @endforeach
                </tr>
                </thead>
                <tbody class="divide-y whitespace-nowrap dark:divide-gray-700">
                @foreach($csvData as $i => $row)
                    @continue($loop->first)
                    <tr class="filament-tables-row transition">
                        @foreach($importableFields as $impField)
                            @php (int) $key = $evaluate(fn ($get) => $get($impField['key'])); @endphp

                            @if($key >= 0 && isset($csvData[$i][$key]))
                                <td class="filament-tables-cell w-4 p-2 whitespace-nowrap text-center">
                                    {{ $csvData[$i][(int)$key] }}
                                </td>
                            @else
                                <td class="filament-tables-cell w-4 p-2 whitespace-nowrap text-center">
                                    &ensp;
                                </td>
                            @endif
                        @endforeach
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="pb-4 font-bold w-full text-center">Sorry, we could not find any rows in the provided CSV</p>
    @endif
</div>

And I just included it as a field in the last step.

[Saifallak]

looking forward for this.

[sprklinginfo]

a very neat feature! will it be included in the filament-plugin? if not soon, how should I add it manually with the current filament-import? @tonypartridger, much appreciated if you can give us some instructions

[tonypartridger]

It's quite in-depth as I built it for a Payslip system, but essentially you just have a file upload file, process it through and then pre-select the second wizard step, and on the finally, render a custom table.

I believe Dan is building a big importing system into Filament though as part of a big project he is working on which may operate similar.

[sprklinginfo]

thanks @tonypartridger. For 'Dan is building a big importing system into Filament', will that be released soon? tried to poke around on their filamentphp/filament GitHub and didn't find relevant information. if you know the link to the project, mind sharing it? Thanks