inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2353] replaced datatable with mat-list (#3085)

Browse Source 
* [ADF-2353] replaced datatable with mat-list

* [ADF-2353] fixed test for the new mat-list comment
This commit is contained in:
Vito
2018-03-16 17:11:50 +00:00
committed by Eugenio Romano
parent ce14d68ea7
commit 6490260c5d
5 changed files with 136 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/models/comment-process.model.ts
View File

@@ -22,6 +22,7 @@ export class CommentProcessModel implements CommentRepresentation {
message: string; message: string;
created: Date; created: Date;
createdBy: LightUserRepresentation; createdBy: LightUserRepresentation;
isSelected: boolean;
constructor(obj?: any) { constructor(obj?: any) {
if (obj) { if (obj) {
@@ -29,6 +30,7 @@ export class CommentProcessModel implements CommentRepresentation {
this.message = obj.message; this.message = obj.message;
this.created = obj.created; this.created = obj.created;
this.createdBy = obj.createdBy; this.createdBy = obj.createdBy;
this.isSelected = obj.isSelected ? obj.isSelected : false;
} }
} }
} }

69
lib/process-services/comments/comment-list.component.html
View File

@@ -1,38 +1,31 @@
<adf-datatable <mat-list class="adf-comment-list">
[rows]="comments" <mat-list-item *ngFor="let comment of comments"
[showHeader]="false" (click)="selectComment(comment)"
(rowClick)="selectComment($event)" *ngIf="hasComments()"> class="adf-comment-list-item"
[class.is-selected]="comment.isSelected"
<data-columns> id="adf-comment-{{comment?.id}}">
<data-column key="createdBy.email" title="{{'ADF_TASK_LIST.DETAILS.COMMENTS.CREATED_BY_HEADER' | translate }}"> <div id="comment-user-icon" class="adf-comment-img-container">
<ng-template let-entry="$implicit"> <div
<div id="comment-user-icon" *ngIf="!comment.createdBy.pictureId"
class="adf-comment-img-container"> class="adf-comment-user-icon">
<div {{getUserShortName(comment.createdBy)}}</div>
*ngIf="!entry.row.obj.createdBy.pictureId" class="adf-comment-user-icon"> <div>
{{getUserShortName(entry.row.obj.createdBy)}}</div> <img *ngIf="comment.createdBy.pictureId"
<div> class="adf-people-img"
<img *ngIf="entry.row.obj.createdBy.pictureId" class="adf-people-img" [src]="peopleProcessService.getUserImage(comment.createdBy)"
[src]="peopleProcessService.getUserImage(entry.row.obj.createdBy)"/> />
</div> </div>
</div> </div>
</ng-template> <div class="adf-comment-contents">
</data-column> <div matLine id="comment-user" class="adf-comment-user-name">
<data-column key="message" title="{{'ADF_TASK_LIST.DETAILS.COMMENTS.MESSAGE_HEADER' | translate }}"> {{comment.createdBy?.firstName}} {{comment.createdBy?.lastName}}
<ng-template let-entry="$implicit"> </div>
<div class="adf-comment-contents"> <div matLine id="comment-message" class="adf-comment-message">
<div id="comment-user" class="adf-comment-user-name"> {{comment.message}}
{{entry.row.obj.createdBy?.firstName}} {{entry.row.obj.createdBy?.lastName}} </div>
</div> <div matLine id="comment-time" class="adf-comment-message-time">
<div id="comment-message" class="adf-comment-message"> {{transformDate(comment.created)}}
{{entry.row.obj.message}} </div>
</div> </div>
<div id="comment-time" class="adf-comment-message-time"> </mat-list-item>
{{transformDate(entry.row.obj.created)}} </mat-list>
</div>
</div>
</ng-template>
</data-column>
</data-columns>
</adf-datatable>

64
lib/process-services/comments/comment-list.component.scss
View File

@@ -1,13 +1,40 @@
@mixin adf-task-list-comment-list-theme($theme) { @mixin adf-task-list-comment-list-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primaryColor: mat-color($primary, 100);
$rippleColor: mat-color($primary, 300);
.is-selected {
background: mat-color($primary, 100);
}
.adf { .adf {
&-comment-img-container { &-comment-img-container {
float: left; float: left;
width: 40px; width: 40px;
padding: 5px 10px;
height: 100%; 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 { &-comment-user-icon {
@@ -16,18 +43,17 @@
background-color: mat-color($primary); background-color: mat-color($primary);
border-radius: 50%; border-radius: 50%;
font-size: 16px; font-size: 16px;
color: #fff;
text-align: center; text-align: center;
height: 18px; height: 20px;
background-size: cover; background-size: cover;
} }
&-comment-user-name { &-comment-user-name {
float: left; float: left;
width: calc(100% - 120px); width: calc(100% - 10%);
padding: 2px 10px; padding: 2px 10px;
font-weight: 600; font-weight: 600;
color: #595959; font-size: 14px;
} }
&-comment-message { &-comment-message {
@@ -35,29 +61,26 @@
width: calc(100% - 10px); width: calc(100% - 10px);
padding: 2px 10px; padding: 2px 10px;
font-style: italic; font-style: italic;
color: #595959; white-space: initial !important;
white-space: initial; font-size: 14px;
letter-spacing: -0.2px;
line-height: 1.43;
opacity: 0.54;
} }
&-comment-message-time { &-comment-message-time {
float: left; float: left;
width: calc(100% - 120px); width: calc(100% - 10%);
padding: 2px 10px; padding: 2px 10px;
font-size: 12px; font-size: 12px !important;
color: #595959; opacity: 0.54;
} }
&-comment-contents { &-comment-contents {
float: left;
width: calc(100% - 10px); width: calc(100% - 10px);
} padding-top: 12px;
padding-bottom: 12px;
&-datatable ::ng-deep table { padding-left: 5px;
border: none !important;
tbody td {
padding: 0px !important;
border-top: none !important;
}
} }
&-people-img { &-people-img {
@@ -69,6 +92,3 @@
} }
} }

92
lib/process-services/comments/comment-list.component.spec.ts
View File

@@ -18,8 +18,8 @@
import { DatePipe } from '@angular/common'; import { DatePipe } from '@angular/common';
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CommentProcessModel, UserProcessModel } from '@alfresco/adf-core'; import { CommentProcessModel, UserProcessModel } from '@alfresco/adf-core';
import { DataRowEvent, ObjectDataRow } from '@alfresco/adf-core';
import { CommentListComponent } from './comment-list.component'; import { CommentListComponent } from './comment-list.component';
import { By } from '@angular/platform-browser';
const testUser: UserProcessModel = new UserProcessModel({ const testUser: UserProcessModel = new UserProcessModel({
id: '1', id: '1',
@@ -35,6 +35,13 @@ const testComment: CommentProcessModel = new CommentProcessModel({
createdBy: testUser createdBy: testUser
}); });
const secondtestComment: CommentProcessModel = new CommentProcessModel({
id: 2,
message: '2nd Test Comment',
created: new Date().toDateString(),
createdBy: testUser
});
describe('CommentListComponent', () => { describe('CommentListComponent', () => {
let commentList: CommentListComponent; let commentList: CommentListComponent;
@@ -59,31 +66,52 @@ describe('CommentListComponent', () => {
}); });
})); }));
it('should emit row click event', (done) => { it('should emit row click event', async(() => {
let row = new ObjectDataRow(testComment); commentList.comments = [testComment];
let rowEvent = new DataRowEvent(row, null);
commentList.clickRow.subscribe(selectedComment => { commentList.clickRow.subscribe(selectedComment => {
expect(selectedComment.id).toEqual(1); expect(selectedComment.id).toEqual(1);
expect(selectedComment.message).toEqual('Test Comment'); expect(selectedComment.message).toEqual('Test Comment');
expect(selectedComment.createdBy).toEqual(testUser); expect(selectedComment.createdBy).toEqual(testUser);
expect(selectedComment.created).toEqual(testDate.toDateString()); 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.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
expect(fixture.nativeElement.querySelector('adf-datatable')).toBeNull(); 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]; commentList.comments = [testComment];
fixture.detectChanges(); fixture.detectChanges();
@@ -92,11 +120,10 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(testComment.message); expect(elements[0].innerText).toBe(testComment.message);
expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull(); 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]; commentList.comments = [testComment];
fixture.detectChanges(); fixture.detectChanges();
@@ -105,11 +132,10 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(testComment.createdBy.firstName + ' ' + testComment.createdBy.lastName); expect(elements[0].innerText).toBe(testComment.createdBy.firstName + ' ' + testComment.createdBy.lastName);
expect(fixture.nativeElement.querySelector('#comment-user:empty')).toBeNull(); 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]; commentList.comments = [testComment];
fixture.detectChanges(); fixture.detectChanges();
@@ -118,22 +144,20 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(commentList.transformDate(testDate.toDateString())); expect(elements[0].innerText).toBe(commentList.transformDate(testDate.toDateString()));
expect(fixture.nativeElement.querySelector('#comment-time:empty')).toBeNull(); 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]; commentList.comments = [testComment];
fixture.detectChanges(); fixture.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
element = fixture.nativeElement.querySelector('#comment-time'); element = fixture.nativeElement.querySelector('#comment-time');
expect(element.innerText).toContain('Today'); 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)); testComment.created = new Date((Date.now() - 24 * 3600 * 1000));
commentList.comments = [testComment]; commentList.comments = [testComment];
fixture.detectChanges(); fixture.detectChanges();
@@ -141,11 +165,10 @@ describe('CommentListComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
element = fixture.nativeElement.querySelector('#comment-time'); element = fixture.nativeElement.querySelector('#comment-time');
expect(element.innerText).toContain('Yesterday'); 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)); testComment.created = new Date((Date.now() - 24 * 3600 * 1000 * 2));
commentList.comments = [testComment]; commentList.comments = [testComment];
fixture.detectChanges(); fixture.detectChanges();
@@ -154,11 +177,10 @@ describe('CommentListComponent', () => {
element = fixture.nativeElement.querySelector('#comment-time'); element = fixture.nativeElement.querySelector('#comment-time');
expect(element.innerText).not.toContain('Today'); expect(element.innerText).not.toContain('Today');
expect(element.innerText).not.toContain('Yesterday'); 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]; commentList.comments = [testComment];
fixture.detectChanges(); fixture.detectChanges();
@@ -167,16 +189,6 @@ describe('CommentListComponent', () => {
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toContain(commentList.getUserShortName(testComment.createdBy)); expect(elements[0].innerText).toContain(commentList.getUserShortName(testComment.createdBy));
expect(fixture.nativeElement.querySelector('#comment-user-icon:empty')).toBeNull(); 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();
});
});
}); });

