From 144da83d0ec7249fb558e7b7a744edb754b49cd1 Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Mon, 23 Mar 2020 13:02:01 +0000 Subject: [PATCH] [ADF-4559] Add chips to multivalue metadata properties (#5552) * [ADF-4559] Add chips to multivalue metadata properties * Fix app config schema * Restore app config * Fix checkListIsSorted method * Fix e2e datatable sorting * Fix e2e tests * Improve chips input --- demo-shell/src/app.config.json | 3 +- .../content-metadata-card.component.md | 9 +- docs/docassets/images/metadata-chips.png | Bin 0 -> 13938 bytes .../task-list-properties-sort.e2e.ts | 4 +- lib/core/app-config/schema.json | 24 +-- .../card-view-textitem.component.html | 167 +++++++++++------- .../card-view-textitem.component.spec.ts | 48 ++++- .../card-view-textitem.component.ts | 51 +++++- .../core/pages/data-table-component.page.ts | 12 +- 9 files changed, 223 insertions(+), 95 deletions(-) create mode 100644 docs/docassets/images/metadata-chips.png diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index c86b9b95c7..5369be3999 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -820,7 +820,8 @@ "exif:exif": "*" } }, - "multi-value-pipe-separator": ", " + "multi-value-pipe-separator": ", ", + "multi-value-chips": true }, "sideNav": { "expandedSidenav": true, diff --git a/docs/content-services/components/content-metadata-card.component.md b/docs/content-services/components/content-metadata-card.component.md index d03ee5de57..a575d0ec34 100644 --- a/docs/content-services/components/content-metadata-card.component.md +++ b/docs/content-services/components/content-metadata-card.component.md @@ -347,6 +347,13 @@ To customize the separator used by this card you can set it in your `app.config. "exif:exif": [ "exif:pixelXDimension", "exif:pixelYDimension"] } }, - "multi-value-pipe-separator" : " - " + "multi-value-pipe-separator" : " - ", + "multi-value-chips" : false }, ``` + +### Use chips for multi value properties + +If you want to display chips fo each value instead of a composed string you just need to enable it in the content-metadata config. + +![Chips for multi value properties](../../docassets/images/metadata-chips.png) diff --git a/docs/docassets/images/metadata-chips.png b/docs/docassets/images/metadata-chips.png new file mode 100644 index 0000000000000000000000000000000000000000..46531ac1ca371aae34c675b1a2ea690a46f084e0 GIT binary patch literal 13938 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 { await tasksCloudDemoPage.editTaskFilterCloudComponent().setSortFilterDropDown('Priority'); await tasksCloudDemoPage.editTaskFilterCloudComponent().setOrderFilterDropDown('ASC'); - await expect(await tasksCloudDemoPage.taskListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Priority')).toBe(true); + await expect(await tasksCloudDemoPage.taskListCloudComponent().getDataTable().checkListIsSorted('ASC', 'Priority', 'NUMBER')).toBe(true); await tasksCloudDemoPage.editTaskFilterCloudComponent().setOrderFilterDropDown('DESC'); - await expect(await tasksCloudDemoPage.taskListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Priority')).toBe(true); + await expect(await tasksCloudDemoPage.taskListCloudComponent().getDataTable().checkListIsSorted('DESC', 'Priority', 'NUMBER')).toBe(true); }); it('[C307115] Should display tasks sorted by owner when owner is selected from sort dropdown', async () => { diff --git a/lib/core/app-config/schema.json b/lib/core/app-config/schema.json index 6ae8ac5490..c5861c58db 100644 --- a/lib/core/app-config/schema.json +++ b/lib/core/app-config/schema.json @@ -899,26 +899,6 @@ "pattern": "^\\*$", "description": "Wildcard for every aspect" }, - { - "type": "object", - "description": "", - "required": [ - "includeAll" - ], - "properties": { - "includeAll": { - "description": "includeAll all property", - "type": "boolean" - }, - "postfix": { - "description": "exclude", - "type": [ - "string", - "array" - ] - } - } - }, { "$ref": "#/definitions/content-metadata-aspect" }, @@ -932,6 +912,10 @@ "multi-value-pipe-separator": { "description": "Content metadata's separator for multi value properties", "type": "string" + }, + "multi-value-chips": { + "description": "Use chips for multi value properties", + "type": "boolean" } } }, diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html index 01b490ae21..09a2cd4fa2 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html @@ -1,95 +1,142 @@ -
{{ property.label | translate }}
+
{{ property.label | translate }}
- - - {{ property.displayValue }} - - -
- - {{ property.displayValue }} + + + + {{ property.displayValue }} -
-
- - {{ property.displayValue }} +
+ + {{ property.displayValue }} -
-
+
- - + - + matInput + class="adf-input" + [placeholder]="property.default | translate" + [(ngModel)]="editedValue" + [attr.data-automation-id]="'card-textitem-editinput-' + property.key"> + +
+ + + {{ propertyValue }} + cancel + + + +
- -
- +
  • {{ errorMessage | translate }}
- + {{ property.default | translate }} + + + + + {{ propertyValue }} + + +
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts index a7ce93e1f2..22d71b48b6 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts @@ -23,6 +23,7 @@ import { CardViewTextItemComponent } from './card-view-textitem.component'; import { setupTestBed } from '../../../testing/setup-test-bed'; import { CoreTestingModule } from '../../../testing/core.testing.module'; import { CardViewItemFloatValidator, CardViewItemIntValidator } from '@alfresco/adf-core'; +import { MatChipsModule } from '@angular/material'; describe('CardViewTextItemComponent', () => { @@ -31,7 +32,10 @@ describe('CardViewTextItemComponent', () => { const mouseEvent = new MouseEvent('click'); setupTestBed({ - imports: [CoreTestingModule] + imports: [ + CoreTestingModule, + MatChipsModule + ] }); beforeEach(() => { @@ -146,6 +150,48 @@ describe('CardViewTextItemComponent', () => { const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`)); expect(editIcon).toBeNull('Edit icon should NOT be shown'); }); + + it('should render chips for multivalue properties when chips are enabled', () => { + component.property = new CardViewTextItemModel({ + label: 'Text label', + value: ['item1', 'item2', 'item3'], + key: 'textkey', + default: ['FAKE-DEFAULT-KEY'], + editable: true, + multivalued: true + }); + component.useChipsForMultiValueProperty = true; + component.ngOnChanges(); + fixture.detectChanges(); + + const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`)); + expect(valueChips).not.toBeNull(); + expect(valueChips.length).toBe(3); + expect(valueChips[0].nativeElement.innerText.trim()).toBe('item1'); + expect(valueChips[1].nativeElement.innerText.trim()).toBe('item2'); + expect(valueChips[2].nativeElement.innerText.trim()).toBe('item3'); + }); + + it('should render string for multivalue properties when chips are disabled', () => { + component.property = new CardViewTextItemModel({ + label: 'Text label', + value: ['item1', 'item2', 'item3'], + key: 'textkey', + default: ['FAKE-DEFAULT-KEY'], + editable: true, + multivalued: true + }); + + component.useChipsForMultiValueProperty = false; + component.ngOnChanges(); + fixture.detectChanges(); + + const valueChips = fixture.debugElement.query(By.css(`mat-chip-list`)); + const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`)); + expect(value).not.toBeNull(); + expect(value.nativeElement.innerText.trim()).toBe('item1,item2,item3'); + expect(valueChips).toBeNull(); + }); }); describe('clickable', () => { diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts index 14ffc3b17c..8821879b22 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts @@ -20,6 +20,7 @@ import { CardViewTextItemModel } from '../../models/card-view-textitem.model'; import { CardViewUpdateService } from '../../services/card-view-update.service'; import { AppConfigService } from '../../../app-config/app-config.service'; import { BaseCardView } from '../base-card-view'; +import { MatChipInputEvent } from '@angular/material'; @Component({ selector: 'adf-card-view-textitem', @@ -29,6 +30,7 @@ import { BaseCardView } from '../base-card-view'; export class CardViewTextItemComponent extends BaseCardView implements OnChanges { static DEFAULT_SEPARATOR = ', '; + static DEFAULT_USE_CHIPS = false; @Input() editable: boolean = false; @@ -40,18 +42,20 @@ export class CardViewTextItemComponent extends BaseCardView('content-metadata.multi-value-pipe-separator') || CardViewTextItemComponent.DEFAULT_SEPARATOR; + this.useChipsForMultiValueProperty = this.appConfig.get('content-metadata.multi-value-chips') || CardViewTextItemComponent.DEFAULT_USE_CHIPS; } ngOnChanges(): void { - this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value; + this.resetValue(); } showProperty(): boolean { @@ -87,19 +91,27 @@ export class CardViewTextItemComponent extends BaseCardView item.trim()); return listOfValues; } return value; } + removeValueFromList(itemIndex: number) { + if (typeof this.editedValue !== 'string') { + this.editedValue.splice(itemIndex, 1); + } + } + + addValueToList(newListItem: MatChipInputEvent) { + const chipInput = newListItem.input; + const chipValue = newListItem.value.trim() || ''; + + if (typeof this.editedValue !== 'string') { + if (chipValue) { + this.editedValue.push(chipValue); + } + + if (chipInput) { + chipInput.value = ''; + } + } + } + onTextAreaInputChange() { this.errorMessages = this.property.getValidationErrors(this.editedValue); } @@ -132,4 +165,8 @@ export class CardViewTextItemComponent extends BaseCardView { + async checkListIsSorted(sortOrder: string, columnTitle: string, listType: string = 'STRING'): Promise { const column = element.all(by.css(`div.adf-datatable-cell[title='${columnTitle}'] span`)); await BrowserVisibility.waitUntilElementIsVisible(column.first()); const initialList = []; - const length = await column.count(); + const length = await column.count(); for (let i = 0; i < length; i++) { const text = await BrowserActions.getText(column.get(i)); @@ -135,7 +136,12 @@ export class DataTableComponentPage { } let sortedList = [...initialList]; - sortedList = sortedList.sort(); + if (listType.toLocaleLowerCase() === 'string') { + sortedList = sortedList.sort(); + } else if (listType.toLocaleLowerCase() === 'number') { + sortedList = sortedList.sort((a, b) => a - b); + } + if (sortOrder.toLocaleLowerCase() === 'desc') { sortedList = sortedList.reverse(); }