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 { 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;

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

@ -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>
<div class="row"> <!--pb-2-->
<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 class="col">
<div class="row h-100">
<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 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 -->
<div *ngIf="this.replyEnabledPerThread[thread]" class="row">
<div class="col-12 mt-2">
<div class="row new-reply mr-0">
<div class="col">
<mat-form-field appearance="outline" class="w-100">
<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
<!-- <mat-icon matSuffix class="material-symbols-outlined">
add_reaction
</mat-icon> -->
</mat-form-field>
</div>
<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}}">
<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
</button>
</div>
<!-- Type reply in thread -->
<div *ngIf="this.replyEnabledPerThread[thread]" class="row">
<div class="col-12 mt-2">
<div class="row new-reply mr-0">
<div class="col">
<mat-form-field appearance="outline" class="w-100">
<mat-label>{{'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}</mat-label>
<input matInput [formControl]="this.threadReplyTextsFG[thread.toString()].get('replyText')" required>
<!-- <mat-icon matSuffix class="material-symbols-outlined">
add_reaction
</mat-icon> -->
</mat-form-field>
</div>
<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}}">
<img class="paper-plane" src="/assets/images/annotations/paper-plane.png" alt="paper-plane">
</button>
</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;
}
}
.selected {
background-color: #18488f3d;
}

23
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 { 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){
const control = this.getAnnotationStatusControl(formArray, annotationId);
if (control == null) return;
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);
}
setAnnotationStatus(formArray: UntypedFormArray, annotationId: Guid, selectedStatusId: Guid) {
const annotationForm = this.getAnnotationStatusFormControl(formArray, annotationId);
annotationForm.get('statusId').setValue(selectedStatusId);
}
canSaveAnnotationStatus(formArray: UntypedFormArray, annotationId: Guid): boolean{

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

@ -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,