mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4900] Card View and Metadata Components refactoring (#5592)
* [ADF-4900] Card View and Metadata Components refactoring * CSS linting * Unit test excluded * Rebase branch * Fix unit tests * Fix linting * Fix e2e tests * Fix 2e2 tests * Fix process-services e2e tests * More fixes * Fix more e2e tests * Fix unit test * Improve flaky unit test * Fix process services e2e tests * Update Process Header Cloud Page * Fix linting * Fix timing issue * Lintintg * Fix selectors * Fix e2e tests * Fix timing issue * Fix C260328 * Fix spellcheck * save screenshot * performance issue * Fix unit tests and e2e tests * fix e2e * refactoring * fix lint * fix e2e * Fix C309698 * fix other e2e * fix lint * increase timeout Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
This commit is contained in:
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnChanges, ViewChild } from '@angular/core';
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
|
||||
import { CardViewUpdateService } from '../../services/card-view-update.service';
|
||||
import { BaseCardView } from '../base-card-view';
|
||||
@@ -24,6 +24,13 @@ import { ClipboardService } from '../../../clipboard/clipboard.service';
|
||||
import { TranslationService } from '../../../services/translation.service';
|
||||
|
||||
export const DEFAULT_SEPARATOR = ', ';
|
||||
const templateTypes = {
|
||||
clickableTemplate: 'clickableTemplate',
|
||||
multilineTemplate: 'multilineTemplate',
|
||||
chipsTemplate: 'chipsTemplate',
|
||||
emptyTemplate: 'emptyTemplate',
|
||||
defaultTemplate: 'defaultTemplate'
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'adf-card-view-textitem',
|
||||
@@ -47,12 +54,9 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
@Input()
|
||||
multiValueSeparator: string = DEFAULT_SEPARATOR;
|
||||
|
||||
@ViewChild('editorInput')
|
||||
private editorInput: any;
|
||||
|
||||
inEdit: boolean = false;
|
||||
editedValue: string | string[];
|
||||
errorMessages: string[];
|
||||
templateType: string;
|
||||
|
||||
constructor(cardViewUpdateService: CardViewUpdateService,
|
||||
private clipboardService: ClipboardService,
|
||||
@@ -62,54 +66,28 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.resetValue();
|
||||
this.setTemplateType();
|
||||
}
|
||||
|
||||
showProperty(): boolean {
|
||||
return this.displayEmpty || !this.property.isEmpty();
|
||||
}
|
||||
|
||||
showClickableIcon(): boolean {
|
||||
return this.hasIcon() && this.editable;
|
||||
}
|
||||
|
||||
isEditable(): boolean {
|
||||
return this.editable && this.property.editable;
|
||||
}
|
||||
|
||||
isClickable(): boolean {
|
||||
return !!this.property.clickable;
|
||||
}
|
||||
|
||||
hasIcon(): boolean {
|
||||
return !!this.property.icon;
|
||||
}
|
||||
|
||||
hasErrors(): boolean {
|
||||
return this.errorMessages && this.errorMessages.length > 0;
|
||||
}
|
||||
|
||||
setEditMode(editStatus: boolean): void {
|
||||
this.inEdit = editStatus;
|
||||
setTimeout(() => {
|
||||
if (this.editorInput) {
|
||||
this.editorInput.nativeElement.click();
|
||||
private setTemplateType() {
|
||||
if (this.showProperty || this.isEditable) {
|
||||
if (this.isClickable) {
|
||||
this.templateType = templateTypes.clickableTemplate;
|
||||
} else if (this.isChipViewEnabled) {
|
||||
this.templateType = templateTypes.chipsTemplate;
|
||||
} else {
|
||||
this.templateType = templateTypes.defaultTemplate;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
reset(event: Event): void {
|
||||
event.stopPropagation();
|
||||
|
||||
this.resetValue();
|
||||
this.setEditMode(false);
|
||||
this.resetErrorMessages();
|
||||
} else {
|
||||
this.templateType = templateTypes.emptyTemplate;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
this.editedValue = this.property.displayValue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,14 +95,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
this.errorMessages = [];
|
||||
}
|
||||
|
||||
update(event: Event): void {
|
||||
event.stopPropagation();
|
||||
|
||||
update(): void {
|
||||
if (this.property.isValid(this.editedValue)) {
|
||||
const updatedValue = this.prepareValueForUpload(this.property, this.editedValue);
|
||||
this.cardViewUpdateService.update(<CardViewTextItemModel> { ...this.property }, updatedValue);
|
||||
this.property.value = updatedValue;
|
||||
this.setEditMode(false);
|
||||
this.resetErrorMessages();
|
||||
} else {
|
||||
this.errorMessages = this.property.getValidationErrors(this.editedValue);
|
||||
@@ -142,6 +117,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
removeValueFromList(itemIndex: number) {
|
||||
if (typeof this.editedValue !== 'string') {
|
||||
this.editedValue.splice(itemIndex, 1);
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,16 +128,12 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
if (typeof this.editedValue !== 'string') {
|
||||
if (chipValue) {
|
||||
this.editedValue.push(chipValue);
|
||||
this.update();
|
||||
}
|
||||
|
||||
if (chipInput) {
|
||||
chipInput.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onTextAreaInputChange() {
|
||||
this.errorMessages = this.property.getValidationErrors(this.editedValue);
|
||||
} }
|
||||
}
|
||||
|
||||
clicked(): void {
|
||||
@@ -172,9 +144,39 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
}
|
||||
}
|
||||
|
||||
clearValue() {
|
||||
this.editedValue = '';
|
||||
}
|
||||
|
||||
copyToClipboard(valueToCopy: string) {
|
||||
const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
|
||||
this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
|
||||
if (this.copyToClipboard) {
|
||||
const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
|
||||
this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
|
||||
}
|
||||
}
|
||||
|
||||
get showProperty(): boolean {
|
||||
return this.displayEmpty || !this.property.isEmpty();
|
||||
}
|
||||
|
||||
get showClickableIcon(): boolean {
|
||||
return this.hasIcon && this.editable;
|
||||
}
|
||||
|
||||
get isEditable(): boolean {
|
||||
return this.editable && this.property.editable;
|
||||
}
|
||||
|
||||
get isClickable(): boolean {
|
||||
return this.property.clickable;
|
||||
}
|
||||
|
||||
get hasIcon(): boolean {
|
||||
return !!this.property.icon;
|
||||
}
|
||||
|
||||
get hasErrors(): boolean {
|
||||
return this.errorMessages && this.errorMessages.length > 0;
|
||||
}
|
||||
|
||||
get isChipViewEnabled(): boolean {
|
||||
|
Reference in New Issue
Block a user