File
Outputs
|
actionClick
|
Type : EventEmitter
|
|
|
|
checkReportClick
|
Type : EventEmitter
|
|
|
|
openPopoverClick
|
Type : EventEmitter
|
|
|
|
openResourcesClick
|
Type : EventEmitter
|
|
|
|
startAssessmentClick
|
Type : EventEmitter
|
|
|
Methods
|
action
|
action(event, task?)
|
|
|
Parameters :
| Name |
Optional |
| event |
No
|
| task |
Yes
|
|
|
checkReport
|
checkReport(task)
|
|
|
|
|
|
openPopover
|
openPopover(ev: any, task?)
|
|
|
Parameters :
| Name |
Type |
Optional |
| ev |
any
|
No
|
| task |
|
Yes
|
|
|
openResources
|
openResources(task)
|
|
|
|
|
|
startAssessment
|
startAssessment(task)
|
|
|
|
|
import { Component, EventEmitter, Input, Output } from "@angular/core";
@Component({
selector: "app-project-task-list",
templateUrl: "./project-task-list.component.html",
styleUrls: ["./project-task-list.component.scss"],
})
export class ProjectTaskListComponent {
@Input() viewOnlyMode: boolean;
@Input() sortedTasks: any;
@Input() schedules: any;
@Output() actionClick = new EventEmitter();
@Output() openPopoverClick = new EventEmitter();
@Output() openResourcesClick = new EventEmitter();
@Output() startAssessmentClick = new EventEmitter();
@Output() checkReportClick = new EventEmitter();
constructor() {}
ngOnInit(){
console.log("viewOnlyMode : ",this.viewOnlyMode);
}
action(event, task?) {
this.actionClick.emit({event:event,task:task});
}
openPopover(ev: any, task?) {
this.openPopoverClick.emit({event:ev,task:task});
}
openResources(task){
this.openResourcesClick.emit({task:task})
}
startAssessment(task){
this.startAssessmentClick.emit({task:task})
}
checkReport(task){
this.checkReportClick.emit({task:task});
}
}
<div *ngIf="sortedTasks" class="task-list">
<div *ngFor="let schedule of schedules">
<h3 *ngIf="sortedTasks[schedule.value].tasks.length > 0" class="date-label">{{schedule.title | translate}}</h3>
<div *ngFor="let task of sortedTasks[schedule.value].tasks">
<ion-card class="tasks-box" *ngIf="!task.isDeleted">
<ion-row class="task-list">
<ion-col size="1" class="left-border pending-task-left-border"
[ngClass]="{'completed-task-left-border' : task.status === 'completed','pending-task-left-border' : task.status === 'notStarted'}">
</ion-col>
<ion-col size="10" (click)="action('editTask',task)">
<h5>{{task.name}}</h5>
<div class="date_button-container">
<h5 class="task-endDate">
{{'FRMELEMNTS_LBL_END_DATE' | translate}} :
{{(task?.endDate) ? (task.endDate | date : 'dd/MM/yyyy') : "__"}}
</h5>
</div>
</ion-col>
<ion-col size="1" *ngIf="!viewOnlyMode">
<ion-icon name="ellipsis-vertical-outline" color="primary" (click)="openPopover($event,task)">
</ion-icon>
</ion-col>
</ion-row>
<div class="viewBtn">
<ion-button size="small" *ngIf="task?.type=='content'&&task?.learningResources?.length" class="custom-btn-txt-transform-none"
(click)="$event.stopPropagation();openResources(task)">
{{'FRMELEMNTS_LBL_VIEW_RESOURCES' | translate}}
</ion-button>
<ion-button size="small" class="custom-btn-txt-transform-none"
*ngIf="(task?.type=='assessment' || task?.type=='observation')&&task?.status!='completed' "
(click)="$event.stopPropagation();startAssessment(task)">
{{'START' | translate}} {{task?.type}}
</ion-button>
<ion-button size="small" class="custom-btn-txt-transform-none"
*ngIf="(task?.type=='assessment' || task?.type=='observation')&&task?.status=='completed' "
(click)="$event.stopPropagation();checkReport(task)">
{{'FRMELEMNTS_LBL_VIEW_REPORTS' | translate}}
</ion-button>
</div>
</ion-card>
</div>
</div>
</div>
@import "src/assets/styles/_variables.scss";
.tasks-box {
background: #{$white-color};
font-weight: 600;
.left-border {
max-width: 0.375rem !important;
margin: 2% 10px;
margin-left: 0px;
padding: 0px;
}
h5 {
margin-top: 0px;
margin-bottom: 0px;
}
.completed-task-left-border {
background: green;
}
}
.task-list {
padding: 5px 15px 0 15px;
.task-endDate {
color: var(--ion-primary);
font-size: 1rem;
margin-top: 5px;
}
ion-icon {
font-size: 1.5rem;
margin-left: 20px;
}
.sec-row {
padding: 0px 0px 5px 0px;
}
.first-row {
padding: 10px 0px 0px 0px;
}
.date-label {
text-align: center;
color: #5a5b5d;
font-size: 1rem;
font-weight: 600;
}
.date_button-container {
display: flex;
justify-content: space-between;
}
}
.viewBtn {
display: flex;
justify-content: flex-end;
align-items: center;
padding-bottom: 10px;
padding-right: 10px;
margin-top: 10px;
ion-button {
font-size: $font-size-base;
text-transform: capitalize;
}
}
ion-card {
background-color: map-get($colors, white);
}
ion-button,
ion-fab-button {
--background: var(--ion-primary);
}
Legend
Html element with directive