add filtro de encuesta por nombre

This commit is contained in:
Mariela Bonilla 2021-07-20 21:52:42 -06:00
parent c905854300
commit 8e22d769f6
2 changed files with 196 additions and 163 deletions

View File

@ -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>

View File

@ -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');