[angular-ngrx-scss] - Issue pull request item

angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html

@@ -1 +1,7 @@
-<div class="issue"><div class="issues-list-container"></div></div>
+<div class="issue">
+  <div class="issues-list-container">
+    <ng-container *ngFor="let issue of issues">
+      <app-repo-issue-pull-card [item]="issue"></app-repo-issue-pull-card>
+    </ng-container>
+  </div>
+</div>

angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.ts

@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Issue } from 'src/app/repository/services/repository.interfaces';
 
 @Component({
   selector: 'app-issues-list',
   templateUrl: './issues-list.component.html',
-  styleUrls: ['./issues-list.component.scss'],
 })
-export class IssuesListComponent {}
+export class IssuesListComponent {
+  @Input() issues: Issue[] = [];
+}

angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html

@@ -0,0 +1,46 @@
+<div class="item" *ngIf="item">
+  <div class="item-container">
+    <div class="info">
+      <ng-container *ngIf="isOpen; else closed">
+        <!-- no-entry -->
+        <span class="icon {{ item.state }}" appOcticon="no-entry"></span>
+      </ng-container>
+      <ng-template #closed>
+        <!-- issue-closed -->
+        <span class="icon {{ item.state }}" appOcticon="issue-closed"></span>
+      </ng-template>
+      <div>
+        <div class="content">
+          <span class="title">{{ item.title }}</span>
+          <span class="inline" *ngFor="let label of item.labels">
+            <span
+              [style.background-color]="colorMap(label.color)"
+              class="label"
+            >
+              {{ label.name }}
+            </span>
+          </span>
+        </div>
+        <div class="meta">
+          #{{ item.number }}
+          <span *ngIf="isOpen">
+            opened
+            {{ item.created_at | relativeTime }}
+          </span>
+          by
+          <span class="created-by">{{ item.user.login }}</span>
+          <span *ngIf="!isOpen">
+            was closed
+            {{ item.closed_at! | relativeTime }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="comments" *ngIf="item.comments">
+      <span class="icon" appOcticon="comment"></span>
+      <span data-testid="comment count">
+        {{ item.comments }}
+      </span>
+    </div>
+  </div>
+</div>

angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.scss

@@ -0,0 +1,76 @@
+@use '../../styles/variables.scss';
+
+$color-open: variables.$green100;
+$color-closed: variables.$purple100;
+
+.item {
+  padding: 1.125rem;
+  border-bottom: 1px solid variables.$gray200;
+
+  &:hover {
+    background-color: variables.$gray100;
+  }
+}
+
+.item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .info {
+    display: flex;
+  }
+
+  .comments {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.icon {
+  margin-right: 0.5rem;
+
+  &.open {
+    color: $color-open;
+  }
+
+  &.closed {
+    color: $color-closed;
+  }
+}
+
+.content {
+  .title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-right: 0.25rem;
+
+    &:hover {
+      color: variables.$blue300;
+    }
+  }
+
+  .label {
+    font-weight: 500;
+    font-size: 0.875rem;
+    margin: 0 0.385rem;
+    padding: 0.125rem 0.5rem;
+    cursor: pointer;
+    border-radius: 0.875rem;
+  }
+}
+
+.meta {
+  line-height: 0.875rem;
+  font-size: 0.875rem;
+  margin-top: 0.325rem;
+  color: variables.$gray600;
+
+  .created-by {
+    cursor: pointer;
+
+    &:hover {
+      color: variables.$blue300;
+    }
+  }
+}

angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Issue } from 'src/app/repository/services/repository.interfaces';
+
+@Component({
+  selector: 'app-repo-issue-pull-card',
+  templateUrl: './repo-issue-pull-card.component.html',
+  styleUrls: ['./repo-issue-pull-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RepoIssuePullCardComponent {
+  @Input() item?: Issue;
+
+  get isOpen(): boolean {
+    return this.item?.state === 'open';
+  }
+
+  colorMap(color: string): string {
+    return `#${color}`;
+  }
+}

angular-ngrx-scss/src/app/shared/shared.module.ts

@@ -7,6 +7,7 @@ import { OcticonsDirective } from './directives/octicons.directive';
 import { FilterDropdownComponent } from './components/filter-dropdown/filter-dropdown.component';
 import { MarkdownPipe } from './pipes/markdown.pipe';
 import { PaginationComponent } from './components/pagination/pagination.component';
+import { RepoIssuePullCardComponent } from './components/repo-issue-pull-card/repo-issue-pull-card.component';
 
 @NgModule({
   declarations: [
@@ -16,6 +17,7 @@ import { PaginationComponent } from './components/pagination/pagination.componen
     OcticonsDirective,
     FilterDropdownComponent,
     PaginationComponent,
+    RepoIssuePullCardComponent,
   ],
   imports: [CommonModule, RouterModule],
   exports: [
@@ -25,6 +27,7 @@ import { PaginationComponent } from './components/pagination/pagination.componen
     OcticonsDirective,
     FilterDropdownComponent,
     PaginationComponent,
+    RepoIssuePullCardComponent,
   ],
 })
 export class SharedModule {}

angular-ngrx-scss/src/app/shared/styles/variables.scss

@@ -15,6 +15,8 @@ $blue100: rgb(219, 234, 254);
 $blue300: rgb(59, 130, 246);
 $blue400: rgb(96, 165, 250);
 $blue600: rgb(37 99 235);
+$green100: rgb(5, 150, 105);
+$purple100: rgb(124, 58, 237);
 
 // breakpoints
 $sm: 640px;