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

[AAE-15741] ADF CardView component - headers for multivalued strings, integers and floats (#8789)

Browse Source 
[AAE-15741] add configuration for display label for multivalued chip property



Co-authored-by: “chndn004” <“chandanchatterjee04@gmail.com”>
This commit is contained in:
Suman Chattopadhyay
2023-07-28 12:28:56 +05:30
committed by GitHub
parent fee60cd4ab
commit 48898df0fa
12 changed files with 145 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
demo-shell/src/app/components/card-view/card-view.component.html
View File

@@ -6,7 +6,8 @@
[properties]="properties"
[editable]="isEditable"
[displayClearAction]="showClearDateAction"
[displayNoneOption]="showNoneOption">
[displayNoneOption]="showNoneOption"
[displayLabelForChips]="showLabelForChips">
</adf-card-view>
</mat-card>
@@ -38,6 +39,13 @@
(change)="toggleNoneOption()"
[checked]="showNoneOption">
Show none option
</mat-slide-toggle><br>
<mat-slide-toggle
id="app-toggle-label-multivalued-chip"
[color]="'primary'"
(change)="toggleLabelForChips()"
[checked]="showLabelForChips">
Show label for chips property
</mat-slide-toggle>
</p>

5
demo-shell/src/app/components/card-view/card-view.component.ts
View File

@@ -47,6 +47,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
logs: string[];
showClearDateAction = false;
showNoneOption = false;
showLabelForChips = false;
private onDestroy$ = new Subject<boolean>();
@@ -268,6 +269,10 @@ export class CardViewComponent implements OnInit, OnDestroy {
this.showNoneOption = !this.showNoneOption;
}
toggleLabelForChips() {
this.showLabelForChips = !this.showLabelForChips;
}
reset() {
this.isEditable = true;
this.createCard();

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

@@ -115,6 +115,7 @@ describe('CardViewItemDispatcherComponent', () => {
const expectedCustomInput = 1;
const expectedDisplayNoneOption = false;
const expectedDisplayClearAction = false;
const expectedDisplayLabel = true;
component.ngOnChanges({
editable: new SimpleChange(true, expectedEditable, false),
@@ -122,7 +123,8 @@ describe('CardViewItemDispatcherComponent', () => {
property: new SimpleChange(null, expectedProperty, false),
customInput: new SimpleChange(0, expectedCustomInput, false),
displayNoneOption: new SimpleChange(true, expectedDisplayNoneOption, false),
displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false)
displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false),
displayLabelForChips: new SimpleChange(false, expectedDisplayLabel, false)
});
const shinyCustomElementItemComponent = fixture.debugElement.query(By.css('whatever-you-want-to-have')).componentInstance;
@@ -132,6 +134,7 @@ describe('CardViewItemDispatcherComponent', () => {
expect(shinyCustomElementItemComponent.customInput).toBe(expectedCustomInput);
expect(shinyCustomElementItemComponent.displayNoneOption).toBe(expectedDisplayNoneOption);
expect(shinyCustomElementItemComponent.displayClearAction).toBe(expectedDisplayClearAction);
expect(shinyCustomElementItemComponent.displayLabelForChips).toBe(expectedDisplayLabel);
});
});

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

@@ -57,6 +57,9 @@ export class CardViewItemDispatcherComponent implements OnChanges {
@Input()
multiValueSeparator: string = DEFAULT_SEPARATOR;
@Input()
displayLabelForChips: boolean = false;
@ViewChild(CardViewContentProxyDirective, { static: true })
private content: CardViewContentProxyDirective;
@@ -110,6 +113,7 @@ export class CardViewItemDispatcherComponent implements OnChanges {
this.componentReference.instance.copyToClipboardAction = this.copyToClipboardAction;
this.componentReference.instance.useChipsForMultiValueProperty = this.useChipsForMultiValueProperty;
this.componentReference.instance.multiValueSeparator = this.multiValueSeparator;
this.componentReference.instance.displayLabelForChips = this.displayLabelForChips;
}
private proxy(methodName, ...args) {

3
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -54,6 +54,9 @@
<div *ngSwitchCase="'chipsTemplate'"
class="adf-property-field adf-textitem-chip-list-container">
<mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
{{ property.label | translate }}
</mat-label>
<mat-chip-list #chipList
class="adf-textitem-chip-list">
<mat-chip *ngFor="let propertyValue of editedValue; let idx = index"

43
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
View File

@@ -271,6 +271,49 @@ describe('CardViewTextItemComponent', () => {
expect(value).toBe('item1,item2,item3');
expect(valueChips).toBeNull();
});
it('should display the label for multi-valued chips if displayLabelForChips is true', async () => {
const cardViewTextItemObject = {
label: 'Text label',
value: ['item1', 'item2', 'item3'],
key: 'textkey',
default: ['FAKE-DEFAULT-KEY'],
editable: true,
multivalued: true
};
component.property = new CardViewTextItemModel(cardViewTextItemObject);
component.displayLabelForChips = true;
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
fixture.detectChanges();
await fixture.whenStable();
const labelElement = fixture.debugElement.query(By.css(`.adf-property-label`));
expect(labelElement).not.toBeNull();
expect(labelElement.nativeElement.innerText).toBe('Text label');
});
it('should NOT display the label for multi-valued chips if displayLabelForChips is false', async () => {
const cardViewTextItemObject = {
label: 'Text label',
value: ['item1', 'item2', 'item3'],
key: 'textkey',
default: ['FAKE-DEFAULT-KEY'],
editable: true,
multivalued: true
};
component.property = new CardViewTextItemModel(cardViewTextItemObject);
component.displayLabelForChips = false;
component.ngOnChanges({ property: new SimpleChange(null, null, true) });
fixture.detectChanges();
await fixture.whenStable();
const labelElement = fixture.debugElement.query(By.css(`.adf-property-label`));
expect(labelElement).toBeNull();
});
});
describe('clickable', () => {

28
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
View File

@@ -75,6 +75,15 @@ export default {
type: { summary: 'string' },
defaultValue: { summary: ', ' }
}
},
displayLabelForChips: {
control: 'boolean',
description: 'Display label for chips property',
defaultValue: false,
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false }
}
}
}
} as Meta;
@@ -110,7 +119,8 @@ chipsCardViewTextItem.args = {
multivalued: true,
icon: 'icon',
editable: true
})
}),
displayLabelForChips: false
};
chipsCardViewTextItem.parameters = { layout: 'centered' };
@@ -143,3 +153,19 @@ defaultCardViewTextItem.args = {
})
};
defaultCardViewTextItem.parameters = { layout: 'centered' };
export const displayLabelForChipsCardTextItem = template.bind({});
displayLabelForChipsCardTextItem.args = {
property: new CardViewTextItemModel({
label: 'CardView Text Item - Multi-Valued Chips template',
value: ['Chip 1', 'Chip 2', 'Chip 3'],
key: 'multivalued',
default: 'default value',
multiline: true,
multivalued: true,
icon: 'icon',
editable: true
}),
displayLabelForChips: false
};
displayLabelForChipsCardTextItem.parameters = { layout: 'centered' };

