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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -4,14 +4,14 @@
<div class="col-12"> <div class="col-12">
<mat-chip-grid #chipList ngDefaultControl class="chip-list"> <mat-chip-grid #chipList ngDefaultControl class="chip-list">
<ng-container *ngIf="value as values;"> <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-container *ngIf="getSelectedItem(value) as selectedItem;">
<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ <ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
item: selectedItem item: selectedItem
}" /> }" />
<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span> <span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
</ng-container> </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> <mat-icon>cancel</mat-icon>
</button> </button>
</mat-chip-row> </mat-chip-row>

13
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

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

3
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
View File

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

45
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts
View File

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

2
dmp-frontend/src/assets/i18n/en.json
View File

@ -1453,7 +1453,7 @@
"DESCRIPTION": "Description", "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.", "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", "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": { "FIELDS": {
"TITLE": "Title of Plan", "TITLE": "Title of Plan",
"DESCRIPTION": "Description", "DESCRIPTION": "Description",