File
Implements
Constructor
constructor(navParams: NavParams, popCtrl: PopoverController, platform: Platform, telemetryGeneratorService: TelemetryGeneratorService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| navParams |
NavParams
|
No
|
| popCtrl |
PopoverController
|
No
|
| platform |
Platform
|
No
|
| telemetryGeneratorService |
TelemetryGeneratorService
|
No
|
|
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
backButtonFunc
|
Type : Subscription
|
|
|
import { Component, ViewEncapsulation, OnDestroy } from '@angular/core';
import { NavParams, PopoverController, Platform } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { TelemetryGeneratorService } from '@app/services/telemetry-generator.service';
import {
Environment, InteractSubtype, InteractType, PageId
} from '@app/services/telemetry-constants';
@Component({
selector: 'app-filteroption',
templateUrl: './filteroption.component.html',
styleUrls: ['./filteroption.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FilteroptionComponent implements OnDestroy {
facets: any;
backButtonFunc: Subscription;
source: string;
constructor(
private navParams: NavParams,
private popCtrl: PopoverController,
private platform: Platform,
private telemetryGeneratorService: TelemetryGeneratorService
) {
this.facets = this.navParams.get('facet');
this.source = this.navParams.get('source');
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
this.popCtrl.dismiss();
});
}
ngOnDestroy() {
if (this.backButtonFunc) {
this.backButtonFunc.unsubscribe();
}
}
confirm() {
const values = new Map();
values['option'] = this.facets.name;
const appliedFilter = [];
this.facets.values.map((element) => {
if (element.apply) {
appliedFilter.push(element.name);
}
});
values['selectedFilter'] = appliedFilter;
this.telemetryGeneratorService.generateInteractTelemetry(InteractType.TOUCH,
InteractSubtype.APPLY_FILTER_CLICKED,
Environment.HOME,
(this.source && this.source.match('courses')) ? PageId.COURSE_SEARCH_FILTER : PageId.LIBRARY_SEARCH_FILTER,
undefined,
values);
this.popCtrl.dismiss({ isFilterApplied: true });
}
}
<ion-header>
<ion-toolbar>
<h4 class="subtitle">{{ 'CHOOSE_FROM_FOLLOWING' | translate }}</h4>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid class="scroll-list">
<ion-row *ngIf="facets?.values && facets?.values.length">
<ion-col size="6" *ngFor="let facetValue of facets.values">
<ion-item lines="none">
<ion-checkbox type="checkbox" class="checkbox" [(ngModel)]="facetValue.apply"></ion-checkbox>
<ion-label class="filter-option-text ion-text-capitalize">
{{ facetValue.translations ? facetValue.translations: facetValue.name | translate | aliased }}
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer class="footer">
<ion-row>
<ion-col>
<ion-button expand="block" (click)="confirm()">{{ 'CONFIRM' | translate }}</ion-button>
</ion-col>
</ion-row>
</ion-footer>
@import "src/assets/styles/_variables.scss";
.subtitle {
text-transform: capitalize;
font-size: 1.3rem;
font-weight: 700 !important;
color: map-get($colors, facebook);
margin-left: 1.3rem;
}
.checkbox {
margin: 8px !important;
}
.filter-option-text {
font-size: $font-size-base !important;
text-overflow: unset !important;
white-space: unset !important;
}
.col {
min-height: 3.3rem !important;
}
.scroll-list {
overflow-y: scroll;
max-height: 50vh !important; //padding-bottom: 10vh !important;
}
.item-md {
font-size: 1.3rem !important;
font-weight: 600 !important;
}
.option-box .popover-content {
margin: 0;
width: 100% !important;
max-height: 70% !important;
height: auto !important;
box-shadow: unset;
position: fixed;
left: 0 !important;
top: unset !important;
bottom: 0;
transform-origin: bottom -100% !important;
transform: translateY(0) !important;
}
.option-box ion-backdrop {
background-color: map-get($colors, black) !important;
opacity: 0.4 !important;
}
.footer{
background: #FFF;
bottom: 0;
}
Legend
Html element with directive