src/app/components/issue-item/issue-item.component.ts
This component displays an issue (for use in e.g. a list).
| selector | app-issue-item |
| styleUrls | ./issue-item.component.scss |
| templateUrl | ./issue-item.component.html |
Methods |
Inputs |
constructor(router: Router)
|
||||||
|
Parameters :
|
| extended | |
Type : boolean
|
|
Default value : false
|
|
|
Whether to show extended info, such as the issue's locations. |
|
| interactive | |
Type : boolean
|
|
Default value : false
|
|
|
If true, this component will display a hyperlink. |
|
| issue | |
Type : Issue
|
|
|
The issue object that will be displayed. |
|
| projectId | |
Type : string
|
|
|
The raw project ID. |
|
| getIssueLink |
getIssueLink()
|
|
Returns the link URL for the issue.
Returns :
string
|
import {Component, Input} from '@angular/core';
import {Issue} from 'src/generated/graphql-dgql';
import {Router} from '@angular/router';
/** This component displays an issue (for use in e.g. a list). */
@Component({
selector: 'app-issue-item',
templateUrl: './issue-item.component.html',
styleUrls: ['./issue-item.component.scss']
})
export class IssueItemComponent {
/** The raw project ID. */
@Input() projectId: string;
/** The issue object that will be displayed. */
@Input() issue: Issue;
/** Whether to show extended info, such as the issue's locations. */
@Input() extended = false;
/** If true, this component will display a hyperlink. */
@Input() interactive = false;
constructor(private router: Router) {}
/** Returns the link URL for the issue. */
getIssueLink(): string {
return this.router.serializeUrl(this.router.createUrlTree(['/projects', this.projectId, 'issues', this.issue.id]));
}
}
<a class="issue-title is-interactive" [href]="getIssueLink()" *ngIf="interactive">
<app-issue-icon class="issue-icon" [issue]="issue"></app-issue-icon>
{{ issue.title }}
</a>
<span class="issue-title" *ngIf="!interactive">
<app-issue-icon class="issue-icon" [issue]="issue"></app-issue-icon>
{{ issue.title }}
</span>
<div class="linked-issue-locations" *ngIf="extended && !!issue.locations?.totalCount">
<span class="inner-item" *ngFor="let component of issue.locations.nodes"> {{ component.name }} </span>
</div>
./issue-item.component.scss
:host {
line-height: 1.4em;
.issue-icon {
vertical-align: middle;
}
.linked-issue-locations {
font-size: 0.8em;
font-weight: normal;
.inner-item {
display: inline-block;
line-height: 1.2em;
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
padding: 1px 2px;
margin-right: 2px;
}
}
}