inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1108] Task header - Show the parent name as a clickable value (#2098)

Browse Source 
* Add a MapItem component inside the CardVied
Add a way to define a property clickable

* Fix unit test

* Add basic documentation
Unify css class name

* Fix class name

* remove unused class
This commit is contained in:
Maurizio Vitale
2017-07-19 16:22:32 +01:00
committed by Eugenio Romano
parent 1214c2ebab
commit 33fc2373ae
18 changed files with 319 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.spec.ts
View File

@@ -46,18 +46,14 @@ describe('CardViewDateItemComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(CardViewDateItemComponent);
component = fixture.componentInstance;
component.property = <CardViewDateItemModel> {
type: 'date',
component.property = new CardViewDateItemModel ({
label: 'Date label',
value: new Date('07/10/2017'),
key: 'datekey',
default: '',
format: '',
editable: false,
get displayValue(): string {
return 'Jul 10 2017';
}
};
editable: false
});
});
afterEach(() => {

9
ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="adf-property-label">{{ property.label }}</div>
<div class="adf-property-value">
<div>
<span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-mapitem-value-' + property.key">{{ property.displayValue }}</span>
<ng-template #elseBlock>
<span class="adf-mapitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-mapitem-value-' + property.key">{{ property.displayValue }}</span>
</ng-template>
</div>
</div>

7
ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.scss Normal file
View File

@@ -0,0 +1,7 @@
@import 'theming';
.#{$ADF} {
&-mapitem-clickable-value {
cursor: pointer;
}
}

129
ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.spec.ts Normal file
View File

@@ -0,0 +1,129 @@
/*!
* @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 { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MdDatepickerModule, MdIconModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { CardViewMapItemModel } from '../../models/card-view-mapitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { CardViewMapItemComponent } from './card-view-mapitem.component';
describe('CardViewMapItemComponent', () => {
let service: CardViewUpdateService;
let fixture: ComponentFixture<CardViewMapItemComponent>;
let component: CardViewMapItemComponent;
let debug: DebugElement;
let element: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
NoopAnimationsModule,
MdDatepickerModule,
MdIconModule,
MdInputModule,
MdNativeDateModule
],
declarations: [
CardViewMapItemComponent
],
providers: [
CardViewUpdateService
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CardViewMapItemComponent);
service = TestBed.get(CardViewUpdateService);
component = fixture.componentInstance;
debug = fixture.debugElement;
element = fixture.nativeElement;
});
afterEach(() => {
fixture.destroy();
TestBed.resetTestingModule();
});
it('should render the default if the value is empty', () => {
component.property = new CardViewMapItemModel({
label: 'Map label',
value: null,
key: 'mapkey',
default: 'Fake default'
});
fixture.detectChanges();
let labelValue = debug.query(By.css('.adf-property-label'));
expect(labelValue).not.toBeNull();
expect(labelValue.nativeElement.innerText).toBe('Map label');
let value = debug.query(By.css(`[data-automation-id="card-mapitem-value-${component.property.key}"]`));
expect(value).not.toBeNull();
expect(value.nativeElement.innerText.trim()).toBe('Fake default');
});
it('should render the label and value', () => {
component.property = new CardViewMapItemModel({
label: 'Map label',
value: new Map([['999', 'fakeProcessName']]),
key: 'mapkey',
default: ''
});
fixture.detectChanges();
let labelValue = debug.query(By.css('.adf-property-label'));
expect(labelValue).not.toBeNull();
expect(labelValue.nativeElement.innerText).toBe('Map label');
let value = debug.query(By.css(`[data-automation-id="card-mapitem-value-${component.property.key}"]`));
expect(value).not.toBeNull();
expect(value.nativeElement.innerText.trim()).toBe('fakeProcessName');
});
it('should render a clickable value', (done) => {
component.property = new CardViewMapItemModel({
label: 'Map label',
value: new Map([['999', 'fakeProcessName']]),
key: 'mapkey',
default: 'Fake default',
clickable: true
});
fixture.detectChanges();
let value: any = element.querySelector('.adf-mapitem-clickable-value');
service.itemClicked$.subscribe((response) => {
expect(response.target).not.toBeNull();
expect(response.target.type).toEqual('map');
expect(response.target.clickable).toBeTruthy();
expect(response.target.displayValue).toEqual('fakeProcessName');
done();
});
value.click();
});
});

45
ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.ts Normal file
View File

@@ -0,0 +1,45 @@
/*!
* @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 { Component, Input, OnChanges } from '@angular/core';
import { CardViewMapItemModel } from '../../models/card-view-mapitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
@Component({
selector: 'adf-card-view-mapitem',
templateUrl: './card-view-mapitem.component.html',
styleUrls: ['./card-view-mapitem.component.scss']
})
export class CardViewMapItemComponent implements OnChanges {
@Input()
property: CardViewMapItemModel;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
ngOnChanges() {
console.log();
}
isClickable() {
return this.property.clickable;
}
clicked(): void {
this.cardViewUpdateService.clicked(this.property);
}
}

7
ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.html
View File

@@ -1,7 +1,10 @@
<div class="adf-property-label">{{ property.label }}</div>
<div class="adf-property-value">
<span *ngIf="!isEditble()">
<span [attr.data-automation-id]="'card-textitem-value-' + property.key">{{ property.displayValue }}</span>
<span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-textitem-value-' + property.key">{{ property.displayValue }}</span>
<ng-template #elseBlock>
<span class="adf-textitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-textitem-value-' + property.key">{{ property.displayValue }}</span>
</ng-template>
</span>
<span *ngIf="isEditble()">
<div *ngIf="!inEdit" (click)="setEditMode(true)" class="adf-textitem-readonly" [attr.data-automation-id]="'card-textitem-edit-toggle-' + property.key">
@@ -36,4 +39,4 @@
[attr.data-automation-id]="'card-textitem-reset-' + property.key">clear</md-icon>
</div>
</span>
</div>
</div>

6
ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.scss
View File

@@ -23,6 +23,10 @@
}
}
&-textitem-clickable-value {
cursor: pointer;
}
&-textitem-editable {
display: flex;
@@ -77,4 +81,4 @@
&-textitem-editable /deep/ input.mat-input-element:focus {
margin-bottom: -7px;
}
}
}

10
ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.spec.ts
View File

@@ -51,17 +51,13 @@ describe('CardViewTextItemComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(CardViewTextItemComponent);
component = fixture.componentInstance;
component.property = <CardViewTextItemModel> {
type: 'text',
component.property = new CardViewTextItemModel ({
label: 'Text label',
value: 'Lorem ipsum',
key: 'textkey',
default: '',
editable: false,
get displayValue(): string {
return 'Lorem ipsum';
}
};
editable: false
});
});
afterEach(() => {

8
ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.ts
View File

@@ -47,6 +47,10 @@ export class CardViewTextItemComponent implements OnChanges {
return this.editable && this.property.editable;
}
isClickable() {
return this.property.clickable;
}
setEditMode(editStatus: boolean): void {
this.inEdit = editStatus;
setTimeout(() => {
@@ -62,4 +66,8 @@ export class CardViewTextItemComponent implements OnChanges {
update(): void {
this.cardViewUpdateService.update(this.property, { [this.property.key]: this.editedValue });
}
clicked(): void {
this.cardViewUpdateService.clicked(this.property);
}
}

3
ng2-components/ng2-alfresco-core/src/components/view/card-view.module.ts
View File

@@ -23,6 +23,7 @@ import { CardViewContentProxyDirective } from './card-view-content-proxy.directi
import { CardViewDateItemComponent } from './card-view-dateitem.component';
import { CardViewItemDispatcherComponent } from './card-view-item-dispatcher.component';
import { CardViewTextItemComponent } from './card-view-textitem.component';
import { CardViewMapItemComponent } from './card-view-mapitem.component';
import { CardViewComponent } from './card-view.component';
@NgModule({
@@ -40,10 +41,12 @@ import { CardViewComponent } from './card-view.component';
CardViewItemDispatcherComponent,
CardViewContentProxyDirective,
CardViewTextItemComponent,
CardViewMapItemComponent,
CardViewDateItemComponent
],
entryComponents: [
CardViewTextItemComponent,
CardViewMapItemComponent,
CardViewDateItemComponent
],
exports: [