diff --git a/src/app/components/pull-request-view/pull-request.component.html b/src/app/components/pull-request-view/pull-request.component.html index 9ec7b8b..57bc08c 100644 --- a/src/app/components/pull-request-view/pull-request.component.html +++ b/src/app/components/pull-request-view/pull-request.component.html @@ -3,21 +3,23 @@
- {{pullRequest.title}} + + {{pullRequest.title}} +
- {{pullRequest.state}} + [ngClass]="{'conflicts': hasConflicts, 'approved': approved, 'needs-work': needsWork}"> + {{status}} {{pullRequest.createdDate | date}} - {{pullRequest.fromRef.repository.name}} + + {{pullRequest.fromRef.repository.name}} + {{pullRequest.toRef.displayId}} @@ -27,7 +29,6 @@ -
diff --git a/src/app/components/pull-request-view/pull-request.component.scss b/src/app/components/pull-request-view/pull-request.component.scss index 6a1511b..6adaf27 100644 --- a/src/app/components/pull-request-view/pull-request.component.scss +++ b/src/app/components/pull-request-view/pull-request.component.scss @@ -51,8 +51,8 @@ overflow: hidden; text-overflow: ellipsis; - &.conflicts { - color: rgb(255, 139, 0); + &.conflicts, &.needs-work { + color: $pr-needs-work-color; } } } @@ -83,14 +83,14 @@ border-radius: $pr-control-border-radius; font-weight: 700; margin-right: $pr-control-distance; -} -.pr-approved { - background-color: $pr-approved-color; -} + &.approved { + background-color: $pr-approved-color; + } -.pr-has-conflicts { - background-color: rgb(255, 139, 0); + &.conflicts, &.needs-work { + background-color: $pr-needs-work-color; + } } .comments { @@ -104,7 +104,7 @@ .to-ref { border: 1px solid $border-color; border-radius: $pr-control-border-radius; - color: orange; + color: #ffc682; background-color: $pr-background-color-hover; margin-right: $pr-control-distance; } diff --git a/src/app/components/pull-request-view/pull-request.component.ts b/src/app/components/pull-request-view/pull-request.component.ts index 173335c..920ca25 100644 --- a/src/app/components/pull-request-view/pull-request.component.ts +++ b/src/app/components/pull-request-view/pull-request.component.ts @@ -1,5 +1,6 @@ import {Component, Input, OnInit} from '@angular/core'; import {PullRequest} from '../../models/models'; +import {PullRequestStatus} from '../../models/enums'; @Component({ selector: 'app-pull-request', @@ -13,7 +14,9 @@ export class PullRequestComponent implements OnInit { selfUrl!: string; approved!: boolean; + needsWork!: boolean; hasConflicts!: boolean; + status!: string; commentsCount!: number; constructor() { @@ -24,9 +27,15 @@ export class PullRequestComponent implements OnInit { this.selfUrl = this.pullRequest.links.self[0].href; } - this.approved = this.pullRequest.reviewers.some(r => r.approved); + this.needsWork = this.pullRequest.reviewers.some(r => r.status === PullRequestStatus.NeedsWork); + this.approved = !this.needsWork && this.pullRequest.reviewers.some(r => r.status === PullRequestStatus.Approved); this.hasConflicts = this.pullRequest.properties.mergeResult.outcome !== 'CLEAN'; // CONFLICTED + this.status = this.needsWork && 'NEEDS WORK' + || this.hasConflicts && 'HAS CONFLICTS' + || this.approved && 'APPROVED' + || 'OPEN'; + this.commentsCount = this.pullRequest.properties.commentCount || 0; } diff --git a/src/variables.scss b/src/variables.scss index 4a8a5e2..d4e86dc 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -4,5 +4,5 @@ $role-title-color: #ffffffe0; $pr-control-distance: 5px; $pr-control-border-radius: 3px; $pr-approved-color: rgb(0, 135, 90); -$pr-needs-work-color: rgb(255, 171, 0); +$pr-needs-work-color: rgb(255, 139, 0); $pr-background-color-hover: #2D333B;