feat:[lar-153] discussion-mention user

app/Livewire/Components/Discussion/Comments.php

@@ -30,9 +30,29 @@ final class Comments extends Component implements HasForms
 
     public ?array $data = [];
 
+    public Collection $users;
+
+    public string $query = '';
+
+    public bool $showSuggestions = false;
+
+    public Collection $mentionables;
+
     public function mount(): void
     {
         $this->form->fill();
+
+        $this->mentionables = $this->users = $this->discussion
+            ->replies()
+            ->with('user')
+            ->get()
+            ->pluck('user')
+            ->unique('id')
+            ->map(fn ($user) => [
+                'id' => $user->id,
+                'key' => $user->name,
+                'username' => $user->username,
+            ]);
     }
 
     public function form(Form $form): Form
@@ -43,11 +63,48 @@ public function form(Form $form): Form
                     ->hiddenLabel()
                     ->placeholder(__('pages/discussion.placeholder'))
                     ->rows(3)
-                    ->required(),
+                    ->required()
+                    ->debounce()
+                    ->extraAttributes(['x-ref' => 'textarea'])
+                    ->afterStateUpdated(function ($state, callable $set): void {
+
+                        if ($state) {
+                            $this->query = $state;
+                            $this->searchUsers($this->query);
+                        }
+
+                    }),
             ])
             ->statePath('data');
     }
 
+    public function searchUsers(string $query): void
+    {
+        if (str_contains($query, '@')) {
+            $mention = explode('@', $query);
+            $search = end($mention);
+
+            $this->users = $this->mentionables->filter(fn ($user) => str_contains(strtolower($user['key']), strtolower($search)) ||
+                    str_contains(strtolower($user['username']), strtolower($search)));
+
+            if ($this->users->isNotEmpty()) {
+                $this->showSuggestions = true;
+                $this->dispatch('showSuggestionEvent');
+            }
+
+        } else {
+            $this->users = collect([]);
+            $this->showSuggestions = false;
+        }
+
+    }
+
+    #[On('setBodyForm')]
+    public function setBodyForm(?string $query): void
+    {
+        $this->form->fill(['body' => $query]);
+    }
+
     public function save(): void
     {
         $this->validate();
@@ -91,6 +148,8 @@ public function comments(): Collection
 
     public function render(): View
     {
-        return view('livewire.components.discussion.comments');
+        return view('livewire.components.discussion.comments')->with([
+            'users' => $this->users,
+        ]);
     }
 }

resources/views/livewire/components/discussion/comments.blade.php

@@ -10,12 +10,44 @@
     @endif
 
     @auth
-        <div class="mt-6 relative flex gap-3">
+
+        <div class="mt-6 relative flex gap-3"
+             x-data="{
+                    query: @entangle('query'),
+                    users: @entangle('users'),
+                    showSuggestions: @entangle('showSuggestions'),
+                    searchUsers() {
+                        this.showSuggestions = this.users && this.users.length > 0;
+                    }
+                }"
+             x-init="() => {
+                    Livewire.on('showSuggestionEvent', () => { searchUsers(); })
+                }"
+             >
             <x-user.avatar :user="\Illuminate\Support\Facades\Auth::user()" class="size-10" />
 
             <form wire:submit="save" class="min-w-0 flex-1">
                 {{ $this->form }}
 
+                <div x-show="showSuggestions && users"
+                     x-transition:enter="transition ease-out duration-100"
+                     x-transition:leave="transition ease-in duration-75"
+                     class="absolute left-12 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-md max-h-60 overflow-y-auto z-10">
+                    <ul>
+                        <template x-for="user in users" :key="user.id">
+                            <li class="p-2 hover:bg-gray-100 cursor-pointer"
+                                @click="
+                                query = query?.substring(0,  query.lastIndexOf('@') + 1) + user?.username;
+                                showSuggestions = false;
+                                $nextTick(() => $wire?.set('query', query));
+                                 $dispatch('setBodyForm', { query: query });
+                                ">
+                                <span x-text="user.username"></span>
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+
                 <div class="mt-3 flex items-center justify-end">
                     <x-buttons.submit wire:loading.attr="data-loading">
                         {{ __('actions.save') }}