Merge branch 'dmp-refactoring' of https://code-repo.d4science.org/MaDgiK-CITE/argos into dmp-refactoring

dmp-frontend/src/app/core/model/configuration-models/extended-internal-status.model.ts

@@ -0,0 +1,46 @@
+import { InternalStatus } from "@annotation-service/core/enum/internal-status.enum";
+
+export class ExtendedInternalStatus {
+  
+  private _extendedInternalStatustems: ExtendedInternalStatusItem[];
+  get extendedInternalStatustems(): ExtendedInternalStatusItem[] {
+    return this._extendedInternalStatustems;
+  }
+
+	public static parseValue(value: any): ExtendedInternalStatus {
+		const extendedInternalStatusObj: ExtendedInternalStatus = new ExtendedInternalStatus();
+
+    extendedInternalStatusObj._extendedInternalStatustems = [];
+    for (let item of value) {
+      const extendedInternalStatusItemObj: ExtendedInternalStatusItem = ExtendedInternalStatusItem.parseValue(item);
+      extendedInternalStatusObj._extendedInternalStatustems.push(extendedInternalStatusItemObj);
+    }
+
+		return extendedInternalStatusObj;
+	}
+
+  getIcon(status?: InternalStatus): string {
+    const extendedInternalStatus = this.extendedInternalStatustems?.find(s => s.InternalStatus == status);
+
+    return extendedInternalStatus?.icon == null || extendedInternalStatus?.icon == '' ? 'animation' : extendedInternalStatus?.icon;
+  }
+}
+
+export class ExtendedInternalStatusItem {
+  private _internalStatus: InternalStatus;
+  get InternalStatus(): InternalStatus {
+    return this._internalStatus;
+  }
+
+  private _icon: string;
+  get icon(): string {
+    return this._icon;
+  }
+
+  public static parseValue(value: any): ExtendedInternalStatusItem {
+		const obj: ExtendedInternalStatusItem = new ExtendedInternalStatusItem();
+		obj._internalStatus = value.internalStatus;
+		obj._icon = value.icon;
+		return obj;
+	}
+}

dmp-frontend/src/app/core/services/configuration/configuration.service.ts

@@ -13,6 +13,7 @@ import { AuthProviders } from '@app/core/model/configuration-models/auth-provide
 import { AnalyticsProviders } from '@app/core/model/configuration-models/analytics-providers.model';
 import { CssColorsTenantConfiguration } from '@app/core/model/tenant-configuaration/tenant-configuration';
 import { Sidebar } from '@app/core/model/configuration-models/sidebar.model';
