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-4755][CardViewDate&SelectItemComponent] Provide a way to reset date and none option as default. (#4955)

Browse Source 
* [ADF-4755] [CardViewDateItemComponent] Provide a way to reset date.

* Added clear icon to reset date to empty.
* Added Translation key to the new icon.

* * Added displayClearAction flag to toggle clear action.* Added None as default for the selectItem components.* Added displayNoneOption flag to toggle the default none option.

* * Fixed comments.

* * Added translation key for 'none'  option.

* * Updated dateItem css to the match recent changes.

* * Fixed failing unit tests* Updated TaskHeader components with the displayClearAction.

* * Updated demo shell card-view component to test the latest changes
This commit is contained in:
siva kumar
2019-07-26 16:52:45 +05:30
committed by Maurizio Vitale
parent 525f0a06db
commit 05e73a8aa1
18 changed files with 161 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
View File

@@ -13,6 +13,15 @@
(click)="showDatePicker()">
<span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key" *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
</span>
<mat-icon *ngIf="showClearAction()"
class="adf-date-reset-icon"
(click)="onDateClear()"
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
[attr.data-automation-id]="'datepicker-date-clear-' + property.key">
clear
</mat-icon>
<mat-datetimepicker-toggle
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key"

18
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

@@ -35,6 +35,24 @@
&:hover mat-icon {
opacity: 1;
}
.adf-datepicker-toggle {
flex: 1 0 auto;
}
mat-icon.adf-date-reset-icon {
line-height: 10px;
font-size: 16px;
width: 16px;
height: 16px;
position: relative;
top: 4px;
padding-left: 8px;
opacity: 0.3;
}
&:hover mat-icon.adf-date-reset-icon {
opacity: 1;
}
}
}
}

47
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View File

@@ -116,6 +116,7 @@ describe('CardViewDateItemComponent', () => {
});
it('should render value when editable:true', () => {
component.displayClearAction = false;
component.editable = true;
component.property.editable = true;
fixture.detectChanges();
@@ -203,4 +204,50 @@ describe('CardViewDateItemComponent', () => {
}
);
}));
it('should render the clear icon in case of editable:true', () => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
expect(datePickerClearToggle).not.toBeNull('Clean Icon should be in DOM');
});
it('should not render the clear icon in case of property value empty', () => {
component.editable = true;
component.property.editable = true;
component.property.value = null;
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
});
it('should not render the clear icon in case displayClearAction is set false', () => {
component.editable = true;
component.property.editable = true;
component.displayClearAction = false;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
});
it('should remove the property value after a successful clear attempt', async(() => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
fixture.detectChanges();
component.onDateClear();
fixture.whenStable().then(
(updateNotification) => {
expect(component.property.value).toBeNull();
}
);
}));
});

13
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
View File

@@ -52,6 +52,9 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
@Input()
displayEmpty: boolean = true;
@Input()
displayClearAction: boolean = true;
@ViewChild('datetimePicker')
public datepicker: MatDatetimepicker<any>;
@@ -92,6 +95,10 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
return this.displayEmpty || !this.property.isEmpty();
}
showClearAction() {
return !this.property.isEmpty() && this.displayClearAction;
}
isEditable() {
return this.editable && this.property.editable;
}
@@ -111,4 +118,10 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
}
}
onDateClear() {
this.valueDate = null;
this.cardViewUpdateService.update(this.property, null);
this.property.value = null;
}
}

10
lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
View File

