[ADF-4219] Multivalue Metadata Card View (#4600)

* [ADF-4219] Multivalue Metadata  Card View

* [ADF-4219] Add documentation

* [ADF-4219] Improve code, docs and tests

* [ADF-4219] Fix e2e tests

lib/core/app-config/schema.json

@@ -859,6 +859,10 @@
               ]
             }
           }
+        },
+        "multi-value-pipe-separator": {
+          "description": "Content metadata's separator for multi value properties",
+          "type": "string"
         }
       }
     },

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

@@ -18,6 +18,7 @@
 import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { AppConfigService } from '../../../app-config/app-config.service';
 
 @Component({
     selector: 'adf-card-view-textitem',
@@ -25,6 +26,9 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
     styleUrls: ['./card-view-textitem.component.scss']
 })
 export class CardViewTextItemComponent implements OnChanges {
+
+    static DEFAULT_SEPARATOR = ', ';
+
     @Input()
     property: CardViewTextItemModel;
 
@@ -40,12 +44,15 @@ export class CardViewTextItemComponent implements OnChanges {
     inEdit: boolean = false;
     editedValue: string;
     errorMessages: string[];
+    valueSeparator: string;
 
-    constructor(private cardViewUpdateService: CardViewUpdateService) {
+    constructor(private cardViewUpdateService: CardViewUpdateService,
+                private appConfig: AppConfigService) {
+        this.valueSeparator = this.appConfig.get<string>('content-metadata.multi-value-pipe-separator') || CardViewTextItemComponent.DEFAULT_SEPARATOR;
     }
 
     ngOnChanges(): void {
-        this.editedValue = this.property.value;
+        this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
     }
 
     showProperty(): boolean {
@@ -78,20 +85,29 @@ export class CardViewTextItemComponent implements OnChanges {
     }
 
     reset(): void {
-        this.editedValue = this.property.value;
+        this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
         this.setEditMode(false);
     }
 
     update(): void {
         if (this.property.isValid(this.editedValue)) {
-            this.cardViewUpdateService.update(this.property, this.editedValue);
-            this.property.value = this.editedValue;
+            const updatedValue = this.prepareValueForUpload(this.property, this.editedValue);
+            this.cardViewUpdateService.update(this.property, updatedValue);
+            this.property.value = updatedValue;
             this.setEditMode(false);
         } else {
             this.errorMessages = this.property.getValidationErrors(this.editedValue);
         }
     }
 
+    prepareValueForUpload(property: CardViewTextItemModel, value: string): string | string [] {
+        const listOfValues = value;
+        if (property.multivalued) {
+            return listOfValues.split(this.valueSeparator);
+        }
+        return listOfValues;
+    }
+
     onTextAreaInputChange() {
         this.errorMessages = this.property.getValidationErrors(this.editedValue);
     }

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

@@ -20,6 +20,7 @@ import { CardViewTextItemPipeProperty } from './card-view-textitem-pipe-property
 
 export interface CardViewTextItemProperties extends CardViewItemProperties {
     multiline?: boolean;
+    multivalued?: boolean;
     pipes?: CardViewTextItemPipeProperty[];
     clickCallBack?: any;
 }

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

@@ -23,12 +23,14 @@ import { CardViewTextItemPipeProperty, CardViewTextItemProperties } from '../int
 export class CardViewTextItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
     type: string = 'text';
     multiline?: boolean;
+    multivalued?: boolean;
     pipes?: CardViewTextItemPipeProperty[];
     clickCallBack?: any;
 
     constructor(cardViewTextItemProperties: CardViewTextItemProperties) {
         super(cardViewTextItemProperties);
         this.multiline = !!cardViewTextItemProperties.multiline;
+        this.multivalued = !!cardViewTextItemProperties.multivalued;
         this.pipes = cardViewTextItemProperties.pipes || [];
         this.clickCallBack = cardViewTextItemProperties.clickCallBack ? cardViewTextItemProperties.clickCallBack : null;
     }

lib/core/pipes/multi-value.pipe.spec.ts

@@ -0,0 +1,66 @@
+/*!
+ * @license
+ * Copyright 2019 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 { MultiValuePipe } from './multi-value.pipe';
+import { TestBed } from '@angular/core/testing';
+import { setupTestBed } from 'core';
+import { CoreTestingModule } from 'core/testing/core.testing.module';
+
+describe('FullNamePipe', () => {
+
+    let pipe: MultiValuePipe;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    beforeEach(() => {
+        pipe = TestBed.get(MultiValuePipe);
+
+    });
+
+    it('should add the separator when a list is provided', () => {
+        const values = ['cat', 'house', 'dog'];
+        expect(pipe.transform(values)).toBe('cat, house, dog');
+    });
+
+    it('should add custom separator when set', () => {
+        const values = ['cat', 'house', 'dog'];
+        const customSeparator = ' - ';
+        expect(pipe.transform(values, customSeparator)).toBe('cat - house - dog');
+    });
+
+    it('should not add separator when the list has only one item', () => {
+        const values = ['cat'];
+        expect(pipe.transform(values)).toBe('cat');
+    });
+
+    it('should return empty string when an empty list is passed', () => {
+        const values = [];
+        expect(pipe.transform(values)).toBe('');
+    });
+
+    it('should return empty string when an empty string is passed', () => {
+        const values = '';
+        expect(pipe.transform(values)).toBe('');
+    });
+
+    it('should return same string when the value passed is a string', () => {
+        const values = 'cat';
+        expect(pipe.transform(values)).toBe('cat');
+    });
+});

lib/core/pipes/multi-value.pipe.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2019 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 { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'multiValue' })
+export class MultiValuePipe implements PipeTransform {
+
+    static DEFAULT_SEPARATOR = ', ';
+
+    transform(values: string | string [], valueSeparator: string = MultiValuePipe.DEFAULT_SEPARATOR): string {
+
+        if (values && values instanceof Array) {
+            values.map((value) => value.trim());
+            return values.join(valueSeparator);
+        }
+
+        return <string> values;
+    }
+}

lib/core/pipes/pipe.module.ts

@@ -27,6 +27,7 @@ import { InitialUsernamePipe } from './user-initial.pipe';
 import { FullNamePipe } from './full-name.pipe';
 import { FormatSpacePipe } from './format-space.pipe';
 import { FileTypePipe } from './file-type.pipe';
+import { MultiValuePipe } from './multi-value.pipe';
 
 @NgModule({
     imports: [
@@ -41,7 +42,8 @@ import { FileTypePipe } from './file-type.pipe';
         FullNamePipe,
         NodeNameTooltipPipe,
         FormatSpacePipe,
-        FileTypePipe
+        FileTypePipe,
+        MultiValuePipe
     ],
     providers: [
         FileSizePipe,
@@ -51,7 +53,8 @@ import { FileTypePipe } from './file-type.pipe';
         InitialUsernamePipe,
         NodeNameTooltipPipe,
         FormatSpacePipe,
-        FileTypePipe
+        FileTypePipe,
+        MultiValuePipe
     ],
     exports: [
         FileSizePipe,
@@ -62,7 +65,8 @@ import { FileTypePipe } from './file-type.pipe';
         FullNamePipe,
         NodeNameTooltipPipe,
         FormatSpacePipe,
-        FileTypePipe
+        FileTypePipe,
+        MultiValuePipe
     ]
 })
 export class PipeModule {

lib/core/pipes/public-api.ts

@@ -22,5 +22,6 @@ export * from './text-highlight.pipe';
 export * from './time-ago.pipe';
 export * from './user-initial.pipe';
 export * from './full-name.pipe';
+export * from './multi-value.pipe';
 
 export * from './pipe.module';