File manager - Edit - /var/www/ratemypay/resources/views/components/network/people-directory.blade.php
Back
@props([ 'isEmbedded' => false, 'discoverUsers' => [], 'networkUsers' => [], 'requestUsers' => [] ]) {{-- Updated x-data to include 'searchQuery' for client-side filtering --}} <div x-data="{ activeDirTab: 'discover', searchQuery: '' }"> @if(!$isEmbedded) <div class="w-full min-h-screen bg-[#f4f4f4]"> <div class="max-w-6xl mx-auto px-4 py-8"> @endif {{-- Header --}} <div class="mb-8"> <h1 class="text-3xl font-bold text-[#2F3D7E]">People Directory</h1> <p class="text-gray-500 mt-1">Connect with professionals anonymously via nicknames to track salary journeys.</p> </div> {{-- Tabs Container --}} <div class="w-full"> {{-- Tabs List --}} <div class="mb-6 bg-white border border-gray-200 p-1 h-auto rounded-xl inline-flex"> <button @click="activeDirTab = 'discover'" :class="activeDirTab === 'discover' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'" class="rounded-lg px-6 py-2 transition-all text-sm font-medium" > Discover </button> <button @click="activeDirTab = 'network'" :class="activeDirTab === 'network' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'" class="rounded-lg px-6 py-2 transition-all text-sm font-medium" > My Network ({{ isset($networkUsers) ? $networkUsers->count() : 0 }}) </button> <button @click="activeDirTab = 'requests'" :class="activeDirTab === 'requests' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'" class="rounded-lg px-6 py-2 transition-all flex gap-2 items-center text-sm font-medium" > Requests @if(isset($requestUsers) && $requestUsers->count() > 0) <span class="bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full font-bold"> {{ $requestUsers->count() }} </span> @endif </button> </div> {{-- Controls (Search & Filter) --}} <div class="flex flex-col md:flex-row gap-4 mb-8"> {{-- CLIENT SIDE SEARCH Removed <form> tag to prevent page reload. Added x-model="searchQuery". --}} <div class="relative flex-1"> <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> <input type="text" x-model="searchQuery" placeholder="Filter by role, location, or skill..." class="flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 pl-10 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]" > {{-- Clear Button --}} <button x-show="searchQuery.length > 0" @click="searchQuery = ''" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" > <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </button> </div> <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium border border-gray-200 bg-white hover:bg-gray-50 h-10 px-4 py-2 text-gray-600 gap-2"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg> Filters </button> </div> {{-- ======================================== TAB: DISCOVER ======================================== --}} <div x-show="activeDirTab === 'discover'" class="mt-0" style="display: none;"> @if(isset($discoverUsers) && count($discoverUsers) > 0) <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> @foreach($discoverUsers as $user) {{-- WRAPPER FOR FILTERING data-search contains all text we want to filter by. --}} <div x-show="searchQuery === '' || $el.dataset.search.toLowerCase().includes(searchQuery.toLowerCase())" data-search="{{ $user->nickname }} {{ $user->role }} {{ $user->companyType }} {{ $user->location }} {{ implode(' ', $user->tags) }}" > <x-network.user-card :user="$user" /> </div> @endforeach </div> @else <div class="text-center py-12"> <p class="text-gray-500">No users found.</p> </div> @endif </div> {{-- ======================================== TAB: MY NETWORK ======================================== --}} <div x-show="activeDirTab === 'network'" class="mt-0" style="display: none;"> @if(isset($networkUsers) && count($networkUsers) > 0) <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> @foreach($networkUsers as $user) <div x-show="searchQuery === '' || $el.dataset.search.toLowerCase().includes(searchQuery.toLowerCase())" data-search="{{ $user->nickname }} {{ $user->role }} {{ $user->companyType }} {{ $user->location }} {{ implode(' ', $user->tags) }}" > <x-network.user-card :user="$user" /> </div> @endforeach </div> @else <div class="text-center py-20 bg-white rounded-xl border border-gray-200"> {{-- ... Empty State content ... --}} <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4"> <svg class="w-8 h-8 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="20" x2="20" y1="8" y2="14"/><line x1="23" x2="17" y1="11" y2="11"/></svg> </div> <h3 class="text-lg font-semibold text-gray-900">No connections yet</h3> <button @click="activeDirTab = 'discover'" class="mt-4 text-[#2F3D7E] font-medium hover:underline">Discover People</button> </div> @endif </div> {{-- ======================================== TAB: REQUESTS ======================================== --}} <div x-show="activeDirTab === 'requests'" class="mt-0" style="display: none;"> @if(isset($requestUsers) && count($requestUsers) > 0) <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> @foreach($requestUsers as $user) <div x-show="searchQuery === '' || $el.dataset.search.toLowerCase().includes(searchQuery.toLowerCase())" data-search="{{ $user->nickname }} {{ $user->role }} {{ $user->location }}" > <x-network.request-card :user="$user" /> </div> @endforeach </div> @else <div class="text-center py-20 bg-white rounded-xl border border-gray-200"> {{-- ... Empty State content ... --}} <h3 class="text-lg font-semibold text-gray-900">No pending requests</h3> </div> @endif </div> </div> @if(!$isEmbedded) </div> </div> @endif </div>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings