From 8e22d769f6ddd64244708631f5548361b9752b48 Mon Sep 17 00:00:00 2001
From: Mariela Bonilla <mbonilla.guti@gmail.com>
Date: Tue, 20 Jul 2021 21:52:42 -0600
Subject: [PATCH] add filtro de encuesta por nombre

---
 .../encuesta/list/encuesta.component.html     | 352 ++++++++++--------
 .../encuesta/list/encuesta.component.ts       |   7 +-
 2 files changed, 196 insertions(+), 163 deletions(-)

diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
index f0545aa..cc4710b 100644
--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
@@ -34,173 +34,201 @@
   <div class="alert alert-warning" id="no-result" *ngIf="encuestas?.length === 0">
     <span jhiTranslate="dataSurveyApp.encuesta.home.notFound">No encuestas found</span>
   </div>
+  <div class="table-responsive" id="entities" *ngIf="encuestas && encuestas.length > 0">
+    <form class="ds-form">
+      <div class="input-group">
+        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
+        <input type="text" name="searchEncuesta" placeholder="Buscar..." [(ngModel)]="searchEncuesta" />
+      </div>
+    </form>
 
-  <!-- Lista de Encuestas del Usuario -->
-  <div class="ds-list" (contextmenu)="openContextMenu($event)">
-    <!-- Context Menu -->
-    <div class="ds-contextmenu ds-contextmenu--closed" id="contextmenu">
-      <ul id="ds-context-menu__list">
-        <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-create--separator">
-          <li>
-            <button
-              *ngIf="!isAdmin() && isAuthenticated()"
-              type="button"
-              (click)="resetForm()"
-              data-toggle="modal"
-              data-target="#crearEncuesta"
+    <!-- Lista de Encuestas del Usuario -->
+    <div class="ds-list" (contextmenu)="openContextMenu($event)">
+      <!-- Context Menu -->
+      <div class="ds-contextmenu ds-contextmenu--closed" id="contextmenu">
+        <ul id="ds-context-menu__list">
+          <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-create--separator">
+            <li>
+              <button
+                *ngIf="!isAdmin() && isAuthenticated()"
+                type="button"
+                (click)="resetForm()"
+                data-toggle="modal"
+                data-target="#crearEncuesta"
+              >
+                <fa-icon class="contextmenu__icon" [icon]="faPlus"></fa-icon>Crear
+              </button>
+            </li>
+          </div>
+          <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-edit--separator">
+            <li class="d-justify justify-content-start">
+              <button type="button" id="contextmenu-edit"><fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Editar</button>
+            </li>
+            <li>
+              <button type="button" id="contextmenu-duplicate">
+                <fa-icon class="contextmenu__icon" [icon]="faCopy"></fa-icon>Duplicar
+              </button>
+            </li>
+            <li>
+              <button type="button" id="contextmenu-rename">
+                <fa-icon class="contextmenu__icon" [icon]="faFile"></fa-icon>Cambiar nombre
+              </button>
+            </li>
+            <li>
+              <button type="button" id="contextmenu-share">
+                <fa-icon class="contextmenu__icon" [icon]="faShareAlt"></fa-icon>Compartir
+              </button>
+            </li>
+          </div>
+          <div class="ds-contextmenu__divider" id="contextmenu-delete--separator">
+            <li>
+              <button type="button"><fa-icon class="contextmenu__icon" [icon]="faTrashAlt"></fa-icon>Eliminar</button>
+            </li>
+          </div>
+        </ul>
+      </div>
+
+      <div
+        class="ds-list--entity"
+        *ngFor="let encuesta of encuestas | filter: 'nombre':searchEncuesta; trackBy: trackId"
+        (dblclick)="openSurvey($event)"
+        (click)="selectSurvey($event)"
+        [attr.data-id]="encuesta.id"
+      >
+        <div class="entity-header">
+          <div class="entity-state--container">
+            <div
+              class="entity-state"
+              [ngClass]="
+                encuesta.estado == 'DRAFT'
+                  ? 'entity-state--blue'
+                  : encuesta.estado == 'ACTIVE'
+                  ? 'entity-state--green'
+                  : 'entity-state--red'
+              "
+              style="animation-delay: 0s"
+            ></div>
+            <div
+              class="entity-state"
+              [ngClass]="
+                encuesta.estado == 'DRAFT'
+                  ? 'entity-state--blue'
+                  : encuesta.estado == 'ACTIVE'
+                  ? 'entity-state--green'
+                  : 'entity-state--red'
+              "
+              style="animation-delay: 1s"
+            ></div>
+            <div
+              class="entity-state entity-state--blue"
+              [ngClass]="
+                encuesta.estado == 'DRAFT'
+                  ? 'entity-state--blue'
+                  : encuesta.estado == 'ACTIVE'
+                  ? 'entity-state--green'
+                  : 'entity-state--red'
+              "
+              style="animation-delay: 2s"
+            ></div>
+            <div
+              class="entity-state entity-state--blue"
+              [ngClass]="
+                encuesta.estado == 'DRAFT'
+                  ? 'entity-state--blue'
+                  : encuesta.estado == 'ACTIVE'
+                  ? 'entity-state--green'
+                  : 'entity-state--red'
+              "
+              style="animation-delay: 3s"
+            ></div>
+          </div>
+          <div class="entity-share">
+            <span><fa-icon [icon]="faShareAlt"></fa-icon></span>
+          </div>
+        </div>
+
+        <div class="entity-body">
+          <div class="entity-body--row">
+            <span *ngIf="encuesta.acceso == 'PUBLIC'" class="title"
+              ><fa-icon class="entity-icon--access" [icon]="faUnlock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
             >
