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- 4871][TaskHeaderCloudComponent] Add Candidate Users/Groups properties (#5189)

Browse Source 
* [ADF-4871] [TaskHeaderCloudComponent] Add Candidate Users/Groups properties

* Added Candidate users/groups properties to the task heade cloud component.

* * Created CardViewArrayItemComponent
* Modified FullName pipe to return username or email incase fullname missing.
* Added candidate Users/Groups properties to the taskcloudheader component.
* Added two service into task-cloudservice
* Updated Demoshell card-view with new widget

* * Fixed failing unit test

* * Fixed comments.

* * Refactored CardViewArrayItem model
* Fixed comments.

* * Changed candidate group icon
This commit is contained in:
siva kumar
2019-10-29 14:56:34 +05:30
committed by Maurizio Vitale
parent 1c6eb4d73d
commit 9c2bcdee1a
23 changed files with 610 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html Normal file
View File

@@ -0,0 +1,49 @@
<div [attr.data-automation-id]="'card-array-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
<div class="adf-property-value" (click)="clicked()">
<ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
<mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
<ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
<mat-chip
*ngFor="let item of items.slice(0, displayCount())"
(click)="clicked()"
[attr.data-automation-id]="'card-arrayitem-chip-' + item">
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
<span>{{item}}</span>
</mat-chip>
<mat-chip
*ngIf="items.length > displayCount()"
data-automation-id="card-arrayitem-more-chip"
[matMenuTriggerFor]="menu">
<span>{{items.length - displayCount()}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
</mat-chip>
</ng-container>
<ng-template #withOutDisplayCount>
<mat-chip
*ngFor="let item of items"
(click)="clicked()"
[attr.data-automation-id]="'card-arrayitem-chip-' + item">
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
<span>{{item}}</span>
</mat-chip>
</ng-template>
</mat-chip-list>
<mat-menu #menu="matMenu">
<mat-card class="adf-array-item-more-chip-container">
<mat-card-content>
<mat-chip-list>
<mat-chip (click)="clicked()"
*ngFor="let item of items.slice(displayCount(), items.length)"
[attr.data-automation-id]="'card-arrayitem-chip-' + item">
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
<span>{{item}}</span>
</mat-chip>
</mat-chip-list>
</mat-card-content>
</mat-card>
</mat-menu>
</ng-container>
<ng-template #elseEmptyValueBlock>
<span data-automation-id="card-arrayitem-default">{{ property.default | translate }}</span>
</ng-template>
</div>

33
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss Normal file
View File

@@ -0,0 +1,33 @@
@mixin adf-card-view-array-item-theme($theme) {
.adf {
&-array-item-icon {
font-size: 16px;
padding-top: 8px;
}
&-array-item-more-chip-container {
&.mat-card {
box-shadow: none;
}
&.mat-card {
max-height: 300px;
overflow-y: auto;
}
.mat-chip {
cursor: pointer;
}
}
&-property-value {
.mat-chip-list {
cursor: pointer;
}
.mat-chip {
cursor: pointer;
}
}
}
}

107
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.spec.ts Normal file
View File

@@ -0,0 +1,107 @@
/*!
* @license
* Copyright 2019 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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { setupTestBed } from '../../../testing/setupTestBed';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model';
import { By } from '@angular/platform-browser';
describe('CardViewArrayItemComponent', () => {
let component: CardViewArrayItemComponent;
let fixture: ComponentFixture<CardViewArrayItemComponent>;
const mockData = ['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo'];
const mockDefaultProps = {
label: 'Array of items',
value: of(mockData),
key: 'array',
icon: 'person'
};
setupTestBed({
imports: [CoreTestingModule]
});
afterEach(() => {
fixture.destroy();
});
beforeEach(() => {
fixture = TestBed.createComponent(CardViewArrayItemComponent);
component = fixture.componentInstance;
component.property = new CardViewArrayItemModel(mockDefaultProps);
});
it('should create CardViewArrayItemComponent', () => {
expect(component instanceof CardViewArrayItemComponent).toBeTruthy();
});
describe('Rendering', () => {
it('should render the label', () => {
fixture.detectChanges();
const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
expect(labelValue).not.toBeNull();
expect(labelValue.nativeElement.innerText).toBe('Array of items');
});
it('should render chip list', () => {
component.property = new CardViewArrayItemModel({
...mockDefaultProps,
editable: true
});
fixture.detectChanges();
const chiplistContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
const chip1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Zlatan"] span');
const chip2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-Lionel Messi"] span');
expect(chiplistContainer).not.toBeNull();
expect(chip1.innerText).toEqual('Zlatan');
expect(chip2.innerText).toEqual('Lionel Messi');
});
it('should render all values if noOfItemsToDisplay is not defined', () => {
fixture.detectChanges();
const chiplistContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
const moreElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-more-chip"]'));
const chip = fixture.nativeElement.querySelectorAll('mat-chip');
expect(chiplistContainer).not.toBeNull();
expect(moreElement).toBeNull();
expect(chip.length).toBe(4);
});
it('should render only two values along with more item chip if noOfItemsToDisplay is set to 2', () => {
component.property = new CardViewArrayItemModel({
...mockDefaultProps,
noOfItemsToDisplay: 2
});
fixture.detectChanges();
const chiplistContainer = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-chip-list-container"]'));
const chip = fixture.debugElement.queryAll(By.css('mat-chip'));
expect(chiplistContainer).not.toBeNull();
expect(chip.length).toBe(3);
expect(chip[2].nativeElement.innerText).toBe('2 CORE.CARDVIEW.MORE');
});
});
});

46
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts Normal file
View File

@@ -0,0 +1,46 @@
/*!
* @license
* Copyright 2019 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 { Component, Input } from '@angular/core';
import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
@Component({
selector: 'adf-card-view-arrayitem',
templateUrl: './card-view-arrayitem.component.html',
styleUrls: ['./card-view-arrayitem.component.scss']
})
export class CardViewArrayItemComponent {
/** The CardViewArrayItemModel of data used to populate the cardView array items. */
@Input()
property: CardViewArrayItemModel;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
clicked(): void {
this.cardViewUpdateService.clicked(this.property);
}
hasIcon(): boolean {
return !!this.property.icon;
}
displayCount(): number {
return this.property.noOfItemsToDisplay ? this.property.noOfItemsToDisplay : 0;
}
}