Skip to content

Commit

Permalink
Frontend kind of working
Browse files Browse the repository at this point in the history
  • Loading branch information
@afonic
afonic committed Nov 4, 2024
1 parent 61f685e commit e0094f2
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 87 deletions.
101 changes: 41 additions & 60 deletions resources/views/livewire/filters/lf-dual-range.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,54 @@
<div>
<div
x-data="dualRange({
initialMin: @entangle('selectedMin'),
initialMax: @entangle('selectedMax'),
step: {{ $step }},
x-data="{
selectedMin: $wire.selectedMin,
selectedMax: $wire.selectedMax,
min: {{ $min }},
max: {{ $max }},
step: {{ $step }},
format: '{{ $format }}',
minRange: {{ $minRange }}
})"
minRange: {{ $minRange }},
init() {
const slider = $refs.slider;
window.noUiSlider.create(slider, {
start: [this.selectedMin, this.selectedMax],
connect: true,
step: this.step,
margin: this.minRange,
range: {
'min': this.min,
'max': this.max
},
format: {
to: (value) => {
return this.format === 'date'
? new Date(value).getFullYear()
: Math.round(value);
},
from: (value) => {
return this.format === 'date'
? new Date(value, 0).getTime()
: parseFloat(value);
}
}
});
slider.noUiSlider.on('set', (values) => {
$wire.set('selectedMin', values[0]);
$wire.set('selectedMax', values[1]);
});
}
}"

class="w-full my-8"
>
<div class="relative">
<div x-ref="slider" class="w-[93%] mx-auto"></div>
<div wire:ignore x-ref="slider" class="w-[93%] mx-auto"></div>
<div class="flex justify-center mt-3">
<span class="font-bold" x-text="min"></span>
<span class="font-bold" x-text="$wire.selectedMin"></span>
<span class="mx-2">{{ __('statamic-livewire-filters::ui.to') }}</span>
<span class="font-bold" x-text="max"></span>
<span class="font-bold" x-text="$wire.selectedMax"></span>
</div>
</div>
</div>
</div>

@script
<script>
Alpine.data('dualRange', ({ initialMin, initialMax, step, min, max, format, minRange }) => ({
min: initialMin,
max: initialMax,
init() {
const slider = this.$refs.slider;
console.log(window);
window.noUiSlider.create(slider, {
start: [this.min, this.max],
connect: true,
step: step,
range: {
'min': min,
'max': max
},
format: {
to: (value) => {
return format === 'date'
? new Date(value).getFullYear()
: Math.round(value);
},
from: (value) => {
return format === 'date'
? new Date(value, 0).getTime()
: parseFloat(value);
}
}
});
slider.noUiSlider.on('update', (values) => {
this.min = values[0];
this.max = values[1];
});
slider.noUiSlider.on('slide', (values, handle) => {
if (handle === 0 && (values[1] - values[0]) < minRange) {
slider.noUiSlider.set([values[1] - minRange, values[1]]);
}
if (handle === 1 && (values[1] - values[0]) < minRange) {
slider.noUiSlider.set([values[0], values[0] + minRange]);
}
});
}
}))
</script>
@endscript
</div>
11 changes: 9 additions & 2 deletions src/Http/Livewire/LfDualRangeFilter.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

namespace Reach\StatamicLivewireFilters\Http\Livewire;

use Livewire\Attributes\Locked;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;
Expand All @@ -10,22 +11,28 @@ class LfDualRangeFilter extends Component
{
use Traits\IsLivewireFilter;

#[Locked]
public $view = 'lf-dual-range';

#[Validate('required')]
public $selectedMin;

#[Validate('required')]
public $selectedMax;

#[Validate('required')]
#[Locked]
public $min;

#[Validate('required')]
#[Locked]
public $max;

#[Locked]
public $step = 1;

#[Locked]
public $minRange = 1;

#[Locked]
public $format = 'number';

public function mount($defaultMin = null, $defaultMax = null)
Expand Down
2 changes: 1 addition & 1 deletion src/Http/Livewire/Traits/HandleParams.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ protected function handleDualRangeCondition($field, $payload, $command, $modifie
$maxModifier = 'lte';

// If the modifier is set, we need to extract the min and max modifiers
if ($modifier !== null) {
if ($modifier !== 'any') {
[$minModifier, $maxModifier] = explode('|', $modifier);
}

Expand Down
46 changes: 22 additions & 24 deletions tests/Feature/LfDualRangeFilterTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,30 +113,28 @@ public function it_throws_a_blueprint_not_found_exception_if_the_blueprint_doesn
]);
}

// #[Test]
// public function it_enforces_minimum_range_between_handles()
// {
// $component = Livewire::test(LfDualRangeFilter::class, [
// 'field' => 'cabins',
// 'blueprint' => 'yachts.yachts',
// 'condition' => 'between',
// 'min' => 2,
// 'max' => 10,
// 'defaultMin' => 4,
// 'defaultMax' => 8,
// 'minRange' => 2,
// ]);
#[Test]
public function it_enforces_minimum_range_between_handles()
{
$component = Livewire::test(LfDualRangeFilter::class, [
'field' => 'cabins',
'blueprint' => 'yachts.yachts',
'condition' => 'dual-range',
'min' => 2,
'max' => 8,
'minRange' => 2,
]);

// // Try to set min too close to max
// $component->set('selectedMin', 7)
// ->assertSet('selectedMin', 6) // Should be forced to max - minRange
// ->assertSet('selectedMax', 8);
// Try to set min too close to max
$component->set('selectedMin', 7)
->assertSet('selectedMin', 6) // Should be forced to max - minRange
->assertSet('selectedMax', 8);

// // Try to set max too close to min
// $component->set('selectedMax', 5)
// ->assertSet('selectedMin', 4)
// ->assertSet('selectedMax', 6); // Should be forced to min + minRange
// }
// Try to set max too close to min
$component->set('selectedMax', 7)
->assertSet('selectedMin', 6)
->assertSet('selectedMax', 8); // Should be forced to min + minRange
}

#[Test]
public function it_dispatches_filter_updated_event_when_values_change()
Expand Down Expand Up @@ -167,7 +165,7 @@ public function collection_component_handles_dual_range_filter_events()
condition: 'dual-range',
payload: ['min' => 5, 'max' => 10],
command: 'replace',
modifier: null,
modifier: 'any',
)
->assertSet('params', [
'cabins:gte' => 5,
Expand All @@ -178,7 +176,7 @@ public function collection_component_handles_dual_range_filter_events()
condition: 'dual-range',
payload: ['min' => 5, 'max' => 8],
command: 'replace',
modifier: null,
modifier: 'any',
)
->assertSet('params', [
'cabins:gte' => 5,
Expand Down

0 comments on commit e0094f2

Please sign in to comment.