7
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
View File

@@ -58,6 +58,9 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
@Input()
multiValueSeparator: string = DEFAULT_SEPARATOR;
@Input()
displayLabelForChips: boolean = false;
editedValue: string | string[];
errors: CardViewItemValidator[];
templateType: string;
@@ -229,4 +232,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
get isChipViewEnabled(): boolean {
return this.property.multivalued && this.useChipsForMultiValueProperty;
}
get showLabelForChips(): boolean {
return this.displayLabelForChips;
}
}

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

@@ -9,7 +9,8 @@
[displayClearAction]="displayClearAction"
[copyToClipboardAction]="copyToClipboardAction"
[useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
[multiValueSeparator]="multiValueSeparator">
[multiValueSeparator]="multiValueSeparator"
[displayLabelForChips]="displayLabelForChips">
</adf-card-view-item-dispatcher>
</div>
</div>

40
lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
View File

@@ -25,19 +25,19 @@ import { TranslateModule } from '@ngx-translate/core';
import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
import { of } from 'rxjs';
import { CardViewSelectItemOption } from '../../interfaces/card-view-selectitem-properties.interface';
import { CardViewItem } from '../../interfaces/card-view-item.interface';
import { CardViewItemDispatcherComponent } from '../card-view-item-dispatcher/card-view-item-dispatcher.component';
describe('CardViewComponent', () => {
let fixture: ComponentFixture<CardViewComponent>;
let component: CardViewComponent;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), CoreTestingModule]
}).compileComponents();
fixture = TestBed.createComponent(CardViewComponent);
component = fixture.componentInstance;
});
@@ -226,4 +226,30 @@ describe('CardViewComponent', () => {
expect(currentOptions[0].innerHTML).toContain(options[0].label);
expect(currentOptions[1].innerHTML).toContain(options[1].label);
});
it('should show/hide the label for multivalued chip property based on displayLabelForChips input', () => {
const multiValueProperty: CardViewItem = new CardViewTextItemModel({
label: 'My Multivalue Label',
value: ['Value 1', 'Value 2', 'Value 3'],
key: 'multi-key'
});
component.properties = [multiValueProperty];
fixture.detectChanges();
const cardViewItemDispatcherComponent = getCardViewItemDispatcherComponent();
expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(false);
component.displayLabelForChips = true;
fixture.detectChanges();
expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(true);
});
function getCardViewItemDispatcherComponent() {
const cardViewItemDispatcherDebugElement = fixture.debugElement.query(By.directive(CardViewItemDispatcherComponent));
return cardViewItemDispatcherDebugElement.componentInstance as CardViewItemDispatcherComponent;
}
});

4
lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
View File

@@ -57,6 +57,10 @@ export default {
multiValueSeparator: {
control: 'text',
defaultValue: ', '
},
displayLabelForChips: {
control: 'boolean',
defaultValue: false
}
}
} as Meta;

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

@@ -57,4 +57,8 @@ export class CardViewComponent {
/** String separator between multi-value property items. */
@Input()
multiValueSeparator: string = DEFAULT_SEPARATOR;
/** Toggles whether or not to show label for multivalued chip property. */
@Input()
displayLabelForChips: boolean = false;
}