- {{'PEOPLE.SEARCH.NO_USERS' | translate }}
+
+
+
+
+
+
+
+ {{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}
+
+
+
+
+ {{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts
index 3def161a37..04a7676d6e 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.spec.ts
@@ -19,6 +19,8 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { Observable } from 'rxjs/Observable';
import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
import { ActivitiPeopleSearch } from './activiti-people-search.component';
+import { ActivitiPeopleList } from './activiti-people-list.component';
+import { DataTableModule } from 'ng2-alfresco-datatable';
import { User } from '../models/user.model';
declare let jasmine: any;
@@ -49,10 +51,12 @@ describe('ActivitiPeopleSearch', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
- CoreModule.forRoot()
+ CoreModule.forRoot(),
+ DataTableModule
],
declarations: [
- ActivitiPeopleSearch
+ ActivitiPeopleSearch,
+ ActivitiPeopleList
]
}).compileComponents().then(() => {
@@ -78,28 +82,25 @@ describe('ActivitiPeopleSearch', () => {
expect(element.querySelector('#userSearchText')).not.toBeNull();
});
- it('should show no user found to involve message', () => {
+ it('should hide people-list container', () => {
fixture.detectChanges();
fixture.whenStable()
.then(() => {
- expect(element.querySelector('#no-user-found')).not.toBeNull();
- expect(element.querySelector('#no-user-found').textContent).toContain('PEOPLE.SEARCH.NO_USERS');
+ expect(element.querySelector('#search-people-list')).toBeNull();
});
+
});
it('should show user which can be involved ', (done) => {
- activitiPeopleSearchComponent.onSearch.subscribe(() => {
+ activitiPeopleSearchComponent.searchPeople.subscribe(() => {
activitiPeopleSearchComponent.results = Observable.of(userArray);
activitiPeopleSearchComponent.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
- expect(element.querySelector('#user-1')).not.toBeNull();
- expect(element.querySelector('#user-1').textContent)
- .toContain('fake-name - fake-last');
- expect(element.querySelector('#user-2')).not.toBeNull();
- expect(element.querySelector('#user-2').textContent)
- .toContain('fake-involve-name - fake-involve-last');
+ let gatewayElement: any = element.querySelector('#search-people-list tbody');
+ expect(gatewayElement).not.toBeNull();
+ expect(gatewayElement.children.length).toBe(2);
done();
});
});
@@ -110,7 +111,7 @@ describe('ActivitiPeopleSearch', () => {
});
it('should send an event when an user is clicked', (done) => {
- activitiPeopleSearchComponent.onRowClicked.subscribe((user) => {
+ activitiPeopleSearchComponent.success.subscribe((user) => {
expect(user).toBeDefined();
expect(user.firstName).toBe('fake-name');
done();
@@ -120,8 +121,9 @@ describe('ActivitiPeopleSearch', () => {
fixture.detectChanges();
fixture.whenStable()
.then(() => {
- let userToSelect =
element.querySelector('#user-1');
- userToSelect.click();
+ activitiPeopleSearchComponent.onRowClick(fakeUser);
+ let addUserButton = element.querySelector('#add-people');
+ addUserButton.click();
});
});
@@ -129,13 +131,16 @@ describe('ActivitiPeopleSearch', () => {
activitiPeopleSearchComponent.results = Observable.of(userArray);
activitiPeopleSearchComponent.ngOnInit();
fixture.detectChanges();
- let userToSelect = element.querySelector('#user-1');
- userToSelect.click();
+ activitiPeopleSearchComponent.onRowClick(fakeUser);
+ let addUserButton = element.querySelector('#add-people');
+ addUserButton.click();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
- expect(element.querySelector('#user-1')).toBeNull();
+ let gatewayElement: any = element.querySelector('#search-people-list tbody');
+ expect(gatewayElement).not.toBeNull();
+ expect(gatewayElement.children.length).toBe(1);
done();
});
});
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts
index e5425d136d..ffb6be6235 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people-search.component.ts
@@ -32,21 +32,23 @@ declare var require: any;
export class ActivitiPeopleSearch implements OnInit, AfterViewInit {
- @Input()
- iconImageUrl: string = require('../assets/images/user.jpg');
-
@Input()
results: Observable;
@Output()
- onSearch: EventEmitter = new EventEmitter();
+ searchPeople: EventEmitter = new EventEmitter();
@Output()
- onRowClicked: EventEmitter = new EventEmitter();
+ success: EventEmitter = new EventEmitter();
+
+ @Output()
+ closeSearch = new EventEmitter();
searchUser: FormControl = new FormControl();
- userList: User[] = [];
+ users: User[] = [];
+
+ selectedUser: User;
constructor(private translateService: AlfrescoTranslationService) {
if (translateService) {
@@ -58,16 +60,16 @@ export class ActivitiPeopleSearch implements OnInit, AfterViewInit {
.debounceTime(200)
.subscribe((event: string) => {
if (event && event.trim()) {
- this.onSearch.emit(event);
+ this.searchPeople.emit(event);
} else {
- this.userList = [];
+ this.users = [];
}
});
}
ngOnInit() {
this.results.subscribe((list) => {
- this.userList = list;
+ this.users = list;
});
}
@@ -85,17 +87,38 @@ export class ActivitiPeopleSearch implements OnInit, AfterViewInit {
return isUpgraded;
}
- onRowClick(userClicked: User) {
- this.onRowClicked.emit(userClicked);
- this.userList = this.userList.filter((user) => {
+ onRowClick(user: User) {
+ this.selectedUser = user;
+ }
+
+ closeSearchList() {
+ this.closeSearch.emit();
+ }
+
+ addInvolvedUser() {
+ if (this.selectedUser === undefined) {
+ return;
+ }
+ this.success.emit(this.selectedUser);
+ this.users = this.users.filter((user) => {
this.searchUser.reset();
- return user.id !== userClicked.id;
+ return user.id !== this.selectedUser.id;
});
}
- getDisplayUser(user: User): string {
- let firstName = user.firstName && user.firstName !== 'null' ? user.firstName : 'N/A';
- let lastName = user.lastName && user.lastName !== 'null' ? user.lastName : 'N/A';
- return firstName + ' - ' + lastName;
+ getDisplayUser(firstName: string, lastName: string, delimiter: string = '-'): string {
+ firstName = (firstName !== null ? firstName : '');
+ lastName = (lastName !== null ? lastName : '');
+ return firstName + delimiter + lastName;
+ }
+
+ getInitialUserName(firstName: string, lastName: string) {
+ firstName = (firstName !== null && firstName !== '' ? firstName[0] : '');
+ lastName = (lastName !== null && lastName !== '' ? lastName[0] : '');
+ return this.getDisplayUser(firstName, lastName, '');
+ }
+
+ hasUsers() {
+ return (this.users && this.users.length > 0);
}
}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css
index c618a45766..a1bce0db70 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.css
@@ -1,23 +1,74 @@
-:host {
+.assignment-header{
+ width: 100%;
+ border-bottom: 1px solid #eee;
+ padding: 6px 20px;
+}
+
+.assigment-count{
+ float: left;
+ padding: 10px 0px;
+ font-weight: bolder;
+ font-family: Muli;
+ opacity: 0.54;
+}
+
+.add-people{
+ float: right;
+ padding: 8px;
+ height: 26px;
+ opacity: 0.54;
+ cursor: pointer;
+}
+
+.add-people:hover{
+ color: #ff9100;
+}
+
+.assignment-top-container{
+ border-top: 2px solid #eee;
+ margin: 8px;
+ padding: 0px;
+}
+
+.assignment-container{
+ padding: 10px 20px;
+ border-bottom: 1px solid #eee;
width: 100%;
}
-.activiti-label {
+.assignment-list-container {
+ padding: 0px;
+}
+
+activiti-people-list >>> alfresco-datatable >>> thead {
+ display: none;
+}
+
+activiti-people-list >>> alfresco-datatable >>> .people-full-name {
+ font-family: 'Muli';
+}
+
+activiti-people-list >>> alfresco-datatable >>> .people-email {
+ font-family: 'Muli';
+ opacity: 0.54;
+}
+
+activiti-people-list >>> alfresco-datatable >>> .people-edit-label {
+ font-family: 'Muli';
+}
+
+activiti-people-list >>> alfresco-datatable >>> .people-pic {
+ background: #ffc800;
+ padding: 12px 10px;
+ border-radius: 100px;
+ color: #fff;
+ text-align: center;
font-weight: bolder;
+ font-size: 18px;
+ font-family: Muli;
+ text-transform: uppercase
}
-.material-icons.people__icon:hover {
- color: rgb(255, 152, 0);
-}
-
-.add-people-dialog__content {
- padding: 20px 24px 2px;
-}
-
-.mdl-tooltip {
- will-change: unset;
-}
-
-.material-icons {
- cursor: pointer;
+activiti-people-list >>> alfresco-datatable >>> td.mdl-data-table__cell--non-numeric.non-selectable.data-cell{
+ padding: 10px;
}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html
index 2d7e3f0a50..409a1aace5 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-people.component.html
@@ -1,36 +1,42 @@
-{{ 'TASK_DETAILS.LABELS.PEOPLE' | translate }}
-add
-
- Add a person
-
-
-
- {{ 'TASK_DETAILS.PEOPLE.NONE' | translate }}
-
-
-