If I created a custom field, where do I manage the livewire interactions?
I created a new custom field ManageGroupSetting and it has a sortable.js
page view
<?php
namespace App\Forms\Components;
use Filament\Forms\Components\Field;
class ManageGroupSetting extends Field
{
protected string $view = 'forms.components.manage-group-setting';
}<?php
namespace App\Forms\Components;
use Filament\Forms\Components\Field;
class ManageGroupSetting extends Field
{
protected string $view = 'forms.components.manage-group-setting';
}page view
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<hr>
<h3>Options</h3>
<div wire:ignore>
<ul id="sortable">
(...)
</ul>
<!-- Include Sortable.js -->
<script>
document.addEventListener('DOMContentLoaded', () => {
initializeSortable();
});
function initializeSortable() {
const sortableElement = document.getElementById('sortable');
if (sortableElement) {
const sortable = new Sortable(sortableElement, {
handle: '.sortable-handle',
animation: 150,
onEnd: (event) => {
const newOrder = Array.from(event.to.children).map(item => item.dataset.index);
// Livewire.emit('reorder', newOrder);
},
});
}
}
</script>
</div>
</x-dynamic-component><x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<hr>
<h3>Options</h3>
<div wire:ignore>
<ul id="sortable">
(...)
</ul>
<!-- Include Sortable.js -->
<script>
document.addEventListener('DOMContentLoaded', () => {
initializeSortable();
});
function initializeSortable() {
const sortableElement = document.getElementById('sortable');
if (sortableElement) {
const sortable = new Sortable(sortableElement, {
handle: '.sortable-handle',
animation: 150,
onEnd: (event) => {
const newOrder = Array.from(event.to.children).map(item => item.dataset.index);
// Livewire.emit('reorder', newOrder);
},
});
}
}
</script>
</div>
</x-dynamic-component>