From 217f1433507d6502a28d1852b26a89d09fb35c93 Mon Sep 17 00:00:00 2001
From: lcsAndrade <lucascandradex@protonmail.com>
Date: Thu, 2 Nov 2023 09:20:23 -0300
Subject: [PATCH] Filtragem por vinculo

---
 .../update-role/update-role.component.css     |  8 ++---
 .../update-role/update-role.component.html    | 35 +++++++++++++++----
 .../update-role/update-role.component.ts      | 11 ++++--
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/app/pages/update-role/update-role.component.css b/src/app/pages/update-role/update-role.component.css
index 9594d21d..e85b9d2c 100644
--- a/src/app/pages/update-role/update-role.component.css
+++ b/src/app/pages/update-role/update-role.component.css
@@ -32,8 +32,8 @@ tr:hover {
   background-color: #e0e0e0;
 }
 
-select {
-  border: 1px solid black;
-  border-radius: 6px;
-  padding: 2px 4px;
+.filter-container {
+  display: flex;
+  align-items: flex-start;
+  column-gap: 6px;
 }
\ No newline at end of file
diff --git a/src/app/pages/update-role/update-role.component.html b/src/app/pages/update-role/update-role.component.html
index 76f2c6c1..810ec35f 100644
--- a/src/app/pages/update-role/update-role.component.html
+++ b/src/app/pages/update-role/update-role.component.html
@@ -1,9 +1,29 @@
 <div class="mx-5">
-  <input 
-    [(ngModel)]="filterInputValue" 
-    (change)="filterUser()"
-    placeholder="Filtrar pelo nome do usuário" 
-    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-100 p-2.5 outline-none" />
+  <div class="filter-container">
+    <div>
+      <label>Nome ou Email:</label>
+      <input 
+        [(ngModel)]="filterInputValue" 
+        (change)="filterUser()"
+        placeholder="Filtrar pelo nome do usuário" 
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-100 p-2.5 outline-none" 
+      />
+    </div>
+    <div>
+      <label>Vínculo:</label>
+      <select
+        (change)="filterUser()"
+        [(ngModel)]="filterConnectionValue"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-100 p-2.5 outline-none"
+      >
+        <option disabled hidden value="">Selecione um vínculo</option>
+        <option value="ALUNO">Aluno</option>
+        <option value="PROFESSOR">Professor</option>
+        <option value="COMUNIDADE">Comunidade</option>
+        <option value="EXTERNO">Externo</option>
+      </select>
+    </div>
+  </div>
   <table class="table-auto mt-3" style="border-collapse: collapse !important;" > 
     <thead>
       <tr>
@@ -21,9 +41,10 @@
         <td>{{ user.connection }}</td>
         <td>
           <select 
-            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none"
+            class="bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none"
             [(ngModel)]="user.role" 
-            (change)="updateUserRole(user.id)" *ngIf="user.id !== userId; else readOnly">
+            (change)="updateUserRole(user.id)" *ngIf="user.id !== userId; else readOnly"
+          >
             <option value="USER">Usuário</option>
             <option value="ADMIN">Administrador</option>
           </select>
diff --git a/src/app/pages/update-role/update-role.component.ts b/src/app/pages/update-role/update-role.component.ts
index 5e5c52ed..d941afee 100644
--- a/src/app/pages/update-role/update-role.component.ts
+++ b/src/app/pages/update-role/update-role.component.ts
@@ -11,9 +11,11 @@ import jwt_decode from 'jwt-decode';
 export class UpdateRoleComponent {
   users: any = [];
   userId: number = 0;
+
   filterInputValue: string = "";
-  total: number = 0;
+  filterConnectionValue: string = ""
   
+  total: number = 0;
   pageSize: number = 10;
   pageIndex: number = 0;
 
@@ -54,7 +56,12 @@ export class UpdateRoleComponent {
   };
 
   getAllUsers() {
-    this.userService.getAllUsers({ nameEmail: this.filterInputValue, limit: this.pageSize, offset: (this.pageIndex * this.pageSize) }).subscribe({
+    this.userService.getAllUsers({ 
+      nameEmail: this.filterInputValue,
+      connection: this.filterConnectionValue, 
+      limit: this.pageSize, 
+      offset: (this.pageIndex * this.pageSize) 
+    }).subscribe({
       next: (data: Response) => {
         this.users = data.body;
         if (data.headers.has("x-total-count")) {