argos/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.ts

import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, Inject, OnInit } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { DmpUserRole } from '@app/core/common/enum/dmp-user-role';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { DmpUserInvitePersist, DmpUserInviteTypePersist } from '@app/core/model/dmp/dmp';
import { DmpAssociatedUser, User } from '@app/core/model/user/user';
import { UserLookup } from '@app/core/query/user.lookup';
import { DmpService } from '@app/core/services/dmp/dmp.service';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { UserService } from '@app/core/services/user/user.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component';
import { FilterService } from '@common/modules/text-filter/filter-service';
import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof';
import { DmpInvitationDialogEditorModel } from './dmp-invitation-dialog.editor.model';

@Component({
	selector: 'app-invitation-dialog-component',
	templateUrl: 'dmp-invitation-dialog.component.html',
	styleUrls: ['./dmp-invitation-dialog.component.scss'],
})
export class DmpInvitationDialogComponent extends BaseComponent implements OnInit {

	dmpId: Guid;
	editorModel: DmpInvitationDialogEditorModel;
	formGroup: UntypedFormGroup;
	dmpUserRoleEnum = DmpUserRole;
	readonly separatorKeysCodes: number[] = [ENTER, COMMA];

	usersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
		filterFn: this.filterUsers.bind(this),
		initialItems: (excludedItems: any[]) => this.filterUsers('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
		displayFn: (item) => typeof (item) === 'string' ? item : item.name,
		titleFn: (item) => typeof (item) === 'string' ? item : item.name,
		subtitleFn: (item) => item.email,
		valueAssign: (item) => {
			const result = typeof (item) === 'string' ? item : item.id;
			return result;
		},
		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);
			}
		}]
	};

	constructor(
		public enumUtils: EnumUtils,
		public route: ActivatedRoute,
		public router: Router,
		private language: TranslateService,
		public dialogRef: MatDialogRef<DmpInvitationDialogComponent>,
		private uiNotificationService: UiNotificationService,
		private dmpService: DmpService,
		private userService: UserService,
		private filterService: FilterService,
		@Inject(MAT_DIALOG_DATA) public data: any
	) {
		super();
		this.dmpId = data.dmpId;
	}

	ngOnInit() {
		this.editorModel = new DmpInvitationDialogEditorModel();
		this.formGroup = this.editorModel.buildForm();
	}

	send() {
		if (!this.formGroup.valid) { return; }
		let inviteTypeValues: DmpUserInviteTypePersist[] = [];
		this.formGroup.get('users').value.forEach(x => {
			let inviteType: DmpUserInviteTypePersist;
			if (!(/^(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}$/).test(x)) {
				inviteType = {
					userId: null,
					email: x
				};
			}else{
				inviteType = {
					userId: Guid.parse(x),
					email: null
				};
			}
			inviteTypeValues.push(inviteType)
		})
		const value: DmpUserInvitePersist = {
			role: this.formGroup.get('role').value,
			users: inviteTypeValues
		}
		// invitationObject.users.push(...(<any[]>this.formGroup.get('users').value).filter(user => typeof (user) === 'string').map(email => ({ email: email, name: email })));
		// invitationObject.users.push(...(<any[]>this.formGroup.get('users').value).filter(user => typeof (user) !== 'string'));
		// this.emails.forEach(email => {
		// 	invitationObject.users.push({ email: email, name: email });
		// });

		this.dmpService.inviteUsers(this.dmpId, value)
			.pipe(takeUntil(this._destroyed))
			.subscribe(
				complete => {
					this.dialogRef.close();
					this.onCallbackSuccess();
				},
				error => this.onCallbackError(error)
			);
	}

	closeDialog(): void {
		this.dialogRef.close();
	}

	filterUsers(like: string): Observable<DmpAssociatedUser[]> {
		const lookup: UserLookup = new UserLookup();
		lookup.page = { size: 100, offset: 0 };
		// if (excludedIds && excludedIds.length > 0) { lookup.excludedIds = excludedIds; }
		// if (ids && ids.length > 0) { lookup.ids = ids; }
		lookup.isActive = [IsActive.Active];
		lookup.project = {
			fields: [
				nameof<User>(x => x.id),
				nameof<User>(x => x.name)
			]
		};
		lookup.order = { items: [nameof<User>(x => x.name)] };
		if (like) { lookup.like = this.filterService.transformLike(like); }
		return this.userService.queryDmpAssociated(lookup).pipe(takeUntil(this._destroyed), map(x => x.items));
	}

	hasValue(): boolean {
		return this.formGroup.get('users') && this.formGroup.get('users').value && this.formGroup.get('users').value.length > 0;
	}

	onCallbackSuccess(): void {
		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.INVITATION-DIALOG.SUCCESS'), SnackBarNotificationLevel.Success);
	}

	onCallbackError(errorResponse: any) {
		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.INVITATION-DIALOG.ERROR'), SnackBarNotificationLevel.Error);
	}
}