116 lines
4.9 KiB
HTML
116 lines
4.9 KiB
HTML
<div class="row">
|
|
<div class="col">
|
|
<div class="page-header-ui page-header-ui-dark bg-img-cover overlay">
|
|
<div class="container px-0 text-black">
|
|
<h1 class="page-header-ui-title">¡Compre y utilice las plantillas!</h1>
|
|
|
|
<h2>Puede comprar sus plantillas mediante <b> PayPal </b> <fa-icon [icon]="faCreditCard"></fa-icon></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-light py-10 container-encuestas">
|
|
<div class="container px-0">
|
|
<!--filtrado-->
|
|
|
|
<div class="input-group">
|
|
<div class="ds-filter">
|
|
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
|
|
<input class="form-control" type="text" name="searchString" placeholder="Buscar por nombre..." [(ngModel)]="searchString" />
|
|
</div>
|
|
<!--<div class="ds-filter">
|
|
<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>
|
|
</div>-->
|
|
|
|
<!--<div class="ds-filter">
|
|
|
|
<div class="form-check pl-0 mb-3">
|
|
<input type="radio" class="form-check-input" id="under25" name="materialExampleRadios" [value]="0">
|
|
<label for="under25" [(ngModel)]="searchPrecio">GRATIS</label>
|
|
</div>
|
|
<div class="form-check pl-0 mb-3">
|
|
<input type="radio" class="form-check-input" id="2550" name="materialExampleRadios" [value]="">
|
|
<label for="2550" [(ngModel)]="searchPrecio"> $5 - $10</label>
|
|
</div>
|
|
<div class="form-check pl-0 mb-3">
|
|
<input type="radio" class="form-check-input" id="50100" name="materialExampleRadios">
|
|
<label for="50100" [(ngModel)]="searchPrecio">$10 - $20</label>
|
|
</div>
|
|
<div class="form-check pl-0 mb-3">
|
|
<input type="radio" class="form-check-input" id="100200" name="materialExampleRadios">
|
|
<label for="100200" [(ngModel)]="searchPrecio">$20 - $30</label>
|
|
</div>
|
|
<div class="form-check pl-0 mb-3">
|
|
<input type="radio" class="form-check-input" id="200above" name="materialExampleRadios">
|
|
<label [(ngModel)]="searchPrecio">Más de $30 </label>
|
|
</div>
|
|
</div>-->
|
|
</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="
|
|
let plantilla of plantillas
|
|
| filter: 'nombre':searchString
|
|
| filter: 'categoria.nombre':searchCategoria
|
|
| filter: 'precio':searchPrecio;
|
|
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">
|
|
<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>
|