+import { ExtendedInternalStatus } from '@app/core/model/configuration-models/extended-internal-status.model';
 
 @Injectable({
 	providedIn: 'root',
@@ -122,6 +123,11 @@ export class ConfigurationService extends BaseComponent {
 		return this._notificationServiceEnabled;
 	}
 	
+	private _extendedInternalStatus: ExtendedInternalStatus;
+	get extendedInternalStatus(): ExtendedInternalStatus {
+		return this._extendedInternalStatus;
+	}
+
 	private _annotationServiceAddress: string;
 	get annotationServiceAddress(): string {
 		return this._annotationServiceAddress || './';
@@ -263,6 +269,7 @@ export class ConfigurationService extends BaseComponent {
 		if (config.annotation_service) {
 			this._annotationServiceEnabled = config.annotation_service.enabled;
 			this._annotationServiceAddress = config.annotation_service.address;
+			this._extendedInternalStatus = ExtendedInternalStatus.parseValue(config.annotation_service.extendedInternalStatus);
 		}
 		this._inAppNotificationsCountInterval = config.inAppNotificationsCountInterval;
 		this._newReleaseNotificationExpires = config.newReleaseNotification?.expires;

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

@@ -81,7 +81,7 @@
 					<!-- Parent Thread -->
 					<div class="col-12">
 						<div class="container">
-							<div class="row comment-wrapper pt-1 pb-2 h-100">
+							<div class="row comment-wrapper pt-2 pb-2 h-100">
 								<div class="col-12 pt-1">
 									<div class="row">
 										<div class="col-12">
@@ -90,31 +90,37 @@
 													<mat-icon class="account-icon">account_circle</mat-icon>
 												</div>
 												<div class="col">
-													<div class="row">
-														<span class="col user">{{getParentAnnotation(thread).author.name}}</span>
-														<div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | dateTimeFormatter: "d MMMM, y 'at' h:mm a"}}</div>
-													</div>
 													<div class="row pt-1">
-														<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
+														<div class="col">
-													</div>
+															<div class="row h-100">
-													<div class="row"> <!--pb-2-->
+																<span class="col user">{{getParentAnnotation(thread).author.name}}</span>
-														<div class="col-12">
+																<div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | dateTimeFormatter: "d MMMM, y 'at' h:mm a"}}</div>
-															<button mat-button (click)="enableReply(thread)" class="action-button" [ngClass]="this.replyEnabledPerThread[thread] ? 'active-action' : ''" [disabled]="this.replyEnabledPerThread[thread]">{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</button>
+																<div class="col-12 annotation-full-text">{{getParentAnnotation(thread).payload}}</div>
+																<div class="col-12 align-self-end">
+																	<div class="row">
+																		<div class="col-12">
+																			<button mat-button (click)="enableReply(thread)" class="action-button" [ngClass]="this.replyEnabledPerThread[thread] ? 'active-action' : ''" [disabled]="this.replyEnabledPerThread[thread]">{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</button>
+																		</div>
+																	</div>
+																</div>
+															</div>
 														</div>
+														<mat-divider [vertical]="true"></mat-divider>
+														<div class="col-auto mt-2 mr-1">
+															<div class="row flex-column align-items-center pr-1 pl-1">
+																<div *ngFor="let status of listingStatuses" class="col-12">
+																	<button mat-icon-button color="primary" type="submit"
+																	[matTooltip]="status?.label"
+																	[ngClass]="{'selected': status?.id == getAnnotationStatusFormControl(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id).get('statusId')?.value}"
+																	(click)="setAnnotationStatus(annotationStatusFormGroup?.get('annotationsStatusArray'), getParentAnnotation(thread).id, status?.id); persistAnnotationStatus(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id)"
+																	>
+																		<mat-icon>{{getStatusIcon(status?.internalStatus)}}</mat-icon>
+																	</button>
+																</div>
+														</div>
+
 													</div>
-													<div class="col-5">
+
-														<mat-form-field class="w-100" *ngIf="listingStatuses.length > 0">
-															<mat-label>{{'ANNOTATION-DIALOG.ANNOTATION-STATUS.TITLE' | translate}}</mat-label>
-																<mat-select [formControl]="getAnnotationStatusFormControl(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id).get('statusId')" (selectionChange)="changeIcon(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id)">
-																	<mat-option *ngFor="let status of listingStatuses" [value]="status.id">{{status.label}}</mat-option>
-																</mat-select>
-																<mat-error *ngIf="getAnnotationStatusFormControl(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id).get('statusId').hasError('backendError')">{{getAnnotationStatusFormControl(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id).get('statusId').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="getAnnotationStatusFormControl(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id).get('statusId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-														</mat-form-field>
-														<button mat-icon-button color="primary" type="submit" [disabled]="!canSaveAnnotationStatus(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id)" (click)="persistAnnotationStatus(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id)">
-															<mat-icon *ngIf="getAnnotationStatusFormControl(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id).get('isCheckIcon').value == false" class="mat-24" >save</mat-icon>
-															<mat-icon *ngIf="getAnnotationStatusFormControl(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id).get('isCheckIcon').value == true" class="mat-24" >check</mat-icon>
-														</button>
 													</div>
 													<div class="row">
 														<div class="col-12">
@@ -134,7 +140,7 @@
 													<!-- Previous Replies -->
 													<div *ngIf="this.showRepliesPerThread[thread]" class="row">
 														<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12">
-															<div  class="row m-0 h-100">
+															<div  class="row m-0 mt-2 h-100">
 																<div class="col-auto pr-0 pl-0">
 																	<div class="side-color"></div>
 																</div>
@@ -162,27 +168,27 @@
 															</div>
 														</div>
 													</div>
-													<!-- Type reply in thread -->
+												<!-- Type reply in thread -->
-														<div *ngIf="this.replyEnabledPerThread[thread]" class="row">
+													<div *ngIf="this.replyEnabledPerThread[thread]" class="row">
-															<div class="col-12 mt-2">
+														<div class="col-12 mt-2">
-																<div class="row new-reply mr-0">
+															<div class="row new-reply mr-0">
-																	<div class="col">
+																<div class="col">
-																		<mat-form-field appearance="outline" class="w-100">
+																	<mat-form-field appearance="outline" class="w-100">
-																			<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
+																		<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
-																			<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
+																		<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
-																			<!-- <mat-icon matSuffix class="material-symbols-outlined">
+																		<!-- <mat-icon matSuffix class="material-symbols-outlined">
-																				add_reaction
+																			add_reaction
-																			</mat-icon> -->
+																		</mat-icon> -->
-																		</mat-form-field>
+																	</mat-form-field>
-																	</div>			
+																</div>			
-																	<div class="col-auto p-0 send-msg">
+																<div class="col-auto p-0 send-msg">
-																		<button class="form-field-margin" mat-icon-button color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
+																	<button class="form-field-margin" mat-icon-button color="black" (click)="replyThread(thread)" matTooltip="{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}">
-																			<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
+																		<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
-																		</button>
+																	</button>
-																	</div>
 																</div>
 															</div>
 														</div>
+													</div>
 												</div>
 											</div>
 										</div>

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

@@ -108,3 +108,7 @@ $mat-card-header-size: 40px !default;
 		color: #129D99;
 	}
 }
+
+.selected {
+	background-color: #18488f3d;
+}

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
@@ -23,6 +23,8 @@ import { nameof } from 'ts-simple-nameof';
 import { AnnotationStatusArrayEditorModel } from './annotation-status-editor.model';
 import { StatusService } from '@annotation-service/services/http/status.service';
 import { InternalStatus } from '@annotation-service/core/enum/internal-status.enum';
+import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
+import { MatSelectionList } from '@angular/material/list';
 
 @Component({
 	selector: 'app-annotation-dialog',
@@ -54,6 +56,8 @@ export class AnnotationDialogComponent extends BaseComponent {
 	public listingStatuses: Status[] = [];
 	public dmpUsersMentionNames: string[] = [];
 
+	@ViewChild('annotationStatus') annotationStatus: MatSelectionList;
+
 
 	constructor(
 		public dialogRef: MatDialogRef<AnnotationDialogComponent>,
@@ -67,6 +71,7 @@ export class AnnotationDialogComponent extends BaseComponent {
 		public enumUtils: EnumUtils,
 		private statusService: StatusService,
 		protected routerUtils: RouterUtilsService,
+		private configurationService: ConfigurationService,
 	) {
 		super();
 		this.entityId = data.entityId;
@@ -200,6 +205,10 @@ export class AnnotationDialogComponent extends BaseComponent {
 		return !isNullOrUndefined(text) && text.length !== 0 && text !== '';
 	}
 
+	getStatusIcon(status?: InternalStatus): string {
+		return this.configurationService.extendedInternalStatus?.getIcon(status);
+	}
+
 	public isFormValid(value: any) {
 		return value.valid;
 	}
@@ -306,15 +315,9 @@ export class AnnotationDialogComponent extends BaseComponent {
 		}
 	}
 
-	changeIcon(formArray: UntypedFormArray, annotationId: Guid){
+	setAnnotationStatus(formArray: UntypedFormArray, annotationId: Guid, selectedStatusId: Guid) {
-		const control = this.getAnnotationStatusControl(formArray, annotationId);
+		const annotationForm = this.getAnnotationStatusFormControl(formArray, annotationId);
-		if (control == null) return;
+		annotationForm.get('statusId').setValue(selectedStatusId);
-		const status = this.listingStatuses.find(x => x.id === control.get('statusId').value) || null;
-		if (status && status.internalStatus != null && status.internalStatus == InternalStatus.Resolved){
-			control.get('isCheckIcon').patchValue(true);
-		} else {
-			control.get('isCheckIcon').patchValue(false);
-		}
 	}
 	
 	canSaveAnnotationStatus(formArray: UntypedFormArray, annotationId: Guid): boolean{

dmp-frontend/src/assets/config/config.json

@@ -26,7 +26,13 @@
 	},
 	"annotation_service": {
 		"enabled": true,
-		"address": "http://localhost:8087/api/"
+		"address": "http://localhost:8087/api/",
+		"extendedInternalStatus": [
+			{
+				"internalStatus": "0",
+				"icon": "check"
+			}
+		]
 	},
 	"logging": {
 		"enabled": true,