64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
<div class="container">
|
|
<div class="row">
|
|
<section class="col-3">
|
|
<h5 class="text-warning ml-3">Sort</h5>
|
|
<select class="form-select mb-3" style="width: 100%;" (change)="onSortSelected($event.target.value)">
|
|
<option *ngFor="let sort of sortOptions"
|
|
[value]="sort.value"
|
|
>
|
|
{{sort.name}}
|
|
</option>
|
|
</select>
|
|
<h5 class="text-warning ml-3">Brands</h5>
|
|
<ul class="list-group my-3">
|
|
<li class="list-group-item"
|
|
*ngFor="let brand of brands"
|
|
[class.active]="brand.id === this.shopParams.brandId"
|
|
[value]="brand.id"
|
|
(click)="onBrandSelected(brand.id)"
|
|
>{{brand.name}}</li>
|
|
</ul>
|
|
<h5 class="text-warning ml-3">Type</h5>
|
|
<ul class="list-group my-3">
|
|
<li class="list-group-item"
|
|
*ngFor="let type of productType"
|
|
[class.active]="type.id === this.shopParams.typeId"
|
|
[value]="type.id"
|
|
(click)="onTypeSelected(type.id)"
|
|
>{{type.name}}</li>
|
|
</ul>
|
|
</section>
|
|
<section class="col-9">
|
|
<div class="d-flex justify-content-between align-items-center pb-2">
|
|
<app-paging-header
|
|
[totalCount]="totalCount"
|
|
[pageSize]="this.shopParams.pageSize"
|
|
[pageNumber]="this.shopParams.pageNumber"
|
|
></app-paging-header>
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-sm">
|
|
<input (keyup.enter)="onSearch()" style="width:300px" #search placeholder="Search" type="text" class="form-control">
|
|
</div>
|
|
<div class="col-sm">
|
|
<button (click)="onSearch()" class="btn btn-outline-primary my-3 me-2">Search</button>
|
|
<button (click)="OnReset()" class="btn btn-outline-success my-3">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
|
<div class="col mb-3" *ngFor="let item of products">
|
|
<app-product-item [product]="item"></app-product-item>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-center" *ngIf="totalCount > 0">
|
|
<app-pager
|
|
[pageSize]="shopParams.pageSize"
|
|
[totalCount]="totalCount"
|
|
(pageChanged)="onPageChange($event)"
|
|
></app-pager>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|