Bueno la idea es crear varios botones para que la lista de productos salga con una serie de categorías especificas por ejemplo apreto un boton y sale los productos de la categoría plantas.
el html sería:
<ion-header class="ion-no-border">
<div class="div_searchbar">
<ion-searchbar animated="true" mode="ios" [(ngModel)]="search" placeholder="Busca en Mascota " [debounce]="250" class="search_bar" (ionChange)="onSearchChange()"></ion-searchbar>
<ion-button fill="clear" (click)="open_filter()">
<ion-icon slot="icon-only" mode="md" name="options-outline" ></ion-icon>
</ion-button>
<ion-button (click)="show_filteresult('plantas')">Enviar</ion-button>
</div>
<div class="filter_div" *ngIf="advancecat.filter_category!='' ">
<div class="filter_item" *ngIf="advancecat.filter_category!=''" >
<span class="filter_label"> Categoria:</span><span style="margin:auto">{{advancecat.filter_category }}</span>
<ion-icon name="close-circle-outline" class="filterclose_btn" (click)="advancecat.filter_category='';refresh_filter()"></ion-icon>
</div>
</div>
<div class="filter_div" *ngIf="filterdata.filter_category!='' || filterdata.filter_location!='' || filterdata.filter_minprice!='' || filterdata.filter_maxprice!='' ">
<div class="filter_item" *ngIf="filterdata.filter_category!=''" >
<span class="filter_label"> Categoria:</span><span style="margin:auto">{{filterdata.filter_category }}</span>
<ion-icon name="close-circle-outline" class="filterclose_btn" (click)="filterdata.filter_category='';refresh_filter()"></ion-icon>
</div>
<div class="filter_item" *ngIf="filterdata.filter_location!=''" (click)="filterdata.filter_location='';refresh_filter()">
<span class="filter_label"> Ubicacion:</span> <span style="margin:auto">{{ filterdata.filter_location}}</span>
<ion-icon name="close-circle-outline" class="filterclose_btn"></ion-icon>
</div>
<div class="filter_item" *ngIf="filterdata.filter_minprice!='' || filterdata.filter_maxprice!=''" (click)="filterdata.filter_minprice='';filterdata.filter_maxprice='';refresh_filter();">
<span class="filter_label"> Precio:</span> <span style="margin:auto">{{filterdata.filter_minprice +'€'+ ' ~ ' + filterdata.filter_maxprice +'€'}}</span>
<ion-icon name="close-circle-outline" class="filterclose_btn"></ion-icon>
</div>
</div>
</ion-header>
<ion-content class="content">
<div class="main_content_div" *ngIf="dummy?.length>0">
<ion-row class="items-row">
<ion-col size="6" class="product_col" *ngFor="let product_item of dummy;let i = index">
<div class="product_item">
<ion-skeleton-text animated style=" width: 90%; margin: auto; height: 25vw; "></ion-skeleton-text>
<div class="product_infodiv">
<div class="product_rowdiv" >
<ion-skeleton-text animated style=" width: 90%;height: 10px;margin: auto; "> </ion-skeleton-text>
</div>
<div class="product_rowdiv">
<ion-skeleton-text animated style=" width: 90%; height: 10px;margin: auto; "> </ion-skeleton-text>
</div>
</div>
</div>
</ion-col>
</ion-row>
</div>
<div class="main_content_div" *ngIf="dummy?.length==0">
<p class="title_p"> Productos cerca de ti </p>
<ion-row class="items-row">
<ion-col size="6" class="product_col" *ngFor="let product_item of product_list;let i = index">
<div class="product_item">
<ion-img class="product_image" [src]="product_item.image_list[0].file_url" (click)="open_product(product_item)" ></ion-img>
<div class="product_infodiv">
<div class="product_rowdiv" (click)="open_product(product_item)" >
<p class="product_price"> {{product_item.price +'€' }} </p>
<ion-icon src="assets/icon/pin.svg" class="pin_icon"></ion-icon>
<p class="product_city"> {{product_item.address.city }}</p>
</div>
<div class="product_rowdiv">
<p class="product_title" > {{product_item.title }}</p>
<ion-icon *ngIf="product_item.user_id!=api.userdata.user_id" slot="icon-only" src="assets/icon/chat_btn.svg" class="chat_icon" (click)="open_chat(product_item)"></ion-icon>
</div>
</div>
</div>
</ion-col>
</ion-row>
<!-- <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
-->
</div>
<div class="main_content_div" *ngIf="dummy?.length==0 && product_list?.length==0">
<p class="hint_p"> ¡prueva otro nombre! </p>
</div>
</ion-content>
el ts:
import { Component, OnInit,ViewChild } from '@angular/core';
import { ApiService } from '../api.service';
import { Router ,NavigationExtras} from '@angular/router';
import { UtilService } from '../utils/util.service';
import {FilterPage} from '../modals/filter/filter.page';
import { ModalController } from '@ionic/angular';
import { orderBy, uniqBy } from 'lodash';
@Component({
selector: 'home-page',
templateUrl: './home.page.html',
styleUrls: [
'./home.page.scss'
]
})
export class HomePage implements OnInit {
dummy = Array(20);
product_list=[];
search="";
dummy_product_list=[];
filterdata={
'filter_category':'',
'filter_minprice':'',
'filter_maxprice':'',
'filter_location':''
};
current_index=0;
segment_size=6;
constructor(public api: ApiService , public router: Router, public util: UtilService, public modalController: ModalController ) {
}
ngOnInit(): void {
}
ionViewWillEnter() {
this.get_all_product();
}
onSearchChange() {
console.log(this.search);
this.product_list = this.dummy_product_list.filter((item: any) => {
return item.title.toLowerCase().includes(this.search.toLowerCase());
});
}
get_all_product(){
this.current_index=0;
this.segment_size=6;
var data = {
'user_id': this.api.userdata.user_id,
'api_token': this.api.userdata.api_token
};
this.dummy = Array(20);
this.api.get_all_product(data).subscribe((res) => {
this.dummy = [];
if (res.status == '1') {
var tmp_result = [];
for (let i=0;i<res.data.length;i++){
let distance = this.distanceInKmBetweenEarthCoordinates(this.api.userdata.lat, this.api.userdata.lng, res.data[i].lat, res.data[i].lng);
console.log('distance', distance);
res.data[i].distance=distance
tmp_result.push(res.data[i]);
}
tmp_result = orderBy(tmp_result, 'distance', 'asc');
this.dummy_product_list=tmp_result;
this.product_list=tmp_result;
console.log(this.dummy_product_list);
this.refresh_filter();
}else{
this.dummy_product_list=[];
this.product_list=[];
}
}, error => {
this.dummy = [];
this.util.errorToast("Error en el servidor.");
});
}
loadData(event) {
var self=this;
// setTimeout(() => {
// console.log('load more');
// self.current_index=self.current_index+self.segment_size;
// console.log(self.current_index);
// // console.log(this.dummy_message_list);
// var segment_array=self.dummy_product_list.slice(self.current_index,self.current_index+self.segment_size);
// // console.log(segment_array);
// self.product_list=self.product_list.concat(segment_array);
// // console.log(self.message_list);
// event.target.complete();
// // App logic to determine if all data is loaded
// // and disable the infinite scroll
// if (this.product_list.length >= this.dummy_product_list.length) {
// event.target.disabled = true;
// }
// }, 500);
}
distanceInKmBetweenEarthCoordinates(lat1, lon1, lat2, lon2) {
console.log(lat1, lon1, lat2, lon2);
const earthRadiusKm = 6371;
const dLat = this.degreesToRadians(lat2 - lat1);
const dLon = this.degreesToRadians(lon2 - lon1);
lat1 = this.degreesToRadians(lat1);
lat2 = this.degreesToRadians(lat2);
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return earthRadiusKm * c;
}
degreesToRadians(degrees) {
return degrees * Math.PI / 180;
}
open_product(item){
const navData: NavigationExtras = {
queryParams: {
product_details:JSON.stringify(item)
}
};
this.router.navigate(['app/home/product_details'],navData);
}
open_chat(chat_item){
var data = {
'user_id': this.api.userdata.user_id,
'api_token': this.api.userdata.api_token,
'type':'product',
'product_id':chat_item.product_id,
'auction_id':0,
'seller_user_id':chat_item.user_id,
'bid_user_id':this.api.userdata.user_id
};
this.util.show();
this.api.open_chatroom(data).subscribe((res) => {
console.log(res);
this.util.hide();
if (res.status == '1') {
const navData: NavigationExtras = {
queryParams: {
chat_item:JSON.stringify(res.data)
}
};
this.router.navigate(['chat'],navData);
}else{
this.util.errorToast("Can't open chat.Try again!");
}
}, error => {
this.util.hide();
this.util.errorToast("Error en el servidor.");
});
}
async open_filter(){
const modal = await this.modalController.create({
component: FilterPage,
backdropDismiss: false,
componentProps: {
'filterdata': this.filterdata
}
});
modal.onDidDismiss().then((dataReturned) => {
if (dataReturned && dataReturned.data) {
this.filterdata = dataReturned.data;
console.log(this.filterdata);
this.show_filteresult();
}else{
console.log("No Filter");
}
});
await modal.present().then(() => {
});
}
show_filteresult(){
var tmp_list=this.product_list;
var self=this;
if (this.filterdata.filter_category!=''){
tmp_list= tmp_list.filter((item: any) => {
return item.category_title.toLowerCase().includes(self.filterdata.filter_category.toLowerCase()) ;
});
}
if (this.filterdata.filter_location!=''){
tmp_list= tmp_list.filter((item: any) => {
return item.address.city.toLowerCase().includes(self.filterdata.filter_location.toLowerCase()) ;
});
}
if (this.filterdata.filter_minprice!='' || this.filterdata.filter_maxprice!=''){
tmp_list= tmp_list.filter((item: any) => {
return item.price>=this.filterdata.filter_minprice && this.filterdata.filter_maxprice>=item.price ;
});
}
this.product_list=tmp_list;
}
refresh_filter(){
console.log(this.filterdata);
this.onSearchChange();
this.show_filteresult();
}
}