File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Outputs
|
closeQrModal
|
Type : EventEmitter
|
|
|
Methods
|
onSubmit
|
onSubmit(dialCodeVal)
|
|
|
Parameters :
| Name |
Optional |
| dialCodeVal |
No
|
|
|
setInteractEventData
|
setInteractEventData()
|
|
|
|
|
|
setsubmitDialCodeInteractEdata
|
setsubmitDialCodeInteractEdata(dialCode)
|
|
|
Parameters :
| Name |
Optional |
| dialCode |
No
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
|
Public
router
|
Type : Router
|
|
|
import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { ResourceService } from '../../services';
import * as _ from 'lodash-es';
import { IInteractEventEdata } from '@sunbird/telemetry';
@Component({
selector: 'app-qr-code-modal',
templateUrl: './qr-code-modal.component.html'
})
export class QrCodeModalComponent implements OnInit {
@ViewChild('modal') modal;
@Output() closeQrModal = new EventEmitter<any>();
instance: string;
public submitDialCodeInteractEdata: IInteractEventEdata;
public closeDialCodeInteractEdata: IInteractEventEdata;
constructor(public router: Router, public resourceService: ResourceService) { }
ngOnInit() {
this.setInteractEventData();
this.instance = _.upperCase(this.resourceService.instance);
}
setInteractEventData() {
this.closeDialCodeInteractEdata = {
id: 'close-dial-code',
type: 'click',
pageid: 'explore'
};
}
onSubmit(dialCodeVal) {
const dialCode = _.trim(dialCodeVal);
if (!_.isEmpty(dialCode)) {
this.setsubmitDialCodeInteractEdata(dialCodeVal);
this.modal.deny();
sessionStorage.removeItem('l1parent'); // l1parent value is removed (SB-19982)
this.router.navigate(['/get/dial/', dialCode]);
}
}
setsubmitDialCodeInteractEdata(dialCode) {
this.submitDialCodeInteractEdata = {
id: 'submit-dial-code',
type: 'submit',
pageid: 'explore',
};
if (!_.isEmpty(dialCode)) {
this.submitDialCodeInteractEdata.extra = {'dialCode': dialCode };
}
return this.submitDialCodeInteractEdata;
}
closeModal() {
this.closeQrModal.emit('success');
}
}
<app-modal-wrapper [config]="{disableClose: false, size: 'normal'}" (dismiss)="modal.deny();closeModal();" #modal>
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible normal">
<!--Header-->
<button aria-label="close dialog" mat-dialog-close class="mat-close-btn mt-4 mr-4 ml-2 mb-2">
<span>×</span>
</button>
<div class="sb-modal-header">
{{resourceService.frmelmnts?.lbl?.exploreContentOn | interpolate:'{instance}': instance}}
</div>
<!--/Header-->
<!--Content-->
<div class="sb-modal-content enter-qr-code-body">
<div class="ui grid stackable middle aligned">
<div class="six wide column">
<img class="ui image" src="{{'assets/images/Dialcode.png' | cdnprefixurl}}" alt="Dial code image">
</div>
<div class="six wide column">
<p class="mb-10">
{{resourceService.frmelmnts?.lbl?.startExploringContent}}
</p>
<div class="sb-search-box no-btn">
<div class="input-div relative">
<i class="search icon"></i>
<input class="sb-search-input" name="search" #dialCodeVal
placeholder="{{resourceService.frmelmnts?.lbl?.enterDialCode}}"
title="{{resourceService.frmelmnts?.lbl?.enterDialCode}}" type="text" autofocus>
</div>
<button class="sb-btn sb-btn-normal">Search</button>
</div>
<!-- <p class="small mt-15">
{{resourceService.frmelmnts?.lbl?.dialCodeDescription}}
</p> -->
</div>
</div>
</div>
<!--/Content-->
<!--Actions-->
<div class="sb-modal-actions">
<button class="sb-btn sb-btn-normal sb-btn-primary" appTelemetryInteract
[telemetryInteractEdata]="setsubmitDialCodeInteractEdata(dialCodeVal.value)" tabindex="0"
(click)="onSubmit(dialCodeVal.value)" tabindex="0" autofocus>
{{resourceService.frmelmnts?.btn?.submit}}
</button>
</div>
<!--/Actions-->
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
Legend
Html element with directive