Input Multi Select On Field Inside Same Table #461

BenOussama180 · 2022-06-02T11:38:23Z

BenOussama180
Jun 2, 2022

so i have a table of links with country field, inside country field there is full name country!
i do it like this :
Data Source : public function datasource(): ?Builder { return Link::query(); }

add Column : ->addColumn('country')

Addiing the filter : Column::add() ->title('COUNTRY') ->field('country') ->sortable() ->searchable() ->makeInputMultiSelect(Link::countrySelect(), 'country', 'country'),

Link::countrySelect() : public static function countrySelect() { return Self::whereNotNull('country')->select('country')->distinct('country')->get(); }

I cant Tell whats the probleme here, it does show all the countries available in the table with distinct, but when i select one country, all of them get selected and i get no results in my table as shown below :

Answered by luanfreitasdev

Dec 22, 2022

very strange indeed, but anyway I'll add support for tone and slim. For now I put it in bootstrap which works fine... then I'll try with tailwind

https://github.com/Power-Components/livewire-powergrid/pull/775/files

View full answer

MuhammadTanvir · 2022-11-21T11:16:27Z

MuhammadTanvir
Nov 21, 2022

Hi @BenOussama180, did you solve that issue? I have also faced the same problem

4 replies

BenOussama180 Nov 21, 2022
Author

Nope not yet .... i cant figure it out , im using single select for the moment but the multi select task is still on hold i need to figure it out asap
let me know if you did thanks

MuhammadTanvir Nov 21, 2022

okay, The multi select worked fine on the bootsrap theme, but it doesn't work on Tailwind

BenOussama180 Nov 21, 2022
Author

im waiting on the new DynamicFilter in V4 , it'll fix alot of these issues

MuhammadTanvir Nov 21, 2022

@BenOussama180 oh, that's good, but before that if you solve that let me know, thanks.
@luanfreitasdev, For now, do you have any suggestion/idea about this issue?

luanfreitasdev · 2022-12-22T17:33:41Z

luanfreitasdev
Dec 22, 2022
Maintainer

@BenOussama180 . Can you show the html that was generated?

I believe we're going to have to change the select to use tom select in bootstrap, so we wouldn't need to use bootstrap-select because it needs jquery.

Maybe we can use tom select in tailwind too to fix some bugs...

Powergrid.Demo.-.Filters.-.22.December.2022.mp4

1 reply

BenOussama180 Dec 22, 2022
Author

i will show it once i get home, slimselect is also a good option

BenOussama180 · 2022-12-22T18:29:29Z

BenOussama180
Dec 22, 2022
Author

@luanfreitasdev so this is veryyyy weird, i havent touched multi select after i updated powergrid to latest version (v3.5.13) now that i tried it it works perfectly haha i dont know how or why i didnt change any code of my select datasources etc anyway here is it :

HTML GENERATED ON MULTISELECT :

