src/app/components/issue-location/issue-location.component.ts
Displays an issue location.
| selector | app-issue-location |
| styleUrls | ./issue-location.component.scss |
| templateUrl | ./issue-location.component.html |
Methods |
Inputs |
constructor(router: Router)
|
||||||
|
Parameters :
|
| location | |
Type : IssueLocation
|
|
|
The location object that will be displayed. |
|
| projectId | |
Type : string
|
|
|
The raw project ID. |
|
| goToLocationDetails |
goToLocationDetails()
|
|
Navigates to the location's detail page.
Returns :
void
|
| isComponent |
isComponent()
|
|
Returns true if the location refers to a component.
Returns :
boolean
|
import {Component, Input} from '@angular/core';
import {Router} from '@angular/router';
import {IssueLocation} from '../../../generated/graphql-dgql';
/**
* Displays an issue location.
*/
@Component({
selector: 'app-issue-location',
styleUrls: ['./issue-location.component.scss'],
templateUrl: './issue-location.component.html'
})
export class IssueLocationComponent {
/** The raw project ID. */
@Input() projectId: string;
/** The location object that will be displayed. */
@Input() location: IssueLocation;
constructor(private router: Router) {}
/** Returns true if the location refers to a component. */
isComponent(): boolean {
return (this.location as any).__typename === 'Component';
}
/** Navigates to the location's detail page. */
goToLocationDetails(): void {
if (this.isComponent()) {
this.router.navigate(['projects', this.projectId, 'component', this.location.id]);
} else {
this.router.navigate(['projects', this.projectId, 'interface', this.location.id]);
}
}
}
<ng-container *ngIf="isComponent(); else locationIsInterface">
<span class="component-box" (click)="goToLocationDetails()">
<span style="margin: 5px">
<a class="component-text" [title]="'Component "' + location.name + '"'">{{ location.name }}</a>
</span>
</span>
</ng-container>
<ng-template #locationIsInterface>
<span class="interface-box" (click)="goToLocationDetails()">
<span class="dot"></span>
<a class="component-text" [title]="'Interface "' + location.name + '"'"> {{ location.name }} </a>
</span>
</ng-template>
./issue-location.component.scss
.dot {
height: 10px;
width: 10px;
background-color: black;
border-radius: 50%;
display: inline-block;
}
.interface-box {
background-color: rgb(0, 0, 0, 0.1);
border-radius: 5px;
text-align: center;
margin: 2px;
padding: 2px 4px 2px 4px;
}
.component-box {
background-color: rgb(9, 109, 217, 0.5);
border-color: black;
border-width: 2px;
border-style: solid;
border-radius: 5px 5px 5px 5px;
text-align: center;
margin: 2px;
}
.component-text {
font-size: 11pt;
font-family: "Arial Narrow", Arial, sans-serif;
color: black;
}