File
Outputs
|
openResourcesClick
|
Type : EventEmitter
|
|
|
|
toggleClick
|
Type : EventEmitter
|
|
|
Methods
|
openResources
|
openResources()
|
|
|
|
|
import { Component, EventEmitter, Input, Output } from "@angular/core";
@Component({
selector: "app-project-metadata-card",
templateUrl: "./project-metadata-card.component.html",
styleUrls: ["./project-metadata-card.component.scss"],
})
export class ProjectMetadataCardComponent {
@Input() project: any;
@Input() viewOnlyMode: boolean;
@Input() showDetails:boolean;
@Input() statuses: any;
@Output() toggleClick = new EventEmitter();
@Output() openResourcesClick = new EventEmitter();
constructor() {}
toggle() {
this.toggleClick.emit({});
}
openResources(){
this.openResourcesClick.emit({});
}
}
<ion-card class="project-box" *ngIf="showDetails">
<ion-card-header class="custom-filed">
<ion-icon name="caret-down-outline" color="primary" (click)="toggle()"></ion-icon>
<ion-label *ngIf="!viewOnlyMode">{{'FRMELEMNTS_LBL_PROGRAM_NAME' | translate}} :
</ion-label>{{project?.programName}}
</ion-card-header>
<ion-card-content>
<div class="custom-filed">
<ion-label> {{'FRMELEMNTS_LBL_PROJECT_TITLE' | translate}} : </ion-label>
{{project?.title}}
</div>
<div class="custom-filed">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_OBJECTIVE' | translate}} : </ion-label>
{{project?.description}}
</div>
<div class="custom-filed" *ngIf="project?.duration">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_DURATION' | translate}} : </ion-label>
{{project?.duration?.label || project?.duration }}
</div>
<div class="custom-filed" *ngIf="project?.startDate">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_START_DATE' | translate}} : </ion-label>
{{project?.startDate | date : 'dd/MM/yyyy' }}
</div>
<div class="custom-filed" *ngIf="project?.endDate">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_END_DATE' | translate}} : </ion-label>
{{project?.endDate | date : 'dd/MM/yyyy' }}
</div>
<ion-row class="custom-filed" *ngIf="project?.status && !viewOnlyMode">
<ion-col size="5">
<ion-label position="stacked"> {{'FRMELEMNTS_LBL_PROJECT_STATUS' | translate}} </ion-label>
</ion-col>
<ion-col size=5 class="status-bar">
<ion-progress-bar value="1" color="success" *ngIf="project.status == statuses[2].title"></ion-progress-bar>
<ion-progress-bar value="0.5" color="warning" *ngIf="project.status == statuses[1].title"></ion-progress-bar>
<ion-progress-bar value="1" color="medium" *ngIf="project.status == statuses[0].title">
</ion-progress-bar>
{{project.status | camelToTitle}}
</ion-col>
</ion-row>
<div class="custom-filed" *ngIf="project?.learningResources?.length">
<ion-label position="fixed"> {{'FRMELEMNTS_LBL_LEARNING_RESOURCES' | translate}} : </ion-label>
<a (click)="openResources()"> {{'FRMELEMNTS_LBL_CLICK_HERE_TO_VIEW_LIBRARY' | translate}}</a>
</div>
</ion-card-content>
</ion-card>
<ion-card class="project-box" *ngIf="!showDetails">
<ion-card-header class="custom-filed">
<ion-icon name="caret-forward-outline" color="primary" (click)="toggle()"></ion-icon>
<ion-label> {{'FRMELEMNTS_LBL_PROJECT_TITLE' | translate}} : </ion-label>
{{project?.title}}
</ion-card-header>
<ion-card-content>
<ion-row class="custom-filed">
<ion-col size="5">
<ion-label position="stacked"> {{'FRMELEMNTS_LBL_PROJECT_STATUS' | translate}} </ion-label>
</ion-col>
<ion-col size="5" class="status-bar">
<ion-progress-bar value="1" color="success" *ngIf="project.status == statuses[2].title"></ion-progress-bar>
<ion-progress-bar value="0.5" color="warning" *ngIf="project.status == statuses[1].title"></ion-progress-bar>
<ion-progress-bar value="1" color="medium" *ngIf="project.status == statuses[0].title"></ion-progress-bar>
{{project.status | camelToTitle}}
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
@import "src/assets/styles/_variables.scss";
.project-box {
margin: 10px 8px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 6px 6px 0px,
rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
ion-card-header {
padding: 0px 15px;
}
.custom-filed {
margin: 10px 0px;
ion-label {
font-weight: 600;
color: #{$black-color};
}
ion-icon {
float: right;
font-size: 1.5rem;
margin-top: -5px;
}
ion-col {
padding: 0px;
}
}
.status-bar {
text-align: center;
ion-progress-bar {
height: 0.5rem;
border-radius: 10px;
}
}
}
ion-card {
background-color: map-get($colors, white);
}
ion-button, ion-fab-button {
--background: var(--ion-primary);
}
Legend
Html element with directive