<div class="flex flex-col mb-2 md:w-1/2 lg:w-1/4">
                            <div wire:ignore.self="" x-data="pgMultiSelect({
        data: JSON.parse('[{\u0022value\u0022:{\u0022country\u0022:\u0022Germany\u0022,\u0022label\u0022:\u0022Germany\u0022}},{\u0022value\u0022:{\u0022country\u0022:\u0022Japan\u0022,\u0022label\u0022:\u0022Japan\u0022}},{\u0022value\u0022:{\u0022country\u0022:\u0022Maldives\u0022,\u0022label\u0022:\u0022Maldives\u0022}},{\u0022value\u0022:{\u0022country\u0022:\u0022Qatar\u0022,\u0022label\u0022:\u0022Qatar\u0022}},{\u0022value\u0022:{\u0022country\u0022:\u0022Togo\u0022,\u0022label\u0022:\u0022Togo\u0022}},{\u0022value\u0022:{\u0022country\u0022:\u0022Yugoslavia\u0022,\u0022label\u0022:\u0022Yugoslavia\u0022}}]'),
        value: 'country',
        text: 'label',
        tableName: 'default',
        dataField: 'country',
        selected: []     })">
    <div class="p-2 min-w-[5rem]" style="">
                    <label class="text-gray-700 dark:text-gray-300">Country</label>
        
        <div class="min-w-[5rem]" style="">
            <div class="flex flex-col items-center relative">
                <div x-on:click="show = true" class="w-full" style="min-width: 160px !important;">
                    <div class="my-1 border focus:bg-white focus:border-slate-500 border-slate-300 dark:border-slate-500 rounded flex">
                        <div class="flex flex-auto flex-wrap">
                            <div x-show="selected.length > 0" x-text="selected.length" class="text-sm text-slate-500 flex p-1 dark:text-slate-200 items-center justify-center" style="display: none;">0</div>
                            <template x-for="(option, index) in selected" :key="index">
                                <div class="flex justify-center items-center m-1 cursor-pointer inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-slate-200 text-slate-700 dark:bg-slate-600 dark:text-slate-900">
                                    <div class="pl-0 align-middle cursor-pointer hover:text-black hover:text-current dark:text-slate-300 text-left text-xs font-medium text-slate-700 tracking-wider" x-text="option.text"></div>

                                    <button type="button" x-on:click="remove(option.value)" class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-200 hover:text-slate-500 focus:outline-none focus:bg-slate-500 focus:text-slate-200 dark:hover:bg-slate-300 dark:hover:text-slate-500">
                                        <span class="sr-only"></span>
                                        <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                                            <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7"></path>
                                        </svg>
                                    </button>

                                </div>
                            </template>
                            <div x-show="selected.length === 0" class="flex-1">
                                <input readonly="" x-ref="multi_select" placeholder="" class="w-full block bg-white text-slate-700 py-2 text-sm px-3 leading-tight focus:outline-none dark:bg-slate-600 dark:text-slate-200 dark:placeholder-slate-200 dark:border-slate-500" x-bind:value="selectedValues()">
                            </div>
                        </div>
                        <div class="text-slate-300 w-8 py-1 pl-2 pr-1 border-l flex bg-white items-center border-slate-200
                                    dark:bg-slate-600 dark:text-slate-200 dark:placeholder-slate-200 dark:border-slate-500">

                            <button type="button" x-show="show" x-on:click="show = true" class="cursor-pointer w-6 h-6 text-slate-600 outline-none focus:outline-none dark:text-slate-200" style="display: none;">
                                <svg class="pointer-events-none w-4 h-4 text-slate-400 dark:text-slate-200 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg>
                            </button>
                            <button type="button" x-show="!show" @click="show = false" class="cursor-pointer w-6 h-6 text-slate-600 outline-none focus:outline-none dark:text-slate-200">
                                <svg class="pointer-events-none w-4 h-4 text-slate-400 dark:text-slate-200 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="w-full px-4">
                    <div x-show="show" x-transition.origin.top="" class="absolute rounded-lg overflow-hidden z-100 shadow-md top-100 border border-slate-300
                                bg-white z-50 w-full left-0 rounded max-h-select overflow-y-auto dark:bg-slate-700
                                dark:border-slate-500" x-on:click.outside="show = false" style="display: none;">
                        <div class="flex flex-col w-full">
                            <template x-for="(option,index) in options" :key="index">
                                <div>
                                    <div x-show="option.selected === false" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                                dark:hover:bg-slate-500 dark:hover:text-slate-300 dark:border-slate-500" x-on:click="select(option.value)">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current
                                                           text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-show="option.selected === true" x-on:click="remove(option.value)" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                               dark:hover:bg-slate-500 dark:bg-slate-600 dark:hover:text-slate-300 dark:border-slate-500">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 bg-slate-200 dark:bg-slate-600 dark:border-slate-500 border-transparent relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text"></div>
                                                <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                                                    <svg class="w-5 h-5 text-slate-500 dark:text-slate-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template><div>
                                    <div x-show="option.selected === false" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                                dark:hover:bg-slate-500 dark:hover:text-slate-300 dark:border-slate-500" x-on:click="select(option.value)">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current
                                                           text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Germany</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-show="option.selected === true" x-on:click="remove(option.value)" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                               dark:hover:bg-slate-500 dark:bg-slate-600 dark:hover:text-slate-300 dark:border-slate-500" style="display: none;">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 bg-slate-200 dark:bg-slate-600 dark:border-slate-500 border-transparent relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Germany</div>
                                                <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                                                    <svg class="w-5 h-5 text-slate-500 dark:text-slate-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><div>
                                    <div x-show="option.selected === false" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                                dark:hover:bg-slate-500 dark:hover:text-slate-300 dark:border-slate-500" x-on:click="select(option.value)">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current
                                                           text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Japan</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-show="option.selected === true" x-on:click="remove(option.value)" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                               dark:hover:bg-slate-500 dark:bg-slate-600 dark:hover:text-slate-300 dark:border-slate-500" style="display: none;">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 bg-slate-200 dark:bg-slate-600 dark:border-slate-500 border-transparent relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Japan</div>
                                                <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                                                    <svg class="w-5 h-5 text-slate-500 dark:text-slate-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><div>
                                    <div x-show="option.selected === false" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                                dark:hover:bg-slate-500 dark:hover:text-slate-300 dark:border-slate-500" x-on:click="select(option.value)">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current
                                                           text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Maldives</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-show="option.selected === true" x-on:click="remove(option.value)" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                               dark:hover:bg-slate-500 dark:bg-slate-600 dark:hover:text-slate-300 dark:border-slate-500" style="display: none;">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 bg-slate-200 dark:bg-slate-600 dark:border-slate-500 border-transparent relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Maldives</div>
                                                <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                                                    <svg class="w-5 h-5 text-slate-500 dark:text-slate-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><div>
                                    <div x-show="option.selected === false" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                                dark:hover:bg-slate-500 dark:hover:text-slate-300 dark:border-slate-500" x-on:click="select(option.value)">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current
                                                           text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Qatar</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-show="option.selected === true" x-on:click="remove(option.value)" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                               dark:hover:bg-slate-500 dark:bg-slate-600 dark:hover:text-slate-300 dark:border-slate-500" style="display: none;">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 bg-slate-200 dark:bg-slate-600 dark:border-slate-500 border-transparent relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Qatar</div>
                                                <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                                                    <svg class="w-5 h-5 text-slate-500 dark:text-slate-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><div>
                                    <div x-show="option.selected === false" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                                dark:hover:bg-slate-500 dark:hover:text-slate-300 dark:border-slate-500" x-on:click="select(option.value)">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current
                                                           text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Togo</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-show="option.selected === true" x-on:click="remove(option.value)" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                               dark:hover:bg-slate-500 dark:bg-slate-600 dark:hover:text-slate-300 dark:border-slate-500" style="display: none;">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 bg-slate-200 dark:bg-slate-600 dark:border-slate-500 border-transparent relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Togo</div>
                                                <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                                                    <svg class="w-5 h-5 text-slate-500 dark:text-slate-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><div>
                                    <div x-show="option.selected === false" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                                dark:hover:bg-slate-500 dark:hover:text-slate-300 dark:border-slate-500" x-on:click="select(option.value)">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current
                                                           text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Yugoslavia</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-show="option.selected === true" x-on:click="remove(option.value)" class="relative group cursor-pointer hover:bg-slate-50 w-full border-slate-100 rounded-t border-b
                                               dark:hover:bg-slate-500 dark:bg-slate-600 dark:hover:text-slate-300 dark:border-slate-500" style="display: none;">
                                        <div x-bind:class="option.selected ? 'border-slate-600' : ''" class="flex w-full items-center p-2 bg-slate-200 dark:bg-slate-600 dark:border-slate-500 border-transparent relative">
                                            <div class="w-full items-center flex">
                                                <div class="dark:text-slate-200 pl-0 align-middle cursor-pointer hover:text-black hover:text-current text-left text-xs font-medium text-slate-600 tracking-wider leading-6" x-model="option" x-text="option.text">Yugoslavia</div>
                                                <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                                                    <svg class="w-5 h-5 text-slate-500 dark:text-slate-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                        </div>

