2021-08-08 06:51:16 +00:00
|
|
|
<div class="row">
|
|
|
|
<div class="col">
|
2021-08-15 06:39:51 +00:00
|
|
|
<div
|
|
|
|
class="page-header-ui page-header-ui-dark bg-img-cover overlay overlay-60"
|
|
|
|
style="background-image: url('../../content/img_datasurvey/survey-shop.png')"
|
|
|
|
>
|
|
|
|
<div class="page-header-ui-content py-5 position-relative">
|
|
|
|
<div class="container px-5">
|
|
|
|
<div class="row gx-5 justify-content-start">
|
|
|
|
<div class="col-xl-8 col-lg-10 text-left" style="color: white">
|
|
|
|
<div data-aos="fade-up">
|
|
|
|
<h1 class="page-header-ui-title" style="color: white">¡Compre y utilice las plantillas!</h1>
|
2021-08-08 06:51:16 +00:00
|
|
|
|
2021-08-15 06:39:51 +00:00
|
|
|
<h2>
|
|
|
|
Puede comprar sus plantillas mediante <b> PayPal </b>
|
|
|
|
<fa-icon [icon]="faCreditCard"></fa-icon>
|
|
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-08 06:51:16 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-light py-10 container-encuestas">
|
|
|
|
<div class="container px-0">
|
|
|
|
<!--filtrado-->
|
|
|
|
|
|
|
|
<div class="input-group">
|
2021-08-15 06:39:51 +00:00
|
|
|
<div class="ds-filter ds-form">
|
2021-08-08 06:51:16 +00:00
|
|
|
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
|
2021-08-15 06:39:51 +00:00
|
|
|
<input class="ds-form-control" type="text" name="searchString" placeholder="Buscar por nombre..." [(ngModel)]="searchString" />
|
2021-08-08 06:51:16 +00:00
|
|
|
</div>
|
2021-08-11 07:30:33 +00:00
|
|
|
<!--<div class="ds-filter">
|
2021-08-08 06:51:16 +00:00
|
|
|
<select name="searchCategoria" class="form-control" [(ngModel)]="searchCategoria" style="width: 200px">
|
|
|
|
<option value="" selected="selected" disabled="disabled">Filtrar por categoría</option>
|
|
|
|
<option value="">Todas las categorías</option>
|
|
|
|
<option *ngFor="let categoria of categorias" [value]="categoria.nombre">{{ categoria.nombre }}</option>
|
|
|
|
</select>
|
2021-08-11 07:30:33 +00:00
|
|
|
</div>-->
|
|
|
|
|
2021-08-16 06:51:59 +00:00
|
|
|
<div class="ds-filter">
|
2021-08-11 07:30:33 +00:00
|
|
|
<div class="form-check pl-0 mb-3">
|
2021-08-16 06:51:59 +00:00
|
|
|
<input type="radio" class="form-check-input" id="under25" name="materialExampleRadios" [value]="0" />
|
2021-08-11 07:30:33 +00:00
|
|
|
<label for="under25" [(ngModel)]="searchPrecio">GRATIS</label>
|
|
|
|
</div>
|
|
|
|
<div class="form-check pl-0 mb-3">
|
2021-08-16 06:51:59 +00:00
|
|
|
<input type="radio" class="form-check-input" id="2550" name="materialExampleRadios" [value]="5" />
|
|
|
|
<label for="2550" [(ngModel)]="searchPrecio"> $5 - $10</label>
|
2021-08-11 07:30:33 +00:00
|
|
|
</div>
|
|
|
|
<div class="form-check pl-0 mb-3">
|
2021-08-16 06:51:59 +00:00
|
|
|
<input type="radio" class="form-check-input" id="50100" name="materialExampleRadios" />
|
|
|
|
<label for="50100" [(ngModel)]="searchPrecio">$10 - $20</label>
|
2021-08-11 07:30:33 +00:00
|
|
|
</div>
|
|
|
|
<div class="form-check pl-0 mb-3">
|
2021-08-16 06:51:59 +00:00
|
|
|
<input type="radio" class="form-check-input" id="100200" name="materialExampleRadios" />
|
|
|
|
<label for="100200" [(ngModel)]="searchPrecio">$20 - $30</label>
|
2021-08-11 07:30:33 +00:00
|
|
|
</div>
|
|
|
|
<div class="form-check pl-0 mb-3">
|
2021-08-16 06:51:59 +00:00
|
|
|
<input type="radio" class="form-check-input" id="200above" name="materialExampleRadios" />
|
|
|
|
<label [(ngModel)]="searchPrecio">Más de $30 </label>
|
2021-08-11 07:30:33 +00:00
|
|
|
</div>
|
2021-08-16 06:51:59 +00:00
|
|
|
</div>
|
2021-08-08 06:51:16 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
|
|
<div class="container" *ngIf="plantillas && plantillas.length == 0">
|
|
|
|
<h1 class="ds-title">Plantillas</h1>
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
<div class="social-box">
|
|
|
|
<h1>
|
|
|
|
<fa-icon [icon]="faFileAlt"></fa-icon>
|
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--Inicio de los cards-->
|
|
|
|
|
|
|
|
<div class="row gx-5" *ngIf="plantillas && plantillas.length > 0">
|
|
|
|
<div
|
|
|
|
class="col-xl-4 col-lg-4 col-md-6 mb-5"
|
|
|
|
*ngFor="
|
2021-08-11 07:30:33 +00:00
|
|
|
let plantilla of plantillas
|
|
|
|
| filter: 'nombre':searchString
|
|
|
|
| filter: 'categoria.nombre':searchCategoria
|
|
|
|
| filter: 'precio':searchPrecio;
|
2021-08-08 06:51:16 +00:00
|
|
|
trackBy: trackId
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<div class="card-encuesta lift h-100" [attr.data-id]="plantilla.id">
|
|
|
|
<!--(dblclick)="openSurvey($event)"
|
|
|
|
(click)="selectSurvey($event)"
|
|
|
|
|
|
|
|
-->
|
|
|
|
<div class="card-body p-3">
|
|
|
|
<div class="card-title mb-0">{{ plantilla.nombre }}</div>
|
|
|
|
<div class="entity-body--row m-2">
|
|
|
|
<span class="tag mt-2" *ngIf="plantilla.precio">Precio: {{ plantilla.precio | currency }}</span>
|
|
|
|
<span class="tag mt-2" *ngIf="plantilla.precio == 0 || plantilla.precio == null">Precio: GRATIS</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="entity-body--row m-2" *ngIf="plantilla.categoria != null">
|
|
|
|
<span class="mt-2">{{ plantilla.categoria.nombre | lowercase }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="entity-body--row m-2" *ngIf="plantilla.descripcion != null">
|
|
|
|
<span class="mt-2">{{ plantilla.descripcion | lowercase }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="text-xs text-gray-500">
|
|
|
|
<div class="entity-body">
|
|
|
|
<div class="entity-body--row m-2">
|
2021-08-14 07:04:21 +00:00
|
|
|
<button
|
|
|
|
type="submit"
|
|
|
|
[routerLink]="['/plantilla', plantilla.id, 'view']"
|
|
|
|
class="ds-btn ds-btn--secondary btn-sm"
|
|
|
|
data-cy="entityDetailsButton"
|
|
|
|
>
|
|
|
|
<fa-icon icon="eye"></fa-icon>
|
|
|
|
<span class="d-none d-md-inline">Vista previa</span>
|
|
|
|
</button>
|
2021-08-08 06:51:16 +00:00
|
|
|
<button class="ds-btn btn-outline-success btn-card" (click)="triggerPaypalDialog(plantilla)">
|
|
|
|
<fa-icon [icon]="faCreditCard"></fa-icon> Comprar con PayPal
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--Inicio de cards-->
|
|
|
|
</div>
|