Adicioan filtragem básica no índice de associados

app/Http/Livewire/Collaborators/Associates/Index.php

@@ -16,7 +16,9 @@ class Index extends Component
      * @var array
      */
     protected $updatesQueryString = [
-        'search' => ['except' => '']
+        'search' => ['except' => ''],
+        'associate_category_id' => [],
+        'gender' => [],
     ];
 
     /** @var string */
@@ -31,9 +33,17 @@ class Index extends Component
     /** @var string */
     public $search;
 
+    /** @var int */
+    public $associate_category_id;
+
+    /** @var string */
+    public $gender;
+
     public function mount()
     {
         $this->search = request()->query('search', $this->search);
+        $this->associate_category_id = request()->query('associate_category_id', $this->associate_category_id);
+        $this->gender = request()->query('gender', $this->gender);
     }
 
     public function updatingSearch()
@@ -43,8 +53,17 @@ class Index extends Component
 
     public function render()
     {
-        return view('livewire.collaborators.associates.index', [
-            'associates' => Associate::with('category')->where('name', 'LIKE', '%' . $this->search . '%')->orderBy($this->orderColumn, $this->orderDirection)->paginate($this->perPage),
-        ]);
+        $associates = Associate::with('category')
+            ->where('name', 'LIKE', '%' . $this->search . '%')
+            ->orderBy($this->orderColumn, $this->orderDirection)
+            ->when($this->associate_category_id, function ($query, $associate_category_id) {
+                return $query->where('associate_category_id', $associate_category_id);
+            })
+            ->when($this->gender, function ($query, $gender) {
+                return $query->where('profile->gender', $gender);
+            })
+            ->paginate($this->perPage);
+
+        return view('livewire.collaborators.associates.index', compact('associates'));
     }
 }

resources/lang/pt-BR.json

@@ -1,7 +1,9 @@
 {
-    "Search:": "Buscar:",
+    "Search": "Buscar",
     "Show": "Mostrar",
     "entries": "registros",
     "Save": "Salvar",
-    "Saved": "Salvo"
+    "Saved": "Salvo",
+    "Advanced": "Avançado",
+    "Advanced filters": "Filtros avançados"
 }

resources/lang/pt-BR/associate_categories.php

