Skip to content
This repository was archived by the owner on Jun 27, 2024. It is now read-only.
This repository was archived by the owner on Jun 27, 2024. It is now read-only.

Input search range ( example for price min & max)  #100

Open
@BenOussama180

Description

@BenOussama180

is there any way to achieve a price range filter for example ? 2 inputs for min & max price

Activity

changed the title [-]Input search range ( example for prince min & max) [/-] [+]Input search range ( example for price min & max) [/+] on Oct 23, 2022
darkons

darkons commented on Oct 24, 2022

@darkons

That is not related to this package. You have to use Spatie Query Builder filters.
https://spatie.be/docs/laravel-query-builder/v5/features/filtering#content-scope-filters

Just create your range inputs and make a request to your controller with the filter:

const minPrice = ref()
const maxPrice = ref()

this.$inertia.get(route('your-table-controller-route'), {
  'fields[products]': 'id,name,price',
  'filter[price_range]': `${minPrice.value},${maxPrice.value}`,
})
BenOussama180

BenOussama180 commented on Oct 24, 2022

@BenOussama180
Author

@darkons is there a way to integrate them nicely inside the filters dropdown in the table component ?

BenOussama180

BenOussama180 commented on Oct 24, 2022

@BenOussama180
Author

@darkons i didnt really get the method u talked about can you please give me more details for backend & frontend ^^thank u

darkons

darkons commented on Oct 25, 2022

@darkons
class ProductIndexController
{
    public function __invoke()
    {
        $products = QueryBuilder::for(Product::class)
            ->defaultSort('name')
            ->allowedSorts(['name', 'price'])
            ->allowedFilters(['name', 'price', AllowedFilter::scope('price_between')])
            ->paginate()
            ->withQueryString();

        return Inertia::render('Products/Index', [
            'products' => $products,
        ])->table(function (InertiaTable $table) {
            $table
              ->defaultSort('name')
              ->column(key: 'name', searchable: true, sortable: true, canBeHidden: false)
              ->column(key: 'price', searchable: true, sortable: true)
              ->column(label: 'Actions');
    }
}
class Product extends Model 
{
    public function scopePriceBetween(Builder $query, $minPrice, $maxPrice): Builder
    {
        return $query->whereBetween('price', [$minPrice, $maxPrice]);
    }
}
<script setup>
import { Inertia } from '@inertiajs/inertia'
import { Table } from '@protonemedia/inertiajs-tables-laravel-query-builder'
import { ref } from 'vue'

defineProps({
  products: Object,
})

const minPrice = ref()
const maxPrice = ref()

const filterByPriceRange = () => {
  Inertia.get(route('your-product-index-route'), {
    'filter[price_between]': `${minPrice.value},${maxPrice.value}`,
  })
}
</script>

<template>
<div id="filters">
  <label>Min price</label>
  <input type="text" v-model="minPrice" />

  <label>Max price</label>
  <input type="text" v-model="maxPrice" />
    
  <button type="button" @click="filterByPriceRange">Filter by price range</button>
</div>

<Table :resource="products" />
</template>
BenOussama180

BenOussama180 commented on Oct 26, 2022

@BenOussama180
Author

@darkons thank you very much for explainiing the code works perfectly and it helped undrestood the process, the only thing is when i change the page ( in pagination table ) i lose the price filters , & when i input price between filters i lose old filters provided by table api, is there a way to merge them together ? ( im new to inertia )

darkons

darkons commented on Oct 26, 2022

@darkons

You must rebuild the current URL query string

const filterByPriceRange = () => {
  var queryParams = new URLSearchParams(window.location.search)
  queryParams.set('filter[price_between]', `${minPrice.value},${maxPrice.value}`)

  Inertia.get(route('your-product-index-route'), {
    queryParams.toString(),
  })
}
mbeckerle-xqueue

mbeckerle-xqueue commented on Jan 8, 2023

@mbeckerle-xqueue

With a few modifications to write back the parameters to my model values (in your case minPrice and maxPrice refs) it worked also for my usecase.

However, it looks not very integrated. Is there a nice way to integrate such custom filter forms into the tables search interface that is rendered when I set the field to searchable?

BenOussama180

BenOussama180 commented on Jan 8, 2023

@BenOussama180
Author

@mbeckerle-xqueue please let me know if you managed to do that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @darkons@mbeckerle-xqueue@BenOussama180

        Issue actions

          Input search range ( example for price min & max) · Issue #100 · protonemedia/inertiajs-tables-laravel-query-builder