mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-1532] Assignee typeahead in start task form (#2839)
* people module directory restructuring * Extract PeopleSearchFieldComponent to reuse most part of it * Transform PeopleSearchFieldComponent to the form we want to reuse * People selector component, first try * Remove material grid from start-task.component, first part * Styling and i18n * clear button for deleting the selected assignee * Remove people preloading, remove combobox and update assigneeId * Fix existing tests * Add new tests * Final css fixes
This commit is contained in:
Popovics András
committed by
Eugenio Romano
Eugenio Romano
parent
74cd0fab33
commit
9bd18c9770
@@ -0,0 +1,14 @@
|
||||
<div class="search-text-header">
|
||||
<ng-content select="[people-search-title]"></ng-content>
|
||||
</div>
|
||||
|
||||
<adf-people-search-field [performSearch]="performSearch" (rowClick)="onRowClick($event)"></adf-people-search-field>
|
||||
|
||||
<div class="search-list-action-container">
|
||||
<button mat-button type="button" id="close-people-search" (click)="closeSearchList()">
|
||||
{{'ADF_TASK_LIST.PEOPLE.DIALOG_CLOSE' | translate }}
|
||||
</button>
|
||||
<button mat-button type="button" id="add-people" (click)="involveUserAndClose()">
|
||||
<ng-content select="[people-search-action-label]"></ng-content>
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
@mixin adf-task-list-people-search-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf-people-search {
|
||||
width: 100%;
|
||||
|
||||
.activiti-label {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.fix-element-user-list {
|
||||
padding-top: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.search-text-header {
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.search-list-action-container {
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
padding: 5px 0px;
|
||||
margin-top: 5px;
|
||||
> button {
|
||||
opacity: 0.54;
|
||||
font-weight: bolder;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MatButtonModule, MatInputModule } from '@angular/material';
|
||||
import { UserProcessModel, TranslationService, TranslationMock } from '@alfresco/adf-core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { PeopleListComponent } from '../people-list/people-list.component';
|
||||
import { PeopleSearchComponent } from './people-search.component';
|
||||
import { PeopleSearchFieldComponent } from '../people-search-field/people-search-field.component';
|
||||
|
||||
const fakeUser: UserProcessModel = new UserProcessModel({
|
||||
id: '1',
|
||||
firstName: 'fake-name',
|
||||
lastName: 'fake-last',
|
||||
email: 'fake@mail.com'
|
||||
});
|
||||
|
||||
const fakeSecondUser: UserProcessModel = new UserProcessModel({
|
||||
id: '2',
|
||||
firstName: 'fake-involve-name',
|
||||
lastName: 'fake-involve-last',
|
||||
email: 'fake-involve@mail.com'
|
||||
});
|
||||
|
||||
describe('PeopleSearchComponent', () => {
|
||||
|
||||
let peopleSearchComponent: PeopleSearchComponent;
|
||||
let fixture: ComponentFixture<PeopleSearchComponent>;
|
||||
let element: HTMLElement;
|
||||
let userArray = [fakeUser, fakeSecondUser];
|
||||
let searchInput: any;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatInputModule
|
||||
],
|
||||
declarations: [
|
||||
PeopleSearchComponent,
|
||||
PeopleSearchFieldComponent,
|
||||
PeopleListComponent
|
||||
],
|
||||
providers: [
|
||||
{ provide: TranslationService, useClass: TranslationMock }
|
||||
]
|
||||
}).compileComponents().then(() => {
|
||||
|
||||
fixture = TestBed.createComponent(PeopleSearchComponent);
|
||||
peopleSearchComponent = fixture.componentInstance;
|
||||
element = fixture.nativeElement;
|
||||
peopleSearchComponent.results = Observable.of([]);
|
||||
fixture.detectChanges();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should show input search text', () => {
|
||||
expect(element.querySelector('#userSearchText')).toBeDefined();
|
||||
expect(element.querySelector('#userSearchText')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should hide people-list container', () => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable()
|
||||
.then(() => {
|
||||
expect(element.querySelector('#search-people-list')).toBeNull();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it('should show user which can be involved ', (done) => {
|
||||
peopleSearchComponent.results = Observable.of(userArray);
|
||||
peopleSearchComponent.ngOnInit();
|
||||
fixture.detectChanges();
|
||||
|
||||
searchInput = element.querySelector('#userSearchText');
|
||||
searchInput.value = 'fake-search';
|
||||
searchInput.dispatchEvent(new Event('input'));
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let gatewayElement: any = element.querySelector('#search-people-list tbody');
|
||||
expect(gatewayElement).not.toBeNull();
|
||||
expect(gatewayElement.children.length).toBe(2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should send an event when an user is clicked', (done) => {
|
||||
peopleSearchComponent.success.subscribe((user) => {
|
||||
expect(user).toBeDefined();
|
||||
expect(user.firstName).toBe('fake-name');
|
||||
done();
|
||||
});
|
||||
peopleSearchComponent.results = Observable.of(userArray);
|
||||
peopleSearchComponent.ngOnInit();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable()
|
||||
.then(() => {
|
||||
peopleSearchComponent.onRowClick(fakeUser);
|
||||
let addUserButton = <HTMLElement> element.querySelector('#add-people');
|
||||
addUserButton.click();
|
||||
});
|
||||
});
|
||||
|
||||
it('should remove clicked user', (done) => {
|
||||
peopleSearchComponent.results = Observable.of(userArray);
|
||||
peopleSearchComponent.ngOnInit();
|
||||
fixture.detectChanges();
|
||||
|
||||
searchInput = element.querySelector('#userSearchText');
|
||||
searchInput.value = 'fake-search';
|
||||
searchInput.dispatchEvent(new Event('input'));
|
||||
fixture.detectChanges();
|
||||
|
||||
peopleSearchComponent.onRowClick(fakeUser);
|
||||
let addUserButton = <HTMLElement> element.querySelector('#add-people');
|
||||
addUserButton.click();
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.whenStable()
|
||||
.then(() => {
|
||||
fixture.detectChanges();
|
||||
let gatewayElement: any = element.querySelector('#search-people-list tbody');
|
||||
expect(gatewayElement).not.toBeNull();
|
||||
expect(gatewayElement.children.length).toBe(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { UserProcessModel } from '@alfresco/adf-core';
|
||||
import { Component, EventEmitter, OnInit, Input, Output, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { PerformSearchCallback } from '../../interfaces/perform-search-callback.interface';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-people-search',
|
||||
templateUrl: './people-search.component.html',
|
||||
styleUrls: ['./people-search.component.scss'],
|
||||
host: {
|
||||
'class': 'adf-people-search'
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class PeopleSearchComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
results: Observable<UserProcessModel[]>;
|
||||
|
||||
@Output()
|
||||
searchPeople: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
success: EventEmitter<UserProcessModel> = new EventEmitter<UserProcessModel>();
|
||||
|
||||
@Output()
|
||||
closeSearch = new EventEmitter();
|
||||
|
||||
filteredResults$: Observable<UserProcessModel[]>;
|
||||
selectedUser: UserProcessModel = {};
|
||||
performSearch: PerformSearchCallback;
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
this.filteredResults$ = this.results.map((users) => {
|
||||
return users.filter(user => user.id !== this.selectedUser.id);
|
||||
});
|
||||
this.performSearch = this.performSearchCallback.bind(this);
|
||||
}
|
||||
|
||||
private performSearchCallback(event): Observable<UserProcessModel[]> {
|
||||
this.searchPeople.emit(event);
|
||||
return this.filteredResults$;
|
||||
}
|
||||
|
||||
onRowClick(user: UserProcessModel) {
|
||||
this.selectedUser = user;
|
||||
}
|
||||
|
||||
closeSearchList() {
|
||||
this.closeSearch.emit();
|
||||
}
|
||||
|
||||
involveUserAndClose() {
|
||||
this.involveUser();
|
||||
this.closeSearchList();
|
||||
}
|
||||
|
||||
involveUser() {
|
||||
if (this.selectedUser === undefined) {
|
||||
return;
|
||||
}
|
||||
this.success.emit(this.selectedUser);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user