annotation dialog styling changes
This commit is contained in:
parent
0d569528e8
commit
b53dd278f3
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,32 +90,38 @@
|
|||
<mat-icon class="account-icon">account_circle</mat-icon>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="row pt-1">
|
||||
<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>
|
||||
<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 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 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>
|
||||
</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="row">
|
||||
<div class="col-12">
|
||||
<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -108,3 +108,7 @@ $mat-card-header-size: 40px !default;
|
|||
color: #129D99;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #18488f3d;
|
||||
}
|
||||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue