From 2e366a998b2dbe1ab3f3aa2ef6821c770de26218 Mon Sep 17 00:00:00 2001 From: Daian Scuarissi Date: Mon, 1 Aug 2022 12:14:22 +0200 Subject: [PATCH 1/5] [angular-ngrx-scss] - Issue pull request item --- .../issues-list/issues-list.component.html | 6 +- .../issues-list/issues-list.component.scss | 4 +- .../issue-pull-item.component.html | 48 ++++++++++++++ .../issue-pull-item.component.scss | 65 +++++++++++++++++++ .../issue-pull-item.component.ts | 50 ++++++++++++++ .../src/app/shared/shared.module.ts | 3 + .../src/app/shared/styles/variables.scss | 2 + 7 files changed, 174 insertions(+), 4 deletions(-) create mode 100644 angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html create mode 100644 angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss create mode 100644 angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts diff --git a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html index 33237f3bf..a3b0ed499 100644 --- a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html +++ b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html @@ -1 +1,5 @@ -
+
+
+ +
+
diff --git a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss index af1a47de2..8b1378917 100644 --- a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss +++ b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss @@ -1,3 +1 @@ -.issue { - padding: 1rem; -} + diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html new file mode 100644 index 000000000..24b5b9eb0 --- /dev/null +++ b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html @@ -0,0 +1,48 @@ +
+
+
+
+ + + + + + + + +
+
+ {{ item.title }} + + + {{ label.name }} + + +
+
+ #{{ item.number }} + + opened + {{ item.created_at | relativeTime }} + + by + Daian + + was closed + {{ item.closed_at | relativeTime }} + +
+
+
+
+ + + {{ item.comments }} + +
+
+
+
diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss new file mode 100644 index 000000000..71a25eed4 --- /dev/null +++ b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss @@ -0,0 +1,65 @@ +@use '../../styles/variables.scss'; + +.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: variables.$green100 + } + + &.closed { + color: variables.$purple100 + } +} + +.content { + + .title { + font-size: 1.125rem; + font-weight: 600; + margin-right: 0.25rem; + + &:hover { + color: variables.$blue300; + } + } + + .label { + 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; +} diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts new file mode 100644 index 000000000..bf8a249a1 --- /dev/null +++ b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts @@ -0,0 +1,50 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-issue-pull-item', + templateUrl: './issue-pull-item.component.html', + styleUrls: ['./issue-pull-item.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class IssuePullItemComponent { + itemsList = [ + { + number: 123, + state: 'closed', + title: 'Test Issue Closed', + body: '', + user: {}, + labels: [{ color: '8D5494', name: 'Status: Backlog' }], + assignee: {}, + assignees: [], + locked: 'False', + active_lock_reason: '', + comments: 10, + closed_at: new Date().toString(), + created_at: new Date().toString(), + updated_at: new Date().toString(), + closed_by: {}, + }, + { + number: 321, + state: 'open', + title: 'Test Issue Open', + body: '', + user: {}, + labels: [{ color: '8D5494', name: 'Status: Backlog' }], + assignee: {}, + assignees: [], + locked: 'False', + active_lock_reason: '', + comments: 25, + closed_at: '', + created_at: new Date().toString(), + updated_at: new Date().toString(), + closed_by: {}, + }, + ]; + + colorMap(color: string): string { + return `#${color}`; + } +} diff --git a/angular-ngrx-scss/src/app/shared/shared.module.ts b/angular-ngrx-scss/src/app/shared/shared.module.ts index 466cba161..27f0f065f 100644 --- a/angular-ngrx-scss/src/app/shared/shared.module.ts +++ b/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 { IssuePullItemComponent } from './components/issue-pull-item/issue-pull-item.component'; @NgModule({ declarations: [ @@ -16,6 +17,7 @@ import { PaginationComponent } from './components/pagination/pagination.componen OcticonsDirective, FilterDropdownComponent, PaginationComponent, + IssuePullItemComponent, ], imports: [CommonModule, RouterModule], exports: [ @@ -25,6 +27,7 @@ import { PaginationComponent } from './components/pagination/pagination.componen OcticonsDirective, FilterDropdownComponent, PaginationComponent, + IssuePullItemComponent, ], }) export class SharedModule {} diff --git a/angular-ngrx-scss/src/app/shared/styles/variables.scss b/angular-ngrx-scss/src/app/shared/styles/variables.scss index fa36acf91..bff7983ef 100644 --- a/angular-ngrx-scss/src/app/shared/styles/variables.scss +++ b/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; From 113fbe84d6be9bc2a107db9157dea4376cc98822 Mon Sep 17 00:00:00 2001 From: Daian Scuarissi Date: Tue, 2 Aug 2022 14:56:32 +0200 Subject: [PATCH 2/5] Fix comments --- .../issue-pull-item.component.html | 2 +- .../issue-pull-item.component.scss | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html index 24b5b9eb0..002f97574 100644 --- a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html +++ b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html @@ -29,7 +29,7 @@ {{ item.created_at | relativeTime }} by - Daian + Daian was closed {{ item.closed_at | relativeTime }} diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss index 71a25eed4..7c7917c23 100644 --- a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss +++ b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss @@ -1,5 +1,8 @@ @use '../../styles/variables.scss'; +$color-open: variables.$green100; +$color-closed: variables.$purple100; + .item { padding: 1.125rem; border-bottom: 1px solid variables.$gray200; @@ -28,11 +31,11 @@ margin-right: 0.5rem; &.open { - color: variables.$green100 + color: $color-open; } &.closed { - color: variables.$purple100 + color: $color-closed; } } @@ -49,6 +52,7 @@ } .label { + font-weight: 500; font-size: 0.875rem; margin: 0 0.385rem; padding: 0.125rem 0.5rem; @@ -62,4 +66,12 @@ font-size: 0.875rem; margin-top: 0.325rem; color: variables.$gray600; + + .created-by { + cursor: pointer; + + &:hover { + color: variables.$blue300; + } + } } From c57b2678e64f237f2695bb5a6a326c44cc778898 Mon Sep 17 00:00:00 2001 From: Daian Scuarissi Date: Thu, 4 Aug 2022 16:28:27 +0200 Subject: [PATCH 3/5] Fix format --- .../app/issues/components/issues-list/issues-list.component.scss | 1 - .../components/issue-pull-item/issue-pull-item.component.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss index 8b1378917..e69de29bb 100644 --- a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss +++ b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss @@ -1 +0,0 @@ - diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss index 7c7917c23..22a6a05eb 100644 --- a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss +++ b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss @@ -40,7 +40,6 @@ $color-closed: variables.$purple100; } .content { - .title { font-size: 1.125rem; font-weight: 600; From 13d0e5531cf320164e04c99a9df03cb7f5588099 Mon Sep 17 00:00:00 2001 From: Daian Scuarissi Date: Tue, 16 Aug 2022 14:18:56 +0200 Subject: [PATCH 4/5] Fix comments --- .../issues-list/issues-list.component.html | 4 +- .../issues-list/issues-list.component.scss | 0 .../issues-list/issues-list.component.ts | 8 +-- .../issue-pull-item.component.html | 48 ------------------ .../issue-pull-item.component.ts | 50 ------------------- .../repo-issue-pull-card.component.html | 46 +++++++++++++++++ .../repo-issue-pull-card.component.scss} | 0 .../repo-issue-pull-card.component.ts | 20 ++++++++ .../src/app/shared/shared.module.ts | 6 +-- 9 files changed, 77 insertions(+), 105 deletions(-) delete mode 100644 angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss delete mode 100644 angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html delete mode 100644 angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts create mode 100644 angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html rename angular-ngrx-scss/src/app/shared/components/{issue-pull-item/issue-pull-item.component.scss => repo-issue-pull-card/repo-issue-pull-card.component.scss} (100%) create mode 100644 angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.ts diff --git a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html index a3b0ed499..48a8528c2 100644 --- a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html +++ b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.html @@ -1,5 +1,7 @@
- + + +
diff --git a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.ts b/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.ts index 82a070057..385673344 100644 --- a/angular-ngrx-scss/src/app/issues/components/issues-list/issues-list.component.ts +++ b/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[] = []; +} diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html deleted file mode 100644 index 002f97574..000000000 --- a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.html +++ /dev/null @@ -1,48 +0,0 @@ -
-
-
-
- - - - - - - - -
-
- {{ item.title }} - - - {{ label.name }} - - -
-
- #{{ item.number }} - - opened - {{ item.created_at | relativeTime }} - - by - Daian - - was closed - {{ item.closed_at | relativeTime }} - -
-
-
-
- - - {{ item.comments }} - -
-
-
-
diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts b/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts deleted file mode 100644 index bf8a249a1..000000000 --- a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; - -@Component({ - selector: 'app-issue-pull-item', - templateUrl: './issue-pull-item.component.html', - styleUrls: ['./issue-pull-item.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class IssuePullItemComponent { - itemsList = [ - { - number: 123, - state: 'closed', - title: 'Test Issue Closed', - body: '', - user: {}, - labels: [{ color: '8D5494', name: 'Status: Backlog' }], - assignee: {}, - assignees: [], - locked: 'False', - active_lock_reason: '', - comments: 10, - closed_at: new Date().toString(), - created_at: new Date().toString(), - updated_at: new Date().toString(), - closed_by: {}, - }, - { - number: 321, - state: 'open', - title: 'Test Issue Open', - body: '', - user: {}, - labels: [{ color: '8D5494', name: 'Status: Backlog' }], - assignee: {}, - assignees: [], - locked: 'False', - active_lock_reason: '', - comments: 25, - closed_at: '', - created_at: new Date().toString(), - updated_at: new Date().toString(), - closed_by: {}, - }, - ]; - - colorMap(color: string): string { - return `#${color}`; - } -} diff --git a/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html b/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html new file mode 100644 index 000000000..d4dda9204 --- /dev/null +++ b/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html @@ -0,0 +1,46 @@ +
+
+
+ + + + + + + + +
+
+ {{ item.title }} + + + {{ label.name }} + + +
+
+ #{{ item.number }} + + opened + {{ item.created_at | relativeTime }} + + by + {{ item.user.login }} + + was closed + {{ item.closed_at | relativeTime }} + +
+
+
+
+ + + {{ item.comments }} + +
+
+
diff --git a/angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss b/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.scss similarity index 100% rename from angular-ngrx-scss/src/app/shared/components/issue-pull-item/issue-pull-item.component.scss rename to angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.scss diff --git a/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.ts b/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.ts new file mode 100644 index 000000000..cd22264ef --- /dev/null +++ b/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}`; + } +} diff --git a/angular-ngrx-scss/src/app/shared/shared.module.ts b/angular-ngrx-scss/src/app/shared/shared.module.ts index 27f0f065f..8e90a3873 100644 --- a/angular-ngrx-scss/src/app/shared/shared.module.ts +++ b/angular-ngrx-scss/src/app/shared/shared.module.ts @@ -7,7 +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 { IssuePullItemComponent } from './components/issue-pull-item/issue-pull-item.component'; +import { RepoIssuePullCardComponent } from './components/repo-issue-pull-card/repo-issue-pull-card.component'; @NgModule({ declarations: [ @@ -17,7 +17,7 @@ import { IssuePullItemComponent } from './components/issue-pull-item/issue-pull- OcticonsDirective, FilterDropdownComponent, PaginationComponent, - IssuePullItemComponent, + RepoIssuePullCardComponent, ], imports: [CommonModule, RouterModule], exports: [ @@ -27,7 +27,7 @@ import { IssuePullItemComponent } from './components/issue-pull-item/issue-pull- OcticonsDirective, FilterDropdownComponent, PaginationComponent, - IssuePullItemComponent, + RepoIssuePullCardComponent, ], }) export class SharedModule {} From d1ba1f70bb91b7b7fb569a161174954d4800434d Mon Sep 17 00:00:00 2001 From: Daian Scuarissi Date: Wed, 17 Aug 2022 14:21:53 +0200 Subject: [PATCH 5/5] Added isOpen flag --- .../repo-issue-pull-card.component.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html b/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html index d4dda9204..a909aa593 100644 --- a/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html +++ b/angular-ngrx-scss/src/app/shared/components/repo-issue-pull-card/repo-issue-pull-card.component.html @@ -1,7 +1,7 @@
- + @@ -23,15 +23,15 @@
#{{ item.number }} - + opened {{ item.created_at | relativeTime }} by {{ item.user.login }} - + was closed - {{ item.closed_at | relativeTime }} + {{ item.closed_at! | relativeTime }}