design fixes share
parent
f9576048a0
commit
a707c46952
@ -0,0 +1,32 @@
|
|||||||
|
<app-generic-header
|
||||||
|
showImage="false"
|
||||||
|
showBack="false"
|
||||||
|
navigate="false"
|
||||||
|
backlink="false"
|
||||||
|
[headerText]="'general,filter-offers' | translate" (onBackClick)="closeModal()">
|
||||||
|
</app-generic-header>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<div class="container-icon" *ngIf="categories.length>0">
|
||||||
|
|
||||||
|
<ion-item *ngFor="let key of categories" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.name }">
|
||||||
|
<ion-label>
|
||||||
|
{{key.name}}
|
||||||
|
</ion-label>
|
||||||
|
<ion-thumbnail slot="start">
|
||||||
|
<img [src]="key.icon">
|
||||||
|
</ion-thumbnail>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ion-footer >
|
||||||
|
<div class="centerDiv">
|
||||||
|
<ion-button class="footer-button" ion-button (click)="applyFilters()">
|
||||||
|
{{ts.trPK('general','apply-filters')}} </ion-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</ion-footer>
|
||||||
|
</ion-content>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
ion-label{
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
ion-thumbnail img{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.active::before{
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 15px;
|
||||||
|
padding: 0px;
|
||||||
|
background: #3cc353;
|
||||||
|
padding: 3px 2px 2px 3px;
|
||||||
|
border-radius: 60%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
content: '✓';
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-button{
|
||||||
|
background: var(--newgreen)!important;border-radius: 10px; --background: transparent;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
ion-footer{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FilterComponent } from './filter.component';
|
||||||
|
|
||||||
|
describe('FilterComponent', () => {
|
||||||
|
let component: FilterComponent;
|
||||||
|
let fixture: ComponentFixture<FilterComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FilterComponent ],
|
||||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FilterComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
import { AfterViewInit, Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||||
|
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||||
|
import { OfferDiscountService } from '../services/service';
|
||||||
|
import { ModalController } from '@ionic/angular';
|
||||||
|
@Component({
|
||||||
|
selector: 'app-filter',
|
||||||
|
templateUrl: './filter.component.html',
|
||||||
|
styleUrls: ['./filter.component.scss'],
|
||||||
|
})
|
||||||
|
export class FilterComponent implements AfterViewInit {
|
||||||
|
|
||||||
|
segment: any = '1';
|
||||||
|
categoriesObj: any;
|
||||||
|
categories: any = [];
|
||||||
|
offersData: any = [];
|
||||||
|
activeClass: any;
|
||||||
|
tempSearch: any = [];
|
||||||
|
searchText: String;
|
||||||
|
public activeKey = {}
|
||||||
|
constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService) { }
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
|
||||||
|
this.getOfferDiscount();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
openDetails(offer) {
|
||||||
|
this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers);
|
||||||
|
|
||||||
|
var related = this.offersData.filter((res) => res.rowID != offer.rowID);
|
||||||
|
this.cs.sharedService.setSharedData(related, OfferDiscountService.related_offers);
|
||||||
|
|
||||||
|
this.cs.navigateForward('/offersdiscount/offer-details');
|
||||||
|
}
|
||||||
|
getOfferDiscount() {
|
||||||
|
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']);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
displayOffers(data) {
|
||||||
|
if (data['data']) {
|
||||||
|
var parseJSON = data['data'];
|
||||||
|
var offers = JSON.parse(parseJSON)
|
||||||
|
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.activeKey = key;
|
||||||
|
this.activeClass = key.name;
|
||||||
|
this.offersData = this.categoriesObj[key.name];
|
||||||
|
this.tempSearch = JSON.parse(JSON.stringify(this.offersData));
|
||||||
|
}
|
||||||
|
checkDate(date) {
|
||||||
|
return new Date(date) >= new Date()
|
||||||
|
}
|
||||||
|
getDotted(temp) {
|
||||||
|
return temp.substring(0, 60) + " ...";
|
||||||
|
}
|
||||||
|
search(t) {
|
||||||
|
this.offersData = this.tempSearch.filter((post, index) => {
|
||||||
|
if (post.Title.toLowerCase().indexOf(t.toLowerCase()) > -1)
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
applyFilters() {
|
||||||
|
this.cs.sharedService.setSharedData(this.activeKey, OfferDiscountService.selected_filters);
|
||||||
|
this.cs.back();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue