diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts index 32b99b46c..6c88bba4a 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts @@ -36,4 +36,6 @@ export interface MultipleAutoCompleteConfiguration { autoSelectFirstOptionOnBlur?: boolean; + appendClassToItem?: {class: string, applyFunc: (item:any) => boolean}[]; + } diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html index 3c89cd3ff..63ed19aec 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html @@ -1,7 +1,7 @@
- +
{{_displayFn(selectedItem)}}
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts index d209c4593..4cdb40be1 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts @@ -365,6 +365,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp get popupItemActionIcon(): string { return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : ''; } + get appendClassToItem(): {class: string, applyFunc: (item: any) => boolean}[]{ + return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null; + } //Chip Functions _addItem(event: MatChipInputEvent): void { @@ -400,4 +403,19 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp if (event != null) { event.stopPropagation(); } this.optionActionClicked.emit(item); } + + + private readonly empyObj = {}; + computeClass(value: any){ + if(!(this.appendClassToItem && this.appendClassToItem.length)){ + return this.empyObj; + } + + const classes = this.appendClassToItem.filter(e=> e.applyFunc(value)); + return classes.reduce((r, current) => { + r[current.class] = true; + return r; + } , {}); + + } } diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss index 4919dc0e8..650d75379 100644 --- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss +++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss @@ -121,3 +121,15 @@ background: #129d99; color: #ffffff; } + +@keyframes blink{ + 0% {border: 1px solid rgba(255, 0, 0, 0.2);} + 50% {border: 1px solid rgba(255, 0, 0, 0.5);} + 100% {border: 1px solid rgba(255, 0, 0, 0.2);} +} + +:host ::ng-deep .invalid-email{ + border: 1px solid red; + // animation: blink 1.4s infinite; + // animation-fill-mode: both; +} diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts index d15a9dd9c..0e9299f0e 100644 --- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts +++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts @@ -69,7 +69,13 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni const result = typeof(item) === 'string' ? item : item.email; return result; }, - autoSelectFirstOptionOnBlur: true + autoSelectFirstOptionOnBlur: true, + appendClassToItem: [{class: 'invalid-email', applyFunc: (item)=> { + const val = typeof(item) === 'string'? item : item.email; + const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/); + return !regexp.test(val); + } + }] }; add(event: MatChipInputEvent): void {