Forms - v1.0.0-beta1

SubmissionsList Component

The SubmissionsList component displays form submissions with search, filtering, and export capabilities.

Basic Usage

{{-- All submissions for a form --}}
<livewire:forms::submissions-list :form="$form" />

{{-- All submissions across all forms --}}
<livewire:forms::submissions-list />

Properties

Property Type Default Description
form Form|null null Filter by form
perPage int 15 Items per page
sortBy string 'created_at' Sort column
sortDirection string 'desc' Sort direction

Features

  • Search submissions by field values
  • Filter by date range
  • Sort by columns
  • Pagination
  • Export to CSV/Excel
  • Bulk delete
  • View submission details

Component Structure

<div class="submissions-list">
    {{-- Search & Filters --}}
    <div class="filters">
        <input wire:model.live.debounce.300ms="search" placeholder="Search...">

        <input type="date" wire:model.live="startDate">
        <input type="date" wire:model.live="endDate">

        @if (!$form)
            <select wire:model.live="formFilter">
                <option value="">All Forms</option>
                @foreach ($forms as $f)
                    <option value="{{ $f->id }}">{{ $f->name }}</option>
                @endforeach
            </select>
        @endif
    </div>

    {{-- Actions --}}
    <div class="actions">
        <button wire:click="exportCsv">Export CSV</button>

        @if (count($selected) > 0)
            <button wire:click="deleteSelected">
                Delete Selected ({{ count($selected) }})
            </button>
        @endif
    </div>

    {{-- Submissions Table --}}
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" wire:model="selectAll"></th>
                <th wire:click="sortBy('submission_number')">Number</th>
                @if (!$form)
                    <th>Form</th>
                @endif
                {{-- Dynamic columns based on form fields --}}
                @foreach ($displayColumns as $column)
                    <th>{{ $column }}</th>
                @endforeach
                <th wire:click="sortBy('created_at')">Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($submissions as $submission)
                <tr>
                    <td>
                        <input type="checkbox" wire:model="selected" value="{{ $submission->id }}">
                    </td>
                    <td>{{ $submission->submission_number }}</td>
                    @if (!$form)
                        <td>{{ $submission->form->name }}</td>
                    @endif
                    @foreach ($displayColumns as $column)
                        <td>{{ $submission->getValue($column) }}</td>
                    @endforeach
                    <td>{{ $submission->created_at->format('M d, Y H:i') }}</td>
                    <td>
                        <a href="{{ route('forms.submissions.show', [$submission->form, $submission]) }}">
                            View
                        </a>
                        <button wire:click="delete({{ $submission->id }})">Delete</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    {{-- Pagination --}}
    {{ $submissions->links() }}
</div>

Methods

exportCsv

Export submissions to CSV:

public function exportCsv()
{
    $this->authorize('export', FormSubmission::class);

    return response()->streamDownload(function () {
        echo $this->exportService->toCsv($this->form, [
            'search' => $this->search,
            'start_date' => $this->startDate,
            'end_date' => $this->endDate,
        ]);
    }, "submissions-{$this->form->slug}.csv");
}

delete

Delete a single submission:

public function delete(int $id): void
{
    $submission = FormSubmission::findOrFail($id);
    $this->authorize('delete', $submission);

    $submission->delete();

    session()->flash('success', 'Submission deleted.');
}

deleteSelected

Bulk delete submissions:

public function deleteSelected(): void
{
    foreach ($this->selected as $id) {
        $submission = FormSubmission::find($id);
        if ($submission && Gate::allows('delete', $submission)) {
            $submission->delete();
        }
    }

    $this->selected = [];
    session()->flash('success', 'Selected submissions deleted.');
}

Display Columns

Configure which fields to show in the list:

public array $displayColumns = ['email', 'name'];

// Or dynamically from form
public function getDisplayColumnsProperty(): array
{
    if (!$this->form) {
        return ['email'];
    }

    return $this->form->fields
        ->where('type', '!=', 'hidden')
        ->take(3)
        ->pluck('name')
        ->toArray();
}

Events Emitted

Event Payload Description
submission-deleted { id } Submission deleted
submissions-exported { count } Export completed

Customizing the View

Publish views:

php artisan vendor:publish --tag=forms-views

Edit resources/views/vendor/forms/livewire/submissions-list.blade.php.

Next Steps