File
Constructor
constructor(navParams: NavParams, commonUtilService: CommonUtilService, fb: FormBuilder, modalCtrl: ModalController)
|
|
|
Parameters :
| Name |
Type |
Optional |
| navParams |
NavParams
|
No
|
| commonUtilService |
CommonUtilService
|
No
|
| fb |
FormBuilder
|
No
|
| modalCtrl |
ModalController
|
No
|
|
|
backButtonFunc
|
Default value : undefined
|
|
|
|
boardList
|
Type : Array<FilterValue>
|
|
|
|
boardOptions
|
Type : object
|
Default value : {
title: this.commonUtilService.translateMessage('BOARD_OPTION_TEXT'),
cssClass: 'select-box'
}
|
|
|
|
boardSelect
|
Decorators :
@ViewChild('boardSelect', {static: false})
|
|
|
|
mediumList
|
Type : Array<FilterValue>
|
|
|
|
mediumOptions
|
Type : object
|
Default value : {
title: this.commonUtilService.translateMessage('MEDIUM_OPTION_TEXT'),
cssClass: 'select-box'
}
|
|
|
|
mediumSelect
|
Decorators :
@ViewChild('mediumSelect', {static: false})
|
|
|
|
searchForm
|
Type : FormGroup
|
|
|
|
sortForm
|
Type : FormGroup
|
|
|
import { FormGroup, FormBuilder } from '@angular/forms';
import { Component, ViewChild } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
import { CommonUtilService } from '@app/services/common-util.service';
import { FilterValue } from 'sunbird-sdk';
@Component({
selector: 'app-explore-books-sort',
templateUrl: './explore-books-sort.component.html',
styleUrls: ['./explore-books-sort.component.scss'],
})
export class ExploreBooksSortComponent {
@ViewChild('boardSelect', { static: false }) boardSelect;
@ViewChild('mediumSelect', { static: false }) mediumSelect;
categories;
backButtonFunc = undefined;
sortForm: FormGroup;
searchForm: FormGroup;
boardList: Array<FilterValue>;
mediumList: Array<FilterValue>;
boardOptions = {
title: this.commonUtilService.translateMessage('BOARD_OPTION_TEXT'),
cssClass: 'select-box'
};
mediumOptions = {
title: this.commonUtilService.translateMessage('MEDIUM_OPTION_TEXT'),
cssClass: 'select-box'
};
constructor(
private navParams: NavParams,
private commonUtilService: CommonUtilService,
private fb: FormBuilder,
private modalCtrl: ModalController
) {
this.initForm();
}
initForm() {
this.searchForm = this.navParams.get('searchForm');
this.boardList = this.navParams.get('boardList');
this.mediumList = this.navParams.get('mediumList');
this.sortForm = this.fb.group({
board: [this.searchForm.value.board || []],
medium: [this.searchForm.value.medium || []]
});
}
dismiss() {
if ((this.sortForm.value.board !== this.searchForm.value.board) || (this.sortForm.value.medium !== this.searchForm.value.medium)) {
this.modalCtrl.dismiss({ values: this.sortForm.value });
} else {
this.modalCtrl.dismiss(null);
}
}
}
<ion-content>
<h4 class="sort-heading">{{'SORT_BY' | translate}}</h4>
<form novalidate [formGroup]="sortForm" class="form-position">
<ion-item>
<ion-label position="stacked" class="label-font">{{'BOARD' | translate }}</ion-label>
<ion-select multiple="true" #boardSelect class="ion-text-capitalize" formControlName="board" [interfaceOptions]="boardOptions"
okText="{{'BTN_SUBMIT' | translate}}" cancelText="{{'CANCEL' | translate}}" placeholder="{{'BOARD_OPTION_TEXT' | translate}}">
<ion-select-option *ngFor="let board of boardList" value="{{board?.name}}">{{board?.name | aliased}}‎</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked" class="label-font">{{'MEDIUM' | translate }}</ion-label>
<ion-select formControlName="medium" #mediumSelect multiple="true" class="ion-text-capitalize" [interfaceOptions]="mediumOptions"
okText="{{'BTN_SUBMIT' | translate}}" cancelText="{{'CANCEL' | translate}}" placeholder="{{'MEDIUM_OPTION_TEXT' | translate}}">
<ion-select-option *ngFor="let medium of mediumList" class="ion-text-capitalize" value="{{medium?.name}}">{{medium?.name}}</ion-select-option>
</ion-select>
</ion-item>
</form>
</ion-content>
<ion-footer class="bottom-button">
<ion-button expand="block" class="sort-by" (click)="dismiss()"> {{'SAVE' | translate}}</ion-button>
</ion-footer>
@import "src/assets/styles/variables";
@import "src/assets/styles/_custom-mixins";
@import "src/assets/styles/fonts";
:host {
.sort-heading {
color: $gray-400;
padding-left: $base-block-space * 2;
margin-top: $base-block-space * 3;
}
.item-label-stacked ion-select {
border: 1px solid map-get($colors, primary);
margin-top: 8px;
padding-right: 15px !important;
padding-left: 15px !important;
.select-icon {
.select-icon-inner {
// border: solid blue;
border: solid $gray-800;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
transform: rotate(45deg);
// animation: dropDown 5s linear infinite;
animation-duration: 0.9s;
}
}
.select-placeholder {
// color: #006DE5;
color: $gray-300;
padding-left: 10px;
}
}
.item-md.item-block .item-inner {
border-bottom: none;
}
.item-select .label-md {
// color: #006DE5;
color: $gray-800;
}
.item-label-stacked.item-select-disabled {
.label-md {
color: map-get($colors, medium_gray);
}
ion-select {
border-color: map-get($colors, medium_gray);
.select-icon {
.select-icon-inner {
border-color: map-get($colors, medium_gray);
animation: none;
}
}
.select-placeholder {
color: map-get($colors, medium_gray);
}
}
}
.item-label-stacked.input-has-value.item-input-has-value {
.label-md {
color: $gray-800;
}
ion-select {
border-color: $gray-300;
.select-text {
padding-left: 10px;
font-weight: bold;
color: $gray-800;
}
.select-icon {
.select-icon-inner {
border-color: $gray-800;
animation: none;
}
}
}
}
ion-footer {
padding: $base-block-space;
}
ion-item.item-label-stacked {
--border-width: 0;
}
ion-select {
--placeholder-opacity: 1;
}
}
Legend
Html element with directive