71 lines
3.8 KiB
PHP
71 lines
3.8 KiB
PHP
@php
|
|
$hasChildren = ! empty($node['children']);
|
|
$isSelected = $selectedGroupId === $node['id'];
|
|
// A behúzás a mélységtől függ (a depth=0 gyökér rejtett, így az 1. szint kap 0 behúzást).
|
|
$indent = max(0, ($node['depth'] - 1)) * 16;
|
|
@endphp
|
|
|
|
<div wire:key="group-node-{{ $node['id'] }}" x-data="{ open: true }">
|
|
<div style="display:flex;align-items:center;gap:2px;padding-left:{{ $indent }}px;">
|
|
{{-- Chevron expand/collapse toggle (Preline-stílus) --}}
|
|
@if ($hasChildren)
|
|
<button
|
|
@click="open = !open"
|
|
style="display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;color:#6b7280;transition:transform 0.15s;"
|
|
:style="open ? '' : 'transform:rotate(-90deg)'"
|
|
aria-label="Kinyit/becsuk"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
</button>
|
|
@else
|
|
<span style="width:18px;flex-shrink:0;"></span>
|
|
@endif
|
|
|
|
{{-- Csoport sora: ikon + név + badge --}}
|
|
<button
|
|
wire:click="selectGroup({{ $node['id'] }})"
|
|
style="display:flex;align-items:center;gap:8px;flex:1;padding:5px 8px;border-radius:6px;border:none;cursor:pointer;text-align:left;font-size:13px;min-width:0;
|
|
{{ $isSelected
|
|
? 'background:#f0e8e0;color:#b83400;font-weight:700;'
|
|
: 'background:transparent;color:#374151;' }}"
|
|
onmouseover="{{ ! $isSelected ? "this.style.background='#f3f4f6'" : '' }}"
|
|
onmouseout="{{ ! $isSelected ? "this.style.background='transparent'" : '' }}"
|
|
>
|
|
{{-- Ikon: mappa (csoport gyerekekkel) vagy fájl (levél) --}}
|
|
<span style="display:flex;align-items:center;flex-shrink:0;color:{{ $isSelected ? '#b83400' : '#9ca3af' }};">
|
|
@if ($hasChildren)
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z" />
|
|
</svg>
|
|
@else
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
|
|
<path d="M14 2v4a2 2 0 0 0 2 2h4" />
|
|
</svg>
|
|
@endif
|
|
</span>
|
|
|
|
<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $node['name'] }}</span>
|
|
|
|
@if ($node['products_count'] > 0)
|
|
<span style="flex-shrink:0;font-size:11px;padding:1px 6px;border-radius:10px;
|
|
{{ $isSelected ? 'background:#fcd9c8;color:#b83400;' : 'background:#e5e7eb;color:#6b7280;' }}">
|
|
{{ $node['products_count'] }}
|
|
</span>
|
|
@endif
|
|
</button>
|
|
</div>
|
|
|
|
@if ($hasChildren)
|
|
<div x-show="open" style="margin-top:1px;">
|
|
@foreach ($node['children'] as $childIndex => $child)
|
|
@include('livewire.supplier-portal.product-group-tree-node', [
|
|
'node' => $child,
|
|
])
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|