18
lib/process-services/comments/comment-list.component.ts
View File

@@ -17,12 +17,13 @@
import { CommentProcessModel, PeopleProcessService, UserProcessModel } from '@alfresco/adf-core'; import { CommentProcessModel, PeopleProcessService, UserProcessModel } from '@alfresco/adf-core';
import { DatePipe } from '@angular/common'; import { DatePipe } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
@Component({ @Component({
selector: 'adf-comment-list', selector: 'adf-comment-list',
templateUrl: './comment-list.component.html', templateUrl: './comment-list.component.html',
styleUrls: ['./comment-list.component.scss'] styleUrls: ['./comment-list.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class CommentListComponent { export class CommentListComponent {
@@ -40,8 +41,12 @@ export class CommentListComponent {
constructor(private datePipe: DatePipe, public peopleProcessService: PeopleProcessService) { constructor(private datePipe: DatePipe, public peopleProcessService: PeopleProcessService) {
} }
selectComment(event: any): void { selectComment(comment: CommentProcessModel): void {
this.selectedComment = event.value.obj; if (this.selectedComment) {
this.selectedComment.isSelected = false;
}
comment.isSelected = true;
this.selectedComment = comment;
this.clickRow.emit(this.selectedComment); this.clickRow.emit(this.selectedComment);
} }
@@ -74,9 +79,4 @@ export class CommentListComponent {
} }
return formattedDate; return formattedDate;
} }
hasComments(): boolean {
return this.comments && this.comments.length && true;
}
} }