canRemoveItem logic added to multiple auto complete and Teamplates control @ DmpEditor

This commit is contained in:
Diamantis Tziotzios 2024-04-24 11:35:23 +03:00
parent efe6a9616f
commit a7c49ca4af
5 changed files with 38 additions and 37 deletions

View File

@ -4,14 +4,14 @@
<div class="col-12">
<mat-chip-grid #chipList ngDefaultControl class="chip-list">
<ng-container *ngIf="value as values;">
<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="true" [ngClass]="computeClass(value)" class="chip-row">
<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="true" [ngClass]="computeClass(value)" class="chip-row" [matTooltip]="_canRemoveItemMessage(getSelectedItem(value)) | translate" >
<ng-container *ngIf="getSelectedItem(value) as selectedItem;">
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
item: selectedItem
}" />
<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
</ng-container>
<button matChipRemove *ngIf="!disabled" [disabled]="!_canRemoveItem(getSelectedItem(value))"[matTooltipDisabled]="_canRemoveItem(getSelectedItem(value))" [matTooltip]="_canRemoveItemMessage(getSelectedItem(value))" (click)="_removeSelectedItem(getSelectedItem(value), $event)">
<button matChipRemove *ngIf="!disabled && _canRemoveItem(getSelectedItem(value))" (click)="_removeSelectedItem(getSelectedItem(value), $event)">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>

View File

@ -435,16 +435,16 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
_canRemoveItem(item: any): boolean {
if(this.configuration.canRemoveItem != null) {
return this.configuration.canRemoveItem(item).canRemove;
if(item != null && this.configuration.canRemoveItem != null) {
return this.configuration.canRemoveItem(item)?.canRemove;
}
return true;
}
_canRemoveItemMessage(item: any): string {
if(this.configuration.canRemoveItem != null) {
if(item != null && this.configuration.canRemoveItem != null) {
const canRemoveResuslt = this.configuration.canRemoveItem(item);
if (canRemoveResuslt.canRemove) return canRemoveResuslt.message;
if (!canRemoveResuslt?.canRemove) return canRemoveResuslt.message;
}
return null;
}
@ -492,3 +492,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
}
}
export interface MultipleAutoCompleteCanRemoveItem {
canRemove: boolean;
message: string;
}

View File

@ -299,8 +299,7 @@
<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
<!-- <app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)"> -->
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="descriptionTemplateService.descriptionTempalteGroupMultipleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>

View File

