adding filter, pagination and enhance calling services in service.ts file

MOHEMM-SFH-COLORS
enadhilal 4 years ago
parent 1dd858101a
commit b0da97573c

@ -1,24 +1,22 @@
<ion-content>
<div class="head-title">
<app-generic-header
showImage="false"
showBack="true"
[headerText]="'itemforsale,offersdiscount' | translate">
</app-generic-header>
<app-generic-header showImage="false" showBack="true" [headerText]="'itemforsale,offersdiscount' | translate">
</app-generic-header>
</div>
<div class="header"></div>
<div class="bottom"></div>
<div class="sales-items" *ngIf="segment =='1'">
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-item lines="none" class="SearchtextBox">
<ion-input [placeholder]="'itemforsale,search-items'| translate" [(ngModel)]="searchText" (ionInput)="search($event.target.value)"></ion-input>
</ion-item>
<ion-item lines="none" class="SearchtextBox">
<ion-input [placeholder]="'itemforsale,search-items'| translate" [(ngModel)]="searchText"
(ionInput)="search($event.target.value)"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
@ -29,60 +27,66 @@
<img class='filter' src="assets/imgs/itemsforsale/filter.svg">
</ion-col>
</ion-row>
</ion-grid>
<div class="container-icon" *ngIf="categories.length>0">
<div class="box-icon" *ngFor="let key of categories">
<div class="sale-icon" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.categoryName_en }">
<div class="top">
<!-- <ion-icon name="images"></ion-icon> -->
<img [src]="key.content" />
</div>
<div class="bottom-icon">
<p *ngIf="direction =='ltr'">{{key.categoryName_en}}</p>
<p *ngIf="direction =='rtl'">{{key.categoryName_ar}}</p>
</div>
</div>
</ion-grid>
<div class="container-icon" *ngIf="categories.length>0">
<div class="box-icon" *ngFor="let key of categories">
<div class="sale-icon" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.categoryName_en }">
<div class="top">
<!-- <ion-icon name="images"></ion-icon> -->
<img [src]="key.content" />
</div>
<div class="bottom-icon">
<p *ngIf="direction =='ltr'">{{key.categoryName_en}}</p>
<p *ngIf="direction =='rtl'">{{key.categoryName_ar}}</p>
</div>
</div>
</div>
</div>
<div class="grid-container">
<ion-row>
<ion-col size="6" *ngFor="let item of offersData" (click)="openDetails(item)">
<ion-card class="offers-discount-card">
<ion-card-header>
<!-- <img [src]="item.Banner_Image" /> -->
<div class="header-img" [ngStyle]="{'background-image': 'url(' + item.Banner_Image + ')'}" ></div>
<ion-card-title>{{item.Title}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<div [innerHTML]="getDotted(item.Description)"></div>
<div class="dark offers-title">
{{item.Discount}}
</div>
<ion-row [class]="checkDate(item['End Date']) ==true ? 'green' : 'red'">
<ion-col size="10" *ngIf="checkDate(item['End Date']) ==true">
<p class="offer-valid">{{ts.trPK('general','offer-valid')}}</p>
</ion-col>
<ion-col size="10" *ngIf="checkDate(item['End Date']) ==false">
<p class="offer-valid"> {{ts.trPK('general','expired')}}</p>
</ion-col>
<ion-col size="2" >
<img src="assets/imgs/itemsforsale/arrow.svg">
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</div>
<ion-row>
<ion-col size="6" *ngFor="let item of offersData" (click)="openDetails(item)">
<ion-card class="offers-discount-card">
<ion-card-header>
<!-- <img [src]="item.Banner_Image" /> -->
<div class="header-img" [ngStyle]="{'background-image': 'url(' + item.Banner_Image + ')'}"></div>
<ion-card-title>{{item.Title}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<div [innerHTML]="getDotted(item.Description)"></div>
<div class="dark offers-title">
{{item.Discount}}
</div>
<ion-row [class]="checkDate(item['End Date']) ==true ? 'green' : 'red'">
<ion-col size="10" *ngIf="checkDate(item['End Date']) ==true">
<p class="offer-valid">{{ts.trPK('general','offer-valid')}}</p>
</ion-col>
<ion-col size="10" *ngIf="checkDate(item['End Date']) ==false">
<p class="offer-valid"> {{ts.trPK('general','expired')}}</p>
</ion-col>
<ion-col size="2">
<img src="assets/imgs/itemsforsale/arrow.svg">
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>
<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>
</ion-content>

@ -1,11 +1,10 @@
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { FilterComponent } from '../filter/filter.component';
import { OfferDiscountService } from '../services/service';
import { IonInfiniteScroll } from '@ionic/angular';
@Component({
selector: 'app-home',
@ -13,6 +12,9 @@ import { OfferDiscountService } from '../services/service';
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements AfterViewInit {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
segment: any = '1';
categoriesObj: any;
categories: any = [];
@ -21,8 +23,15 @@ export class HomeComponent implements AfterViewInit {
tempSearch: any = [];
searchText: String;
direction: any;
itemCounter = 1;
itemType: any;
// categories:any = [];
constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService, public route: ActivatedRoute) {
constructor(
public ts: TranslatorService,
public modalController: ModalController,
public cs: CommonService,
public offersService: OfferDiscountService,
public route: ActivatedRoute) {
this.route
.params.subscribe(val => {
@ -35,8 +44,10 @@ export class HomeComponent implements AfterViewInit {
ngAfterViewInit(): void {
this.getOfferDiscount();
}
ionEnter() {
this.direction = TranslatorService.getCurrentDirection();
console.log(this.direction);
let activeClass = this.cs.sharedService.getSharedData(OfferDiscountService.selected_filters);
if (activeClass) {
this.filterOffers(activeClass);
@ -45,8 +56,8 @@ export class HomeComponent implements AfterViewInit {
}
getCategories() {
this.offersService.getCategories().subscribe((result) => {
this.categories = result.result.data;
this.offersService.getCategories({}).subscribe((result) => {
this.categories = JSON.parse(result.Mohemm_ITG_ResponseItem).result.data; //result.result.data;
this.cs.sharedService.setSharedData(this.categories, OfferDiscountService.categories);
});
}
@ -58,60 +69,54 @@ export class HomeComponent implements AfterViewInit {
this.cs.navigateForward('/offersdiscount/offer-details');
}
getOfferDiscount() {
getOfferDiscount(pageNo?, categoryId?) {
this.cs.startLoading();
this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry')).subscribe((res) => {
var data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
this.cs.stopLoading();
if (data['result'])
this.displayOffers(data['result']);
});
if (categoryId) {
this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry'),pageNo, categoryId).subscribe((res) => {
var data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
this.cs.stopLoading();
if (data['result'])
this.displayOffers(data['result']);
});
} else {
this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry')).subscribe((res) => {
var data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
this.cs.stopLoading();
if (data['result'])
this.displayOffers(data['result']);
});
}
}
displayOffers(data) {
if (data['data']) {
var parseJSON = data['data'];
var offers = JSON.parse(parseJSON);
this.offersData = offers;
// this.categoriesObj = this.groupBy(offers, TranslatorService.getCurrentDirection() == 'ltr' ? 'categoryName_en' : 'categoryName_ar');
// = Object.keys(this.categoriesObj);
// for (var x in this.categoriesObj) {
// for (var y in offers) {
// if (x == offers[y].categoryName_en && this.categories.filter(item => item.name.includes(x)) == false) {
// this.categories.push({
// name: x,
// icon: offers[y].icon
// })
// }
// }
// }
//this.filterOffers(this.categories[0]);
}
}
// groupBy(xs, key) {
// return xs.reduce((rv, x) => {
// (rv[x[key.trim()]] = rv[x[key]] || []).push(x);
// return rv
// }, {});
// };
filterOffers(key) {
this.activeClass = key.categoryName_en;
this.offersData = this.categoriesObj[key.name];
// this.tempSearch = JSON.parse(JSON.stringify(this.offersData));
if(this.direction === 'ltr') {
this.activeClass = key.categoryName_en;
}else {
this.activeClass = key.categoryName_ar
}
this.itemType = key.id;
this.getOfferDiscount(1,this.itemType)
}
checkDate(date) {
return new Date(date) >= new Date()
}
getDotted(temp) {
temp = this.stripHtml(temp);
return temp.substring(0, 70) + " ...";
}
stripHtml(html) {
var temporalDivElement = document.createElement("div");
@ -119,14 +124,15 @@ export class HomeComponent implements AfterViewInit {
return temporalDivElement.textContent || temporalDivElement.innerText || "";
}
search(t) {
search(t) {
this.offersData = this.tempSearch.filter((post, index) => {
if (post.Title.toLowerCase().indexOf(t.toLowerCase()) > -1)
return true;
});
}
async openModel() {
// const modal = await this.modalController.create({
// component: FilterComponent,
@ -136,4 +142,45 @@ export class HomeComponent implements AfterViewInit {
// modal.present();
this.cs.navigateForward('/offersdiscount/filter-page');
}
loadData(event) {
const counter = 1;
this.itemCounter += counter;
console.log(this.itemType);
if (this.itemType) {
setTimeout(() => {
event.target.complete();
console.log(this.itemCounter);
this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry'), this.itemCounter, this.itemType).subscribe((res) => {
const data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
if (data['result']){
const allItem = JSON.parse(data.result['data']);
if (allItem) {
allItem.forEach(element => {
this.offersData.push(element);
});
}
}
});
// event.target.disabled = true;
}, 1000);
} else {
setTimeout(() => {
event.target.complete();
console.log(this.itemCounter);
this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry'), this.itemCounter).subscribe((res) => {
const data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
if (data['result']){
const allItem = JSON.parse(data.result['data']);
if (allItem) {
allItem.forEach(element => {
this.offersData.push(element);
});
}
}
});
// event.target.disabled = true;
}, 1000);
}
}
}

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save