[ACA-4436] - added option for select item to display None (#7113)

* [ACA-4436] - added option for select item to display None

* [ACA-4436] - added unit test and fixed wrong default behaviour

* [ACA-4436] - fixed property check

* [ACA-4436] - fixed unit test

* [ACA-4436] - fixed unit test

lib/content-services/src/lib/content-metadata/services/content-type-property.service.ts

@@ -85,7 +85,8 @@ export class ContentTypePropertiesService {
             value: currentValue,
             key: 'nodeType',
             editable: true,
-            options$: options$
+            options$: options$,
+            displayNoneOption: false
         });
 
         return contentTypeCard;

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

@@ -60,6 +60,7 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
     }
 
     ngOnInit() {
+        console.log
         this.getOptions()
             .pipe(takeUntil(this.onDestroy$))
             .subscribe((options: CardViewSelectItemOption<string>[]) => {

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

@@ -5,7 +5,7 @@
                 [property]="property"
                 [editable]="editable"
                 [displayEmpty]="displayEmpty"
-                [displayNoneOption]="displayNoneOption"
+                [displayNoneOption]="property['displayNoneOption'] !== undefined ? property['displayNoneOption'] : displayNoneOption"
                 [displayClearAction]="displayClearAction"
                 [copyToClipboardAction]="copyToClipboardAction"
                 [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"

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

@@ -23,6 +23,9 @@ import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewComponent } from './card-view.component';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { CardViewSelectItemModel } from 'core/card-view/models/card-view-selectitem.model';
+import { of } from 'rxjs';
+import { CardViewSelectItemOption } from 'core/card-view/interfaces/card-view-selectitem-properties.interface';
 
 describe('CardViewComponent', () => {
 
@@ -140,4 +143,89 @@ describe('CardViewComponent', () => {
         expect(value).not.toBeNull();
         expect(value.nativeElement.value).toBe('default value');
     });
+
+    it('should render the select element with the None option when not set in the properties', async () => {
+        const options: CardViewSelectItemOption<string>[] = [{'label' : 'Option 1', 'key': '1'}, {'label' : 'Option 2', 'key': '2'}];
+        component.properties = [new CardViewSelectItemModel({
+            label: 'My default label',
+            value: '1',
+            default: 'default value',
+            key: 'some-key',
+            editable: true,
+            options$: of(options)
+        })];
+        component.editable = true;
+        component.displayEmpty = false;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const labelValue = fixture.debugElement.query(By.css('adf-card-view-selectitem .mat-select-trigger'));
+        labelValue.triggerEventHandler('click', null);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const currentOptions = document.querySelectorAll('mat-option');
+        expect(currentOptions.length).toBe(3);
+        expect(currentOptions[0].innerHTML).toContain('CORE.CARDVIEW.NONE');
+        expect(currentOptions[1].innerHTML).toContain(options[0].label);
+        expect(currentOptions[2].innerHTML).toContain(options[1].label);
+    });
+
+    it('should render the select element with the None option when set true in the properties', async () => {
+        const options: CardViewSelectItemOption<string>[] = [{'label' : 'Option 1', 'key': '1'}, {'label' : 'Option 2', 'key': '2'}];
+        component.properties = [new CardViewSelectItemModel({
+            label: 'My default label',
+            value: '1',
+            default: 'default value',
+            key: 'some-key',
+            editable: true,
+            displayNoneOption: true,
+            options$: of(options)
+        })];
+        component.editable = true;
+        component.displayEmpty = false;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const labelValue = fixture.debugElement.query(By.css('adf-card-view-selectitem .mat-select-trigger'));
+        labelValue.triggerEventHandler('click', null);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const currentOptions = document.querySelectorAll('mat-option');
+        expect(currentOptions.length).toBe(3);
+        expect(currentOptions[0].innerHTML).toContain('CORE.CARDVIEW.NONE');
+        expect(currentOptions[1].innerHTML).toContain(options[0].label);
+        expect(currentOptions[2].innerHTML).toContain(options[1].label);
+    });
+
+    it('should not render the select element with the None option when set false in the properties', async () => {
+        const options: CardViewSelectItemOption<string>[] = [{'label' : 'Option 1', 'key': '1'}, {'label' : 'Option 2', 'key': '2'}];
+        component.properties = [new CardViewSelectItemModel({
+            label: 'My default label',
+            value: '1',
+            default: 'default value',
+            key: 'some-key',
+            editable: true,
+            displayNoneOption: false,
+            options$: of(options)
+        })];
+        component.editable = true;
+        component.displayEmpty = false;
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const labelValue = fixture.debugElement.query(By.css('adf-card-view-selectitem .mat-select-trigger'));
+        labelValue.triggerEventHandler('click', null);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const currentOptions = document.querySelectorAll('mat-option');
+        expect(currentOptions.length).toBe(2);
+        expect(currentOptions[0].innerHTML).toContain(options[0].label);
+        expect(currentOptions[1].innerHTML).toContain(options[1].label);
+    });
 });

lib/core/card-view/interfaces/card-view-selectitem-properties.interface.ts

@@ -26,4 +26,5 @@ export interface CardViewSelectItemOption<T> {
 export interface CardViewSelectItemProperties<T> extends CardViewItemProperties {
     value: string | number;
     options$: Observable<CardViewSelectItemOption<T>[]>;
+    displayNoneOption?: boolean;
 }

lib/core/card-view/models/card-view-selectitem.model.spec.ts

@@ -40,7 +40,22 @@ describe('CardViewSelectItemModel', () => {
 
             itemModel.displayValue.subscribe((value) => {
                 expect(value).toBe(mockData[1].label);
+                expect(itemModel.displayNoneOption).toBe(true);
             });
         }));
+
+        it('should set true for none option when passed through the properties', fakeAsync(() => {
+            properties.displayNoneOption = true;
+            const itemModel = new CardViewSelectItemModel(properties);
+
+            expect(itemModel.displayNoneOption).toBe(true);
+        }));
+
+        it('should set false for none option when passed through the properties', fakeAsync(() => {
+            properties.displayNoneOption = false;
+            const itemModel = new CardViewSelectItemModel(properties);
+
+            expect(itemModel.displayNoneOption).toBe(false);
+        }));
     });
 });

lib/core/card-view/models/card-view-selectitem.model.ts

@@ -25,12 +25,15 @@ import { switchMap } from 'rxjs/operators';
 export class CardViewSelectItemModel<T> extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
     type: string = 'select';
     options$: Observable<CardViewSelectItemOption<T>[]>;
+    displayNoneOption: boolean;
 
     valueFetch$: Observable<string> = null;
 
     constructor(cardViewSelectItemProperties: CardViewSelectItemProperties<T>) {
         super(cardViewSelectItemProperties);
 
+        this.displayNoneOption = cardViewSelectItemProperties.displayNoneOption !== undefined ? cardViewSelectItemProperties.displayNoneOption : true;
+
         this.options$ = cardViewSelectItemProperties.options$;
 
         this.valueFetch$ = this.options$.pipe(

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts

@@ -163,6 +163,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
                     value: this.taskDetails.priority.toString(),
                     key: 'priority',
                     editable: true,
+                    displayNoneOption: false,
                     options$: of(this.taskCloudService.priorities)
                 }
             ),