src/app/pages/containers/projects/projects.component.ts
Projects Component
| selector | app-projects |
| templateUrl | ./projects.component.html |
Properties |
Methods |
|
constructor(projectService: ProjectService)
|
||||||
|
Parameters :
|
| makeQueryParams | ||||
makeQueryParams(projectId)
|
||||
|
Parameters :
Returns :
{ project: any; }
|
| makeState |
makeState()
|
|
Returns :
{ projects: void | [any]; }
|
| Async ngOnInit |
ngOnInit()
|
|
Returns :
any
|
| __ |
Default value : strings
|
| loading |
Default value : true
|
| projects |
Type : | void
|
import { Component, OnInit } from '@angular/core';
import {Project} from '@app/pages/models/project';
import {ProjectService} from '@app/pages/services/project.service';
import strings from '@i18n/strings.json';
/**
* Projects Component
*/
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
// styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {
__ = strings;
loading = true;
projects: [Project] | void;
constructor(private projectService: ProjectService) {}
async ngOnInit() {
this.projects = await this.projectService.getAllProjects();
this.loading = false;
}
makeState() {
return {projects: this.projects};
}
makeQueryParams(projectId) {
return {project: projectId};
}
}
<div class="my-3 my-md-5">
<div class="row">
<div class="col-md-2">
<app-left-sidebar></app-left-sidebar>
<div class="btn-group-vertical w-100 mb-3 mb-md-0" role="group" aria-label="Button group">
<a class="btn btn-secondary btn-block tab-button" [routerLink]="['/global-clients']">Global Configurations</a>
<a class="btn btn-secondary btn-block tab-button active" [routerLink]="['/projects']">Projects</a>
</div>
</div>
<div class="col-md-8">
<h2>{{__.selectAProject}}</h2>
<div class="row my-5" *ngIf="loading"><h2>{{__.loading}}</h2></div>
<div *ngIf="!loading" class="row my-3">
<div *ngFor="let project of projects" class="col-lg-4 mb-3">
<div class="card">
<a [routerLink]="['/clients']" [queryParams]="makeQueryParams(project.name)" [state]="makeState()">
<div class="card-body">
<h5 class="card-title">{{project.projectName}}</h5>
<p class="card-text">{{ project.description }}</p>
<p *ngIf="project.organization" class="card-text"><small class="text-muted">{{__.organization}}: {{ project.organization }}</small></p>
<p *ngIf="project.location" class="card-text"><small class="text-muted">{{__.location}}: {{ project.location }}</small></p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>