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

#8738 - Disable input fields in finalised DMPs/datasets. 

1. dataset-editor.component.html & form-composite-field.component.html & form-field.component.html & form-section.component.html: Added [editable] parameter input in <rich-text-editor-component> or [disabled] attribute in inputs, buttons, <ngx-dropzone> and <mat-select> to disable then when form is disabled & do not add "pointer" class when form is disabled.
2. form-field.component.ts: For DatasetIdentifier and Validation view styles, when removing and re-adding control, check if form was disabled and disable it again.
3. form-section.component.ts: In method "addMultipleField()", return without doing anything when form is disabled.
This commit is contained in:
Konstantina Galouni 2023-06-16 14:36:24 +03:00
parent eb4f1d23e1
commit 1a2a93a95f
6 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,8 @@
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'" <rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
[placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'"
[wrapperClasses]="'full-width editor ' + [wrapperClasses]="'full-width editor ' +
((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')"> ((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')"
[editable]="!formGroup.get('description').disabled">
</rich-text-editor-component> </rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper"> <div [class]="(formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>

6
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
View File

@ -10,7 +10,7 @@
<app-form-field class="align-self-center col" [form]="form.get('fields')['controls'][0]" <app-form-field class="align-self-center col" [form]="form.get('fields')['controls'][0]"
[datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field> [datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
<div *ngIf="showDelete" class="col-auto align-self-center"> <div *ngIf="showDelete" class="col-auto align-self-center">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();"> <button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="form.get('fields')['controls'][0].disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
@ -64,10 +64,10 @@
<td *ngIf="this.visibilityRulesService.checkElementVisibility(this.fieldFormGroup.get('id').value)" class="text-wrap">{{fieldFormGroup.getRawValue() | fieldValue | translate}}</td> <td *ngIf="this.visibilityRulesService.checkElementVisibility(this.fieldFormGroup.get('id').value)" class="text-wrap">{{fieldFormGroup.getRawValue() | fieldValue | translate}}</td>
</ng-container> </ng-container>
<td class="actions"> <td class="actions">
<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()"> <button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editCompositeFieldInDialog()" [disabled]="form.disabled">
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
<button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();"> <button *ngIf="showDelete" mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();" [disabled]="form.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</td> </td>

20
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html
View File

@ -114,7 +114,8 @@
[placeholder]="form.get('data').value.label" [placeholder]="form.get('data').value.label"
[required]="form.get('validationRequired').value" [required]="form.get('validationRequired').value"
[wrapperClasses]="'full-width editor ' + [wrapperClasses]="'full-width editor ' +
((form.get('validationRequired').value && form.get('value').touched && form.get('value').hasError('required')) ? 'required' : '')"> ((form.get('validationRequired').value && form.get('value').touched && form.get('value').hasError('required')) ? 'required' : '')"
[editable]="!form.get('value').disabled">
</rich-text-editor-component> </rich-text-editor-component>
<div [class]="(form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched) ? 'visible' : 'invisible'" class="col-12"> <div [class]="(form.get('value')['errors'] && form.get('value').hasError('required') && form.get('value').touched) ? 'visible' : 'invisible'" class="col-12">
<div class="mat-form-field form-field-subscript-wrapper"> <div class="mat-form-field form-field-subscript-wrapper">
@ -125,7 +126,7 @@
<ng-container *ngSwitchCase="datasetProfileFieldViewStyleEnum.Upload"> <ng-container *ngSwitchCase="datasetProfileFieldViewStyleEnum.Upload">
<div class="col-12 d-flex justify-content-center"> <div class="col-12 d-flex justify-content-center">
<ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)" <ngx-dropzone #drop class="drop-file col-12" (change)="fileChangeEvent($event, true)"
[multiple]="false" [accept]="typesToString()"> [multiple]="false" [accept]="typesToString()" [disabled]="form.get('value').disabled">
<ngx-dropzone-preview *ngIf="form.value.value && form.value.value.name" class="file-preview" <ngx-dropzone-preview *ngIf="form.value.value && form.value.value.name" class="file-preview"
[removable]="true" (removed)="onRemove()"> [removable]="true" (removed)="onRemove()">
<ngx-dropzone-label class="file-label">{{ form.value.value.name }}</ngx-dropzone-label> <ngx-dropzone-label class="file-label">{{ form.value.value.name }}</ngx-dropzone-label>
@ -134,12 +135,13 @@
</div> </div>
<div class="col-12 d-flex justify-content-center attach-btn"> <div class="col-12 d-flex justify-content-center attach-btn">
<button *ngIf="!form.value.value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn" <button *ngIf="!form.value.value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"
[disabled]="!!form.value.value"> [disabled]="!!form.value.value || form.get('value').disabled">
<mat-icon class="mr-2">upload</mat-icon> <mat-icon class="mr-2">upload</mat-icon>
<mat-label>{{ (form.get('data').value.label | translate)}}</mat-label> <mat-label>{{ (form.get('data').value.label | translate)}}</mat-label>
</button> </button>
<button *ngIf="form.value.value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn"> <button *ngIf="form.value.value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn"
[disabled]="form.get('value').disabled">
<mat-icon class="mr-2">download</mat-icon> <mat-icon class="mr-2">download</mat-icon>
<mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label> <mat-label>{{ "TYPES.DATASET-PROFILE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
</button> </button>
@ -422,12 +424,14 @@
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatasetIdentifier" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatasetIdentifier" class="col-12">
<div class="row" *ngIf="datasetIdInitialized"> <div class="row" *ngIf="datasetIdInitialized">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value"> <input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}"
[required]="form.get('validationRequired').value" [disabled]="form.get('value').disabled">
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (form.get('validationRequired').value? ' *': '')"> <mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (form.get('validationRequired').value? ' *': '')"
[disabled]="form.get('value').disabled">
<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value"> <mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
{{ type.name }} {{ type.name }}
</mat-option> </mat-option>
@ -451,7 +455,7 @@
</div> </div>
<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Validation" class="col-12"> <div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Validation" class="col-12">
<div class="row"> <div class="row align-items-baseline">
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value"> <input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{(form.get('data').value.label) + (form.get('validationRequired').value? ' *': '')}}" [required]="form.get('validationRequired').value">
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
@ -467,7 +471,7 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div class="col-md-2"> <div class="col-md-2">
<button type="button" mat-button class="lightblue-btn" (click)="validateId()">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button> <button type="button" mat-button class="lightblue-btn" (click)="validateId()" [disabled]="form.get('value').disabled">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}} <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-error> </mat-error>
</div> </div>

8
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts
View File

@ -314,8 +314,12 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
break; break;
case DatasetProfileFieldViewStyle.DatasetIdentifier: case DatasetProfileFieldViewStyle.DatasetIdentifier:
const value = this.form.get('value').value; const value = this.form.get('value').value;
const disabled = this.form.disabled;
this.form.removeControl('value'); this.form.removeControl('value');
this.form.addControl('value', new DatasetIdModel(value).buildForm()); this.form.addControl('value', new DatasetIdModel(value).buildForm());
if(disabled) {
this.form.disable();
}
this.datasetIdInitialized = true; this.datasetIdInitialized = true;
break; break;
case DatasetProfileFieldViewStyle.Currency: case DatasetProfileFieldViewStyle.Currency:
@ -329,8 +333,12 @@ export class FormFieldComponent extends BaseComponent implements OnInit {
break; break;
case DatasetProfileFieldViewStyle.Validation: case DatasetProfileFieldViewStyle.Validation:
const value1 = this.form.get('value').value; const value1 = this.form.get('value').value;
const disabled1 = this.form.disabled;
this.form.removeControl('value'); this.form.removeControl('value');
this.form.addControl('value', new DatasetIdModel(value1).buildForm()); this.form.addControl('value', new DatasetIdModel(value1).buildForm());
if(disabled1) {
this.form.disable();
}
//this.datasetIdInitialized = true; //this.datasetIdInitialized = true;
break; break;
} }

10
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
View File

@ -32,7 +32,7 @@
</div> </div>
<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)" <div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
class="col-12 mt-1 ml-0 mr-0 addOneFieldButton"> class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)"> <span class="d-inline-flex align-items-center" [ngClass]="compositeFieldFormGroup.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
<button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled"> <button mat-icon-button color="primary" [disabled]="compositeFieldFormGroup.disabled">
<mat-icon>add_circle</mat-icon> <mat-icon>add_circle</mat-icon>
</button> </button>
@ -44,7 +44,7 @@
<!-- <input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">--> <!-- <input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">-->
<rich-text-editor-component [parentFormGroup]="compositeFieldFormGroup" [controlName]="'commentFieldValue'" <rich-text-editor-component [parentFormGroup]="compositeFieldFormGroup" [controlName]="'commentFieldValue'"
[id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate"
[wrapperClasses]="'mb-2'"> [wrapperClasses]="'mb-2'" [editable]="!compositeFieldFormGroup.get('commentFieldValue').disabled">
</rich-text-editor-component> </rich-text-editor-component>
<!-- <mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>--> <!-- <mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>-->
</div> </div>
@ -116,7 +116,7 @@
</ng-container> </ng-container>
<tr *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)"> <tr *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)">
<td [colSpan]="visibleControls(fieldsetEntry.form.get('fields')['controls']).length + 1" class="text-center"> <td [colSpan]="visibleControls(fieldsetEntry.form.get('fields')['controls']).length + 1" class="text-center">
<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)"> <span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled"> <button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
<mat-icon>add_circle</mat-icon> <mat-icon>add_circle</mat-icon>
</button> </button>
@ -139,7 +139,7 @@
</div> </div>
<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)" <div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)"
class="col-12 mt-1 ml-0 mr-0 addOneFieldButton"> class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
<span class="pointer d-inline-flex align-items-center" (click)="addMultipleField(i)"> <span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled"> <button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
<mat-icon>add_circle</mat-icon> <mat-icon>add_circle</mat-icon>
</button> </button>
@ -151,7 +151,7 @@
<!-- <input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">--> <!-- <input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">-->
<rich-text-editor-component [parentFormGroup]="fieldsetEntry.form" [controlName]="'commentFieldValue'" <rich-text-editor-component [parentFormGroup]="fieldsetEntry.form" [controlName]="'commentFieldValue'"
[id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate"
[wrapperClasses]="' mb-2'"> [wrapperClasses]="' mb-2'" [editable]="!fieldsetEntry.form.get('commentFieldValue').disabled">
</rich-text-editor-component> </rich-text-editor-component>
<!-- <mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>--> <!-- <mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>-->
</div> </div>

3
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.ts
View File

@ -217,6 +217,9 @@ export class FormSectionComponent extends BaseComponent implements OnInit, OnCha
} }
addMultipleField(fieldsetIndex: number) { addMultipleField(fieldsetIndex: number) {
if(this.form.get('compositeFields').get('' + fieldsetIndex).disabled) {
return;
}
const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as FormGroup).getRawValue(); const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as FormGroup).getRawValue();
const multiplicityItemsArray = (<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems'))); const multiplicityItemsArray = (<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems')));