Improve search code and page layout

This commit is contained in:
Bruno
2024-11-29 03:49:53 +00:00
parent 2fd6896a39
commit 2864ec6817
2 changed files with 33 additions and 26 deletions

View File

@@ -6,6 +6,7 @@ use App\Models\Vault;
use App\Models\VaultNode;
use Livewire\Attributes\On;
use App\Livewire\Forms\VaultNodeForm;
use Staudenmeir\LaravelAdjacencyList\Eloquent\Builder;
use Staudenmeir\LaravelAdjacencyList\Eloquent\Collection;
class SearchNode extends Modal
@@ -14,12 +15,12 @@ class SearchNode extends Modal
public Vault $vault;
public string $search = '';
public Collection $nodes;
public bool $show = false;
public string $search = '';
public function mount(Vault $vault): void
{
$this->authorize('view', $vault);
@@ -35,25 +36,23 @@ class SearchNode extends Modal
public function search(): void
{
if ($this->search === '') {
$this->nodes = VaultNode::query()
->where('vault_id', $this->vault->id)
->where('is_file', true)
->orderByDesc('updated_at')
->limit(5)
->get();
} else {
$this->nodes = VaultNode::query()
->where('vault_id', $this->vault->id)
->where('is_file', true)
->where('name', 'like', '%' . $this->search . '%')
->orderByDesc('updated_at')
->limit(5)
->get();
}
$this->nodes = VaultNode::query()
->select('id', 'name', 'extension')
->where('vault_id', $this->vault->id)
->where('is_file', true)
->when(strlen($this->search), function (Builder $query) {
$query->where('name', 'like', '%' . $this->search . '%');
})
->orderByDesc('updated_at')
->limit(5)
->get();
$this->nodes->transform(function (VaultNode $item) {
$item->full_path = $item->ancestorsAndSelf()->get()->last()->full_path;
$item->dir_name = preg_replace('/' . $item->name . '$/', '', $item->full_path);
if (strlen($item->dir_name) == 1) {
$item->dir_name = '';
}
return $item;
});

View File

@@ -5,18 +5,26 @@
<div class="mt-4">
@if (count($nodes))
<ul wire:loading.class="opacity-50">
<ul class="flex flex-col gap-2" wire:loading.class="opacity-50">
@foreach ($nodes as $node)
<li>
<button type="button" wire:click="$parent.openFile({{ $node->id }}); modalOpen = false"
class="flex w-full gap-2 py-1 text-left">
<span title="{{ $node->name }}"
class="overflow-hidden whitespace-nowrap text-ellipsis">
{{ $node->full_path }}
</span>
class="flex flex-col w-full gap-2 py-1 text-left">
<span class="flex gap-2">
<span class="overflow-hidden whitespace-nowrap text-ellipsis"
title="{{ $node->name }}">
{{ $node->name }}
</span>
@if ($node->extension !== 'md')
<x-treeView.badge>{{ $node->extension }}</x-treeView.badge>
@if ($node->extension !== 'md')
<x-treeView.badge>{{ $node->extension }}</x-treeView.badge>
@endif
</span>
@if (strlen($node->dir_name))
<span title="{{ $node->full_path }}"
class="overflow-hidden text-xs whitespace-nowrap text-ellipsis">
{{ $node->dir_name }}
</span>
@endif
</button>
</li>