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;
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;
}
}
}

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

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

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

@@ -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 @@
}
}

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

@@ -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();
});
});
}));
});

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

@@ -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;
}
}