Dynamic wire:model is not working.
<?php
namespace AppLivewirePagesProductsV2Modals;
use LivewireComponent;
use LivewireAttributesOn;
use AppModelsVirtualFolder;
use JantinnerezoLivewireAlertLivewireAlert;
class CreateVirtualFolderModal extends Component
{
use LivewireAlert;
public bool $triggertCreateVirtualFolderModal = false;
public $virtualFolderToCreate = [
'name' => null,
'description' => null,
'parent_id' => null,
];
public $existingVirtualFolders;
public $allVirtualFolders;
public function mount()
{
$this->reloadFolders();
}
#[On('reloadFolders')]
public function reloadFolders()
{
$this->allVirtualFolders = VirtualFolder::all();
$this->existingVirtualFolders = $this->allVirtualFolders;
}
#[On('openCreateVirtualProductModal')]
public function openCreateVirtualFolderModal($virtualFolderIdToEdit = null)
{
if($virtualFolderIdToEdit){
$virtualFolderToEdit = $this->allVirtualFolders->find($virtualFolderIdToEdit);
$this->existingVirtualFolders = $this->getFoldersWithoutSelfAndChildren($virtualFolderToEdit);
$this->virtualFolderToCreate = $virtualFolderToEdit->toArray();
$this->triggertCreateVirtualFolderModal = true;
return;
}
$this->existingVirtualFolders = $this->allVirtualFolders;
$this->virtualFolderToCreate = VirtualFolder::CREATE_FOLDER_SKELETON;
$this->triggertCreateVirtualFolderModal = true;
}
public function getFoldersWithoutSelfAndChildren($folder)
{
$foldersToExclude = $folder->getAllChildIds();
array_push($foldersToExclude, $folder->id);
return $this->allVirtualFolders->filter(function($folder) use ($foldersToExclude){
return !in_array($folder->id, $foldersToExclude);
});
}
public function rules()
{
return [
'virtualFolderToCreate.name' => 'required|string',
'virtualFolderToCreate.description' => 'nullable|string',
'virtualFolderToCreate.parent_id' => 'nullable',
];
}
public function messages()
{
return [
'virtualFolderToCreate.name.required' => 'The name field is required.',
'virtualFolderToCreate.name.string' => 'The name field must be a string.',
'virtualFolderToCreate.parent_id.exists' => 'The parent folder does not exist.',
];
}
public function createVirtualProduct()
{
$validatedVirtualProduct = $this->validate();
if( $validatedVirtualProduct['virtualFolderToCreate']['parent_id'] == '' ){
$validatedVirtualProduct['virtualFolderToCreate']['parent_id'] = null;
}
// ToDo remove if needed
$validatedVirtualProduct['virtualFolderToCreate']['entity_type'] = '';
$validatedVirtualProduct['virtualFolderToCreate']['entity_id'] = 0;
if( isset($this->virtualFolderToCreate['id']) ){
$virtualFolderToEdit = VirtualFolder::find($this->virtualFolderToCreate['id']);
if( $this->isParentFolderChanged($virtualFolderToEdit, $validatedVirtualProduct)){
$this->reOrderDetachedVirtualFolder($virtualFolderToEdit);
$validatedVirtualProduct['virtualFolderToCreate']['order'] = $this->getOrderValueWhileAttaching($validatedVirtualProduct);
}
$virtualFolderToEdit->update($validatedVirtualProduct['virtualFolderToCreate']);
$this->alert('success', 'Virtual Folder updated successfully!',[
'position' => 'top-right',
]);
} else {
$validatedVirtualProduct['virtualFolderToCreate']['order'] = $this->getOrderValueWhileAttaching($validatedVirtualProduct);
if($validatedVirtualProduct['virtualFolderToCreate']['parent_id']){
$parentFolder = VirtualFolder::find($validatedVirtualProduct['virtualFolderToCreate']['parent_id']);
throw_if(!$parentFolder, 'The parent folder does not exist.');
if ($parentFolder->products()->count()) {
$this->alert('error', 'Virtual folder has products, please remove all products from it and then create a folder inside.', [
'position' => 'center',
'showConfirmButton' => true,
'toast' => false,
]);
return;
}
}
$newlyCreatedVirtualFolder = VirtualFolder::create($validatedVirtualProduct['virtualFolderToCreate']);
$this->alert('success', 'Virtual Folder created successfully!',[
'position' => 'top-right',
]);
}
if(isset($newlyCreatedVirtualFolder)){
$this->dispatch('reloadFolders', $newlyCreatedVirtualFolder->id);
}else{
$this->dispatch('reloadFolders');
}
$this->triggertCreateVirtualFolderModal = false;
$this->reset('virtualFolderToCreate');
}
public function reOrderDetachedVirtualFolder($virtualFolderToEdit){
$parentFolder = VirtualFolder::find($virtualFolderToEdit->parent_id);
$parentFolder->children()->where('order', '>', $virtualFolderToEdit->order)->decrement('order');
}
public function isParentFolderChanged($virtualFolderToEdit, $validatedVirtualProduct){
return $virtualFolderToEdit->parent_id != $validatedVirtualProduct['virtualFolderToCreate']['parent_id'];
}
public function getOrderValueWhileAttaching($validatedVirtualProduct)
{
if($validatedVirtualProduct['virtualFolderToCreate']['parent_id']){
$parentFolder = VirtualFolder::with('children')->find($validatedVirtualProduct['virtualFolderToCreate']['parent_id']);
throw_if(!$parentFolder, 'The parent folder does not exist.');
$lastChildOfTheFolder = $parentFolder->children()->max('order');
if($lastChildOfTheFolder){
return $lastChildOfTheFolder + 1;
}else{
return 1;
}
}
$lastChildOfTheFolder = VirtualFolder::whereNull('parent_id')->max('order');
if($lastChildOfTheFolder){
return $lastChildOfTheFolder + 1;
}else{
return 1;
}
}
public function render()
{
return view('livewire.pages.products.v2.modals.create-virtual-folder-modal');
}
}
<div x-data="{ offCanvasModal: @entangle('triggertCreateVirtualFolderModal') }" x-cloak @keydown.window.escape="offCanvasModal = false" x-show="offCanvasModal" class="relative z-10" aria-labelledby="slide-over-title" x-ref="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
<div class="pointer-events-auto w-screen max-w-sm" x-show="offCanvasModal" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" x-description="Slide-over panel, show/hide based on slide-over state."
@click.away="offCanvasModal = false">
<form wire:submit.prevent='createVirtualProduct' class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl">
<div class="h-0 flex-1 overflow-y-auto">
<div class="bg-gray-900 px-4 py-6 sm:px-6">
<div class="flex items-center justify-between">
<h2 class="text-base font-semibold leading-6 text-white" id="slide-over-title">
Create Virtual Folder
</h2>
<div class="ml-3 flex h-7 items-center">
<button type="button" class="relative rounded-md bg-gray-700 text-gray-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white" @click="offCanvasModal = false">
<span class="absolute -inset-2.5"></span>
<span class="sr-only">Close panel</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex flex-1 flex-col justify-between">
<div class="divide-y divide-gray-200 px-4 sm:px-6">
<div class="space-y-6 pb-5 pt-6">
<div>
<label for="virtual-folder-parent" class="block text-sm font-medium leading-6 text-gray-900">Parent folder</label>
<select wire:key='existingVirtualFolderParent_id' id="existingVirtualFolderParent_id" wire:model.live='virtualFolderToCreate.parent_id' id="virtual-folder-parent" name="virtual-folder-parent" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
<option wire:key='existingVirtualFolder' value="">(No Parent)</option>
@foreach ($existingVirtualFolders as $existingVirtualFolder)
<option wire:key='existingVirtualFolder-{{ $existingVirtualFolder->id }}' value="{{ $existingVirtualFolder->id }}">{{ $existingVirtualFolder->getPath() }}</option>
@endforeach
</select>
@error('virtualFolderToCreate.parent_id')
<span class="text-red-500 text-xs">{{ $message }}</span>
@enderror
</div>
<div>
<label for="virtual-folder-description" class="block text-sm font-medium leading-6 text-gray-900">Folder name</label>
<div class="mt-2">
<input wire:model='virtualFolderToCreate.name' type="text" name="virtual-folder-description" id="virtual-folder-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
@error('virtualFolderToCreate.name')
<span class="text-red-500 text-xs">{{ $message }}</span>
@enderror
</div>
</div>
<div>
<label for="virtual-folder-description" class="block text-sm font-medium leading-6 text-gray-900">Folder description</label>
<div class="mt-2">
<textarea wire:model='virtualFolderToCreate.description' type="text" name="virtual-folder-description" id="virtual-folder-description" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
@error('virtualFolderToCreate.description')
<span class="text-red-500 text-xs">{{ $message }}</span>
@enderror
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-shrink-0 justify-end px-4 py-4">
<button type="button" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-indigo-900 shadow-sm ring-1 ring-inset ring-indigo-300 hover:bg-indigo-50" @click="offCanvasModal = false">
Cancel
</button>
<button class="ml-4 inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
@if ( isset($virtualFolderToCreate['id']) )
Update
@else
Create
@endif
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
This is my component. When I click on parent and click edit. It says no parent. It’ perfect. But when I click on a sub folder (specifically after I click edit on parent then click edit on child), it says no parent. whereas it has parent. The debug tools says there is parent_id and the list also have the value like, [1,2,3,4,5,6], selected 5. But says no parent, The name should say the id 5. The problem is on the UI level I guess. Have wire:key all over. It works after refresh tho.
If you want a video.
https://drive.google.com/file/d/1nmMtBPSHGJEOzYxf6rkrKSvMFBJggi2M/view?usp=sharing
The problem I suppose is with,
if($virtualFolderIdToEdit){
$virtualFolderToEdit = $this->allVirtualFolders->find($virtualFolderIdToEdit);
$this->existingVirtualFolders = $this->getFoldersWithoutSelfAndChildren($virtualFolderToEdit);
$this->virtualFolderToCreate = $virtualFolderToEdit->toArray();
$this->triggertCreateVirtualFolderModal = true;
return;
}
this part
Tested with ray, also livewire debug tools. Also added wire:key all over