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

[ADF-4559] Add chips to multivalue metadata properties (#5552)

Browse Source 
* [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
This commit is contained in:
davidcanonieto
2020-03-23 13:02:01 +00:00
committed by GitHub
parent 666dd45fa2
commit 144da83d0e
9 changed files with 223 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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<CardViewTextItemModel> implements OnChanges {
static DEFAULT_SEPARATOR = ', ';
static DEFAULT_USE_CHIPS = false;
@Input()
editable: boolean = false;
@@ -40,18 +42,20 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
private editorInput: any;
inEdit: boolean = false;
editedValue: string;
editedValue: string | string[];
errorMessages: string[];
valueSeparator: string;
useChipsForMultiValueProperty: boolean;
constructor(cardViewUpdateService: CardViewUpdateService,
private appConfig: AppConfigService) {
super(cardViewUpdateService);
this.valueSeparator = this.appConfig.get<string>('content-metadata.multi-value-pipe-separator') || CardViewTextItemComponent.DEFAULT_SEPARATOR;
this.useChipsForMultiValueProperty = this.appConfig.get<boolean>('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<CardViewTextItemMode
}, 0);
}
reset(event: MouseEvent|KeyboardEvent): void {
reset(event: Event): void {
event.stopPropagation();
this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
this.resetValue();
this.setEditMode(false);
this.resetErrorMessages();
}
resetValue() {
if (this.isChipViewEnabled) {
this.editedValue = this.property.value ? Array.from(this.property.value) : [];
} else {
this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
}
}
private resetErrorMessages() {
this.errorMessages = [];
}
update(event: MouseEvent|KeyboardEvent): void {
update(event: Event): void {
event.stopPropagation();
if (this.property.isValid(this.editedValue)) {
@@ -113,14 +125,35 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
}
}
prepareValueForUpload(property: CardViewTextItemModel, value: string): string | string [] {
if (property.multivalued) {
prepareValueForUpload(property: CardViewTextItemModel, value: string | string[]): string | string[] {
if (property.multivalued && typeof value === 'string') {
const listOfValues = value.split(this.valueSeparator.trim()).map((item) => 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<CardViewTextItemMode
this.cardViewUpdateService.clicked(this.property);
}
}
get isChipViewEnabled(): boolean {
return this.property.multivalued && this.useChipsForMultiValueProperty;
}
}