File
|
certificateDescription
|
Type : string
|
|
|
|
contentData
|
Type : ContentData
|
|
|
|
enrollmentEndDate
|
Type : any
|
|
|
import { Component, Input } from '@angular/core';
import {ContentData} from 'sunbird-sdk';
import { CommonUtilService } from '@app/services';
@Component({
selector: 'app-relevant-content-card',
templateUrl: './relevant-content-card.component.html',
styleUrls: ['./relevant-content-card.component.scss'],
})
export class RelevantContentCardComponent {
@Input() contentData: ContentData;
@Input() isAlreadyEnrolled: boolean;
@Input() isCertifiedCourse: boolean;
@Input() certificateDescription: string;
@Input() batchEndDate;
@Input() enrollmentEndDate;
constructor(public commonUtil: CommonUtilService) {
}
}
<ion-card-content class="ion-no-padding">
<div class="ion-padding">
<div class="certificate-container"
*ngIf="isAlreadyEnrolled && ((isCertifiedCourse && certificateDescription) || !isCertifiedCourse)">
<div class="certificate-icon">
<img class="certificate-icon" src="assets/imgs/Certificate icon.svg" alt="certificate-icon">
</div>
<div class="certificate-text" *ngIf="isCertifiedCourse && certificateDescription">
<ion-card-title class="font-10 certified-section-color font-weight-900">
{{'CERTIFIED_TRAINING' | translate}}
</ion-card-title>
</div>
<div class="certificate-text" *ngIf="!isCertifiedCourse">
<ion-card-title class="font-10 certified-section-color font-weight-900">
{{'FRMELEMNTS_MSG_COURSE_NO_CERTIFICATE_MESSAGE' | categoryKeyTranslate : contentData }}
</ion-card-title>
</div>
</div>
<label
*ngIf="isAlreadyEnrolled && isCertifiedCourse && certificateDescription">{{certificateDescription}}</label>
<div class="ion-margin-bottom mt-8">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{'FRMELEMNTS_LBL_TRAINING_IS_RELEVANT_TO_TEACHERS' | categoryKeyTranslate : contentData }}</strong>
</ion-card-title>
<p *ngIf="contentData?.se_gradeLevels || contentData.gradeLevel">{{'CLASS' | translate}} : {{contentData?.se_gradeLevels || contentData.gradeLevel}}</p>
<p *ngIf="contentData?.se_mediums || contentData.medium">{{'MEDIUM' | translate}} : {{contentData?.se_mediums || contentData.medium}}</p>
<p *ngIf="contentData?.se_boards || contentData.board">{{'BOARD' | translate}} : {{contentData?.se_boards || contentData.board}}</p>
<p *ngIf="contentData?.audience">{{'USER_TYPE' | translate}} : {{contentData?.audience}}</p>
</div>
<div class="ion-margin-bottom">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{'FRMELEMNTS_LBL_TRAINING_DETAILS' | categoryKeyTranslate : contentData }}</strong>
</ion-card-title>
<p *ngIf="batchEndDate">{{'FRMELEMNTS_LBL_TRAINING_END_DATE' | categoryKeyTranslate : contentData }} : {{
batchEndDate | date: 'dd/MM/yyyy'}}</p>
<p>{{'FRMELEMNTS_LBL_ENROLLMENT_END_DATE' | translate }} : {{ (enrollmentEndDate | date: 'dd/MM/yyyy') }}</p>
</div>
<div>
<p>{{contentData?.description}}</p>
</div>
</div>
</ion-card-content>
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/fonts.scss";
@import "src/assets/styles/_variables.scss";
:host {
.certificate-container {
display: inline-flex;
flex-wrap: nowrap;
align-items:center;
background-color: map-get($colors, pale_blue_f6);
padding: 4px;
.certificate-icon {
padding-right: 5px;
}
}
.certified-section-color{
color: map-get($colors, bright_blue_9f);
}
.subtitle-color{
color: map-get($colors, granite_gray);
}
.font-10{
font-size: 0.625rem;
}
.font-12 {
font-size: 0.75rem !important;
}
p {
font-size: 0.875rem !important;
line-height: 1.24999875rem;
}
}
Legend
Html element with directive