Selamlar,
Son hali ile bir yere kadar geldim. Ama kaynak seçimi sırasında Datatable'in tekrardan çizilmesi durumunu yapamadım. Fikir veya yol gösterebilecek var mıdır 🙂
class ParentProduct extends Component
{
public int $ntegrationID;
public array $integrations;
public array $targetPlatforms;
public array $sourcePlatforms;
public array $targetSourcePlatforms;
public ?string $component = null;
public string $wireKey = '';
public string $sourcePlatform = '';
public ?string $sourcePlatformLogo = null;
public string $targetPlatform = '';
public ?string $targetPlatformLogo = null;
protected $queryString = ['sourcePlatform', 'targetPlatform'];
protected $listeners = ['sourcePlatform', 'targetPlatform'];
public function sourcePlatform($sourcePlatform, $id)
{
$this->sourcePlatform = $sourcePlatform;
$this->ntegrationID = $id;
$this->emit('sourcePlatformUpdated', $sourcePlatform, $id);
}
public function targetPlatform($targetPlatform)
{
$this->targetPlatform = $targetPlatform;
$this->targetSourcePlatforms = $this->sourcePlatforms[$this->targetPlatform];
$this->wireKey = $targetPlatform;
}
public function render(): Factory|View|Application
{
$targetPlatforms = [];
$sourcePlatforms = [];
foreach ($this->integrations as $key => $integration) {
if ($key != IntegrationInfo::addProduct) {
Arr::pull($this->integrations, $key);
}
}
foreach ($this->integrations[IntegrationInfo::addProduct] as $integration) {
$targetPlatforms[$integration['targetIntegrationName']] = [
'id' => $integration['id'],
'name' => $integration['targetIntegrationName'],
'folderName' => $integration['folderName'],
'logo' => $integration['targetIntegrationLogo'],
];
$sourcePlatforms[$integration['targetIntegrationName']][$integration['sourceIntegrationName']] = [
'id' => $integration['id'],
'name' => $integration['sourceIntegrationName'],
'logo' => $integration['sourceIntegrationLogo'],
];
}
$this->targetPlatforms = $targetPlatforms;
if (!empty($this->targetPlatform) && array_key_exists($this->targetPlatform, $targetPlatforms)) {
$selectPlatformName = $this->targetPlatform;
} else {
$selectPlatformName = Arr::first($targetPlatforms)['name'];
}
$this->sourcePlatforms = $sourcePlatforms;
$this->targetSourcePlatforms = $sourcePlatforms[$selectPlatformName];
$this->targetPlatform = $targetPlatforms[$selectPlatformName]['name'];
$this->targetPlatformLogo = $targetPlatforms[$selectPlatformName]['logo'];
if (!empty($this->sourcePlatform) && array_key_exists($this->sourcePlatform, $sourcePlatforms[$selectPlatformName])) {
$this->sourcePlatform = $sourcePlatforms[$selectPlatformName][$this->sourcePlatform]['name'];
$this->sourcePlatformLogo = $sourcePlatforms[$selectPlatformName][$this->sourcePlatform]['logo'];
} else {
$this->sourcePlatform = Arr::first($sourcePlatforms[$selectPlatformName])['name'];
$this->sourcePlatformLogo = Arr::first($sourcePlatforms[$selectPlatformName])['logo'];
}
$this->component = 'lists.' . $targetPlatforms[$selectPlatformName]['folderName'] . '.product';
$this->ntegrationID = $sourcePlatforms[$selectPlatformName][$this->sourcePlatform]['id'];
$this->wireKey = $this->targetPlatform;
return view('livewire.lists.product');
}
}
class ChildProduct extends Component
{
public int $ntegrationID;
protected string $sourcePlatform;
protected $listeners = ['sourcePlatformUpdated'];
public function sourcePlatformUpdated($sourcePlatform, $id)
{
$this->sourcePlatform = $sourcePlatform;
$this->ntegrationID = $id;
}
public function render(): Factory|View|Application
{
return view('livewire.lists.integration1.product')->with([
'ntegrationID' => $this->ntegrationID
]);
}
}
parent product blade:
<div>
<div class="page-head flex-head">
<h3><span class="modul-name">Ürün Entegrasyonu</span></h3>
<a href="{{route("admin",["m" => "help","md" => "product-help"])}}" class="help"><i class="ico icon-info"></i>
Yardım</a>
<div class="form-group-wrapper">
<div class="form-group">
<label class="control-label" for="sourcePlatform">Kaynak</label>
<select
wire:change="$emit('sourcePlatform', $event.target[$event.target.selectedIndex].getAttribute('data-name'),$event.target.value)"
class="form-control"
name="sourcePlatform" id="sourcePlatform">
@foreach($targetSourcePlatforms as $sourcePlatformItem)
<option data-name="{{$sourcePlatformItem["name"]}}" wire:key="{{$sourcePlatformItem["name"]}}"
value="{{$sourcePlatformItem["id"]}}"
@if(isset($sourcePlatform) && $sourcePlatform == $sourcePlatformItem['name']) selected
@endif> {{$sourcePlatformItem["name"]}}</option>
@endforeach
</select>
<label class="control-label" for="targetPlatform">Hedef</label>
<select x-data="{ open: false }" @targetPlatform.window="open = !open"
wire:change="$emit('targetPlatform', $event.target[$event.target.selectedIndex].getAttribute('data-name'))"
class="form-control"
name="targetPlatform" id="targetPlatform">
@foreach($targetPlatforms as $targetPlatformItem)
<option data-name="{{$targetPlatformItem["name"]}}" wire:key="{{$targetPlatformItem["name"]}}"
value="{{$targetPlatformItem["id"]}}"
@if(isset($targetPlatform) && $targetPlatform == $targetPlatformItem['name']) selected
@endif> {{$targetPlatformItem["name"]}}</option>
@endforeach
</select>
</div>
</div>
<div x-data="{ open: false }" @targetPlatform.window="open = true">
<div x-data="{targetPlatformLogo : @js($targetPlatformLogo) }" class="platform-logo">
@if(!empty($targetPlatformLogo))
<img wire:target="{{$wireKey}}" x-model="targetPlatformLogo"
src="{{URL::asset("assets/images/".$targetPlatformLogo)}}"
width="100"
height="30"
alt="{{$targetPlatformLogo}}">
@endif
</div>
</div>
</div>
<div class="wrapper">
<div x-data="{ open: false }" @targetPlatform.window="open = !open">
@if(view()->exists('livewire.'.$component))
<livewire:dynamic-component :component="$component" :wire:key="$wireKey"
:ntegrationID="$ntegrationID"/>
@else
<livewire:integration-page-preaparing/>
@endif
<div wire:loading.block>
Pazaryeri Yükleniyor ...
</div>
</div>
</div>
<script>
Livewire.on('targetPlatform', targetPlatform => {
$("#sourcePlatform option").remove();
});
Livewire.on('sourcePlatform', function (sourcePlatform, id) {
$(document).find($('#product-list')).attr('data-integration', id);
});
</script>
</div>
child 1 blade:
<div>
.....
<script>
let activeSiteID = $('select[name^="siteSelect"] option').filter(':selected').val();
let productList = $('#product-list');
let oTable_liste = productList.DataTable({
'ajax': {
'url': '{{route("integration.getProduct")}}',
'type': 'POST',
'headers': {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
'data': {
siteID: activeSiteID,
integrationID: @js($ntegrationID)
},
'dataSrc': function (data) {
if (data.result === null || data.result.length < 1) {
return [];
}
return data.result;
}
}
});
document.addEventListener("livewire:load", function () {
$(document).on('click', '#updateTableIntegration1', function () {
$('.wrapper').addClass('loading');
setTimeout(function () {
oTable_liste.draw();
$('.wrapper').removeClass('loading');
jQuery.gritter.add({
title: 'İşlem Başarılı',
text: 'Kaynak verileri tekrardan listelendi.',
class_name: 'gritter-success'
});
}, 3000);
});
});
</script>
</div>
Olayı kısaca özetlemeye çalışacağım:
1 - Parent product sayfasına geldi. Sistem ilk render edildiğinde url'deki parametreleri dinledi , şayet burada bir değer yoksa ilk hedef platformu ve bu platforma bağlı ilk kaynak platformu alıp ilgili sayfayı gönderdi.
2 - Gelen sayfaya ait livewire childi render edildi.
3 - 2 tane select inputum mevcut. Bunlardan biri kaynak biri de hedef seçimi.
Hedef seçimi değiştirildiğinde parent controller içerisinden targetPlatform fonksiyonuna bir event ateşliyorum. İlgili sayfa dinleniyor ve gösteriliyor.
Aynı şekilde parent blade sınıfından da bu durumu dinleyip kaynak listesini siliyorum. Yenileri ekleniyor.
4 - Kaynak değişiminde de parent Controller içerisinde sourcePlatform eventını ateşliyorum. Burada değişim uygulandığında child Controller'ın bundan haberdar olması için bir event daha ateşliyorum. İlgili eventı child controllerda dinledim.
Child sınıfta bu değerleri dinlediğimde gönderdiğim değerleri bulabiliyorum.
Datatable içerisinde kullandığım ajax içerisindeki integrationID'yi değiştiremedim. Bunu nasıl yapabilirim.