Ordenação e Filtros

Author: NiltonMorais

app/Http/Controllers/Api/BankAccountsController.php

@@ -8,8 +8,6 @@
 use CodeFin\Http\Requests\BankAccountCreateRequest;
 use CodeFin\Http\Requests\BankAccountUpdateRequest;
 use CodeFin\Repositories\Interfaces\BankAccountRepository;
-use Prettus\Validator\Contracts\ValidatorInterface;
-use Prettus\Validator\Exceptions\ValidatorException;
 
 
 class BankAccountsController extends Controller
@@ -34,7 +32,7 @@ public function __construct(BankAccountRepository $repository)
      */
     public function index()
     {
-        return $this->repository->paginate(4);
+        return $this->repository->paginate();
     }
 
     /**
@@ -90,6 +88,6 @@ public function update(BankAccountUpdateRequest $request, $id)
     public function destroy($id)
     {
         $this->repository->delete($id);
-        return response()->json([],204);
+        return response()->json([], 204);
     }
 }

app/Repositories/BankAccountRepositoryEloquent.php

@@ -14,6 +14,13 @@
  */
 class BankAccountRepositoryEloquent extends BaseRepository implements BankAccountRepository
 {
+    protected $fieldSearchable = [
+        'name' => 'like',
+        'agency' => 'like',
+        'account' => 'like',
+        'bank.name' => 'like'
+    ];
+
     /**
      * Specify Model class name
      *

app/Repositories/Interfaces/BankAccountRepository.php

@@ -2,13 +2,14 @@
 
 namespace CodeFin\Repositories\Interfaces;
 
+use Prettus\Repository\Contracts\RepositoryCriteriaInterface;
 use Prettus\Repository\Contracts\RepositoryInterface;
 
 /**
  * Interface BankAccountRepository
  * @package namespace CodeFin\Repositories\Interfaces;
  */
-interface BankAccountRepository extends RepositoryInterface
+interface BankAccountRepository extends RepositoryInterface, RepositoryCriteriaInterface
 {
     //
 }

config/repository.php

@@ -15,7 +15,7 @@
     |
     */
     'pagination' => [
-        'limit' => 15
+        'limit' => 10
     ],
 
     /*

public/css/spa.css

@@ -7,13 +7,27 @@
                 </span>
             </div>
             <div class="card-panel z-depth-5">
+                <form name="form" method="GET" @submit="filter()">
+                    <div class="filter-group">
+                        <button class="btn waves-effect" @click.prevent="filter()">
+                            <i class="material-icons">search</i>
+                        </button>
+                        <div class="filter-wrapper">
+                            <input type="text" v-model="search" placeholder="Buscar.."/>
+                        </div>
+                    </div>
+                </form>
                 <table class="bordered striped hightlight responsive-table">
                     <thead>
                     <tr>
-                        <th>#</th>
-                        <th>Nome</th>
-                        <th>Agência</th>
-                        <th>C/C</th>
+                        <th v-for="(key,o) in table.headers" :width="o.width">
+                            <a href="#" @click.prevent="sortBy(key)">
+                                {{o.label}}
+                                <i class="material-icons left" v-if="order.key==key">
+                                    {{order.sort == 'asc' ? 'arrow_drop_up' : 'arrow_drop_down'}}
+                                </i>
+                            </a>
+                        </th>
                         <th>Ações</th>
                     </tr>
                     </thead>
@@ -30,7 +44,8 @@
                     </tr>
                     </tbody>
                 </table>
-                <pagination :current-page.sync="pagination.current_page" :per-page="pagination.per_page" :total-records="pagination.total"></pagination>
+                <pagination :current-page.sync="pagination.current_page" :per-page="pagination.per_page"
+                            :total-records="pagination.total"></pagination>
             </div>
 
             <div class="fixed-action-btn">
@@ -77,6 +92,31 @@
                     current_page: 0,
                     per_page: 0,
                     total: 0
+                },
+                search: '',
+                order: {
+                    key: 'id',
+                    sort: 'asc'
+                },
+                table: {
+                    headers: {
+                        id: {
+                            label: '#',
+                            width: '10%'
+                        },
+                        name: {
+                            label: 'Nome',
+                            width: '45%'
+                        },
+                        agency: {
+                            label: 'Agência',
+                            width: '15%'
+                        },
+                        account: {
+                            label: 'C/C',
+                            width: '15%'
+                        }
+                    }
                 }
             }
         },
@@ -97,13 +137,24 @@
             },
             getBankAccounts(){
                 BankAccount.query({
-                    page: this.pagination.current_page + 1
+                    page: this.pagination.current_page + 1,
+                    orderBy: this.order.key,
+                    sortedBy: this.order.sort,
+                    search: this.search
                 }).then((response) => {
                     this.bankAccounts = response.data.data;
                     let pagination = response.data.meta.pagination;
                     pagination.current_page--;
                     this.pagination = pagination;
                 });
+            },
+            sortBy(key){
+                this.order.key = key;
+                this.order.sort = this.order.sort == 'desc' ? 'asc' : 'desc';
+                this.getBankAccounts();
+            },
+            filter(){
+                this.getBankAccounts();
             }
         },
         events: {
@@ -113,4 +164,5 @@
         }
     }
 
+
 </script>

public/css/spa.css.map

@@ -26,4 +26,16 @@ main{
 
 #sidenav-overlay {
   z-index: 996 !important;
+}
+
+.filter-group{
+  .btn{
+    float: right;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .filter-wrapper{
+    overflow: hidden;
+    padding-right: 10px;
+  }
 }