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

2
lib/core/card-view/card-view.module.scss
View File

@@ -1,3 +1,4 @@
@import './components/card-view-arrayitem/card-view-arrayitem.component';
@import './components/card-view-dateitem/card-view-dateitem.component';
@import './components/card-view-textitem/card-view-textitem.component';
@import './components/card-view/card-view.component';
@@ -8,4 +9,5 @@
@include adf-card-view-textitem-theme($theme);
@include adf-card-view-theme($theme);
@include mat-datetimepicker-theme($theme);
@include adf-card-view-array-item-theme($theme);
}

18
lib/core/card-view/card-view.module.ts
View File

@@ -26,7 +26,10 @@ import {
MatInputModule,
MatCheckboxModule,
MatNativeDateModule,
MatSelectModule
MatSelectModule,
MatChipsModule,
MatMenuModule,
MatCardModule
} from '@angular/material';
import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
import { FlexLayoutModule } from '@angular/flex-layout';
@@ -41,6 +44,7 @@ import { CardViewMapItemComponent } from './components/card-view-mapitem/card-vi
import { CardViewTextItemComponent } from './components/card-view-textitem/card-view-textitem.component';
import { CardViewKeyValuePairsItemComponent } from './components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
import { CardViewSelectItemComponent } from './components/card-view-selectitem/card-view-selectitem.component';
import { CardViewArrayItemComponent } from './components/card-view-arrayitem/card-view-arrayitem.component';
@NgModule({
imports: [
@@ -56,6 +60,9 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
MatIconModule,
MatSelectModule,
MatButtonModule,
MatChipsModule,
MatMenuModule,
MatCardModule,
MatDatetimepickerModule,
MatNativeDatetimeModule
],
@@ -68,7 +75,8 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
CardViewKeyValuePairsItemComponent,
CardViewSelectItemComponent,
CardViewItemDispatcherComponent,
CardViewContentProxyDirective
CardViewContentProxyDirective,
CardViewArrayItemComponent
],
entryComponents: [
CardViewBoolItemComponent,
@@ -76,7 +84,8 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
CardViewMapItemComponent,
CardViewTextItemComponent,
CardViewSelectItemComponent,
CardViewKeyValuePairsItemComponent
CardViewKeyValuePairsItemComponent,
CardViewArrayItemComponent
],
exports: [
CardViewComponent,
@@ -85,7 +94,8 @@ import { CardViewSelectItemComponent } from './components/card-view-selectitem/c
CardViewMapItemComponent,
CardViewTextItemComponent,
CardViewSelectItemComponent,
CardViewKeyValuePairsItemComponent
CardViewKeyValuePairsItemComponent,
CardViewArrayItemComponent
]
})
export class CardViewModule {}

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

1
lib/core/card-view/components/card-view.components.ts
View File

@@ -23,3 +23,4 @@ export * from './card-view-mapitem/card-view-mapitem.component';
export * from './card-view-textitem/card-view-textitem.component';
export * from './card-view-selectitem/card-view-selectitem.component';
export * from './card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
export * from './card-view-arrayitem/card-view-arrayitem.component';

22
lib/core/card-view/interfaces/card-view-arrayitem-properties.interface.ts Normal file
View File

@@ -0,0 +1,22 @@
/*!
* @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 { CardViewItemProperties } from './card-view-item-properties.interface';
export interface CardViewArrayItemProperties extends CardViewItemProperties {
noOfItemsToDisplay?: number;
}

38
lib/core/card-view/models/card-view-arrayitem.model.ts Normal file
View File

@@ -0,0 +1,38 @@
/*!
* @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 { CardViewItem } from '../interfaces/card-view-item.interface';
import { DynamicComponentModel } from '../../services/dynamic-component-mapper.service';
import { CardViewBaseItemModel } from './card-view-baseitem.model';
import { Observable } from 'rxjs';
import { CardViewArrayItemProperties } from '../interfaces/card-view-arrayitem-properties.interface';
export class CardViewArrayItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
type: string = 'array';
value: Observable<string[]>;
noOfItemsToDisplay: number;
constructor(cardViewArrayItemProperties: CardViewArrayItemProperties) {
super(cardViewArrayItemProperties);
this.noOfItemsToDisplay = cardViewArrayItemProperties.noOfItemsToDisplay;
}
get displayValue(): Observable<string[]> {
return this.value;
}
}

1
lib/core/card-view/models/card-view.models.ts
View File

@@ -25,3 +25,4 @@ export * from './card-view-mapitem.model';
export * from './card-view-textitem.model';
export * from './card-view-keyvaluepairs.model';
export * from './card-view-selectitem.model';
export * from './card-view-arrayitem.model';

3
lib/core/card-view/public-api.ts
View File

@@ -22,7 +22,8 @@ export {
CardViewMapItemComponent,
CardViewTextItemComponent,
CardViewSelectItemComponent,
CardViewKeyValuePairsItemComponent
CardViewKeyValuePairsItemComponent,
CardViewArrayItemComponent
} from './components/card-view.components';
export * from './interfaces/card-view.interfaces';

4
lib/core/card-view/services/card-item-types.service.ts
View File

@@ -23,6 +23,7 @@ import { CardViewSelectItemComponent } from '../components/card-view-selectitem/
import { CardViewBoolItemComponent } from '../components/card-view-boolitem/card-view-boolitem.component';
import { CardViewKeyValuePairsItemComponent } from '../components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component';
import { DynamicComponentMapper, DynamicComponentResolveFunction, DynamicComponentResolver } from '../../services/dynamic-component-mapper.service';
import { CardViewArrayItemComponent } from '../components/card-view-arrayitem/card-view-arrayitem.component';
@Injectable({
providedIn: 'root'
@@ -40,6 +41,7 @@ export class CardItemTypeService extends DynamicComponentMapper {
'datetime': DynamicComponentResolver.fromType(CardViewDateItemComponent),
'bool': DynamicComponentResolver.fromType(CardViewBoolItemComponent),
'map': DynamicComponentResolver.fromType(CardViewMapItemComponent),
'keyvaluepairs': DynamicComponentResolver.fromType(CardViewKeyValuePairsItemComponent)
'keyvaluepairs': DynamicComponentResolver.fromType(CardViewKeyValuePairsItemComponent),
'array': DynamicComponentResolver.fromType(CardViewArrayItemComponent)
};
}