fix people widget form component when no images are present (#2349)

ng2-components/ng2-activiti-form/src/components/widgets/core/group-user.model.ts

@@ -24,7 +24,7 @@ export class GroupUserModel {
     firstName: string;
     id: string;
     lastName: string;
-    userImageUrl: string;
+    userImage: string;
 
     constructor(json?: any) {
         if (json) {
@@ -33,6 +33,7 @@ export class GroupUserModel {
             this.firstName = json.firstName;
             this.id = json.id;
             this.lastName = json.lastName;
+            this.userImage = json.userImage;
         }
     }
 }

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html

@@ -21,15 +21,15 @@
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>
 <div class="adf-people-autocomplete mat-elevation-z2" [hidden]="!popupVisible || users.length === 0">
-    <md-option *ngFor="let user of users"
+    <md-option *ngFor="let user of users; let i = index"
                [id]="field.id +'-'+user.id"
                (click)="onItemClick(user, $event)">
         <div class="adf-people-widget-row">
-            <div *ngIf="!user.userImage" class="adf-people-widget-pic">
-                {{user.firstName[0]}} {{user.lastName[0]}}
+            <div id="adf-people-widget-initial-{{i}}" *ngIf="!user.userImage" class="adf-people-widget-pic">
+                {{getInitialUserName(user.firstName, user.lastName)}}
             </div>
             <div *ngIf="user.userImage" class="adf-people-widget-image-row">
-                <img class="adf-people-widget-image"
+                <img id="adf-people-widget-pic-{{i}}" class="adf-people-widget-image"
                     [src]="user.userImage"
                     (error)="onErrorImageLoad(user)"/>
             </div>

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts

@@ -15,25 +15,52 @@
  * limitations under the License.
  */
 
-import { ElementRef } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
+import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
 import { FormService } from '../../../services/form.service';
+import { MaterialModule } from '../../material.module';
 import { FormFieldModel } from '../core/form-field.model';
 import { FormModel } from '../core/form.model';
 import { GroupUserModel } from '../core/group-user.model';
+import { ErrorWidgetComponent } from '../error/error.component';
+import { EcmModelService } from './../../../services/ecm-model.service';
 import { PeopleWidgetComponent } from './people.widget';
 
 describe('PeopleWidgetComponent', () => {
 
-    let elementRef: ElementRef;
-    let formService: FormService;
     let widget: PeopleWidgetComponent;
+    let fixture: ComponentFixture<PeopleWidgetComponent>;
+    let element: HTMLElement;
+    let formService: FormService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule,
+                MaterialModule
+            ],
+            declarations: [
+                PeopleWidgetComponent,
+                ErrorWidgetComponent
+            ],
+            providers: [
+                FormService,
+                EcmModelService,
+                ActivitiAlfrescoContentService
+            ]
+        }).compileComponents();
+    }));
 
     beforeEach(() => {
-        formService = new FormService(null, null, null);
-        elementRef = new ElementRef(null);
-        widget = new PeopleWidgetComponent(formService, elementRef);
+        fixture = TestBed.createComponent(PeopleWidgetComponent);
+        formService = TestBed.get(FormService);
+
+        element = fixture.nativeElement;
+        widget = fixture.componentInstance;
         widget.field = new FormFieldModel(new FormModel());
+        fixture.detectChanges();
     });
 
     it('should return empty display name for missing model', () => {
@@ -49,12 +76,12 @@ describe('PeopleWidgetComponent', () => {
     });
 
     it('should skip first name for display name', () => {
-        let model = new GroupUserModel({ firstName: null, lastName: 'Doe' });
+        let model = new GroupUserModel({firstName: null, lastName: 'Doe'});
         expect(widget.getDisplayName(model)).toBe('Doe');
     });
 
     it('should skip last name for display name', () => {
-        let model = new GroupUserModel({ firstName: 'John', lastName: null });
+        let model = new GroupUserModel({firstName: 'John', lastName: null});
         expect(widget.getDisplayName(model)).toBe('John');
     });
 
@@ -82,7 +109,7 @@ describe('PeopleWidgetComponent', () => {
     });
 
     it('should update values on item click', () => {
-        let item = new GroupUserModel({ firstName: 'John', lastName: 'Doe' });
+        let item = new GroupUserModel({firstName: 'John', lastName: 'Doe'});
 
         widget.onItemClick(item, null);
         expect(widget.field.value).toBe(item);
@@ -101,7 +128,7 @@ describe('PeopleWidgetComponent', () => {
         widget.ngOnInit();
         expect(widget.groupId).toBeUndefined();
 
-        widget.field.params = { restrictWithGroup: { id: '<id>' } };
+        widget.field.params = {restrictWithGroup: {id: '<id>'}};
         widget.ngOnInit();
         expect(widget.groupId).toBe('<id>');
     });
@@ -190,8 +217,8 @@ describe('PeopleWidgetComponent', () => {
 
     it('should flush value and update field', () => {
         widget.users = [
-            new GroupUserModel({ firstName: 'Tony', lastName: 'Stark' }),
-            new GroupUserModel({ firstName: 'John', lastName: 'Doe' })
+            new GroupUserModel({firstName: 'Tony', lastName: 'Stark'}),
+            new GroupUserModel({firstName: 'John', lastName: 'Doe'})
         ];
         widget.value = 'John Doe';
         widget.flushValue();
@@ -202,8 +229,8 @@ describe('PeopleWidgetComponent', () => {
 
     it('should be case insensitive when flushing field', () => {
         widget.users = [
-            new GroupUserModel({ firstName: 'Tony', lastName: 'Stark' }),
-            new GroupUserModel({ firstName: 'John', lastName: 'Doe' })
+            new GroupUserModel({firstName: 'Tony', lastName: 'Stark'}),
+            new GroupUserModel({firstName: 'John', lastName: 'Doe'})
         ];
         widget.value = 'TONY sTaRk';
         widget.flushValue();
@@ -220,4 +247,31 @@ describe('PeopleWidgetComponent', () => {
         expect(widget.value).toBeNull();
         expect(widget.field.value).toBeNull();
     });
+
+    describe('Image', () => {
+
+        it('should show the initial in the image', () => {
+            widget.users = [
+                new GroupUserModel({firstName: 'Tony', lastName: 'Stark'}),
+                new GroupUserModel({firstName: 'John', lastName: 'Doe'})
+            ];
+
+            fixture.detectChanges();
+
+            expect(element.querySelector('#adf-people-widget-initial-0').innerHTML.trim()).toBe('TS');
+            expect(element.querySelector('#adf-people-widget-initial-1').innerHTML.trim()).toBe('JD');
+        });
+
+        it('should show the the image if user has an image', () => {
+            widget.users = [
+                new GroupUserModel({firstName: 'Tony', lastName: 'Stark', userImage: 'testUrl0'}),
+                new GroupUserModel({firstName: 'John', lastName: 'Doe', userImage: 'testUrl1'})
+            ];
+
+            fixture.detectChanges();
+
+            expect((element.querySelector('#adf-people-widget-pic-0') as any).src).toContain('testUrl0');
+            expect((element.querySelector('#adf-people-widget-pic-1') as any).src).toContain('testUrl1');
+        });
+    });
 });

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts

@@ -135,4 +135,16 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
             event.preventDefault();
         }
     }
+
+    getInitialUserName(firstName: string, lastName: string) {
+        firstName = (firstName !== null && firstName !== '' ? firstName[0] : '');
+        lastName = (lastName !== null && lastName !== '' ? lastName[0] : '');
+        return this.getDisplayUser(firstName, lastName, '');
+    }
+
+    getDisplayUser(firstName: string, lastName: string, delimiter: string = '-'): string {
+        firstName = (firstName !== null ? firstName : '');
+        lastName = (lastName !== null ? lastName : '');
+        return firstName + delimiter + lastName;
+    }
 }