-              <fa-icon class="contextmenu__icon" [icon]="faPlus"></fa-icon>Crear
+          </div>
+          <div class="entity-body--row">
+            <span *ngIf="encuesta.acceso == 'PRIVATE'" class="title mt-2"
+              ><fa-icon class="entity-icon--access" [icon]="faLock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
+            >
+          </div>
+          <div class="entity-body--row">
+            <span class="mt-2"
+              ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon>&nbsp;&nbsp;{{
+                encuesta.fechaCreacion | formatShortDatetime | titlecase
+              }}</span
+            >
+          </div>
+          <div class="entity-body--row">
+            <span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
+          </div>
+          <div class="entity-body--row">
+            <span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
+          </div>
+          <div class="entity-body--row">
+            <fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon
+            ><fa-icon *ngFor="let i of [].constructor(5 - encuesta.calificacion!)" class="entity-icon--star--off" [icon]="faStar"></fa-icon>
+          </div>
+        </div>
+
+        <!-- <p>
+          <a [routerLink]="['/encuesta', encuesta.id, 'view']">{{ encuesta.id }}</a>
+        </p>
+        <p>{{ encuesta.nombre }}</p>
+        <p>{{ encuesta.descripcion }}</p>
+        <p>{{ encuesta.fechaCreacion | formatMediumDatetime }}</p>
+        <p>{{ encuesta.fechaPublicacion | formatMediumDatetime }}</p>
+        <p>{{ encuesta.fechaFinalizar | formatMediumDatetime }}</p>
+        <p>{{ encuesta.fechaFinalizada | formatMediumDatetime }}</p>
+        <p>{{ encuesta.calificacion }}</p>
+        <p jhiTranslate="{{ 'dataSurveyApp.AccesoEncuesta.' + encuesta.acceso }}">{{ encuesta.acceso }}</p>
+        <p>{{ encuesta.contrasenna }}</p>
+        <p jhiTranslate="{{ 'dataSurveyApp.EstadoEncuesta.' + encuesta.estado }}">{{ encuesta.estado }}</p>
+        <div>
+          <div *ngIf="encuesta.categoria">
+            <a [routerLink]="['/categoria', encuesta.categoria?.id, 'view']">{{ encuesta.categoria?.nombre }}</a>
+          </div>
+        </div>
+        <div>
+          <div *ngIf="encuesta.usuarioExtra">
+            <a [routerLink]="['/usuario-extra', encuesta.usuarioExtra?.id, 'view']">{{ encuesta.usuarioExtra?.id }}</a>
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="btn-group">
+            <button
+              type="submit"
+              [routerLink]="['/encuesta', encuesta.id, 'view']"
+              class="btn btn-info btn-sm"
+              data-cy="entityDetailsButton"
+            >
+              <fa-icon icon="eye"></fa-icon>
+              <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
             </button>
-          </li>
-        </div>
-        <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-edit--separator">
-          <li class="d-justify justify-content-start">
-            <button type="button" id="contextmenu-edit"><fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Editar</button>
-          </li>
-          <li>
-            <button type="button" id="contextmenu-duplicate"><fa-icon class="contextmenu__icon" [icon]="faCopy"></fa-icon>Duplicar</button>
-          </li>
-          <li>
-            <button type="button" id="contextmenu-rename">
-              <fa-icon class="contextmenu__icon" [icon]="faFile"></fa-icon>Cambiar nombre
+  
+            <button
+              type="submit"
+              [routerLink]="['/encuesta', encuesta.id, 'edit']"
+              class="btn btn-primary btn-sm"
+              data-cy="entityEditButton"
+            >
+              <fa-icon icon="pencil-alt"></fa-icon>
+              <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
             </button>
-          </li>
-          <li>
-            <button type="button" id="contextmenu-share"><fa-icon class="contextmenu__icon" [icon]="faShareAlt"></fa-icon>Compartir</button>
-          </li>
-        </div>
-        <div class="ds-contextmenu__divider" id="contextmenu-delete--separator">
-          <li>
-            <button type="button"><fa-icon class="contextmenu__icon" [icon]="faTrashAlt"></fa-icon>Eliminar</button>
-          </li>
-        </div>
-      </ul>
-    </div>
-
-    <div
-      class="ds-list--entity"
-      *ngFor="let encuesta of encuestas; trackBy: trackId"
-      (dblclick)="openSurvey($event)"
-      (click)="selectSurvey($event)"
-      [attr.data-id]="encuesta.id"
-    >
-      <div class="entity-header">
-        <div class="entity-state--container">
-          <div
-            class="entity-state"
-            [ngClass]="
-              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
-            "
-            style="animation-delay: 0s"
-          ></div>
-          <div
-            class="entity-state"
-            [ngClass]="
-              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
-            "
-            style="animation-delay: 1s"
-          ></div>
-          <div
-            class="entity-state entity-state--blue"
-            [ngClass]="
-              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
-            "
-            style="animation-delay: 2s"
-          ></div>
-          <div
-            class="entity-state entity-state--blue"
-            [ngClass]="
-              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
-            "
-            style="animation-delay: 3s"
-          ></div>
-        </div>
-        <div class="entity-share">
-          <span><fa-icon [icon]="faShareAlt"></fa-icon></span>
-        </div>
+            
+            <button type="submit" (click)="delete(encuesta)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
+              <fa-icon icon="times"></fa-icon>
+              <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
+            </button>
+          </div>
+        </div> -->
       </div>
