Merge branch 'main' of gitea.virtnet.bond:Joseph.Rawlings/Virtnet.bond
This commit is contained in:
@@ -85,7 +85,6 @@
|
||||
activeSection: null,
|
||||
pendingSection: null,
|
||||
transitionDelay: 220,
|
||||
osSearch: '',
|
||||
toggleSection(key) {
|
||||
if (this.activeSection === key) {
|
||||
this.activeSection = null;
|
||||
@@ -106,15 +105,6 @@
|
||||
}
|
||||
|
||||
this.activeSection = key;
|
||||
},
|
||||
matchesSearch(name) {
|
||||
if (!this.osSearch.trim()) return true;
|
||||
return name.toLowerCase().includes(this.osSearch.trim().toLowerCase());
|
||||
},
|
||||
categoryHasMatch(categoryEl) {
|
||||
if (!this.osSearch.trim()) return true;
|
||||
const labels = categoryEl.querySelectorAll('[data-os-name]');
|
||||
return Array.from(labels).some(el => this.matchesSearch(el.dataset.osName));
|
||||
}
|
||||
}">
|
||||
@if($isProtected)
|
||||
@@ -146,23 +136,6 @@
|
||||
<p class="text-sm text-base/70">Choose a new operating system. The selected template will be installed from scratch.</p>
|
||||
</div>
|
||||
|
||||
<!-- OS Search Filter -->
|
||||
<div class="relative mb-4">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<x-ri-search-line class="size-4 text-base/40" />
|
||||
</div>
|
||||
<input type="text"
|
||||
x-model="osSearch"
|
||||
placeholder="Search operating systems..."
|
||||
class="w-full pl-10 pr-4 py-2.5 text-sm rounded-lg border border-neutral bg-background focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors"
|
||||
@if($isProtected) disabled @endif />
|
||||
<div x-show="osSearch.length > 0" x-transition class="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||
<button @click="osSearch = ''" type="button" class="text-base/40 hover:text-base/60 transition-colors">
|
||||
<x-ri-close-line class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 max-h-[460px] overflow-y-auto pr-1" @if($isProtected) style="pointer-events: none; opacity: 0.6;" @endif>
|
||||
@if($groupedOs->isEmpty())
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
@@ -178,12 +151,9 @@
|
||||
@else
|
||||
@foreach($groupedOs as $categoryLabel => $templates)
|
||||
@php
|
||||
$categoryKey = \Illuminate\Support\Str::slug($categoryLabel);
|
||||
$categoryKey = \Illuminate\Support\Str::snake(\Illuminate\Support\Str::ascii($categoryLabel));
|
||||
@endphp
|
||||
<div class="border border-neutral/40 rounded-xl overflow-hidden" wire:key="os-category-{{ $categoryKey }}"
|
||||
x-ref="category_{{ $categoryKey }}"
|
||||
x-show="categoryHasMatch($refs.category_{{ $categoryKey }})"
|
||||
x-init="$watch('osSearch', () => { if (osSearch.trim() && categoryHasMatch($refs.category_{{ $categoryKey }})) { activeSection = '{{ $categoryKey }}'; } })">
|
||||
<div class="border border-neutral/40 rounded-xl overflow-hidden" wire:key="os-category-{{ $categoryKey }}">
|
||||
<button type="button" class="w-full flex items-center justify-between px-4 py-3 bg-background-secondary/60 hover:bg-background-secondary transition"
|
||||
@click="toggleSection('{{ $categoryKey }}')">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -226,9 +196,6 @@
|
||||
$isSelected = (string) $template->id === (string) ($os ?? '');
|
||||
@endphp
|
||||
<label wire:key="os-card-{{ $template->id }}"
|
||||
data-os-name="{{ $template->name }}"
|
||||
x-show="matchesSearch('{{ addslashes($template->name) }}')"
|
||||
x-transition
|
||||
class="relative flex items-center gap-4 rounded-xl border p-4 cursor-pointer transition-all duration-150
|
||||
@if($isSelected) border-primary bg-primary/5 ring-2 ring-primary/40 shadow-lg @else border-neutral/60 hover:border-primary/60 @endif">
|
||||
<input type="radio" class="sr-only" wire:model.live="os" value="{{ $template->id }}">
|
||||
|
||||
Reference in New Issue
Block a user