0 replies

luanfreitasdev · 2022-12-22T19:05:27Z

luanfreitasdev
Dec 22, 2022
Maintainer

very strange indeed, but anyway I'll add support for tone and slim. For now I put it in bootstrap which works fine... then I'll try with tailwind

https://github.com/Power-Components/livewire-powergrid/pull/775/files

2 replies

BenOussama180 Dec 22, 2022
Author

thanks alot, hope i could help but i have never contributed to open source projects x)

BenOussama180 Jan 9, 2023
Author

so i have noticied that when i perform a ->get() in my datasource , the multiselect filter does not work, when i dont while returning a Builder it does work , @luanfreitasdev

Uh oh!

Input Multi Select On Field Inside Same Table #461

Uh oh!

BenOussama180 Jun 2, 2022

Replies: 4 comments · 7 replies

Uh oh!

MuhammadTanvir Nov 21, 2022

Uh oh!

BenOussama180 Nov 21, 2022 Author

Uh oh!

MuhammadTanvir Nov 21, 2022

Uh oh!

BenOussama180 Nov 21, 2022 Author

Uh oh!

MuhammadTanvir Nov 21, 2022

Uh oh!

luanfreitasdev Dec 22, 2022 Maintainer

Uh oh!

BenOussama180 Dec 22, 2022 Author

Uh oh!

Uh oh!

BenOussama180 Dec 22, 2022 Author

Uh oh!

luanfreitasdev Dec 22, 2022 Maintainer

Uh oh!

BenOussama180 Dec 22, 2022 Author

Uh oh!

BenOussama180 Jan 9, 2023 Author

BenOussama180
Jun 2, 2022

Replies: 4 comments 7 replies

MuhammadTanvir
Nov 21, 2022

BenOussama180 Nov 21, 2022
Author

BenOussama180 Nov 21, 2022
Author

luanfreitasdev
Dec 22, 2022
Maintainer

BenOussama180 Dec 22, 2022
Author

BenOussama180
Dec 22, 2022
Author

luanfreitasdev
Dec 22, 2022
Maintainer

BenOussama180 Dec 22, 2022
Author

BenOussama180 Jan 9, 2023
Author