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

Merge pull request #2297 from 4Science/DURACOM-152

Browse Source 
Fixed read-only visibility for submission form fields
This commit is contained in:
Tim Donohue
2023-06-16 14:08:47 -05:00
committed by GitHub
parent 5c8828f6b5 42026b36d5
commit c903df80d8
16 changed files with 107 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/core/submission/submission-field-scope-type.ts Normal file
View File

@@ -0,0 +1,4 @@
export enum SubmissionFieldScopeType {
WorkspaceItem = 'SUBMISSION',
WorkflowItem = 'WORKFLOW',
}

2
src/app/core/submission/submission-scope-type.ts
View File

@@ -1,4 +1,4 @@
export enum SubmissionScopeType {
WorkspaceItem = 'WORKSPACE',
WorkflowItem = 'WORKFLOW'
WorkflowItem = 'WORKFLOW',
}

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

@@ -46,6 +46,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
@serializable() submissionId: string;
@serializable() hasSelectableMetadata: boolean;
@serializable() metadataValue: MetadataValue;
@serializable() readOnly?: boolean;
isCustomGroup = true;
valueUpdates: Subject<string>;
@@ -65,6 +66,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
this.valueUpdates = new Subject<string>();
this.valueUpdates.subscribe((value: string) => this.value = value);
this.typeBindRelations = config.typeBindRelations ? config.typeBindRelations : [];
this.readOnly = config.disabled;
}
get value() {

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;
}

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

@@ -83,6 +83,8 @@ export class ConcatFieldParser extends FieldParser {
input1ModelConfig.required = true;
}
concatGroup.disabled = input1ModelConfig.readOnly;
if (isNotEmpty(this.firstPlaceholder)) {
input1ModelConfig.placeholder = this.firstPlaceholder;
}

29
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';
@@ -22,6 +24,7 @@ import { RelationshipOptions } from '../models/relationship-options.model';
import { VocabularyOptions } from '../../../../core/submission/vocabularies/models/vocabulary-options.model';
import { ParserType } from './parser-type';
import { isNgbDateStruct } from '../../../date.util';
import { SubmissionScopeType } from '../../../../core/submission/submission-scope-type';
export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
@@ -280,8 +283,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.configData.scope, this.parserOptions.submissionScope);
controlModel.disabled = controlModel.readOnly;
if (hasValue(this.configData.selectableRelationship)) {
controlModel.relationship = Object.assign(new RelationshipOptions(), this.configData.selectableRelationship);
}
@@ -319,6 +322,28 @@ export abstract class FieldParser {
return controlModel;
}
/**
* Checks if a field is read-only with the given scope.
* The field is readonly when submissionScope is WORKSPACE and the main visibility is READONLY
* or when submissionScope is WORKFLOW and the other visibility is READONLY
* @param visibility
* @param submissionScope
*/
private isFieldReadOnly(visibility: SectionVisibility, fieldScope: string, submissionScope: string) {
return isNotEmpty(submissionScope)
&& isNotEmpty(fieldScope)
&& isNotEmpty(visibility)
&& ((
submissionScope === SubmissionScopeType.WorkspaceItem
&& visibility.main === VisibilityType.READONLY
)
||
(visibility.other === VisibilityType.READONLY
&& submissionScope === SubmissionScopeType.WorkflowItem
)
);
}
/**
* 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);

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

@@ -1,9 +1,11 @@
import { SubmissionFieldScopeType } from './../../../../core/submission/submission-field-scope-type';
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 +14,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 { SubmissionScopeType } from '../../../../core/submission/submission-scope-type';
export const ROW_ID_PREFIX = 'df-row-group-config-';
@@ -118,15 +121,37 @@ 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.
* It is hidden when we do have the scope,
* but we do not have the visibility,
* also the field scope should be different from the submissionScope.
* @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 isNotEmpty(scope)
&& (
isEmpty(visibility)
&& (
submissionScope === SubmissionScopeType.WorkspaceItem && scope !== SubmissionFieldScopeType.WorkspaceItem
||
submissionScope === SubmissionScopeType.WorkflowItem && scope !== SubmissionFieldScopeType.WorkflowItem
)
);
}
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);
}
});

2
src/app/submission/sections/form/section-form.component.spec.ts
View File

@@ -249,6 +249,8 @@ describe('SubmissionSectionFormComponent test suite', () => {
formConfigService.findByHref.and.returnValue(createSuccessfulRemoteDataObject$(testFormConfiguration));
sectionsServiceStub.getSectionData.and.returnValue(observableOf(sectionData));
sectionsServiceStub.getSectionServerErrors.and.returnValue(observableOf([]));
sectionsServiceStub.isSectionReadOnly.and.returnValue(observableOf(false));
spyOn(comp, 'initForm');
spyOn(comp, 'subscriptions');

16
src/app/submission/sections/form/section-form.component.ts
View File

@@ -119,6 +119,12 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
protected subs: Subscription[] = [];
protected submissionObject: SubmissionObject;
/**
* A flag representing if this section is readonly
*/
protected isSectionReadonly = false;
/**
* The FormComponent reference
*/
@@ -176,13 +182,15 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
this.sectionService.getSectionData(this.submissionId, this.sectionData.id, this.sectionData.sectionType),
this.submissionObjectService.findById(this.submissionId, true, false, followLink('item')).pipe(
getFirstSucceededRemoteData(),
getRemoteDataPayload())
getRemoteDataPayload()),
this.sectionService.isSectionReadOnly(this.submissionId, this.sectionData.id, this.submissionService.getSubmissionScope())
])),
take(1))
.subscribe(([sectionData, submissionObject]: [WorkspaceitemSectionFormObject, SubmissionObject]) => {
.subscribe(([sectionData, submissionObject, isSectionReadOnly]: [WorkspaceitemSectionFormObject, SubmissionObject, boolean]) => {
if (isUndefined(this.formModel)) {
// this.sectionData.errorsToShow = [];
this.submissionObject = submissionObject;
this.isSectionReadonly = isSectionReadOnly;
// Is the first loading so init form
this.initForm(sectionData);
this.sectionData.data = sectionData;
@@ -295,11 +303,11 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
this.formConfig,
this.collectionId,
sectionData,
this.submissionService.getSubmissionScope()
this.submissionService.getSubmissionScope(),
this.isSectionReadonly
);
const sectionMetadata = this.sectionService.computeSectionConfiguredMetadata(this.formConfig);
this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, sectionData, this.sectionData.errorsToShow, this.sectionData.serverValidationErrors, sectionMetadata);
} catch (e) {
const msg: string = this.translate.instant('error.submission.sections.init-form-error') + e.toString();
const sectionError: SubmissionSectionError = {

5
src/app/submission/sections/sections.service.ts
View File

@@ -334,8 +334,9 @@ export class SectionsService {
filter((sectionObj) => hasValue(sectionObj)),
map((sectionObj: SubmissionSectionObject) => {
return isNotEmpty(sectionObj.visibility)
&& sectionObj.visibility.other === 'READONLY'
&& submissionScope !== SubmissionScopeType.WorkspaceItem;
&& ((sectionObj.visibility.other === 'READONLY' && submissionScope !== SubmissionScopeType.WorkspaceItem)
|| (sectionObj.visibility.main === 'READONLY' && submissionScope === SubmissionScopeType.WorkspaceItem)
);
}),
distinctUntilChanged());
}