Sunbird Portal Documentation
  1. Components
  2. CardComponent

File

src/app/modules/shared/components/card/card.component.ts

Metadata

selector app-card
templateUrl ./card.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(resourceService: ResourceService, router: Router)
Defined in src/app/modules/shared/components/card/card.component.ts:22
Parameters :
Name Type Optional
resourceService ResourceService No
router Router No

Inputs

customClass
Type : string
Defined in src/app/modules/shared/components/card/card.component.ts:16
data
Type : ICard
Defined in src/app/modules/shared/components/card/card.component.ts:14

content is used to render IContents value on the view
dialCode
Type : string
Defined in src/app/modules/shared/components/card/card.component.ts:15
hideProgress
Type : boolean
Defined in src/app/modules/shared/components/card/card.component.ts:17

Outputs

clickEvent
Type : EventEmitter
Defined in src/app/modules/shared/components/card/card.component.ts:18

Methods

Public onAction
onAction(data, action)
Defined in src/app/modules/shared/components/card/card.component.ts:32
Parameters :
Name Optional
data No
action No
Returns : void

Properties

hover
Type : Boolean
Defined in src/app/modules/shared/components/card/card.component.ts:20
isConnected
Type : Boolean
Default value : navigator.onLine
Defined in src/app/modules/shared/components/card/card.component.ts:21
Public resourceService
Type : ResourceService
Defined in src/app/modules/shared/components/card/card.component.ts:24
route
Type : string
Defined in src/app/modules/shared/components/card/card.component.ts:22
telemetryCdata
Type : Array<literal type>
Default value : []
Defined in src/app/modules/shared/components/card/card.component.ts:19
 
import { ResourceService } from '../../services/index';
import { Component, Input, EventEmitter, Output } from '@angular/core';
import { ICard } from '../../interfaces';
import { Router } from '@angular/router';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html'
})
export class CardComponent {
  /**
  * content is used to render IContents value on the view
  */
  @Input() data: ICard;
  @Input() dialCode: string;
  @Input() customClass: string;
  @Input() hideProgress: boolean;
  @Output() clickEvent = new EventEmitter<any>();
  telemetryCdata: Array<{}> = [];
  hover: Boolean;
  isConnected: Boolean = navigator.onLine;
  route: string;

  constructor(public resourceService: ResourceService, private router: Router) {
    this.resourceService = resourceService;
    if (this.dialCode) {
      this.telemetryCdata = [{ 'type': 'DialCode', 'id': this.dialCode }];
    }
    this.route = this.router.url;
  }

  public onAction(data, action) {
    this.clickEvent.emit({ 'action': action, 'data': data });
  }
}

<div class="sb-card" *ngIf="data" tabindex="0" (click)="onAction(data,data.action.onImage)" appTelemetryInteract
  [telemetryInteractObject]="{id:data.metaData.identifier,type:data.telemetryObjectType,ver:data.metaData.pkgVersion ? data.metaData.pkgVersion.toString():'1.0'}"
  [telemetryInteractEdata]="data.telemetryInteractEdata" [telemetryInteractCdata]="telemetryCdata" tabindex="0">
  <!--Body-->
  <div class="sb-card-body">

    <!--Metas-->
    <div class="sb-card-metas">
      <!--Image-->
      <div class="sb-card-image" *ngIf="data.showImage? false : true">
        <img src="{{data.image || 'assets/images/book.png' | cdnprefixurl}}" alt="{{data.name}}">
      </div>
      <!--/Image-->

      <!--Meta Details - Course-->
      <div class="sb-card-meta course" *ngIf="data.contentType && data.contentType.toLowerCase() === 'course'">
        <div class="d-flex mb-auto">
          <div class="sb-card-label" *ngIf="data.ribbon && data.ribbon.right && data.ribbon.right.name">{{data.ribbon.right.name}}</div>
        </div>
        <div class="sb-card-meta-item mb-15" *ngIf="data.topic" title="{{data.topic}}">
          {{data.topic | slice:0:40}}
          <span *ngIf="data.topic && data.topic.length > 40">...</span>
        </div>
        <div class="sb-card-meta-item" *ngIf="data.subTopic" title="{{data.subTopic}}">
          {{data.subTopic | slice:0:40}}
          <span *ngIf="data.subTopic && data.subTopic.length > 40">...</span>
        </div>
      </div>
      <!--/Meta Details - Course-->

      <!--Meta Details - Non-Course-->
      <div class="sb-card-meta non-course" *ngIf="!data.contentType || data.contentType.toLowerCase() !== 'course'">
        <div class="d-flex mb-auto">
          <div class="sb-card-label" *ngIf="data.ribbon && data.ribbon.right && data.ribbon.right.name">
            {{data.ribbon.right.name}}</div>
          <img src="{{data.ribbon.left.image}}" class="sb-card-badge"
            *ngIf="data.ribbon && data.ribbon.left && data.ribbon.left.image" alt="{{data.ribbon.left.name}}">
        </div>
        <div class="sb-card-meta-item ellipsis" *ngIf="data.subject" title="{{data.subject}}">
          {{resourceService.frmelmnts.lbl.subject | transposeTerms: 'frmelmnts.lbl.subject' : resourceService?.selectedLang}} : {{data.subject}}
        </div>
        <div class="sb-card-meta-item ellipsis mt-4" *ngIf="data.gradeLevel" title="{{data.gradeLevel}}">
          {{resourceService.frmelmnts.lbl.class | transposeTerms: 'frmelmnts.lbl.class' : resourceService?.selectedLang}} : {{data.gradeLevel}}
        </div>
        <div class="sb-card-meta-item ellipsis mt-4" *ngIf="data.medium" title="{{data.medium}}">
          {{resourceService.frmelmnts.lbl.medium | transposeTerms: 'frmelmnts.lbl.medium' : resourceService?.selectedLang}} : {{data.medium}}
        </div>
      </div>
      <!--/Meta Details - Non-Course-->
    </div>
    <!--Metas-->

    <!--Card Title-->
    <h4 class="sb-card-title">
      {{data.name | slice:0:60 }}
      <span *ngIf="data.name && data.name.length > 60">...</span>
    </h4>
    <!--/Card Title-->

    <!--Org-->
    <div class="sb-card-org ellipsis">
      {{data.orgDetails?.orgName ? data.orgDetails?.orgName : data?.organisation}}
    </div>
    <!--Org-->

  </div>
  <!--/Body-->

  <!--Progress Bar-->
  <div class="sb-card-progressbar" *ngIf="!hideProgress">
    <mat-progress-bar *ngIf="data.completionPercentage > 0" mode="determinate" [value]="data.completionPercentage" class="ui progress"></mat-progress-bar>
  </div>
  <!--/Progress Bar-->
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""