@ -1,7 +1,7 @@
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { DatePipe } from '@angular/common';
import { Component, EventEmitter, OnInit } from '@angular/core';
import { FormArray, UntypedFormArray, UntypedFormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { FormArray, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { DescriptionStatus } from '@app/core/common/enum/description-status';
@ -17,6 +17,7 @@ import { DmpUserType } from '@app/core/common/enum/dmp-user-type';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { LockTargetType } from '@app/core/common/enum/lock-target-type';
import { AppPermission } from '@app/core/common/enum/permission.enum';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
import { DescriptionSectionPermissionResolver } from '@app/core/model/description/description';
import { DmpBlueprint, DmpBlueprintDefinitionSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
import { Dmp, DmpPersist } from '@app/core/model/dmp/dmp';
@ -35,9 +36,10 @@ import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/serv
import { UserService } from '@app/core/services/user/user.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { QueryParamsService } from '@app/core/services/utilities/query-params.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
import { MultipleAutoCompleteCanRemoveItem } from '@app/library/auto-complete/multiple/multiple-auto-complete.component';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { PopupNotificationDialogComponent } from '@app/library/notification/popup/popup-notification.component';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component';
import { BaseEditor } from '@common/base/base-editor';
import { FormService } from '@common/forms/form-service';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
@ -45,14 +47,10 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
import { FilterService } from '@common/modules/text-filter/filter-service';
import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core';
import { Observable, interval, of } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { DmpEditorModel, DmpFieldIndicator } from './dmp-editor.model';
import { DmpEditorResolver } from './dmp-editor.resolver';
import { DmpEditorService } from './dmp-editor.service';
import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
@Component({
selector: 'app-dmp-editor',
@ -402,8 +400,8 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
if (formControlBySection == null || this.formGroup == null) return false;
for (let controlName of formControlBySection.fieldControlNames) {
if (this.isFormControlValid(controlName) === false ) {
return true;
if (this.isFormControlValid(controlName) === false) {
return true;
}
}
@ -413,7 +411,7 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
isFormControlValid(controlName: string): boolean {
if (!this.formGroup?.get(controlName)) return true;
if (!this.formGroup.get(controlName).touched) return true;
return this.formGroup.get(controlName).valid;
}
@ -614,43 +612,47 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
});
}
onRemoveDescriptionTemplate(event, sectionId: Guid){
onRemoveDescriptionTemplate(event, sectionId: Guid) {
let foundDescription = false;
const descriptionsInSection = this.descriptionsInSection(sectionId);
let descriptionTemplatesInSection = this.formGroup.get('descriptionTemplates').get(sectionId.toString()).value as Guid[];
if (descriptionsInSection && descriptionsInSection.length > 0){
if (descriptionsInSection && descriptionsInSection.length > 0) {
for (let index = 0; index < descriptionsInSection.length; index++) {
const description = descriptionsInSection[index];
if(description.dmpDescriptionTemplate?.descriptionTemplateGroupId === event.groupId) {
if (description.dmpDescriptionTemplate?.descriptionTemplateGroupId === event.groupId) {
foundDescription = true;
this.uiNotificationService.snackBarNotification(this.language.instant('DMP-EDITOR.UNSUCCESSFUL-REMOVE-TEMPLATE'), SnackBarNotificationLevel.Error);
break;
}
}
}
if(foundDescription) {
if (foundDescription) {
if (descriptionTemplatesInSection) this.formGroup.get('descriptionTemplates').get(sectionId.toString()).patchValue(descriptionTemplatesInSection);
else this.formGroup.get('descriptionTemplates').get(sectionId.toString()).patchValue([]);
}
}
}
canRemoveDescriptionTemplate(item: DescriptionTemplate, sectionId){
if(item){
canRemoveDescriptionTemplate(item: DescriptionTemplate, sectionId): MultipleAutoCompleteCanRemoveItem {
if (item) {
const descriptionsInSection = this.descriptionsInSection(sectionId);
if (descriptionsInSection && descriptionsInSection.length > 0){
if (descriptionsInSection && descriptionsInSection.length > 0) {
for (let index = 0; index < descriptionsInSection.length; index++) {
const description = descriptionsInSection[index];
if(description.dmpDescriptionTemplate?.descriptionTemplateGroupId === item.groupId) {
return {canRemove: false,
if (description.dmpDescriptionTemplate?.descriptionTemplateGroupId === item.groupId) {
return {
canRemove: false,
message: 'DMP-EDITOR.UNSUCCESSFUL-REMOVE-TEMPLATE'
} as CanRemoveDescriptionTemplate
}
} as MultipleAutoCompleteCanRemoveItem
}
}
}
}
return {
canRemove: true,
} as MultipleAutoCompleteCanRemoveItem;
}
//
@ -666,8 +668,3 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
return this.languageInfoService.getLanguageInfoValues();
}
}
export interface CanRemoveDescriptionTemplate {
canRemove: boolean;
message: string;
}

View File

@ -1453,7 +1453,7 @@
"DESCRIPTION": "Description",
"NO-TEMPLATE-MESSAGE": "If you can't find a template or if you want to create a personalized template for your institution, research community or training needs, please contact us.",
"DESCRIPTION-TEMPLATES-MAX-MULTIPLICITY": "Description Templates has reached the maximun multiplicity",
"UNSUCCESSFUL-REMOVE-TEMPLATE": "Failed to remove template, one or more Descriptions of this Plan use this template",
"UNSUCCESSFUL-REMOVE-TEMPLATE": "Cannot remove template, because it's already being used by one or more Descriptions.",
"FIELDS": {
"TITLE": "Title of Plan",
"DESCRIPTION": "Description",