-
-      <div class="entity-body">
-        <div class="entity-body--row">
-          <span *ngIf="encuesta.acceso == 'PUBLIC'" class="title"
-            ><fa-icon class="entity-icon--access" [icon]="faUnlock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
-          >
-        </div>
-        <div class="entity-body--row">
-          <span *ngIf="encuesta.acceso == 'PRIVATE'" class="title mt-2"
-            ><fa-icon class="entity-icon--access" [icon]="faLock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
-          >
-        </div>
-        <div class="entity-body--row">
-          <span class="mt-2"
-            ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon>&nbsp;&nbsp;{{
-              encuesta.fechaCreacion | formatShortDatetime | titlecase
-            }}</span
-          >
-        </div>
-        <div class="entity-body--row">
-          <span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
-        </div>
-        <div class="entity-body--row">
-          <span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
-        </div>
-        <div class="entity-body--row">
-          <fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon
-          ><fa-icon *ngFor="let i of [].constructor(5 - encuesta.calificacion!)" class="entity-icon--star--off" [icon]="faStar"></fa-icon>
-        </div>
-      </div>
-
-      <!-- <p>
-        <a [routerLink]="['/encuesta', encuesta.id, 'view']">{{ encuesta.id }}</a>
-      </p>
-      <p>{{ encuesta.nombre }}</p>
-      <p>{{ encuesta.descripcion }}</p>
-      <p>{{ encuesta.fechaCreacion | formatMediumDatetime }}</p>
-      <p>{{ encuesta.fechaPublicacion | formatMediumDatetime }}</p>
-      <p>{{ encuesta.fechaFinalizar | formatMediumDatetime }}</p>
-      <p>{{ encuesta.fechaFinalizada | formatMediumDatetime }}</p>
-      <p>{{ encuesta.calificacion }}</p>
-      <p jhiTranslate="{{ 'dataSurveyApp.AccesoEncuesta.' + encuesta.acceso }}">{{ encuesta.acceso }}</p>
-      <p>{{ encuesta.contrasenna }}</p>
-      <p jhiTranslate="{{ 'dataSurveyApp.EstadoEncuesta.' + encuesta.estado }}">{{ encuesta.estado }}</p>
-      <div>
-        <div *ngIf="encuesta.categoria">
-          <a [routerLink]="['/categoria', encuesta.categoria?.id, 'view']">{{ encuesta.categoria?.nombre }}</a>
-        </div>
-      </div>
-      <div>
-        <div *ngIf="encuesta.usuarioExtra">
-          <a [routerLink]="['/usuario-extra', encuesta.usuarioExtra?.id, 'view']">{{ encuesta.usuarioExtra?.id }}</a>
-        </div>
-      </div>
-      <div class="text-right">
-        <div class="btn-group">
-          <button
-            type="submit"
-            [routerLink]="['/encuesta', encuesta.id, 'view']"
-            class="btn btn-info btn-sm"
-            data-cy="entityDetailsButton"
-          >
-            <fa-icon icon="eye"></fa-icon>
-            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-          </button>
-
-          <button
-            type="submit"
-            [routerLink]="['/encuesta', encuesta.id, 'edit']"
-            class="btn btn-primary btn-sm"
-            data-cy="entityEditButton"
-          >
-            <fa-icon icon="pencil-alt"></fa-icon>
-            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
-          </button>
-          
-          <button type="submit" (click)="delete(encuesta)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
-            <fa-icon icon="times"></fa-icon>
-            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
-          </button>
-        </div>
-      </div> -->
     </div>
   </div>
 </div>
diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
index 6fccf6b..0089a1b 100644
--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
@@ -66,6 +66,8 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   categoriasSharedCollection: ICategoria[] = [];
   usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
 
+  public searchEncuesta: string;
+
   editForm = this.fb.group({
     id: [],
     nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
@@ -93,7 +95,9 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
     protected fb: FormBuilder,
     protected accountService: AccountService,
     protected router: Router
-  ) {}
+  ) {
+    this.searchEncuesta = '';
+  }
 
   resetForm(): void {
     this.editForm.reset();
@@ -115,6 +119,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit(): void {
+    this.searchEncuesta = '';
     document.body.addEventListener('click', e => {
       document.getElementById('contextmenu')!.classList.add('ds-contextmenu--closed');
       document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--open');