src/app/modules/shared/components/batch-card/batch-card.component.ts
This display a batch card
| selector | app-batch-card |
| styleUrls | ./batch-card.component.scss |
| templateUrl | ./batch-card.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(resourceService: ResourceService, activatedRoute: ActivatedRoute, route: Router)
|
||||||||||||||||
|
Constructor to create injected service(s) object Default method of batch card Component class
Parameters :
|
| batch | |
Type : Ibatch
|
|
|
batch is used to render Ibatch value on the view |
|
| clickEvent | |
Type : EventEmitter
|
|
| Public onAction | ||||
onAction(batchdata)
|
||||
|
Parameters :
Returns :
void
|
| Public activatedRoute |
Type : ActivatedRoute
|
|
To send activatedRoute.snapshot to router navigation service for redirection to draft component |
| Public resourceService |
Type : ResourceService
|
| route |
Type : Router
|
|
To navigate to other pages |
import { Component, Input, EventEmitter, Output } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Ibatch } from './../../interfaces';
import { ResourceService } from '../../services/index';
/**
* This display a batch card
*/
@Component({
selector: 'app-batch-card',
templateUrl: './batch-card.component.html',
styleUrls: ['./batch-card.component.scss']
})
export class BatchCardComponent {
/**
* To navigate to other pages
*/
route: Router;
/**
* To send activatedRoute.snapshot to router navigation
* service for redirection to draft component
*/
public activatedRoute: ActivatedRoute;
/**
* batch is used to render Ibatch value on the view
*/
@Input() batch: Ibatch;
@Output() clickEvent = new EventEmitter<any>();
/**
* Constructor to create injected service(s) object
* Default method of batch card Component class
*@param {WorkSpaceService} WorkSpaceService Reference of WorkSpaceService
*@param {BatchService} BatchService Reference of WorkSpaceService
* @param {Router} route Reference of Router
* @param {ActivatedRoute} activatedRoute Reference of ActivatedRoute
*/
constructor(public resourceService: ResourceService,
activatedRoute: ActivatedRoute,
route: Router) {
this.route = route;
this.activatedRoute = activatedRoute;
}
public onAction(batchdata) {
this.clickEvent.emit({ 'action': 'batchcardclick', 'data': batchdata });
}
}
<div class="link cards sb-card mb-24 mt-0">
<div class="ui fluid card mouse-pointer">
<div class="image" tabindex="0" (click)="onAction(batch)"
appTelemetryInteract [telemetryInteractObject]="{id:batch.identifier,type:'CourseBatch',ver:'1.0'}" [telemetryInteractEdata]="{id:'batchId',type:'click',pageid:'course-batch'}">
<div class="ui fluid image">
<div class="ui black right ribbon label">Batch of {{batch.label}} </div>
<!-- <img src="{{'assets/images/default.png' | cdnprefixurl}}"> -->
<div class="bcard-bg-image"></div>
</div>
<div class="batch-content" matTooltip="{{batch.name}}">
<!-- <span class="batch-content-description batch-card-ellipsis w-162">{{batch.name | slice:0:20}} -->
<span class="batch-content-description batch-card-ellipsis w-162">{{batch.name}}
<!-- <i class="ellipsis horizontal icon" *ngIf="batch.name && batch.name.length >= 20" ></i> -->
</span>
</div>
</div>
<div *ngIf="batch.userName" class="content batch-content-meta pr-15">
<span class="mb-5 batch-card-ellipsis w-200 fs-0-92">By {{batch.userName}}</span>
<i class="right floated unlock alternate icon fs-1-143 mr-0" *ngIf="batch.enrollmentType === 'open'">
</i>
<span *ngIf="batch.courseAdditionalInfo && batch.courseAdditionalInfo.courseName" class="batch-card-ellipsis batch-course-name w-200 fs-0-92" matTooltip="{{batch.courseAdditionalInfo.courseName}}">
{{resourceService.frmelmnts.lbl.courseName}}: {{batch.courseAdditionalInfo.courseName}}
</span>
<span *ngIf="batch?.courseDetails" class="batch-card-ellipsis batch-course-name w-100 fs-0-92" matTooltip="{{batch?.courseDetails?.name}}">
{{batch?.courseDetails?.name}}
</span>
</div>
</div>
</div>
./batch-card.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.ui.image {
height: calculateRem(150px);
overflow:hidden;
}
.batch-content {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(var(--rc-rgba-black), 0.2);
color: var(--white);
width: 100%;
margin: 0;
padding: calculateRem(10px) calculateRem(16px);
height: calculateRem(40px);
}
.batch-content-description {
text-transform: capitalize;
text-align: left;
font-weight: bold;
font-size: 1em;
}
.batch-content-meta {
color: var(--rc-7c7b7b);
.batch-course-name {
font-weight: 700;
color: var(--gray-400);
}
}
.batch-card-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
float: left;
}
.bcard-bg-image {
background-color: var(--gray-100);
height: 100%;
}
.link.cards{
width: 18.25rem;
border-radius: .25rem;
cursor: pointer;
position: relative;
overflow: hidden;
}
.w-162 {
width: calculateRem(162px);
}
.w-200 {
width: calculateRem(200px);
}