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

import { HttpClient } from '@angular/common/http';
import { Component, Inject } from '@angular/core';
import { FormBuilder, FormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { Annotation, AnnotationPersist } from '@annotation-service/core/model/annotation.model';
import { AnnotationLookup } from '@annotation-service/core/query/annotation.lookup';
import { AnnotationService } from '@annotation-service/services/http/annotation.service';
import { AnnotationProtectionType } from '@app/core/common/enum/annotation-protection-type.enum';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { BaseComponent } from '@common/base/base.component';
import { FormService } from '@common/forms/form-service';
import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof';

@Component({
	selector: 'app-start-new-dmp',
	templateUrl: './annotation-dialog.component.html',
	styleUrls: ['./annotation-dialog.component.scss']
})
export class AnnotationDialogComponent extends BaseComponent {

	private entityId: Guid;
	private anchor: string;
	private entityType: string;
	// public annotations: Array<Annotation> = [];

	public threads = new Array<Annotation>();
	public annotationsPerThread = {};
	threadReplyTextsFG: Array<UntypedFormGroup>;
	threadFormGroup: UntypedFormGroup;
	private formBuilder: FormBuilder = new FormBuilder();


	constructor(
		public dialogRef: MatDialogRef<AnnotationDialogComponent>,
		@Inject(MAT_DIALOG_DATA) public data: any,
		private router: Router,
		public dialog: MatDialog,
		private uiNotificationService: UiNotificationService,
		private language: TranslateService,
		private annotationService: AnnotationService,
		private formService: FormService
	) {
		super();
		this.entityId = data.entityId;
		this.anchor = data.anchor;
		this.entityType = data.entityType;
	}

	ngOnInit(): void {
		// this.threadFormGroup = new UntypedFormGroup({
		// 	text: new FormControl(null, [Validators.required]),
		// 	annotationProtectionType: new FormControl(AnnotationProtectionType.Public, [Validators.required])
		// });
		// if (this.entityId != null) {
		// 	this.loadThreads();
		// }
	}

	createThread() {
		// this.formService.removeAllBackEndErrors(this.threadFormGroup);
		// this.formService.touchAllFormFields(this.threadFormGroup);
		// if (!this.isFormValid(this.threadFormGroup)) {
		// 	return;
		// }
		// const threadToCreate: AnnotationPersist = {
		// 	payload: this.threadFormGroup.get('text').value,
		// 	protection: this.threadFormGroup.get('annotationProtectionType').value,
		// 	referenceId: this.referenceId
		// };
		// this.annotationService.persist(threadToCreate).pipe(takeUntil(this._destroyed))
		// 	.subscribe(
		// 		complete => this.onCallbackSuccess(),
		// 		error => this.onCallbackError(error)
		// 	);
	}

	replyThread(threadId: Guid, threadProtection: AnnotationProtectionType) {
		// // if (!this.threadReplyTexts[threadId.toString()] || this.threadReplyTexts[threadId.toString()].length === 0) { return; }
		// this.formService.removeAllBackEndErrors(this.threadReplyTextsFG[threadId.toString()]);
		// this.formService.touchAllFormFields(this.threadReplyTextsFG[threadId.toString()]);
		// if (!this.isFormValid(this.threadReplyTextsFG[threadId.toString()])) {
		// 	return;
		// }
		// const replyToCreate: AnnotationPersist = {
		// 	threadId: threadId,
		// 	text: this.threadReplyTextsFG[threadId.toString()].get('replyText').value,
		// 	protection: threadProtection,
		// 	referenceId: this.referenceId
		// };
		// this.annotationService.persist(replyToCreate).pipe(takeUntil(this._destroyed))
		// 	.subscribe(
		// 		complete => this.onCallbackSuccess(),
		// 		error => this.onCallbackError(error)
		// 	);
	}

	private refreshAnnotations() {
		// this.threadReplyTextsFG.forEach(element => {
		// 	element.reset();
		// });
		this.loadThreads();
	}

	private loadThreads() {
		const lookup: AnnotationLookup = new AnnotationLookup();
		lookup.entityIds = [this.entityId];
		// lookup.anchors = [this.anchor];
		lookup.entityTypes = [this.entityType];
		lookup.project = {
			fields: [
				nameof<Annotation>(x => x.id),
				// nameof<Annotation>(x => x.threadId),
				// nameof<Annotation>(x => x.threadId),
				// nameof<Annotation>(x => x.timeStamp),
				// nameof<Annotation>(x => x.author.name),
				nameof<Annotation>(x => x.payload),
				// nameof<Annotation>(x => x.protection),
			]
		};

		this.annotationService.query(lookup)
			.pipe(takeUntil(this._destroyed))
			.subscribe(
				data => {
					// this.annotationsPerThread = {};
					// this.threadReplyTextsFG = new Array<UntypedFormGroup>();
					// this.resetFormGroup();
					// this.threads = data.items.filter(item => item.id === item.threadId).sort((a1, a2) => new Date(a2.timeStamp).getTime() - new Date(a1.timeStamp).getTime());
					// this.threads.forEach(element => {
					// 	// this.threadReplyTextsFG.addControl(element.id.toString(), new FormControl(null));
					// 	this.threadReplyTextsFG[element.id.toString()] = this.fb.group({ replyText: new FormControl(null, [Validators.required]) });
					// 	this.annotationsPerThread[element.id.toString()] = data.items.filter(x => x.threadId === element.id && x.id !== element.id).sort((a1, a2) => new Date(a1.timeStamp).getTime() - new Date(a2.timeStamp).getTime());
					// });
					// // this.annotationsChanged.emit(this.threads);
				},
				error => this.onCallbackError(error),
			);
	}

	resetFormGroup() {
		this.threadFormGroup.reset();
		this.threadFormGroup.get('annotationProtectionType').setValue(AnnotationProtectionType.EntityAccessors);
	}

	isValidText(text: string): boolean {
		return !isNullOrUndefined(text) && text.length !== 0 && text !== '';
	}

	// ngOnInit() {
	// 	const lookup: AnnotationLookup = new AnnotationLookup();
	// 	lookup.entityIds = [this.entityId];
	// 	// lookup.anchors = [this.anchor];
	// 	lookup.entityTypes = [this.entityType];

	// 	this.annotationService.query(lookup).pipe(takeUntil(this._destroyed))
	// 		.subscribe(
	// 			data => {
	// 				this.annotations = data.items;
	// 			},
	// 			error => this.onCallbackError(error)
	// 		);
	// }


	private onCallbackSuccess() {
		this.uiNotificationService.snackBarNotification(this.language.instant('DMP-UPLOAD.UPLOAD-SUCCESS'), SnackBarNotificationLevel.Success);
		this.router.navigate(['/reload']).then(() => this.router.navigate(['/plans']));
		// this.router.navigate(['/reload']).then(() => this.isPublic ? this.router.navigate(['/explore-plans']) : this.router.navigate(['/plans']));
	}

	private onCallbackError(error: any) {
		this.uiNotificationService.snackBarNotification(this.language.instant(error.message), SnackBarNotificationLevel.Error);
	}


	cancel() {
		this.dialogRef.close();
	}

	send() {
		this.dialogRef.close(this.data);
	}

	close() {
		this.dialogRef.close(false);
	}

	startWizard() {
		this.router.navigate(['/plans/new']);
		this.close();
	}
}