Package
Other
Package Version
v2
How can we help you?
Hi Hope you guys doing well. I am building a bulk action modal with some draggable checkbox options.
However, i created the custom form field and used it but when i try to submit it return null.
Below is the screenshot of the modal
Code of my DraggableCheckboxes.php
Class
<?php
namespace AppFilamentFormsComponents;
use FilamentFormsComponentsField;
class DraggableCheckboxes extends Field
{
protected string $view = 'filament.forms.components.draggable-checkboxes';
protected array $options = [];
public function options(array $options): static
{
$this->options = $options;
return $this;
}
public function getOptions(): array
{
return $this->options;
}
public function getSelectedValues(): array
{
return collect($this->options)
->filter(fn ($option) => $option['checked'] ?? false)
->pluck('value')
->toArray();
}
}
Code of filament.forms.components.draggable-checkboxes
. Alpine js code is not working
<div x-data="{
options: {{ json_encode($getOptions()) }},
drop(event) {
event.preventDefault();
const draggedIndex = event.dataTransfer.getData('text/plain');
const draggedOption = this.options[draggedIndex];
this.options.splice(draggedIndex, 1);
this.options.splice(event.target.dataset.index, 0, draggedOption);
},
deleteOption(index, event) {
event.preventDefault();
event.stopPropagation();
this.options.splice(index, 1);
}
}" class="draggable-checkboxes p-4 bg-gray-100 border border-gray-300 rounded-lg">
<template x-for="(option, index) in options" :key="index">
<div class="draggable-checkbox bg-white p-4 m b-4 border border-gray-300 rounded-lg shadow-sm cursor-move relative"
draggable="true" @dragstart="event.dataTransfer.setData('text/plain', index)" @dragover.prevent
@drop="drop($event)" :data-index="index">
<div class="flex items-center justify-between">
<div class="flex items-center">
<input type="checkbox" :value="option.value" :id="'option-' + index" x-model="option.checked"
class="mr-2 cursor-pointer">
<label :for="'option-' + index" x-text="option.label"
class="select-none cursor-pointer truncate"></label>
</div>
<button @click="deleteOption(index, $event)"
class="absolute top-2 right-2 text-gray-600 hover:text-red-600 focus:outline-none">
<svg class="filament-dropdown-list-item-icon mr-2 h-5 w-5 rtl:ml-2 rtl:mr-0 group-hover:text-white group-focus:text-white text-danger-500"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<template x-if="(index + 1) % 5 === 0">
<div class="w-full"></div>
</template>
</template>
</div>
<style>
.draggable-checkboxes {
display: flex;
flex-wrap: wrap;
}
.draggable-checkbox {
width: calc(20% - 10px);
margin-right: 10px;
cursor: grab;
position: relative;
}
.draggable-checkbox:active {
cursor: grabbing;
}
.draggable-checkbox button {
transition: color 0.2s;
}
.draggable-checkbox button:hover {
color: #e53e3e;
}
</style>
<script>
console.log('aaa');
document.addEventListener('alpine:init', () => {
Alpine.data('draggableCheckboxes', () => ({
options: @json($getOptions()),
init() {
this.$watch('options', (newOptions) => {
this.$wire.set('state', newOptions);
});
},
drop(event) {
event.preventDefault();
const draggedIndex = event.dataTransfer.getData('text/plain');
const draggedOption = this.options[draggedIndex];
this.options.splice(draggedIndex, 1);
this.options.splice(event.target.dataset.index, 0, draggedOption);
},
deleteOption(index, event) {
event.preventDefault();
event.stopPropagation();
this.options.splice(index, 1);
}
}));
});
</script>
DraggableCheckboxes::make('your_field')
->label('Custom Draggable Checkbox')->options($uniqueFormFields),
Please help 🙁