@@ -1,6 +1,7 @@
 <?php
 
 return [
+    'model' => 'Categoria do associado',
     'individual' => 'Associado Indivíduo',
     'supporting-institution' => 'Associada Instituição Apoiadora',
     'acting-institution' => 'Associada Instituição Atuante',

resources/views/layouts/app.blade.php

@@ -103,4 +103,7 @@
         </div>
 
     </div>
+
+    @yield('modals')
+
 @endsection

resources/views/layouts/collaborators.blade.php

@@ -13,7 +13,7 @@
         {{ __('sidebar.associates.title') }}
     </x-sidebar.title>
 
-    <x-sidebar.item href="{{ route('collaborators.associates.index') }}" :current="request()->route()->named('collaborators.associates.index')">
+    <x-sidebar.item href="{{ route('collaborators.associates.index') }}" :current="request()->route()->named('collaborators.associates.*')">
         <x-slot name="icon">
             @svg('database', 'fill-current')
         </x-slot>

resources/views/livewire/collaborators/associates/index.blade.php

@@ -18,6 +18,28 @@
 
     <div class="flex items-center justify-between mt-4 py-4">
 
+        <div class="flex space-x-4">
+
+            <label class="flex-grow">
+
+                <span class="sr-only">
+                    {{ __('Search:') }}
+                </span>
+
+                <div class="-mt-1">
+                    <x-input.text wire:model.debounce.300ms="search" placeholder="{{ __('Search') }}" />
+                </div>
+
+            </label>
+
+            <div x-data="">
+                <button type="button" x-on:click="document.getElementById('filters-modal').dispatchEvent(new Event('open-modal'))" class="flex justify-center px-4 py-2 text-sm font-medium text-gray-800 bg-gray-300 border border-transparent rounded-md hover:bg-gray-600 hover:text-white flex-grow-0 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition duration-150 ease-in-out">
+                    {{ __('Advanced') }}
+                </button>
+            </div>
+
+        </div>
+
         <label class="flex items-center">
 
             <span class="text-gray-700">
@@ -39,18 +61,6 @@
 
         </label>
 
-        <label class="flex items-center">
-
-            <span class="text-gray-700">
-                {{ __('Search:') }}
-            </span>
-
-            <div class="ml-2 -mt-1">
-                <x-input.text wire:model.debounce.300ms="search" />
-            </div>
-
-        </label>
-
     </div>
 
     <div class="flex flex-col">
@@ -135,3 +145,90 @@
         </div>
     </div>
 </div>
+
+@section('modals')
+    <div
+        id="filters-modal"
+        x-data="{ open: false }"
+        x-on:open-modal="open = true"
+        x-on:keydown.escape.window="open = false"
+    >
+        <div
+            x-bind:class="{
+                'hidden': ! open,
+                'fixed inset-0 w-full h-full flex items-center justify-center': true,
+            }"
+            role="dialog"
+            aria-labeledby="filters-modal-title"
+        >
+            <div
+                x-on:click.away="open = false"
+                class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"
+            >
+
+                <div class="modal-content py-4 text-left px-6">
+
+                    <div class="flex justify-between items-center">
+
+                        <h2 id="filters-modal-title" class="text-2xl font-bold">
+                            {{ __('Advanced filters') }}
+                        </h2>
+
+                        <div
+                            x-on:click="open = false"
+                            class="modal-close cursor-pointer z-50"
+                        >
+                            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+                                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
+                            </svg>
+                        </div>
+
+                    </div>
+
+                    <div class="mt-6">
+                        <form method="GET" id="filters-form" class="flex flex-col space-y-4">
+
+                            <x-input.group label="{{ __('associate_categories.model') }}" for="associate_category_id">
+                                <x-input.select name="associate_category_id" id="associate_category_id">
+                                    @foreach (\App\AssociateCategory::all() as $category)
+                                        <option value="{{ $category->id }}">
+                                            {{ __('associate_categories.' . $category->key) }}
+                                        </option>
+                                    @endforeach
+                                </x-input.select>
+                            </x-input.group>
+
+                            <x-input.group label="{{ __('associates.attributes.profile.gender') }}" for="gender">
+                                <x-input.select name="gender" id="gender">
+                                    <option value="male">Homem</option>
+                                    <option value="female">Mulher</option>
+                                    <option value="other">Outro</option>
+                                </x-input.select>
+                            </x-input.group>
+
+                        </form>
+                    </div>
+
+                    <div class="flex justify-end space-x-2 mt-6">
+
+                        <button
+                            x-on:click="open = false"
+                            class="bg-transparent px-4 py-2 rounded-lg text-green-700 hover:bg-gray-100 transition duration-150 ease-in-out"
+                        >
+                            {{ __('Cancel') }}
+                        </button>
+
+                        <button type="submit" form="filters-form" class="flex justify-center px-4 py-2 text-sm font-medium text-gray-800 bg-gray-300 border border-transparent rounded-md hover:bg-gray-600 hover:text-white flex-grow-0 focus:outline-none focus:border-green-700 focus:shadow-outline-green active:bg-green-700 transition duration-150 ease-in-out">
+                            {{ __('Filter') }}
+                        </button>
+
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
+
+        </div>
+    </div>
+@endsection

tests/Feature/Collaborators/Associates/IndexTest.php

@@ -57,4 +57,54 @@ class IndexTest extends TestCase
             ->assertDontSee('José da Silva')
             ->assertSee('Maria da Conceição');
     }
+
+    /** @test */
+    public function index_is_filterable_by_associate_category_id()
+    {
+        $collaborator = factory(Collaborator::class)->create();
+        $this->be($collaborator, 'collaborators');
+
+        factory(Associate::class)->create([
+            'name' => 'José da Silva',
+            'associate_category_id' => 1,
+        ]);
+        factory(Associate::class)->create([
+            'name' => 'Maria da Conceição',
+            'associate_category_id' => 2,
+        ]);
+
+        Livewire::test('collaborators.associates.index')
+            ->assertSee('José da Silva')
+            ->assertSee('Maria da Conceição')
+            ->set('associate_category_id', 2)
+            ->assertDontSee('José da Silva')
+            ->assertSee('Maria da Conceição');
+    }
+
+    /** @test */
+    public function index_is_filterable_by_gender()
+    {
+        $collaborator = factory(Collaborator::class)->create();
+        $this->be($collaborator, 'collaborators');
+
+        factory(Associate::class)->create([
+            'name' => 'José da Silva',
+            'profile' => [
+                'gender' => 'male',
+            ],
+        ]);
+        factory(Associate::class)->create([
+            'name' => 'Maria da Conceição',
+            'profile' => [
+                'gender' => 'female',
+            ],
+        ]);
+
+        Livewire::test('collaborators.associates.index')
+            ->assertSee('José da Silva')
+            ->assertSee('Maria da Conceição')
+            ->set('gender', 'female')
+            ->assertDontSee('José da Silva')
+            ->assertSee('Maria da Conceição');
+    }
 }