From 6490260c5da02638526fa468db0a6f264780a670 Mon Sep 17 00:00:00 2001 From: Vito Date: Fri, 16 Mar 2018 17:11:50 +0000 Subject: [PATCH] [ADF-2353] replaced datatable with mat-list (#3085) * [ADF-2353] replaced datatable with mat-list * [ADF-2353] fixed test for the new mat-list comment --- lib/core/models/comment-process.model.ts | 2 + .../comments/comment-list.component.html | 69 +++++++------- .../comments/comment-list.component.scss | 64 ++++++++----- .../comments/comment-list.component.spec.ts | 92 +++++++++++-------- .../comments/comment-list.component.ts | 18 ++-- 5 files changed, 136 insertions(+), 109 deletions(-) diff --git a/lib/core/models/comment-process.model.ts b/lib/core/models/comment-process.model.ts index a9dfb7570c..627e77e891 100644 --- a/lib/core/models/comment-process.model.ts +++ b/lib/core/models/comment-process.model.ts @@ -22,6 +22,7 @@ export class CommentProcessModel implements CommentRepresentation { message: string; created: Date; createdBy: LightUserRepresentation; + isSelected: boolean; constructor(obj?: any) { if (obj) { @@ -29,6 +30,7 @@ export class CommentProcessModel implements CommentRepresentation { this.message = obj.message; this.created = obj.created; this.createdBy = obj.createdBy; + this.isSelected = obj.isSelected ? obj.isSelected : false; } } } diff --git a/lib/process-services/comments/comment-list.component.html b/lib/process-services/comments/comment-list.component.html index bbc4b5aff5..b009d31ff0 100644 --- a/lib/process-services/comments/comment-list.component.html +++ b/lib/process-services/comments/comment-list.component.html @@ -1,38 +1,31 @@ - - - - - -
-
- {{getUserShortName(entry.row.obj.createdBy)}}
-
- -
-
- - - - -
-
- {{entry.row.obj.createdBy?.firstName}} {{entry.row.obj.createdBy?.lastName}} -
-
- {{entry.row.obj.message}} -
-
- {{transformDate(entry.row.obj.created)}} -
-
- - - - - + + +
+
+ {{getUserShortName(comment.createdBy)}}
+
+ +
+
+
+
+ {{comment.createdBy?.firstName}} {{comment.createdBy?.lastName}} +
+
+ {{comment.message}} +
+
+ {{transformDate(comment.created)}} +
+
+ + diff --git a/lib/process-services/comments/comment-list.component.scss b/lib/process-services/comments/comment-list.component.scss index c4069a2bc1..d35eee846d 100644 --- a/lib/process-services/comments/comment-list.component.scss +++ b/lib/process-services/comments/comment-list.component.scss @@ -1,13 +1,40 @@ @mixin adf-task-list-comment-list-theme($theme) { $primary: map-get($theme, primary); + $primaryColor: mat-color($primary, 100); + $rippleColor: mat-color($primary, 300); + + .is-selected { + background: mat-color($primary, 100); + } .adf { &-comment-img-container { float: left; width: 40px; - padding: 5px 10px; height: 100%; + display: flex; + align-self: flex-start; + padding-top: 18px; + } + + &-comment-list-item { + white-space: initial; + display: table-row-group; + padding-top: 12px; + overflow: hidden; + height: 100% !important; + transition: background 0.8s; + background-position: center; + + &:hover { + background: $primaryColor radial-gradient(circle, transparent 1%, $primaryColor 1%) center/15000%; + } + &:active { + background-color: $rippleColor; + background-size: 100%; + transition: background 0s; + } } &-comment-user-icon { @@ -16,18 +43,17 @@ background-color: mat-color($primary); border-radius: 50%; font-size: 16px; - color: #fff; text-align: center; - height: 18px; + height: 20px; background-size: cover; } &-comment-user-name { float: left; - width: calc(100% - 120px); + width: calc(100% - 10%); padding: 2px 10px; font-weight: 600; - color: #595959; + font-size: 14px; } &-comment-message { @@ -35,29 +61,26 @@ width: calc(100% - 10px); padding: 2px 10px; font-style: italic; - color: #595959; - white-space: initial; + white-space: initial !important; + font-size: 14px; + letter-spacing: -0.2px; + line-height: 1.43; + opacity: 0.54; } &-comment-message-time { float: left; - width: calc(100% - 120px); + width: calc(100% - 10%); padding: 2px 10px; - font-size: 12px; - color: #595959; + font-size: 12px !important; + opacity: 0.54; } &-comment-contents { - float: left; width: calc(100% - 10px); - } - - &-datatable ::ng-deep table { - border: none !important; - tbody td { - padding: 0px !important; - border-top: none !important; - } + padding-top: 12px; + padding-bottom: 12px; + padding-left: 5px; } &-people-img { @@ -69,6 +92,3 @@ } } - - - diff --git a/lib/process-services/comments/comment-list.component.spec.ts b/lib/process-services/comments/comment-list.component.spec.ts index 1eb5e94427..ea762e2cc1 100644 --- a/lib/process-services/comments/comment-list.component.spec.ts +++ b/lib/process-services/comments/comment-list.component.spec.ts @@ -18,8 +18,8 @@ import { DatePipe } from '@angular/common'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { CommentProcessModel, UserProcessModel } from '@alfresco/adf-core'; -import { DataRowEvent, ObjectDataRow } from '@alfresco/adf-core'; import { CommentListComponent } from './comment-list.component'; +import { By } from '@angular/platform-browser'; const testUser: UserProcessModel = new UserProcessModel({ id: '1', @@ -35,6 +35,13 @@ const testComment: CommentProcessModel = new CommentProcessModel({ createdBy: testUser }); +const secondtestComment: CommentProcessModel = new CommentProcessModel({ + id: 2, + message: '2nd Test Comment', + created: new Date().toDateString(), + createdBy: testUser +}); + describe('CommentListComponent', () => { let commentList: CommentListComponent; @@ -59,31 +66,52 @@ describe('CommentListComponent', () => { }); })); - it('should emit row click event', (done) => { - let row = new ObjectDataRow(testComment); - let rowEvent = new DataRowEvent(row, null); + it('should emit row click event', async(() => { + commentList.comments = [testComment]; commentList.clickRow.subscribe(selectedComment => { expect(selectedComment.id).toEqual(1); expect(selectedComment.message).toEqual('Test Comment'); expect(selectedComment.createdBy).toEqual(testUser); expect(selectedComment.created).toEqual(testDate.toDateString()); - done(); + expect(selectedComment.isSelected).toBeTruthy(); }); - commentList.selectComment(rowEvent); - }); + fixture.detectChanges(); + fixture.whenStable().then(() => { + let comment = fixture.debugElement.query(By.css('#adf-comment-1')); + comment.triggerEventHandler('click', null); + }); + })); - it('should not show comment list if no input is given', (done) => { + it('should deselect the previous selected comment when a new one is clicked', async(() => { + testComment.isSelected = true; + commentList.selectedComment = testComment; + commentList.comments = [testComment, secondtestComment]; + + commentList.clickRow.subscribe(selectedComment => { + fixture.detectChanges(); + let commentSelectedList = fixture.nativeElement.querySelectorAll('.is-selected'); + expect(commentSelectedList.length).toBe(1); + expect(commentSelectedList[0].textContent).toContain('2nd Test Comment'); + }); + + fixture.detectChanges(); + fixture.whenStable().then(() => { + let comment = fixture.debugElement.query(By.css('#adf-comment-2')); + comment.triggerEventHandler('click', null); + }); + })); + + it('should not show comment list if no input is given', async(() => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(fixture.nativeElement.querySelector('adf-datatable')).toBeNull(); - done(); }); - }); + })); - it('should show comment message when input is given', (done) => { + it('should show comment message when input is given', async(() => { commentList.comments = [testComment]; fixture.detectChanges(); @@ -92,11 +120,10 @@ describe('CommentListComponent', () => { expect(elements.length).toBe(1); expect(elements[0].innerText).toBe(testComment.message); expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull(); - done(); }); - }); + })); - it('should show comment user when input is given', (done) => { + it('should show comment user when input is given', async(() => { commentList.comments = [testComment]; fixture.detectChanges(); @@ -105,11 +132,10 @@ describe('CommentListComponent', () => { expect(elements.length).toBe(1); expect(elements[0].innerText).toBe(testComment.createdBy.firstName + ' ' + testComment.createdBy.lastName); expect(fixture.nativeElement.querySelector('#comment-user:empty')).toBeNull(); - done(); }); - }); + })); - it('should show comment date time when input is given', (done) => { + it('should show comment date time when input is given', async(() => { commentList.comments = [testComment]; fixture.detectChanges(); @@ -118,22 +144,20 @@ describe('CommentListComponent', () => { expect(elements.length).toBe(1); expect(elements[0].innerText).toBe(commentList.transformDate(testDate.toDateString())); expect(fixture.nativeElement.querySelector('#comment-time:empty')).toBeNull(); - done(); }); - }); + })); - it('comment date time should start with Today when comment date is today', (done) => { + it('comment date time should start with Today when comment date is today', async(() => { commentList.comments = [testComment]; fixture.detectChanges(); fixture.whenStable().then(() => { element = fixture.nativeElement.querySelector('#comment-time'); expect(element.innerText).toContain('Today'); - done(); }); - }); + })); - it('comment date time should start with Yesterday when comment date is yesterday', (done) => { + it('comment date time should start with Yesterday when comment date is yesterday', async(() => { testComment.created = new Date((Date.now() - 24 * 3600 * 1000)); commentList.comments = [testComment]; fixture.detectChanges(); @@ -141,11 +165,10 @@ describe('CommentListComponent', () => { fixture.whenStable().then(() => { element = fixture.nativeElement.querySelector('#comment-time'); expect(element.innerText).toContain('Yesterday'); - done(); }); - }); + })); - it('comment date time should not start with Today/Yesterday when comment date is before yesterday', (done) => { + it('comment date time should not start with Today/Yesterday when comment date is before yesterday', async(() => { testComment.created = new Date((Date.now() - 24 * 3600 * 1000 * 2)); commentList.comments = [testComment]; fixture.detectChanges(); @@ -154,11 +177,10 @@ describe('CommentListComponent', () => { element = fixture.nativeElement.querySelector('#comment-time'); expect(element.innerText).not.toContain('Today'); expect(element.innerText).not.toContain('Yesterday'); - done(); }); - }); + })); - it('should show user icon when input is given', (done) => { + it('should show user icon when input is given', async(() => { commentList.comments = [testComment]; fixture.detectChanges(); @@ -167,16 +189,6 @@ describe('CommentListComponent', () => { expect(elements.length).toBe(1); expect(elements[0].innerText).toContain(commentList.getUserShortName(testComment.createdBy)); expect(fixture.nativeElement.querySelector('#comment-user-icon:empty')).toBeNull(); - done(); }); - }); - - it('should hide the datatable header in comment-list as showHeader is false', (done) => { - fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(element.querySelector('.adf-datatable-header')).toBe(null); - done(); - }); - }); + })); }); diff --git a/lib/process-services/comments/comment-list.component.ts b/lib/process-services/comments/comment-list.component.ts index 92d357f838..962812f2a3 100644 --- a/lib/process-services/comments/comment-list.component.ts +++ b/lib/process-services/comments/comment-list.component.ts @@ -17,12 +17,13 @@ import { CommentProcessModel, PeopleProcessService, UserProcessModel } from '@alfresco/adf-core'; import { DatePipe } from '@angular/common'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'adf-comment-list', templateUrl: './comment-list.component.html', - styleUrls: ['./comment-list.component.scss'] + styleUrls: ['./comment-list.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CommentListComponent { @@ -40,8 +41,12 @@ export class CommentListComponent { constructor(private datePipe: DatePipe, public peopleProcessService: PeopleProcessService) { } - selectComment(event: any): void { - this.selectedComment = event.value.obj; + selectComment(comment: CommentProcessModel): void { + if (this.selectedComment) { + this.selectedComment.isSelected = false; + } + comment.isSelected = true; + this.selectedComment = comment; this.clickRow.emit(this.selectedComment); } @@ -74,9 +79,4 @@ export class CommentListComponent { } return formattedDate; } - - hasComments(): boolean { - return this.comments && this.comments.length && true; - } - }