hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-12 04:23:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

[DURACOM-152] Fixed read-only visibility for submission form fields

Browse Source
This commit is contained in:
Alisa Ismailati
2023-06-07 18:08:21 +02:00
parent 829b111663
commit 5331b43a62
10 changed files with 67 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts
View File

@@ -55,6 +55,7 @@ export class DsDynamicInputModel extends DynamicInputModel {
this.metadataFields = config.metadataFields;
this.hint = config.hint;
this.readOnly = config.readOnly;
this.disabled = config.readOnly;
this.value = config.value;
this.relationship = config.relationship;
this.submissionId = config.submissionId;

2
src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
View File

@@ -39,6 +39,7 @@
[ngbTypeahead]="search"
[placeholder]="model.placeholder"
[readonly]="model.readOnly"
[disabled]="model.readOnly"
[resultTemplate]="rt"
[type]="model.inputType"
[(ngModel)]="currentValue"
@@ -63,6 +64,7 @@
[name]="model.name"
[placeholder]="model.placeholder"
[readonly]="true"
[disabled]="model.readOnly"
[type]="model.inputType"
[value]="currentValue?.display"
(focus)="onFocus($event)"

3
src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
View File

@@ -216,6 +216,9 @@ export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent imple
* @param event The click event fired
*/
openTree(event) {
if (this.model.readOnly) {
return;
}
event.preventDefault();
event.stopImmediatePropagation();
this.subs.push(this.vocabulary$.pipe(

5
src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
View File

@@ -3,7 +3,9 @@
role="combobox"
[attr.aria-label]="model.label"
[attr.aria-owns]="'combobox_' + id + '_listbox'">
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
<i *ngIf="!model.readOnly" ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
aria-hidden="true"></i>
<i *ngIf="model.readOnly" class="dropdown-toggle position-absolute toggle-icon"
aria-hidden="true"></i>
<input class="form-control"
[attr.aria-controls]="'combobox_' + id + '_listbox'"
@@ -15,6 +17,7 @@
[id]="id"
[name]="model.name"
[readonly]="true"
[disabled]="model.readOnly"
[type]="model.inputType"
[value]="(currentValue | async)"
(blur)="onBlur($event)"

4
src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss
View File

@@ -32,3 +32,7 @@
.scrollable-dropdown-input[readonly]{
background-color: #fff;
}
.toggle-icon {
padding: 0.7rem 0.7rem 0 0.7rem;
}

4
src/app/shared/form/builder/models/form-field.model.ts
View File

@@ -1,3 +1,4 @@
import { SectionVisibility } from './../../../../submission/objects/section-visibility.model';
import { autoserialize } from 'cerialize';
import { LanguageCode } from './form-field-language-value.model';
@@ -124,4 +125,7 @@ export class FormFieldModel {
*/
@autoserialize
value: any;
@autoserialize
visibility: SectionVisibility;
}

6
src/app/shared/form/builder/parsers/concat-field-parser.ts
View File

@@ -19,6 +19,8 @@ import {
SUBMISSION_ID
} from './field-parser';
import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
import { VisibilityType } from '../../../../submission/sections/visibility-type';
import isEqual from 'lodash/isEqual';
export class ConcatFieldParser extends FieldParser {
@@ -83,6 +85,10 @@ export class ConcatFieldParser extends FieldParser {
input1ModelConfig.required = true;
}
if (isNotEmpty(this.configData.visibility) && isEqual(this.configData.visibility.main, VisibilityType.READONLY)) {
concatGroup.disabled = true;
}
if (isNotEmpty(this.firstPlaceholder)) {
input1ModelConfig.placeholder = this.firstPlaceholder;
}

17
src/app/shared/form/builder/parsers/field-parser.ts
View File

@@ -1,3 +1,5 @@
import { SectionVisibility } from './../../../../submission/objects/section-visibility.model';
import { VisibilityType } from './../../../../submission/sections/visibility-type';
import { Inject, InjectionToken } from '@angular/core';
import uniqueId from 'lodash/uniqueId';
@@ -280,8 +282,8 @@ export abstract class FieldParser {
controlModel.id = (this.fieldId).replace(/\./g, '_');
// Set read only option
controlModel.readOnly = this.parserOptions.readOnly;
controlModel.disabled = this.parserOptions.readOnly;
controlModel.readOnly = this.parserOptions.readOnly || this.isFieldReadOnly(this.configData.visibility, this.parserOptions.submissionScope);
controlModel.disabled = controlModel.readOnly;
if (hasValue(this.configData.selectableRelationship)) {
controlModel.relationship = Object.assign(new RelationshipOptions(), this.configData.selectableRelationship);
}
@@ -319,6 +321,17 @@ export abstract class FieldParser {
return controlModel;
}
/**
* Check if a field is read-only with the given scope
* @param visibility
* @param submissionScope
*/
private isFieldReadOnly(visibility: SectionVisibility, submissionScope: string) {
return isNotEmpty(submissionScope)
&& isNotEmpty(visibility)
&& visibility.main === VisibilityType.READONLY;
}
/**
* Get the type bind values from the REST data for a specific field
* The return value is any[] in the method signature but in reality it's

11
src/app/shared/form/builder/parsers/onebox-field-parser.ts
View File

@@ -59,19 +59,20 @@ export class OneboxFieldParser extends FieldParser {
this.setLabel(inputSelectGroup, label);
inputSelectGroup.required = isNotEmpty(this.configData.mandatory);
const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
inputModelConfig.hint = null;
this.setValues(inputModelConfig, fieldValue);
const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false, false);
selectModelConfig.hint = null;
this.setOptions(selectModelConfig);
if (isNotEmpty(fieldValue)) {
selectModelConfig.value = fieldValue.metadata;
}
inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
inputModelConfig.hint = null;
this.setValues(inputModelConfig, fieldValue);
selectModelConfig.disabled = inputModelConfig.readOnly;
inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
inputSelectGroup.group.push(new DsDynamicInputModel(inputModelConfig, clsInput));
return new DynamicQualdropModel(inputSelectGroup, clsGroup);

25
src/app/shared/form/builder/parsers/row-parser.ts
View File

@@ -1,9 +1,10 @@
import { SectionVisibility } from './../../../../submission/objects/section-visibility.model';
import { Injectable, Injector } from '@angular/core';
import { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core';
import uniqueId from 'lodash/uniqueId';
import { isEmpty } from '../../../empty.util';
import { isEmpty, isNotEmpty } from '../../../empty.util';
import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
import { FormFieldModel } from '../models/form-field.model';
import { CONFIG_DATA, FieldParser, INIT_FORM_VALUES, PARSER_OPTIONS, SUBMISSION_ID } from './field-parser';
@@ -12,6 +13,7 @@ import { ParserOptions } from './parser-options';
import { ParserType } from './parser-type';
import { setLayout } from './parser.utils';
import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from '../ds-dynamic-form-ui/ds-dynamic-form-constants';
import { VisibilityType } from '../../../../submission/sections/visibility-type';
export const ROW_ID_PREFIX = 'df-row-group-config-';
@@ -118,15 +120,30 @@ export class RowParser {
return parsedResult;
}
checksFieldScope(fieldScope, submissionScope) {
return (isEmpty(fieldScope) || isEmpty(submissionScope) || fieldScope === submissionScope);
checksFieldScope(fieldScope, submissionScope, visibility: SectionVisibility) {
return (isEmpty(fieldScope) || !this.isHidden(visibility, fieldScope, submissionScope));
}
/**
* Check if the field is hidden or not, based on the visibility and the submission scope
* @param visibility The visibility of the field
* @param scope the scope of the field
* @param submissionScope the scope of the submission
* @returns If the field is hidden or not
*/
private isHidden(visibility: SectionVisibility, scope: string, submissionScope: string): boolean {
return isEmpty(visibility)
|| (isNotEmpty(visibility) && visibility.main !== VisibilityType.READONLY)
&& isNotEmpty(submissionScope)
&& (isNotEmpty(scope)
&& scope !== submissionScope);
}
filterScopedFields(fields: FormFieldModel[], submissionScope): FormFieldModel[] {
const filteredFields: FormFieldModel[] = [];
fields.forEach((field: FormFieldModel) => {
// Whether field scope doesn't match the submission scope, skip it
if (this.checksFieldScope(field.scope, submissionScope)) {
if (this.checksFieldScope(field.scope, submissionScope, field.visibility)) {
filteredFields.push(field);
}
});