File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(commonUtilService: CommonUtilService, popoverCtrl: PopoverController, platform: Platform, events: Events)
|
|
|
Parameters :
| Name |
Type |
Optional |
| commonUtilService |
CommonUtilService
|
No
|
| popoverCtrl |
PopoverController
|
No
|
| platform |
Platform
|
No
|
| events |
Events
|
No
|
|
|
actionsButtons
|
Type : any
|
|
|
|
certificateData
|
Type : any
|
|
|
|
showHeader
|
Type : boolean
|
Default value : true
|
|
|
Methods
|
closePopover
|
closePopover()
|
|
|
|
|
|
deleteContent
|
deleteContent(buttonIndex: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
Default value |
| buttonIndex |
number
|
No
|
0
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
backButtonFunc
|
Type : Subscription
|
|
|
|
content
|
Type : string
|
Default value : 'SUCCESSFULLY_COMPLETING_COURSE'
|
|
|
|
Public
popoverCtrl
|
Type : PopoverController
|
|
|
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Platform, PopoverController } from '@ionic/angular';
import { Events } from '@app/util/events';
import { Subscription } from 'rxjs';
import { CommonUtilService } from '@app/services';
@Component({
selector: 'app-certificate-verification-popover',
templateUrl: './certificate-verification-popup.component.html',
styleUrls: ['./certificate-verification-popup.component.scss'],
})
export class CertificateVerificationPopoverComponent implements OnInit, OnDestroy {
@Input() actionsButtons: any;
@Input() certificateData: any;
@Input() showHeader = true;
@Input() isProject :boolean;
backButtonFunc: Subscription;
appName: string;
content ='SUCCESSFULLY_COMPLETING_COURSE';
constructor(
private commonUtilService: CommonUtilService,
public popoverCtrl: PopoverController,
private platform: Platform,
private events: Events) { }
ngOnInit() {
this.content = this.isProject ? 'SUCCESSFULLY_COMPLETING_PROJECT' :'SUCCESSFULLY_COMPLETING_COURSE';
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
this.popoverCtrl.dismiss({ isLeftButtonClicked: null });
this.backButtonFunc.unsubscribe();
});
this.commonUtilService.getAppName().then((res) => { this.appName = res; });
}
ngOnDestroy(): void {
this.backButtonFunc.unsubscribe();
}
closePopover() {
this.popoverCtrl.dismiss({ isLeftButtonClicked: null });
}
deleteContent(buttonIndex: number = 0) {
this.popoverCtrl.dismiss({ isLeftButtonClicked: !Boolean(buttonIndex) });
}
}
<ion-header class="sb-popover-header" *ngIf="showHeader">
<ion-toolbar class="sb-popover-toolbar">
<ion-title role="heading" class="sb-popover-title">{{"CERTIFICATE_VERIFIED" | translate}}
<ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sb-popover-container ion-no-padding">
<div class="sb-popover-items">
<div class="sb-popover-content-details">
<div class="sb-popover-content certificate-contentent">
<div class="icon-container">
<img src="../../../../assets/imgs/badge.svg" alt="">
</div>
<div class="certificate-head">{{'CERTIFICATE_ISSUED_TO' | translate}}</div>
<div class="certificate-to">{{certificateData.issuedTo}}</div>
<div class="certificate-course">{{content | translate}}</div>
<div class="certificate-course-name">{{certificateData.trainingName}}</div>
<div class="certificate-data">
<span>{{'ON_APPNAME_ON' | translate: {'appName': appName} }}</span>
<span> {{certificateData.issuanceDate | date: 'dd/MM/yyyy' }}</span>
</div>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<div class="sb-popover-footer">
<button class="sb-popover-action-btn " [ngClass]="btn.btnClass"
*ngFor="let btn of actionsButtons,let btn_index=index" (click)="deleteContent(btn_index)">
{{btn.btntext }}</button>
</div>
</ion-footer>
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_variables.scss";
.certificate-contentent{
.certificate-head {
color: map-get($colors, primary);
}
.certificate-to{
font-size: 1.25rem;
padding: 5px;
}
.certificate-course-name{
font-size: 1.125rem;
padding: 5px;
}
}
.flex-grow-1{
flex-grow: 1;
}
.sb-popover .sb-popover-footer .sb-popover-action-btn.sb-btn-outline-info {
color: $primary-color;
margin: 0 10px;
}
.sb-dw-delete-popover{
top: auto;
.popover-content{
box-shadow: 0 0 4px 2px map-get($colors, medium_gray);
.sb-popover-items{
padding-bottom: 0 !important;
}
.sb-popover-footer {
.sb-popover-action-btn{
box-shadow: none;
width: 30%;
border-radius: 3px;
@extend .flex-grow-1;
}
}
}
}
.dw-active-downloads-popover{
.popover-content{
.sb-popover-footer {
.sb-popover-action-btn{
box-shadow: none;
}
}
}
}
Legend
Html element with directive