ccims documentation
  1. Components
  2. IssueLocationComponent

File

src/app/components/issue-location/issue-location.component.ts

Description

Displays an issue location.

Metadata

selector app-issue-location
styleUrls ./issue-location.component.scss
templateUrl ./issue-location.component.html

Index

Methods
Inputs

Constructor

constructor(router: Router)
Defined in src/app/components/issue-location/issue-location.component.ts:17
Parameters :
Name Type Optional
router Router No

Inputs

location
Type : IssueLocation
Defined in src/app/components/issue-location/issue-location.component.ts:17

The location object that will be displayed.
projectId
Type : string
Defined in src/app/components/issue-location/issue-location.component.ts:15

The raw project ID.

Methods

goToLocationDetails
goToLocationDetails()
Defined in src/app/components/issue-location/issue-location.component.ts:27

Navigates to the location's detail page.

Returns : void
isComponent
isComponent()
Defined in src/app/components/issue-location/issue-location.component.ts:22

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 &quot;' + location.name + '&quot;'">{{ 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 &quot;' + location.name + '&quot;'"> {{ 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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""