@@ -119,13 +119,17 @@ describe('CardViewItemDispatcherComponent', () => {
const expectedEditable = false,
expectedDisplayEmpty = true,
expectedProperty = <CardViewItem> {},
expectedCustomInput = 1;
expectedCustomInput = 1,
expectedDisplayNoneOption = false,
expectedDisplayClearAction = false;
component.ngOnChanges({
editable: new SimpleChange(true, expectedEditable, false),
displayEmpty: new SimpleChange(false, expectedDisplayEmpty, false),
property: new SimpleChange(null, expectedProperty, false),
customInput: new SimpleChange(0, expectedCustomInput, false)
customInput: new SimpleChange(0, expectedCustomInput, false),
displayNoneOption: new SimpleChange(true, expectedDisplayNoneOption, false),
displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false)
});
const shinyCustomElementItemComponent = fixture.debugElement.query(By.css('whatever-you-want-to-have')).componentInstance;
@@ -133,6 +137,8 @@ describe('CardViewItemDispatcherComponent', () => {
expect(shinyCustomElementItemComponent.editable).toBe(expectedEditable);
expect(shinyCustomElementItemComponent.displayEmpty).toBe(expectedDisplayEmpty);
expect(shinyCustomElementItemComponent.customInput).toBe(expectedCustomInput);
expect(shinyCustomElementItemComponent.displayNoneOption).toBe(expectedDisplayNoneOption);
expect(shinyCustomElementItemComponent.displayClearAction).toBe(expectedDisplayClearAction);
});
});

8
lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
View File

@@ -42,6 +42,12 @@ export class CardViewItemDispatcherComponent implements OnChanges {
@Input()
displayEmpty: boolean = true;
@Input()
displayNoneOption: boolean = true;
@Input()
displayClearAction: boolean = true;
@ViewChild(CardViewContentProxyDirective)
private content: CardViewContentProxyDirective;
@@ -92,6 +98,8 @@ export class CardViewItemDispatcherComponent implements OnChanges {
this.componentReference.instance.editable = this.editable;
this.componentReference.instance.property = this.property;
this.componentReference.instance.displayEmpty = this.displayEmpty;
this.componentReference.instance.displayNoneOption = this.displayNoneOption;
this.componentReference.instance.displayClearAction = this.displayClearAction;
}
private proxy(methodName, ...args) {

1
lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.html
View File

@@ -4,6 +4,7 @@
<div *ngIf="isEditable()">
<mat-form-field>
<mat-select [(value)]="value" (selectionChange)="onChange($event)" data-automation-class="select-box">
<mat-option *ngIf="showNoneOption()">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
<mat-option *ngFor="let option of getOptions() | async" [value]="option.key">
{{ option.label | translate }}
</mat-option>

12
lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts
View File

@@ -34,6 +34,9 @@ export class CardViewSelectItemComponent implements OnChanges {
@Input() options$: Observable<CardViewSelectItemOption<string>[]>;
@Input()
displayNoneOption: boolean = true;
value: string;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
@@ -51,7 +54,12 @@ export class CardViewSelectItemComponent implements OnChanges {
}
onChange(event: MatSelectChange): void {
this.cardViewUpdateService.update(this.property, event.value);
this.property.value = event.value;
const selectedOption = event.value !== undefined ? event.value : null;
this.cardViewUpdateService.update(this.property, selectedOption);
this.property.value = selectedOption;
}
showNoneOption() {
return this.displayNoneOption;
}
}

4
lib/core/card-view/components/card-view/card-view.component.html
View File

@@ -4,7 +4,9 @@
<adf-card-view-item-dispatcher
[property]="property"
[editable]="editable"
[displayEmpty]="displayEmpty">
[displayEmpty]="displayEmpty"
[displayNoneOption]="displayNoneOption"
[displayClearAction]="displayClearAction">
</adf-card-view-item-dispatcher>
</div>
</div>

8
lib/core/card-view/components/card-view/card-view.component.ts
View File

@@ -35,4 +35,12 @@ export class CardViewComponent {
/** Toggles whether or not to show empty items in non-editable mode. */
@Input()
displayEmpty: boolean = true;
/** Toggles whether or not to display none option. */
@Input()
displayNoneOption: boolean = true;
/** Toggles whether or not to display clear action. */
@Input()
displayClearAction: boolean = true;
}