argos/dmp-frontend/src/app/users/components/roles/user-role-editor.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../core/common/base/base.component';
import { Principal } from '../../../models/login/Principal';
import { UserErrorModel } from '../../../models/users/UserErrorModel';
import { UserListingModel } from '../../../models/users/UserListingModel';
import { UserReferenceService } from '../../../services/user-reference/user-reference-data.service';
import { SnackBarNotificationComponent } from '../../../shared/components/notificaiton/snack-bar-notification.component';
import { Utilities } from '../../../utilities/utilities';
import { Validation, ValidationContext } from '../../../utilities/validators/ValidationContext';

@Component({
	selector: 'app-user-role-editor-component',
	templateUrl: './user-role-editor.component.html',
	styleUrls: ['./user-role-editor.component.scss'],
	providers: [Utilities]
})
export class UserRoleEditorComponent extends BaseComponent implements OnInit {

	@Input() public item: UserListingModel;
	public formGroup: FormGroup = null;
	public nowEditing = false;
	public errorModel: UserErrorModel;
	constructor(
		public language: TranslateService,
		public userService: UserReferenceService,
		public formBuilder: FormBuilder,
		public snackBar: MatSnackBar,
		public utilities: Utilities
	) { super(); }

	ngOnInit() {
		if (this.errorModel == null) { this.errorModel = new UserErrorModel(); }
		if (this.formGroup == null) { this.formGroup = this.buildForm(); }
	}

	buildForm(): FormGroup {
		const context: ValidationContext = this.createValidationContext();

		return this.formBuilder.group({
			appRoles: new FormControl({ value: this.item.appRoles, disabled: true }, context.getValidation('appRoles').validators)
		});
	}

	createValidationContext(): ValidationContext {
		const validationContext: ValidationContext = new ValidationContext();
		const validationArray: Validation[] = new Array<Validation>();

		validationArray.push({ key: 'appRoles' });

		validationContext.validation = validationArray;
		return validationContext;
	}

	formSubmit(): void {
		this.clearErrorModel();

		const modifiedItem = new UserListingModel().fromJSONObject(this.item);
		modifiedItem.appRoles = this.getFormControl('appRoles').value;

		if (!this.isFormValid()) { return; }
		this.userService.updateRoles(modifiedItem)
			.pipe(takeUntil(this._destroyed))
			.subscribe(
				(res) => this.onCallbackSuccess(),
				(error) => this.onCallbackError(error)
			);
	}

	editItem(): void {
		this.formGroup.enable();
		this.nowEditing = true;
	}

	isFormValid(): boolean {
		this.touchAllFormFields(this.formGroup);
		this.validateAllFormFields(this.formGroup);
		return this.formGroup.valid;
	}

	getFormData(): any {
		return this.formGroup.value;
	}

	getFormControl(controlName: string): AbstractControl {
		return this.formGroup.get(controlName);
	}

	validateAllFormFields(formControl: AbstractControl) {
		if (formControl instanceof FormControl) {
			formControl.updateValueAndValidity({ emitEvent: false });
		} else if (formControl instanceof FormGroup) {
			Object.keys(formControl.controls).forEach(item => {
				const control = formControl.get(item);
				this.validateAllFormFields(control);
			});
		} else if (formControl instanceof FormArray) {
			formControl.controls.forEach(item => {
				this.validateAllFormFields(item);
			});
		}
	}

	touchAllFormFields(formControl: AbstractControl) {
		if (formControl instanceof FormControl) {
			formControl.markAsTouched();
		} else if (formControl instanceof FormGroup) {
			Object.keys(formControl.controls).forEach(item => {
				const control = formControl.get(item);
				this.touchAllFormFields(control);
			});
		} else if (formControl instanceof FormArray) {
			formControl.controls.forEach(item => {
				this.touchAllFormFields(item);
			});
		}
	}

	setErrorModel(errorModel: UserErrorModel) {
		Object.keys(errorModel).forEach(item => {
			(<any>this.errorModel)[item] = (<any>errorModel)[item];
		});
	}

	clearErrorModel() {
		Object.keys(this.errorModel).forEach(item => {
			(<any>this.errorModel)[item] = '';
		});
	}

	onCallbackSuccess() {
		this.nowEditing = false;
		this.formGroup.disable();
		this.snackBar.openFromComponent(SnackBarNotificationComponent, {
			data: { message: 'GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE', language: this.language },
			duration: 3000,
		});
	}
	onCallbackError(error: any) {
		this.setErrorModel(error.error);
		this.validateAllFormFields(this.formGroup);
		this.snackBar.openFromComponent(SnackBarNotificationComponent, {
			data: { message: 'GENERAL.SNACK-BAR.UNSUCCESSFUL-UPDATE', language: this.language },
			duration: 3000,
		});
	}

	getPrincipalAppRoleValues(): Number[] {
		let keys: string[] = Object.keys(Principal.AppRole);
		keys = keys.slice(0, keys.length / 2);
		const values: Number[] = keys.map(Number);
		return values;
	}

	getPrincipalAppRoleWithLanguage(role: Principal.AppRole): string {
		let result = '';
		this.language.get(this.utilities.convertFromPrincipalAppRole(role))
			.pipe(takeUntil(this._destroyed))
			.subscribe((value: string) => {
				result = value;
			});
		return result;
	}
}