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

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



Co-authored-by: “chndn004” <“chandanchatterjee04@gmail.com”>

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

@@ -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>
 

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

@@ -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();

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

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

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

@@ -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) {

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

@@ -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"

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

@@ -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', () => {

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

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

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

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

lib/core/src/lib/card-view/components/card-view/card-view.component.html

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

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

@@ -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(() => {
+    beforeEach(async () => {
-        TestBed.configureTestingModule({
+        await TestBed.configureTestingModule({
-            imports: [
+            imports: [TranslateModule.forRoot(), CoreTestingModule]
-                TranslateModule.forRoot(),
+        }).compileComponents();
-                CoreTestingModule
+
-            ]
-        });
         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;
+    }
+
 });

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

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

lib/core/src/lib/card-view/components/card-view/card-view.component.ts

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