MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

annotation dialog styling changes

This commit is contained in:
Sofia Papacharalampous 2024-07-03 17:35:48 +03:00
parent 0d569528e8
commit b53dd278f3
6 changed files with 126 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
dmp-frontend/src/app/core/model/configuration-models/extended-internal-status.model.ts Normal file
View File

@ -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;
}
}

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

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

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

@ -81,7 +81,7 @@
<!-- Parent Thread --> <!-- Parent Thread -->
<div class="col-12"> <div class="col-12">
<div class="container"> <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="col-12 pt-1">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@ -90,31 +90,37 @@
<mat-icon class="account-icon">account_circle</mat-icon> <mat-icon class="account-icon">account_circle</mat-icon>
</div> </div>
<div class="col"> <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="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> </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>
<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>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@ -134,7 +140,7 @@
<!-- Previous Replies --> <!-- Previous Replies -->
<div *ngIf="this.showRepliesPerThread[thread]" class="row"> <div *ngIf="this.showRepliesPerThread[thread]" class="row">
<div *ngFor="let annotation of annotationsPerThread[thread]; let i = index;" class="col-12"> <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="col-auto pr-0 pl-0">
<div class="side-color"></div> <div class="side-color"></div>
</div> </div>
@ -162,27 +168,27 @@
</div> </div>
</div> </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>
</div> </div>
</div> </div>
</div> </div>

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

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

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

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

8
dmp-frontend/src/assets/config/config.json
View File

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