filter still not fixed

MOHEMM-SFH-COLORS
Sultan Khan 4 years ago
parent 72756d812d
commit 8f9ea0b949

@ -10,12 +10,15 @@
<ion-content> <ion-content>
<div class="container-icon" *ngIf="categories.length>0"> <div class="container-icon" *ngIf="categories.length>0">
<ion-item lines="none" *ngFor="let key of categories" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.name }"> <ion-item lines="none" *ngFor="let key of categories" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.categoryName_en }">
<ion-label> <ion-label *ngIf="direction =='ltr'">
{{key.name}} {{key.categoryName_en}}
</ion-label>
<ion-label *ngIf="direction =='rtl'">
{{key.categoryName_ar}}
</ion-label> </ion-label>
<ion-thumbnail slot="start"> <ion-thumbnail slot="start">
<img [src]="key.icon"> <img [src]="key.content">
</ion-thumbnail> </ion-thumbnail>
</ion-item> </ion-item>

@ -12,7 +12,7 @@ ion-thumbnail img{
top: 15px; top: 15px;
padding: 0px; padding: 0px;
background: #3cc353; background: #3cc353;
padding: 3px 2px 0px 3px; padding: 3px 2px 1px 3px;
border-radius: 60%; border-radius: 60%;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;

@ -18,11 +18,15 @@ export class FilterComponent implements AfterViewInit {
tempSearch: any = []; tempSearch: any = [];
searchText: String; searchText: String;
public activeKey = {} public activeKey = {}
direction: any;
constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService) { } constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService) { }
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.direction = TranslatorService.getCurrentDirection();
this.categories = this.cs.sharedService.getSharedData(OfferDiscountService.categories, false);
this.getOfferDiscount();
// this.getOfferDiscount();
} }
@ -34,52 +38,52 @@ export class FilterComponent implements AfterViewInit {
this.cs.navigateForward('/offersdiscount/offer-details'); this.cs.navigateForward('/offersdiscount/offer-details');
} }
getOfferDiscount() { // getOfferDiscount() {
this.cs.startLoading(); // this.cs.startLoading();
this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry')).subscribe((res) => { // this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry')).subscribe((res) => {
var data = JSON.parse(res['Mohemm_ITG_ResponseItem']); // var data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
this.cs.stopLoading(); // this.cs.stopLoading();
if (data['result']) // if (data['result'])
this.displayOffers(data['result']); // this.displayOffers(data['result']);
}); // });
} // }
displayOffers(data) { // displayOffers(data) {
if (data['data']) { // if (data['data']) {
var parseJSON = data['data']; // var parseJSON = data['data'];
var offers = JSON.parse(parseJSON) // var offers = JSON.parse(parseJSON)
this.categoriesObj = this.groupBy(offers, TranslatorService.getCurrentDirection() == 'ltr' ? 'categoryName_en' : 'categoryName_ar'); // this.categoriesObj = this.groupBy(offers, TranslatorService.getCurrentDirection() == 'ltr' ? 'categoryName_en' : 'categoryName_ar');
// = Object.keys(this.categoriesObj); // // = Object.keys(this.categoriesObj);
for (var x in this.categoriesObj) { // for (var x in this.categoriesObj) {
for (var y in offers) { // for (var y in offers) {
if (x == offers[y].categoryName_en && this.categories.filter(item => item.name.includes(x)) == false) { // if (x == offers[y].categoryName_en && this.categories.filter(item => item.name.includes(x)) == false) {
this.categories.push({ // this.categories.push({
name: x, // name: x,
icon: offers[y].icon // icon: offers[y].icon
}) // })
} // }
} // }
} // }
this.filterOffers(this.categories[0]); // this.filterOffers(this.categories[0]);
} // }
} // }
groupBy(xs, key) { // groupBy(xs, key) {
return xs.reduce((rv, x) => { // return xs.reduce((rv, x) => {
(rv[x[key.trim()]] = rv[x[key]] || []).push(x); // (rv[x[key.trim()]] = rv[x[key]] || []).push(x);
return rv // return rv
}, {}); // }, {});
}; // };
filterOffers(key) { filterOffers(key) {
this.activeKey = key; this.activeKey = key
this.activeClass = key.name; this.activeClass = key.categoryName_en;
this.offersData = this.categoriesObj[key.name]; // this.offersData = this.categoriesObj[key.name];
this.tempSearch = JSON.parse(JSON.stringify(this.offersData)); // this.tempSearch = JSON.parse(JSON.stringify(this.offersData));
} }
checkDate(date) { checkDate(date) {
return new Date(date) >= new Date() return new Date(date) >= new Date()

@ -33,13 +33,14 @@
<div class="container-icon" *ngIf="categories.length>0"> <div class="container-icon" *ngIf="categories.length>0">
<div class="box-icon" *ngFor="let key of categories"> <div class="box-icon" *ngFor="let key of categories">
<div class="sale-icon" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.name }"> <div class="sale-icon" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.categoryName_en }">
<div class="top"> <div class="top">
<!-- <ion-icon name="images"></ion-icon> --> <!-- <ion-icon name="images"></ion-icon> -->
<img [src]="key.icon" /> <img [src]="key.content" />
</div> </div>
<div class="bottom-icon"> <div class="bottom-icon">
<p>{{key.name}}</p> <p *ngIf="direction =='ltr'">{{key.categoryName_en}}</p>
<p *ngIf="direction =='rtl'">{{key.categoryName_ar}}</p>
</div> </div>
</div> </div>
</div> </div>

@ -37,8 +37,7 @@
} }
.box-icon{ .box-icon{
width:90px; width: 90px;
// height: 90px;
margin: 0px; margin: 0px;
display: inline-block; display: inline-block;
} }
@ -48,24 +47,29 @@
margin: 5px; margin: 5px;
border-radius: 10px; border-radius: 10px;
background: #fff; background: #fff;
height: 80px;
position: relative;
} }
.sale-icon ion-icon{ .sale-icon ion-icon{
font-size: 25px; font-size: 25px;
} }
.sale-icon p{ .sale-icon p{
margin-top: 0px; margin-top: 0px;
margin-bottom: 5px; margin-bottom: 10px;
text-transform: capitalize; text-transform: capitalize;
font-size: 10px; font-size: 10px;
text-align: left; text-align: left;
line-height: 1;
} }
.bottom-icon{ .bottom-icon{
text-overflow: clip; text-overflow: ellipsis;
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
padding:1px; padding: 1px;
font-weight: bold; font-weight: bold;
position: absolute;
width: 70px;
bottom: 5px;
} }
ion-card-header{ ion-card-header{
background: #fff; background: #fff;

@ -20,6 +20,8 @@ export class HomeComponent implements AfterViewInit {
activeClass: any; activeClass: any;
tempSearch: any = []; tempSearch: any = [];
searchText: String; searchText: String;
direction: 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 this.route
@ -34,10 +36,19 @@ export class HomeComponent implements AfterViewInit {
this.getOfferDiscount(); this.getOfferDiscount();
} }
ionEnter() { ionEnter() {
this.direction = TranslatorService.getCurrentDirection();
let activeClass = this.cs.sharedService.getSharedData(OfferDiscountService.selected_filters); let activeClass = this.cs.sharedService.getSharedData(OfferDiscountService.selected_filters);
if (activeClass) { if (activeClass) {
this.filterOffers(activeClass); this.filterOffers(activeClass);
} }
this.getCategories();
}
getCategories() {
this.offersService.getCategories().subscribe((result) => {
this.categories = result.result.data;
this.cs.sharedService.setSharedData(this.categories, OfferDiscountService.categories);
});
} }
openDetails(offer) { openDetails(offer) {
this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers); this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers);
@ -60,38 +71,39 @@ export class HomeComponent implements AfterViewInit {
displayOffers(data) { displayOffers(data) {
if (data['data']) { if (data['data']) {
var parseJSON = data['data']; var parseJSON = data['data'];
var offers = JSON.parse(parseJSON) var offers = JSON.parse(parseJSON);
this.categoriesObj = this.groupBy(offers, TranslatorService.getCurrentDirection() == 'ltr' ? 'categoryName_en' : 'categoryName_ar'); this.offersData = offers;
// this.categoriesObj = this.groupBy(offers, TranslatorService.getCurrentDirection() == 'ltr' ? 'categoryName_en' : 'categoryName_ar');
// = Object.keys(this.categoriesObj); // = Object.keys(this.categoriesObj);
for (var x in this.categoriesObj) { // for (var x in this.categoriesObj) {
for (var y in offers) { // for (var y in offers) {
if (x == offers[y].categoryName_en && this.categories.filter(item => item.name.includes(x)) == false) { // if (x == offers[y].categoryName_en && this.categories.filter(item => item.name.includes(x)) == false) {
this.categories.push({ // this.categories.push({
name: x, // name: x,
icon: offers[y].icon // icon: offers[y].icon
}) // })
} // }
} // }
} // }
this.filterOffers(this.categories[0]); //this.filterOffers(this.categories[0]);
} }
} }
groupBy(xs, key) { // groupBy(xs, key) {
return xs.reduce((rv, x) => { // return xs.reduce((rv, x) => {
(rv[x[key.trim()]] = rv[x[key]] || []).push(x); // (rv[x[key.trim()]] = rv[x[key]] || []).push(x);
return rv // return rv
}, {}); // }, {});
}; // };
filterOffers(key) { filterOffers(key) {
this.activeClass = key.name; this.activeClass = key.categoryName_en;
this.offersData = this.categoriesObj[key.name]; this.offersData = this.categoriesObj[key.name];
this.tempSearch = JSON.parse(JSON.stringify(this.offersData)); // this.tempSearch = JSON.parse(JSON.stringify(this.offersData));
} }
checkDate(date) { checkDate(date) {
return new Date(date) >= new Date() return new Date(date) >= new Date()

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