Closed GrassoIsmaele closed 4 months ago
robsontenorio
commented
5 months ago If you want 1 option per instance make sure to use single. By default it is multiple selection.
<x-mary-choices-offline .... searchable single />In these scenarios I really advise to try at first with native select or maryUI x-select to make sure it behaves as you expect, before jumping into x-choices.
Looping components with Livewire can be tricky.
GrassoIsmaele
commented
5 months ago Hi Rob, no i need to have multiple instance and store in the model as an array so:
inputs[0] needs to contain an array of ids under the key "brand_id", I know there's a typo on the variable, I'm planning to refactor it, so consider it as "brand_ids"
robsontenorio
commented
5 months ago Please, provide more context.
Like the setup of $brands and the loop around x-choices.
GrassoIsmaele
commented
5 months ago Sure, here's my render function:
public function render()
{
$places = Dropdown::where('classification', 'place')->get();
$roles = Dropdown::where('classification', 'role')->get();
$timeable_frameworks = Dropdown::where('classification', 'timeable_framework')->get();
$macro_processes = Dropdown::where('classification', 'macro_process')->get();
$brands = Dropdown::where('classification', 'brand')->get();
$periodicities = Dropdown::where('classification', 'periodicity')->get();
$time_measure_units = Dropdown::where('classification', 'time_measure_unit')->get();
$softwares = $time_measure_units = Dropdown::where('classification', 'software')->get();
$managers = User::all();
return view('livewire.wizard', [
'places' => $places,
'roles' => $roles,
'timeable_frameworks' => $timeable_frameworks,
'macro_processes' => $macro_processes,
'brands' => $brands,
'periodicities' => $periodicities,
'time_measure_units' => $time_measure_units,
'managers' => $managers,
'softwares' => $softwares,
'min_rows'=> env('MIN_ROW_RECORDS')
]
);And here is the rendered element in the DOM:
this is how i loop trough component:
@foreach ($inputs as $key => $value)
<tr>
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.brand_id" :options="$brands" option-label="description" searchable/>
</td>
</tr>
@endforeachSure, here's my render function:
public function render() { $places = Dropdown::where('classification', 'place')->get(); $roles = Dropdown::where('classification', 'role')->get(); $timeable_frameworks = Dropdown::where('classification', 'timeable_framework')->get(); $macro_processes = Dropdown::where('classification', 'macro_process')->get(); $brands = Dropdown::where('classification', 'brand')->get(); $periodicities = Dropdown::where('classification', 'periodicity')->get(); $time_measure_units = Dropdown::where('classification', 'time_measure_unit')->get(); $softwares = $time_measure_units = Dropdown::where('classification', 'software')->get(); $managers = User::all(); return view('livewire.wizard', [ 'places' => $places, 'roles' => $roles, 'timeable_frameworks' => $timeable_frameworks, 'macro_processes' => $macro_processes, 'brands' => $brands, 'periodicities' => $periodicities, 'time_measure_units' => $time_measure_units, 'managers' => $managers, 'softwares' => $softwares, 'min_rows'=> env('MIN_ROW_RECORDS') ] );And here is the rendered element in the DOM:
<div @click.outside="clear()" @keyup.esc="clear()" x-data="{ options: [{"id":3,"classification":"brand","code":"AWSOMECAR1","description":"AWSOMECAR1","created_at":null,"updated_at":null},{"id":5,"classification":"brand","code":"OLDCAR2","description":"OLDCAR2","created_at":null,"updated_at":null}], isSingle: false, isSearchable: true, isReadonly: false, isDisabled: false, isRequired: false, minChars: 0, noResults: false, search: '', init() { // Fix weird issue when navigating back document.addEventListener('livewire:navigating', () => { let elements = document.querySelectorAll('.mary-choices-element'); elements.forEach(el => el.remove()); }); }, get selectedOptions() { return this.isSingle ? this.options.filter(i => i.id == this.selection) : this.selection.map(i => this.options.filter(o => o.id == i)[0]) }, get isAllSelected() { return this.options.length == this.selection.length }, get isSelectionEmpty() { return this.isSingle ? this.selection == null : this.selection.length == 0 }, selectAll() { this.selection = this.options.map(i => i.id) }, clear() { this.focused = false; this.search = '' }, reset() { this.clear(); this.isSingle ? this.selection = null : this.selection = [] this.dispatchChangeEvent({ value: this.selection }) }, focus() { if (this.isReadonly || this.isDisabled) { return } this.focused = true this.$refs.searchInput.focus() }, isActive(id) { return this.isSingle ? this.selection == id : this.selection.includes(id) }, toggle(id) { if (this.isReadonly || this.isDisabled) { return } if (this.isSingle) { this.selection = id this.focused = false this.search = '' } else { this.selection.includes(id) ? this.selection = this.selection.filter(i => i != id) : this.selection.push(id) } this.dispatchChangeEvent({ value: this.selection }) this.$refs.searchInput.focus() }, lookup() { Array.from(this.$refs.choicesOptions.children).forEach(child => { if (!child.getAttribute('search-value').match(new RegExp(this.search, 'i'))){ child.classList.add('hidden') } else { child.classList.remove('hidden') } }) this.noResults = Array.from(this.$refs.choicesOptions.querySelectorAll('div > .hidden')).length == Array.from(this.$refs.choicesOptions.querySelectorAll('[search-value]')).length }, dispatchChangeEvent(detail) { this.$refs.searchInput.dispatchEvent(new CustomEvent('change-selection', { bubbles: true, detail })) } }"> <!-- STANDARD LABEL --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- PREPEND/APPEND CONTAINER --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- PREPEND --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- SELECTED OPTIONS + SEARCH INPUT --> <div @click="focus();" x-ref="container" class="select select-bordered select-primary w-full h-fit pr-16 pb-1 pt-1.5 inline-block cursor-pointer relative"> <!-- ICON --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- CLEAR ICON --> <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <svg @click="reset()" class="inline w-5 h-5 absolute top-1/2 right-8 -translate-y-1/2 cursor-pointer text-gray-400 hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path> </svg> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]--> <!-- SELECTED OPTIONS --> <span wire:key="selected-options-mary8f581964017b423790f8e38b6d016df4"> <!--[if BLOCK]><![endif]--> <template x-for="(option, index) in selectedOptions" :key="index"> <div class="mary-choices-element bg-primary/5 text-primary hover:bg-primary/10 dark:bg-primary/20 dark:hover:bg-primary/40 dark:text-inherit px-2 mr-2 mt-0.5 mb-1.5 last:mr-0 inline-block rounded cursor-pointer"> <!-- SELECTION SLOT --> <!--[if BLOCK]><![endif]--> <span x-text="option.description"></span> <!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <svg @click="toggle(option.id)" x-show="!isReadonly && !isDisabled && !isSingle" class="inline w-5 h-5 text-gray-500 hover:text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path> </svg> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> </template> <!--[if ENDBLOCK]><![endif]--> </span> <!-- INPUT SEARCH --> <input x-ref="searchInput" x-model="search" @keyup="lookup()" @input="focus()" :required="isRequired && isSelectionEmpty" :readonly="isReadonly || isDisabled || ! isSearchable" :class="(isReadonly || isDisabled || !isSearchable || !focused) && '!w-1'" class="outline-none mt-0.5 bg-transparent w-20"> </div> <!-- APPEND --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- END: APPEND/PREPEND CONTAINER --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- OPTIONS LIST --> <div x-show="focused" class="relative" wire:key="options-list-main-mary8f581964017b423790f8e38b6d016df4"> <div wire:key="options-list-mary8f581964017b423790f8e38b6d016df4" class="max-h-64 w-full absolute z-10 shadow-xl bg-base-100 border border-base-300 rounded-lg cursor-pointer overflow-y-auto" x-anchor.bottom-start="$refs.container" style="left: 0px; top: -156px; position: absolute;"> <!-- SELECT ALL --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- NO RESULTS --> <div x-show="noResults" wire:key="no-results-1691501012" class="p-3 decoration-wavy decoration-warning underline font-bold border border-l-4 border-l-warning border-b-base-200" style="display: none;"> No results found. </div> <div x-ref="choicesOptions"> <!--[if BLOCK]><![endif]--> <div id="option-mary8f581964017b423790f8e38b6d016df4-3" wire:key="option-3" @click="toggle(3)" :class="isActive(3) && 'border-l-4 border-l-primary'" search-value="AWSOMECAR1" class="border-l-4"> <!-- ITEM SLOT --> <!--[if BLOCK]><![endif]--> <div wire:key="mary36e8c9a0df32a2dc60a57bfc74638eca"> <div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50"> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- AVATAR --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- CONTENT --> <div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable"> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="py-3"> <div class="font-semibold truncate"> AWSOMECAR1 </div> <div class="text-gray-400 text-sm truncate"> </div> </div> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> <!-- ACTION --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> <!--[if BLOCK]><![endif]--> <hr class="border-base-300"> <!--[if ENDBLOCK]><![endif]--> </div> <!--[if ENDBLOCK]><![endif]--> <!-- SELECTION SLOT --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> <div id="option-mary8f581964017b423790f8e38b6d016df4-5" wire:key="option-5" @click="toggle(5)" :class="isActive(5) && 'border-l-4 border-l-primary'" search-value="OLDCAR2" class="border-l-4"> <!-- ITEM SLOT --> <!--[if BLOCK]><![endif]--> <div wire:key="maryc848e9def493a0e160ddf7d52004402c"> <div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50"> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- AVATAR --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- CONTENT --> <div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable"> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <div class="py-3"> <div class="font-semibold truncate"> OLDCAR2 </div> <div class="text-gray-400 text-sm truncate"> </div> </div> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> <!-- ACTION --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> <!--[if BLOCK]><![endif]--> <hr class="border-base-300"> <!--[if ENDBLOCK]><![endif]--> </div> <!--[if ENDBLOCK]><![endif]--> <!-- SELECTION SLOT --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div> <!--[if ENDBLOCK]><![endif]--> </div> </div> </div> <!-- ERROR --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!-- HINT --> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div>this is how i loop trough component:
@foreach ($inputs as $key => $value) <tr> <td class="border p-1 whitespace-nowrap"> <x-mary-choices-offline label="" wire:model="inputs.{{$key}}.brand_id" :options="$brands" option-label="description" searchable/> </td> </tr> @endforeach
Do you think that the loop could be the problem?
robsontenorio
commented
5 months ago This is a Livewire stuff: you need wire:key at the root element and at Livewire components.
GrassoIsmaele
commented
5 months ago Thank you for your support, tomorrow I will test that and if solved I will close this issue. Have a nice day!
GrassoIsmaele
commented
5 months ago Okay, just two new question, how do I customize the item list to not be in absolute so the don't go under the table? And can i filter my listed item based on other table value?ù (software is relkated to $brand_id)
GrassoIsmaele
commented
5 months ago Hi rob, I've tested the div with the :key
<td class="border p-1 whitespace-nowrap">
<div wire:key="{{$key}}">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.brand_id" :options="$brands" option-label="description" searchable/>
</div>
</td>
but it doesen't work.I need your help.
robsontenorio
commented
5 months ago As described on Livewire docs the wire:key must be present on root element of @foreach.
@foreach ($inputs as $key => $value)
<tr wire:key="xxx">
</tr>
@endforeach
`` wire:key="xxx"
thanks, it works. Please culd you help me with the other two things?
GrassoIsmaele
commented
5 months ago No, it seemed working but in the reality it works only for the first element that I'm loading as key for the root
GrassoIsmaele
commented
5 months ago Here is my code: What am I missing?
<div>
<form>
@csrf
<div class="grid grid-cols-1 font-bold text-3xl">{{ __('frontend.header') }}</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-2 my-3">
<div>
<x-mary-choices-offline :label="__('frontend.place')" wire:model="place_id" :options="$places" single option-label="description" searchable/>
</div>
<div>
<x-mary-choices-offline :label="__('frontend.role')" wire:model="role_id" :options="$roles" single option-label="description" searchable/>
</div>
<div>
<x-mary-choices-offline :label="__('frontend.timeable_framework')" wire:model="timeable_framework_id" :options="$timeable_frameworks" single option-label="description" searchable/>
</div>
<div >
<x-mary-choices-offline :label="__('frontend.manager_id')" wire:model="manager_id" :options="$managers" single option-label="description" searchable/>
</div>
<div>
<x-input-label for="name" :value="__('frontend.name')" />
<x-text-input id="name" class="block mt-1 w-full" type="text" wire:model="name"
:value="old('name')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('name')" title="name" />
</div>
<div>
<x-input-label for="surname" :value="__('frontend.surname')" />
<x-text-input id="surname" class="block mt-1 w-full" type="text" wire:model="surname"
:value="old('surname')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('surname')" title="surname" />
</div>
<div>
<x-input-label for="birth_date" :value="__('frontend.birth_date')" />
<x-text-input id="birth_date" class="block mt-1 w-full" type="date" wire:model="birth_date"
:value="old('birth_date')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('birth_date')" title="office" />
</div>
<div>
<x-input-label for="email" :value="__('frontend.email')" />
<x-text-input id="email" class="block mt-1 w-full" type="email" wire:model="email"
:value="old('email')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('email')" title="email" />
</div>
</div>
<div class="flex cursor-pointer items-center justify-between font-bold text-3xl">
<div>{{__('frontend.rows') }}</div>
</div>
<div>
<div>
<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
</div>
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<button type="button" class="inline-block px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700" wire:key="" wire:click="add()">Add</button>
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<div></div>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.macro_process')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.activity_description')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.brand')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.periodicity')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.time_measure_unit')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.time')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.activity_volumes')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.softwares')}}
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($inputs as $key => $value)
{{-- <div :key={{count($inputs).'-'.$key}}> --}}
<tr :key="count($inputs).'-'.$key">
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.macro_process_id" :options="$roles" single option-label="description" searchable/>
</td>
<td class="border p-1 whitespace-nowrap ">
<x-text-input id="activity_description" class="block mt-1 w-full"
type="text"
wire:model="inputs.{{$key}}.activity_description"
:value="old('inputs.{{$key}}.activity_description')" autofocus />
<div>@error('inputs.' . $key . '.activity_description')
<span class="text-red-500">{{ $message }}</span>
@enderror</div>
</td>
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline :key="count($inputs)" label="" wire:model.live="inputs.{{$key}}.brand_id" :options="$brands" option-label="description" searchable/>
</td>
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.periodicity_id" :options="$periodicities" single option-label="description" searchable/>
</td>
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.time_measure_unit_id" :options="$time_measure_units" single option-label="description" searchable/>
</td>
<td class="border p-1 whitespace-nowrap">
<x-text-input id="time" class="block mt-1 w-full" type="text"
wire:model="inputs.{{$key}}.time" :value="old('inputs.{{$key}}.time')"
step="0.01" min="0" autofocus />
<div>
@error('inputs.' . $key . '.time')
<span class="text-red-500">{{ $message }}</span>
@enderror
</div>
</td>
<td class="border p-1 whitespace-nowrap">
<x-text-input id="activity_volumes" class="block mt-1 w-full"
type="text" wire:model="inputs.{{$key}}.activity_volumes" wire:model="inputs.{{$key}}.activity_volumes"
:value="old('activity_volumes')" autofocus />
<div>
@error('inputs.' . $key . '.activity_volumes')
<span class="text-red-500">{{ $message }}</span>
@enderror
</div>
</td>
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.software_id" :options="$softwares" single option-label="description" searchable/>
</td>
</tr>
</div>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4">
<button id="btn-submit" type="submit" wire:click.prevent="store()"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ __('frontend.Submit') }}
</button>
</div>
</form>
</div>You have a lot of x-choices inside the loop.
Each of them must have a UNIQUE generated “wire:key”. This is a Livewire requirement.
GrassoIsmaele
commented
5 months ago Okay, I've removed all the extra fields and leaved only one: I don't know if it's me that I don't understand ore some bigger issues2, please could you help me? Thanks
<div>
<form>
@csrf
<div class="grid grid-cols-1 font-bold text-3xl">{{ __('frontend.header') }}</div>
{{-- <div class="grid grid-cols-1 md:grid-cols-4 gap-2 my-3">
<div>
<x-mary-choices-offline :label="__('frontend.place')" wire:model="place_id" :options="$places" single option-label="description" searchable/>
</div>
<div>
<x-mary-choices-offline :label="__('frontend.role')" wire:model="role_id" :options="$roles" single option-label="description" searchable/>
</div>
<div>
<x-mary-choices-offline :label="__('frontend.timeable_framework')" wire:model="timeable_framework_id" :options="$timeable_frameworks" single option-label="description" searchable/>
</div>
<div >
<x-mary-choices-offline :label="__('frontend.manager_id')" wire:model="manager_id" :options="$managers" single option-label="description" searchable/>
</div>
<div>
<x-input-label for="name" :value="__('frontend.name')" />
<x-text-input id="name" class="block mt-1 w-full" type="text" wire:model="name"
:value="old('name')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('name')" title="name" />
</div>
<div>
<x-input-label for="surname" :value="__('frontend.surname')" />
<x-text-input id="surname" class="block mt-1 w-full" type="text" wire:model="surname"
:value="old('surname')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('surname')" title="surname" />
</div>
<div>
<x-input-label for="birth_date" :value="__('frontend.birth_date')" />
<x-text-input id="birth_date" class="block mt-1 w-full" type="date" wire:model="birth_date"
:value="old('birth_date')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('birth_date')" title="office" />
</div>
<div>
<x-input-label for="email" :value="__('frontend.email')" />
<x-text-input id="email" class="block mt-1 w-full" type="email" wire:model="email"
:value="old('email')" autofocus />
<x-input-error class="mt-2" :messages="$errors->first('email')" title="email" />
</div>
</div> --}}
<div class="flex cursor-pointer items-center justify-between font-bold text-3xl">
<div>{{__('frontend.rows') }}</div>
</div>
<div>
<div>
<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
</div>
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<button type="button" class="inline-block px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700" wire:key="" wire:click="add()">Add</button>
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<div></div>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.macro_process')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.activity_description')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.brand')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.periodicity')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.time_measure_unit')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.time')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.activity_volumes')}}
</th>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.softwares')}}
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($inputs as $key => $value)
{{-- <div :key={{count($inputs).'-'.$key}}> --}}
<tr wire:key="{{count($inputs).'-'.$key}}">
{{-- <td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.macro_process_id" :options="$roles" single option-label="description" searchable/>
</td> --}}
{{-- <td class="border p-1 whitespace-nowrap ">
<x-text-input id="activity_description" class="block mt-1 w-full"
type="text"
wire:model="inputs.{{$key}}.activity_description"
:value="old('inputs.{{$key}}.activity_description')" autofocus />
<div>@error('inputs.' . $key . '.activity_description')
<span class="text-red-500">{{ $message }}</span>
@enderror</div>
</td> --}}
<td class="border p-1 whitespace-nowrap" wire:key="{{$key}}_brand" >
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.brand_id" :options="$brands" option-label="description" searchable/>
</td>
{{-- <td class="border p-1 whitespace-nowrap">
<div wire:key="'inputs.{{$key}}.periodicity_id'">
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.periodicity_id" :options="$periodicities" single option-label="description" searchable/>
</div>
</td>
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:key="'inputs.{{$key}}.time_measure_unit_id'" wire:model="inputs.{{$key}}.time_measure_unit_id" :options="$time_measure_units" single option-label="description" searchable/>
</td>
<td class="border p-1 whitespace-nowrap">
<x-text-input id="time" class="block mt-1 w-full" type="text"
wire:model="inputs.{{$key}}.time" :value="old('inputs.{{$key}}.time')"
step="0.01" min="0" autofocus />
<div>
@error('inputs.' . $key . '.time')
<span class="text-red-500">{{ $message }}</span>
@enderror
</div>
</td>
<td class="border p-1 whitespace-nowrap">
<x-text-input id="activity_volumes" class="block mt-1 w-full"
type="text" wire:model="inputs.{{$key}}.activity_volumes" wire:model="inputs.{{$key}}.activity_volumes"
:value="old('activity_volumes')" autofocus />
<div>
@error('inputs.' . $key . '.activity_volumes')
<span class="text-red-500">{{ $message }}</span>
@enderror
</div>
</td>
<td class="border p-1 whitespace-nowrap">
<x-mary-choices-offline label="" wire:key="'inputs.{{$key}}.software_id'" wire:model="inputs.{{$key}}.software_id" :options="$softwares" single option-label="description" searchable/>
</td> --}}
</tr>
</div>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4">
<button id="btn-submit" type="submit" wire:click.prevent="store()"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ __('frontend.Submit') }}
</button>
</div>
</form>
</div>Here is the rendered html
<tbody class="bg-white divide-y divide-gray-200">
<!--[if BLOCK]><![endif]-->
<tr wire:key="2-0">
<td class="border p-1 whitespace-nowrap" wire:key="0_brand">
<div x-data="{ focused: false, selection: window.Livewire.find('8sDy5AysYgXsx7sz7WQF').entangle('inputs.0.brand_id') }">
<div @click.outside="clear()" @keyup.esc="clear()" x-data="{
options: [{"id":111,"classification":"brand","code":null,"description":"Volkswagen","created_at":null,"updated_at":null},{"id":112,"classification":"brand","code":null,"description":"Hyundai","created_at":null,"updated_at":null},{"id":113,"classification":"brand","code":null,"description":"Ford","created_at":null,"updated_at":null},{"id":114,"classification":"brand","code":null,"description":"Land Rover","created_at":null,"updated_at":null},{"id":115,"classification":"brand","code":null,"description":"MG","created_at":null,"updated_at":null},{"id":116,"classification":"brand","code":null,"description":"Mazda","created_at":null,"updated_at":null},{"id":117,"classification":"brand","code":null,"description":"Jaguar","created_at":null,"updated_at":null},{"id":118,"classification":"brand","code":null,"description":"Piaggio","created_at":null,"updated_at":null},{"id":119,"classification":"brand","code":null,"description":"Vespa","created_at":null,"updated_at":null},{"id":120,"classification":"brand","code":null,"description":"Aprilia","created_at":null,"updated_at":null},{"id":121,"classification":"brand","code":null,"description":"Moto Guzzi","created_at":null,"updated_at":null},{"id":122,"classification":"brand","code":null,"description":"Scott","created_at":null,"updated_at":null},{"id":123,"classification":"brand","code":null,"description":"Thok - ebike","created_at":null,"updated_at":null}],
isSingle: false,
isSearchable: true,
isReadonly: false,
isDisabled: false,
isRequired: false,
minChars: 0,
noResults: false,
search: '',
init() {
// Fix weird issue when navigating back
document.addEventListener('livewire:navigating', () => {
let elements = document.querySelectorAll('.mary-choices-element');
elements.forEach(el => el.remove());
});
},
get selectedOptions() {
return this.isSingle
? this.options.filter(i => i.id == this.selection)
: this.selection.map(i => this.options.filter(o => o.id == i)[0])
},
get isAllSelected() {
return this.options.length == this.selection.length
},
get isSelectionEmpty() {
return this.isSingle
? this.selection == null
: this.selection.length == 0
},
selectAll() {
this.selection = this.options.map(i => i.id)
},
clear() {
this.focused = false;
this.search = ''
},
reset() {
this.clear();
this.isSingle
? this.selection = null
: this.selection = []
this.dispatchChangeEvent({ value: this.selection })
},
focus() {
if (this.isReadonly || this.isDisabled) {
return
}
this.focused = true
this.$refs.searchInput.focus()
},
isActive(id) {
return this.isSingle
? this.selection == id
: this.selection.includes(id)
},
toggle(id) {
if (this.isReadonly || this.isDisabled) {
return
}
if (this.isSingle) {
this.selection = id
this.focused = false
this.search = ''
} else {
this.selection.includes(id)
? this.selection = this.selection.filter(i => i != id)
: this.selection.push(id)
}
this.dispatchChangeEvent({ value: this.selection })
this.$refs.searchInput.focus()
},
lookup() {
Array.from(this.$refs.choicesOptions.children).forEach(child => {
if (!child.getAttribute('search-value').match(new RegExp(this.search, 'i'))){
child.classList.add('hidden')
} else {
child.classList.remove('hidden')
}
})
this.noResults = Array.from(this.$refs.choicesOptions.querySelectorAll('div > .hidden')).length ==
Array.from(this.$refs.choicesOptions.querySelectorAll('[search-value]')).length
},
dispatchChangeEvent(detail) {
this.$refs.searchInput.dispatchEvent(new CustomEvent('change-selection', { bubbles: true, detail }))
}
}">
<!-- STANDARD LABEL -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- PREPEND/APPEND CONTAINER -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- PREPEND -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- SELECTED OPTIONS + SEARCH INPUT -->
<div @click="focus();" x-ref="container" class="select select-bordered select-primary w-full h-fit pr-16 pb-1 pt-1.5 inline-block cursor-pointer relative">
<!-- ICON -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CLEAR ICON -->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<svg @click="reset()" class="inline w-5 h-5 absolute top-1/2 right-8 -translate-y-1/2 cursor-pointer text-gray-400 hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTED OPTIONS -->
<span wire:key="selected-options-mary4d6a19d14bf1f8934865fadaba9d3228">
<!--[if BLOCK]><![endif]--> <template x-for="(option, index) in selectedOptions" :key="index">
<div class="mary-choices-element bg-primary/5 text-primary hover:bg-primary/10 dark:bg-primary/20 dark:hover:bg-primary/40 dark:text-inherit px-2 mr-2 mt-0.5 mb-1.5 last:mr-0 inline-block rounded cursor-pointer">
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--> <span x-text="option.description"></span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<svg @click="toggle(option.id)" x-show="!isReadonly && !isDisabled && !isSingle" class="inline w-5 h-5 text-gray-500 hover:text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div>
</template>
<!--[if ENDBLOCK]><![endif]-->
</span>
<!-- INPUT SEARCH -->
<input x-ref="searchInput" x-model="search" @keyup="lookup()" @input="focus()" :required="isRequired && isSelectionEmpty" :readonly="isReadonly || isDisabled || ! isSearchable" :class="(isReadonly || isDisabled || !isSearchable || !focused) && '!w-1'" class="outline-none mt-0.5 bg-transparent w-20 !w-1">
</div>
<!-- APPEND -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- END: APPEND/PREPEND CONTAINER -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- OPTIONS LIST -->
<div x-show="focused" class="relative" wire:key="options-list-main-mary4d6a19d14bf1f8934865fadaba9d3228" style="display: none;">
<div wire:key="options-list-mary4d6a19d14bf1f8934865fadaba9d3228" class="max-h-64 w-full absolute z-10 shadow-xl bg-base-100 border border-base-300 rounded-lg cursor-pointer overflow-y-auto" x-anchor.bottom-start="$refs.container" style="left: 53px; top: 413.6px; position: absolute;">
<!-- SELECT ALL -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- NO RESULTS -->
<div x-show="noResults" wire:key="no-results-922273117" class="p-3 decoration-wavy decoration-warning underline font-bold border border-l-4 border-l-warning border-b-base-200" style="display: none;">
No results found.
</div>
<div x-ref="choicesOptions">
<!--[if BLOCK]><![endif]--> <div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-111" wire:key="option-111" @click="toggle(111)" :class="isActive(111) && 'border-l-4 border-l-primary'" search-value="Volkswagen" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary86c4883890a8a7a3d7263a8a365a6c54">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Volkswagen
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-112" wire:key="option-112" @click="toggle(112)" :class="isActive(112) && 'border-l-4 border-l-primary'" search-value="Hyundai" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary3a0d3bba5bfc0089e87dc015cebd0c3b">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Hyundai
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-113" wire:key="option-113" @click="toggle(113)" :class="isActive(113) && 'border-l-4 border-l-primary'" search-value="Ford" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary4c4f3dc237fd2068e6297403405466f7">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Ford
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-114" wire:key="option-114" @click="toggle(114)" :class="isActive(114) && 'border-l-4 border-l-primary'" search-value="Land Rover" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary8f2656ab216a781b4e96d92fb21dabfa">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Land Rover
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-115" wire:key="option-115" @click="toggle(115)" :class="isActive(115) && 'border-l-4 border-l-primary'" search-value="MG" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="maryf88fe0ccf7a1f44892fc314955ef53c0">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
MG
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-116" wire:key="option-116" @click="toggle(116)" :class="isActive(116) && 'border-l-4 border-l-primary'" search-value="Mazda" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary8daf02f02f3a6feec337db885eaa3b45">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Mazda
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-117" wire:key="option-117" @click="toggle(117)" :class="isActive(117) && 'border-l-4 border-l-primary'" search-value="Jaguar" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary435ba4347ada8f6da01966a4d2f82e43">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Jaguar
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-118" wire:key="option-118" @click="toggle(118)" :class="isActive(118) && 'border-l-4 border-l-primary'" search-value="Piaggio" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary1cde86fe503073d28d6c604537843a31">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Piaggio
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-119" wire:key="option-119" @click="toggle(119)" :class="isActive(119) && 'border-l-4 border-l-primary'" search-value="Vespa" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="marye8e26d58e4a3a5047d33b8137aa37446">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Vespa
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-120" wire:key="option-120" @click="toggle(120)" :class="isActive(120) && 'border-l-4 border-l-primary'" search-value="Aprilia" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary412ffc6164bee58989aadfc79a4ac71b">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Aprilia
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-121" wire:key="option-121" @click="toggle(121)" :class="isActive(121) && 'border-l-4 border-l-primary'" search-value="Moto Guzzi" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary651fced787bb600297273a3f6c035ab5">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Moto Guzzi
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-122" wire:key="option-122" @click="toggle(122)" :class="isActive(122) && 'border-l-4 border-l-primary'" search-value="Scott" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary812b6e4ec3da6d46ea8cb2af10cfe477">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Scott
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-123" wire:key="option-123" @click="toggle(123)" :class="isActive(123) && 'border-l-4 border-l-primary'" search-value="Thok - ebike" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary23c72803103a89e42dd4d13a8009ea5e">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Thok - ebike
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
<!-- ERROR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- HINT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</td>
</tr>
<tr wire:key="2-1">
<td class="border p-1 whitespace-nowrap" wire:key="1_brand">
<div x-data="{ focused: false, selection: window.Livewire.find('8sDy5AysYgXsx7sz7WQF').entangle('inputs.1.brand_id') }">
<div @click.outside="clear()" @keyup.esc="clear()" x-data="{
options: [{"id":111,"classification":"brand","code":null,"description":"Volkswagen","created_at":null,"updated_at":null},{"id":112,"classification":"brand","code":null,"description":"Hyundai","created_at":null,"updated_at":null},{"id":113,"classification":"brand","code":null,"description":"Ford","created_at":null,"updated_at":null},{"id":114,"classification":"brand","code":null,"description":"Land Rover","created_at":null,"updated_at":null},{"id":115,"classification":"brand","code":null,"description":"MG","created_at":null,"updated_at":null},{"id":116,"classification":"brand","code":null,"description":"Mazda","created_at":null,"updated_at":null},{"id":117,"classification":"brand","code":null,"description":"Jaguar","created_at":null,"updated_at":null},{"id":118,"classification":"brand","code":null,"description":"Piaggio","created_at":null,"updated_at":null},{"id":119,"classification":"brand","code":null,"description":"Vespa","created_at":null,"updated_at":null},{"id":120,"classification":"brand","code":null,"description":"Aprilia","created_at":null,"updated_at":null},{"id":121,"classification":"brand","code":null,"description":"Moto Guzzi","created_at":null,"updated_at":null},{"id":122,"classification":"brand","code":null,"description":"Scott","created_at":null,"updated_at":null},{"id":123,"classification":"brand","code":null,"description":"Thok - ebike","created_at":null,"updated_at":null}],
isSingle: false,
isSearchable: true,
isReadonly: false,
isDisabled: false,
isRequired: false,
minChars: 0,
noResults: false,
search: '',
init() {
// Fix weird issue when navigating back
document.addEventListener('livewire:navigating', () => {
let elements = document.querySelectorAll('.mary-choices-element');
elements.forEach(el => el.remove());
});
},
get selectedOptions() {
return this.isSingle
? this.options.filter(i => i.id == this.selection)
: this.selection.map(i => this.options.filter(o => o.id == i)[0])
},
get isAllSelected() {
return this.options.length == this.selection.length
},
get isSelectionEmpty() {
return this.isSingle
? this.selection == null
: this.selection.length == 0
},
selectAll() {
this.selection = this.options.map(i => i.id)
},
clear() {
this.focused = false;
this.search = ''
},
reset() {
this.clear();
this.isSingle
? this.selection = null
: this.selection = []
this.dispatchChangeEvent({ value: this.selection })
},
focus() {
if (this.isReadonly || this.isDisabled) {
return
}
this.focused = true
this.$refs.searchInput.focus()
},
isActive(id) {
return this.isSingle
? this.selection == id
: this.selection.includes(id)
},
toggle(id) {
if (this.isReadonly || this.isDisabled) {
return
}
if (this.isSingle) {
this.selection = id
this.focused = false
this.search = ''
} else {
this.selection.includes(id)
? this.selection = this.selection.filter(i => i != id)
: this.selection.push(id)
}
this.dispatchChangeEvent({ value: this.selection })
this.$refs.searchInput.focus()
},
lookup() {
Array.from(this.$refs.choicesOptions.children).forEach(child => {
if (!child.getAttribute('search-value').match(new RegExp(this.search, 'i'))){
child.classList.add('hidden')
} else {
child.classList.remove('hidden')
}
})
this.noResults = Array.from(this.$refs.choicesOptions.querySelectorAll('div > .hidden')).length ==
Array.from(this.$refs.choicesOptions.querySelectorAll('[search-value]')).length
},
dispatchChangeEvent(detail) {
this.$refs.searchInput.dispatchEvent(new CustomEvent('change-selection', { bubbles: true, detail }))
}
}">
<!-- STANDARD LABEL -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- PREPEND/APPEND CONTAINER -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- PREPEND -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- SELECTED OPTIONS + SEARCH INPUT -->
<div @click="focus();" x-ref="container" class="select select-bordered select-primary w-full h-fit pr-16 pb-1 pt-1.5 inline-block cursor-pointer relative">
<!-- ICON -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CLEAR ICON -->
<!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<svg @click="reset()" class="inline w-5 h-5 absolute top-1/2 right-8 -translate-y-1/2 cursor-pointer text-gray-400 hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTED OPTIONS -->
<span wire:key="selected-options-mary4d6a19d14bf1f8934865fadaba9d3228">
<!--[if BLOCK]><![endif]--> <template x-for="(option, index) in selectedOptions" :key="index">
<div class="mary-choices-element bg-primary/5 text-primary hover:bg-primary/10 dark:bg-primary/20 dark:hover:bg-primary/40 dark:text-inherit px-2 mr-2 mt-0.5 mb-1.5 last:mr-0 inline-block rounded cursor-pointer">
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--> <span x-text="option.description"></span>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<svg @click="toggle(option.id)" x-show="!isReadonly && !isDisabled && !isSingle" class="inline w-5 h-5 text-gray-500 hover:text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> </div>
</template>
<!--[if ENDBLOCK]><![endif]-->
</span>
<!-- INPUT SEARCH -->
<input x-ref="searchInput" x-model="search" @keyup="lookup()" @input="focus()" :required="isRequired && isSelectionEmpty" :readonly="isReadonly || isDisabled || ! isSearchable" :class="(isReadonly || isDisabled || !isSearchable || !focused) && '!w-1'" class="outline-none mt-0.5 bg-transparent w-20">
</div>
<!-- APPEND -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- END: APPEND/PREPEND CONTAINER -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- OPTIONS LIST -->
<div x-show="focused" class="relative" wire:key="options-list-main-mary4d6a19d14bf1f8934865fadaba9d3228">
<div wire:key="options-list-mary4d6a19d14bf1f8934865fadaba9d3228" class="max-h-64 w-full absolute z-10 shadow-xl bg-base-100 border border-base-300 rounded-lg cursor-pointer overflow-y-auto" x-anchor.bottom-start="$refs.container" style="left: 0.200001px; top: -311.2px; position: absolute;">
<!-- SELECT ALL -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- NO RESULTS -->
<div x-show="noResults" wire:key="no-results-477747707" class="p-3 decoration-wavy decoration-warning underline font-bold border border-l-4 border-l-warning border-b-base-200" style="display: none;">
No results found.
</div>
<div x-ref="choicesOptions">
<!--[if BLOCK]><![endif]--> <div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-111" wire:key="option-111" @click="toggle(111)" :class="isActive(111) && 'border-l-4 border-l-primary'" search-value="Volkswagen" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary86c4883890a8a7a3d7263a8a365a6c54">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Volkswagen
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-112" wire:key="option-112" @click="toggle(112)" :class="isActive(112) && 'border-l-4 border-l-primary'" search-value="Hyundai" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary3a0d3bba5bfc0089e87dc015cebd0c3b">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Hyundai
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-113" wire:key="option-113" @click="toggle(113)" :class="isActive(113) && 'border-l-4 border-l-primary'" search-value="Ford" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary4c4f3dc237fd2068e6297403405466f7">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Ford
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-114" wire:key="option-114" @click="toggle(114)" :class="isActive(114) && 'border-l-4 border-l-primary'" search-value="Land Rover" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary8f2656ab216a781b4e96d92fb21dabfa">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Land Rover
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-115" wire:key="option-115" @click="toggle(115)" :class="isActive(115) && 'border-l-4 border-l-primary'" search-value="MG" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="maryf88fe0ccf7a1f44892fc314955ef53c0">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
MG
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-116" wire:key="option-116" @click="toggle(116)" :class="isActive(116) && 'border-l-4 border-l-primary'" search-value="Mazda" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary8daf02f02f3a6feec337db885eaa3b45">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Mazda
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-117" wire:key="option-117" @click="toggle(117)" :class="isActive(117) && 'border-l-4 border-l-primary'" search-value="Jaguar" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary435ba4347ada8f6da01966a4d2f82e43">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Jaguar
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-118" wire:key="option-118" @click="toggle(118)" :class="isActive(118) && 'border-l-4 border-l-primary'" search-value="Piaggio" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary1cde86fe503073d28d6c604537843a31">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Piaggio
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-119" wire:key="option-119" @click="toggle(119)" :class="isActive(119) && 'border-l-4 border-l-primary'" search-value="Vespa" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="marye8e26d58e4a3a5047d33b8137aa37446">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Vespa
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-120" wire:key="option-120" @click="toggle(120)" :class="isActive(120) && 'border-l-4 border-l-primary'" search-value="Aprilia" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary412ffc6164bee58989aadfc79a4ac71b">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Aprilia
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-121" wire:key="option-121" @click="toggle(121)" :class="isActive(121) && 'border-l-4 border-l-primary'" search-value="Moto Guzzi" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary651fced787bb600297273a3f6c035ab5">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Moto Guzzi
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-122" wire:key="option-122" @click="toggle(122)" :class="isActive(122) && 'border-l-4 border-l-primary'" search-value="Scott" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary812b6e4ec3da6d46ea8cb2af10cfe477">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Scott
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div id="option-mary4d6a19d14bf1f8934865fadaba9d3228-123" wire:key="option-123" @click="toggle(123)" :class="isActive(123) && 'border-l-4 border-l-primary'" search-value="Thok - ebike" class="border-l-4">
<!-- ITEM SLOT -->
<!--[if BLOCK]><![endif]--> <div wire:key="mary23c72803103a89e42dd4d13a8009ea5e">
<div class="flex justify-start items-center gap-4 px-3 hover:bg-base-200/50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- AVATAR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- CONTENT -->
<div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="py-3">
<div class="font-semibold truncate">
Thok - ebike
</div>
<div class="text-gray-400 text-sm truncate">
</div>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- ACTION -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--> <hr class="border-base-300">
<!--[if ENDBLOCK]><![endif]-->
</div> <!--[if ENDBLOCK]><![endif]-->
<!-- SELECTION SLOT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
<!-- ERROR -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- HINT -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</td>
</tr>
<!--[if ENDBLOCK]><![endif]-->
</tbody>Plese note that the count value updates evry row that I add
robsontenorio
commented
5 months ago It is a bit hard to help you because there is too much “noise” code on your example. If you provide a minimal reproduction code I would be glad to help you.
GrassoIsmaele
commented
5 months ago Here's my cleaned code: Plase rote that the rows are added dynamically via Livewire
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Header;
use App\Models\Row;
use App\Models\Dropdown;
use App\Models\User;
class Wizard extends Component
{
public $place_id, $role_id, $name, $surname, $email, $birth_date, $timeable_framework_id, $manager_id;
// public $macro_process_id, $activity_description, $brand_id, $periodicity_id, $time_measure_unit_id, $time, $activity_volumes;
public $vals;
//public $updateMode = false;
public $inputs;
public $i = 1;
public function mount()
{
$this->fill([
'inputs' => collect([['macro_process_id' => '', 'activity_description' => '', 'brand_id' => '', 'periodicity_id' => '', 'time_measure_unit_id' => '', 'time' => '', 'activity_volumes' => '', 'software_id' => '']])
]);
}
public function initializeSelect2()
{
$this->dispatch('rowAdded');
}
/**
* Write code on Method
*
* @return response()
*/
public function add()
{
$this->dispatch('rowAdded');
$this->inputs->push(['macro_process_id' => '', 'activity_description' => '', 'brand_id' => '', 'periodicity_id' => '', 'time_measure_unit_id' => '', 'time' => '', 'activity_volumes' => '', 'software_id' => '']);
// $this->dispatch('$refresh');
}
/**
* Write code on Method
*
* @return response()
*/
public function remove($i)
{
unset($this->inputs[$i]);
}
public function render()
{
$places = Dropdown::where('classification', 'place')->get();
$roles = Dropdown::where('classification', 'role')->get();
$timeable_frameworks = Dropdown::where('classification', 'timeable_framework')->get();
$macro_processes = Dropdown::where('classification', 'macro_process')->get();
$brands = Dropdown::where('classification', 'brand')->get();
$periodicities = Dropdown::where('classification', 'periodicity')->get();
$time_measure_units = Dropdown::where('classification', 'time_measure_unit')->get();
$softwares = Dropdown::where('classification', 'software')->get();
$managers = User::all();
return view('livewire.wizard', [
'places' => $places,
'roles' => $roles,
'timeable_frameworks' => $timeable_frameworks,
'macro_processes' => $macro_processes,
'brands' => $brands,
'periodicities' => $periodicities,
'time_measure_units' => $time_measure_units,
'managers' => $managers,
'softwares' => $softwares,
'min_rows'=> env('MIN_ROW_RECORDS')
]
)->layout('app.blade.php');
}
public function store()
{
dd($this);
$validatedData = $this->validate([
'place_id' => 'required',
'role_id' => 'required',
'name' => 'required|string|max:255',
'surname' => 'required|string|max:255',
'email' => 'required|email|max:255|unique:users',
'birth_date' => 'required|date',
'timeable_framework_id' => 'required',
'manager_id' => 'required',
'inputs.*.macro_process_id' => 'required',
'inputs.*.activity_description' => 'required|string|max:255',
'inputs.*.brand_id' => 'required|array',
'inputs.*.brand_id.*' => 'exists:brands,id',
'inputs.*.periodicity_id' => 'required',
'inputs.*.time_measure_unit_id' => 'required',
'inputs.*.time' => 'required|numeric',
'inputs.*.activity_volumes' => 'required|numeric',
'inputs.*.software_id' => 'required|array',
'inputs.*.software_id.*' => 'exists:softwares,id',
]);
$newHeader = Hedaer::create($validatedData);
foreach ($validatedData['inputs'] as $input) {
$row = new Row($input);
$row->header()->associate($newHeader);
$row->save();
$row->brands()->sync($input['brand_id']);
$row->softwares()->sync($input['software_id']);
}
}
}
<div>
<form>
@csrf
<div class="grid grid-cols-1 font-bold text-3xl">{{ __('frontend.header') }}</div>
<div class="flex cursor-pointer items-center justify-between font-bold text-3xl">
<div>{{__('frontend.rows') }}</div>
</div>
<div>
<div>
<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
</div>
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<button type="button" class="inline-block px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700" wire:key="" wire:click="add()">Add</button>
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<div></div>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{__('frontend.brand')}}
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($inputs as $key => $value)
<tr wire:key="{{count($inputs).'-'.$key}}">
<td class="border p-1 whitespace-nowrap" wire:key="{{count($inputs)}}_{{$key}}_brand" >
<x-mary-choices-offline label="" wire:model="inputs.{{$key}}.brand_id" :options="$brands" option-label="description" searchable/>
</td>
</tr>
</div>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4">
<button id="btn-submit" type="submit" wire:click.prevent="store()"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ __('frontend.Submit') }}
</button>
</div>
</form>
</div>
Cc @roberto-proj
roberto-proj
commented
5 months ago Hello, dear @GrassoIsmaele.
When you use the choices component inside a loop and its wire:model is a nested array, you need to initialize all the possible positions of that array that you will use. I've made a few tests today and I realized that initializing each desired position with an empty array [] solves the problem.
Don't take it as a critic, but as an advice. Even the example you provided is a little bit hard to read and grasp all the desired outcomes you want for your program. I recommend you not only solving your problem with the choices options, but also refactoring your code in order to improve the readability and logic associated to it.
I've created a simple use case and hope you understand the situation and apply that use case to solve your particular problem.
Situation: Given some brands stored in the database, how can the user associate a color (also in the database) for each one of these brands?
<?php
use Livewire\Volt\Component;
use Illuminate\Support\Arr;
new class extends Component {
public array $selected_colors = [];
public function getBrands(): array
{
return [
['id' => 1, 'name' => 'nike'],
['id' => 2, 'name' => 'adidas'],
['id' => 3, 'name' => 'puma'],
];
}
public function getColors(): array
{
return [
['id' => 1, 'name' => 'red'],
['id' => 2, 'name' => 'green'],
['id' => 3, 'name' => 'blue'],
];
}
public function mount(): void
{
$brands = $this->getBrands();
foreach ($brands as $brand => $value) {
Arr::set($this->selected_colors, "{$value['id']}.value_id", []);
}
}
public function with(): array
{
return [
'brands' => $this->getBrands(),
'colors' => $this->getColors()
];
}
}; ?>
<div>
@foreach($brands as $brand => $value)
<div wire:key="brand-{{$value['id']}}">
<x-choices-offline
label="Pick the color you want for {{$value['name']}} input"
wire:model="selected_colors.{{$value['id']}}.value_id"
:options="$colors"
searchable/>
</div>
@endforeach
</div>As you can see, in the mount() method I initialized each position that I had to use in the array. I used arrays for the colors and brands data in order to make it easier for you to understand and apply to your problem, since you are also using arrays, but I highly recommend you to use Collections as much as you can.
robsontenorio
commented
4 months ago Thanks @roberto-proj .
Here is another point of view.
<?php
use App\Models\User;
use Livewire\Volt\Component;
new class extends Component {
// The trick is to provide the structure, ahead of time, to hold the selection.
// Of course, you can do it in a dynamic way.
// You can nest in any level you want, but you need to provide the structure.
public array $areas = [
'marketing' => [],
'sales' => [],
'development' => [],
];
public function mount(): void
{
}
public function with(): array
{
return [
'users' => User::take(5)->get(),
];
}
}; ?><div>
@foreach($areas as $key => $area)
<x-choices-offline wire:model.live="areas.{{ $key }}" :options="$users" wire:key="area-{{ $key }}" searchable />
@endforeach
@dump($areas)
</div>
maryUI version
1.26
daisyUI version
4.10.1
Livewire version
3.4
What browsers are affected?
Firefox, Chrome, Microsoft Edge
What happened?
✅ For sure you can paste screenshots.
❌ Please, don't paste code as screenshot. Paste as formatted markdown code.
PHP
HTML/Blade
Hi all, i have a problem when i tryng to select from a multiple choice. The console prints this error:
I've tried to solve the rror by googling it but nothing worked!
Regards.