Chaloman
afterStateUpdated() Not Triggering in a Custom Filament Field
Solved, change the implementation to, and now works.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.min.css" rel="stylesheet">
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
@php
$latitude = $getLatitude();
$longitude = $getLongitude();
$height = $getHeight() . "px";
$zoom = $getZoom();
@endphp
<div
x-data="{state: $wire.entangle('{{ $getStatePath() }}')}"
x-init="
const map = new ol.Map({
target: $refs.map,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([{{ $longitude }}, {{ $latitude }}]),
zoom: {{ $zoom }}
})
});
map.on('singleclick', (event) => {
const coords = ol.proj.toLonLat(event.coordinate);
const [lat, lng] = coords;
state = {lat, lng};
$wire.set('latitude', lat);
$wire.set('longitude', lng);
});
"
wire:ignore
>
<div x-ref="map"
class="w-full"
style="
height: {{ $height }};
min-height: 30vh;
z-index: 1 !important;
"
>
</div>
</div>
</x-dynamic-component>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.min.css" rel="stylesheet">
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
@php
$latitude = $getLatitude();
$longitude = $getLongitude();
$height = $getHeight() . "px";
$zoom = $getZoom();
@endphp
<div
x-data="{state: $wire.entangle('{{ $getStatePath() }}')}"
x-init="
const map = new ol.Map({
target: $refs.map,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([{{ $longitude }}, {{ $latitude }}]),
zoom: {{ $zoom }}
})
});
map.on('singleclick', (event) => {
const coords = ol.proj.toLonLat(event.coordinate);
const [lat, lng] = coords;
state = {lat, lng};
$wire.set('latitude', lat);
$wire.set('longitude', lng);
});
"
wire:ignore
>
<div x-ref="map"
class="w-full"
style="
height: {{ $height }};
min-height: 30vh;
z-index: 1 !important;
"
>
</div>
</div>
</x-dynamic-component>
5 replies
afterStateUpdated() Not Triggering in a Custom Filament Field
Here the complete template
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.min.css" rel="stylesheet">
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
@php
$latitude = $getLatitude();
$longitude = $getLongitude();
$height = $getHeight() . "px";
$zoom = $getZoom();
@endphp
<div
x-data="{
state: $wire.entangle('{{ $getStatePath() }}'),
init() {
this.map = new ol.Map({
target: this.$refs.map,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([{{ $longitude }}, {{ $latitude }}]),
zoom: {{ $zoom }}
})
});
this.map.on('singleclick', (event) => {
const coords = ol.proj.toLonLat(event.coordinate);
console.log(coords);
$wire.set('latitude', coords[1]);
$wire.set('longitude', coords[0]);
});
}
}"
x-init="init"
wire:ignore
>
<div x-ref="map"
class="w-full"
style="
height: {{ $height }};
min-height: 30vh;
z-index: 1 !important;
"
>
</div>
</div>
</x-dynamic-component>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.min.css" rel="stylesheet">
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
@php
$latitude = $getLatitude();
$longitude = $getLongitude();
$height = $getHeight() . "px";
$zoom = $getZoom();
@endphp
<div
x-data="{
state: $wire.entangle('{{ $getStatePath() }}'),
init() {
this.map = new ol.Map({
target: this.$refs.map,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([{{ $longitude }}, {{ $latitude }}]),
zoom: {{ $zoom }}
})
});
this.map.on('singleclick', (event) => {
const coords = ol.proj.toLonLat(event.coordinate);
console.log(coords);
$wire.set('latitude', coords[1]);
$wire.set('longitude', coords[0]);
});
}
}"
x-init="init"
wire:ignore
>
<div x-ref="map"
class="w-full"
style="
height: {{ $height }};
min-height: 30vh;
z-index: 1 !important;
"
>
</div>
</div>
</x-dynamic-component>
5 replies
Can i use in a form a list checkboxex to show or hide other list of checkboxes
As @awcodes suggested, I've changed the field names to prevent conflicts with the relationships and it seems to work better now. The last issue I noticed is that when I uncheck the "musico" role and set the instruments to null, it still retains the instruments upon saving. For some reason, the field value is not cleared when using
->when().
I've tried commenting out the ->when() part and indeed the values are correctly unchecked. It seems that something happens when using it in conjunction with ->when().
Section::make('Roles')->schema([
CheckboxList::make('all_roles')
->columnSpan('full')
->reactive()
->relationship('roles', 'name', function (Builder $query) {
if (! auth()->user()->hasRole('super_admin')) {
return $query->where('name', '<>', 'super_admin');
}
return $query;
})
->afterStateUpdated(function (Closure $set, Closure $get) {
$roles = $get('all_roles');
if ($roles !== null) {
$roleNames = Role::whereIn('id', $roles)->pluck('name')->toArray();
if (! in_array('musico', $roleNames)) {
$set('all_instruments', null);
}
} else {
$set('all_instruments', null);
}
})
->getOptionLabelFromRecordUsing(function ($record) {
return Str::of($record->name)->headline();
})
->columns(4),
]),
Section::make('Instrumentos')
->when(function (Closure $get): bool {
$roles = $get('all_roles');
if ($roles !== null) {
$roleNames = Role::whereIn('id', $roles)->pluck('name')->toArray();
return in_array('musico', $roleNames);
}
return false;
})
->schema([
CheckboxList::make('all_instruments')
->columnSpan('full')
->reactive()
->relationship('instruments', 'name')
->getOptionLabelFromRecordUsing(function ($record) {
return Str::of($record->name)->headline();
})
->columns(4),
]),
Section::make('Roles')->schema([
CheckboxList::make('all_roles')
->columnSpan('full')
->reactive()
->relationship('roles', 'name', function (Builder $query) {
if (! auth()->user()->hasRole('super_admin')) {
return $query->where('name', '<>', 'super_admin');
}
return $query;
})
->afterStateUpdated(function (Closure $set, Closure $get) {
$roles = $get('all_roles');
if ($roles !== null) {
$roleNames = Role::whereIn('id', $roles)->pluck('name')->toArray();
if (! in_array('musico', $roleNames)) {
$set('all_instruments', null);
}
} else {
$set('all_instruments', null);
}
})
->getOptionLabelFromRecordUsing(function ($record) {
return Str::of($record->name)->headline();
})
->columns(4),
]),
Section::make('Instrumentos')
->when(function (Closure $get): bool {
$roles = $get('all_roles');
if ($roles !== null) {
$roleNames = Role::whereIn('id', $roles)->pluck('name')->toArray();
return in_array('musico', $roleNames);
}
return false;
})
->schema([
CheckboxList::make('all_instruments')
->columnSpan('full')
->reactive()
->relationship('instruments', 'name')
->getOptionLabelFromRecordUsing(function ($record) {
return Str::of($record->name)->headline();
})
->columns(4),
]),
7 replies
Can i use in a form a list checkboxex to show or hide other list of checkboxes
User model, the roles come from the Spatie permissions package.
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable, HasRoles;
//....
public function scopeDirector($query)
{
return $query->role('director');
}
public function scopeMusician($query)
{
return $query->role('musico');
}
public function instruments(): BelongsToMany
{
return $this->belongsToMany(Instrument::class);
}
}
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable, HasRoles;
//....
public function scopeDirector($query)
{
return $query->role('director');
}
public function scopeMusician($query)
{
return $query->role('musico');
}
public function instruments(): BelongsToMany
{
return $this->belongsToMany(Instrument::class);
}
}
7 replies
Can i use in a form a list checkboxex to show or hide other list of checkboxes
Sure @pboivin
class Instrument extends Model
{
use HasFactory;
protected $fillable = ['name'];
public function users(): BelongsToMany
{
return $this->belongsToMany(User::class);
}
}
class Instrument extends Model
{
use HasFactory;
protected $fillable = ['name'];
public function users(): BelongsToMany
{
return $this->belongsToMany(User::class);
}
}
7 replies