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

Merge pull request #2133 from alexandrevryghem/fix-missing-hints-and-required-attributes-main

Browse Source 
Fix missing hints and error messages for input-type `list` & `tag`
This commit is contained in:
Tim Donohue
2023-04-03 16:31:36 -05:00
committed by GitHub
parent 6892489156 441eac2bf4
commit afc147507c
8 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@
<ng-container #componentViewContainer></ng-container>
</div>
<small *ngIf="hasHint && ((!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)"
<small *ngIf="hasHint && (formBuilderService.hasArrayGroupValue(model) || (!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)"
class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
<!-- In case of repeatable fields show empty space for all elements except the first -->
<div *ngIf="context?.index !== null

6
src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts
View File

@@ -147,12 +147,14 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
new DynamicListCheckboxGroupModel({
id: 'checkboxList',
vocabularyOptions: vocabularyOptions,
repeatable: true
repeatable: true,
required: false,
}),
new DynamicListRadioGroupModel({
id: 'radioList',
vocabularyOptions: vocabularyOptions,
repeatable: false
repeatable: false,
required: false,
}),
new DynamicRelationGroupModel({
submissionId: '1234',

2
src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
View File

@@ -259,7 +259,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
private submissionObjectService: SubmissionObjectDataService,
private ref: ChangeDetectorRef,
private formService: FormService,
private formBuilderService: FormBuilderService,
public formBuilderService: FormBuilderService,
private submissionService: SubmissionService,
@Inject(APP_CONFIG) protected appConfig: AppConfig,
) {

13
src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
View File

@@ -15,8 +15,10 @@ export interface DynamicListCheckboxGroupModelConfig extends DynamicFormGroupMod
vocabularyOptions: VocabularyOptions;
groupLength?: number;
repeatable: boolean;
value?: any;
value?: VocabularyEntry[];
typeBindRelations?: DynamicFormControlRelation[];
required: boolean;
hint?: string;
}
export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
@@ -26,6 +28,8 @@ export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
@serializable() groupLength: number;
@serializable() _value: VocabularyEntry[];
@serializable() typeBindRelations: DynamicFormControlRelation[];
@serializable() required: boolean;
@serializable() hint: string;
isListGroup = true;
valueUpdates: Subject<any>;
@@ -36,6 +40,8 @@ export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
this.groupLength = config.groupLength || 5;
this._value = [];
this.repeatable = config.repeatable;
this.required = config.required;
this.hint = config.hint;
this.valueUpdates = new Subject<any>();
this.valueUpdates.subscribe((value: VocabularyEntry | VocabularyEntry[]) => this.value = value);
@@ -56,9 +62,8 @@ export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
if (Array.isArray(value)) {
this._value = value;
} else {
// _value is non extendible so assign it a new array
const newValue = (this.value as VocabularyEntry[]).concat([value]);
this._value = newValue;
// _value is non-extendable so assign it a new array
this._value = (this.value as VocabularyEntry[]).concat([value]);
}
}
}

9
src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
View File

@@ -6,12 +6,15 @@ import {
} from '@ng-dynamic-forms/core';
import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
import { hasValue } from '../../../../../empty.util';
import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
export interface DynamicListModelConfig extends DynamicRadioGroupModelConfig<any> {
vocabularyOptions: VocabularyOptions;
groupLength?: number;
repeatable: boolean;
value?: any;
value?: VocabularyEntry[];
required: boolean;
hint?: string;
}
export class DynamicListRadioGroupModel extends DynamicRadioGroupModel<any> {
@@ -19,6 +22,8 @@ export class DynamicListRadioGroupModel extends DynamicRadioGroupModel<any> {
@serializable() vocabularyOptions: VocabularyOptions;
@serializable() repeatable: boolean;
@serializable() groupLength: number;
@serializable() required: boolean;
@serializable() hint: string;
isListGroup = true;
constructor(config: DynamicListModelConfig, layout?: DynamicFormControlLayout) {
@@ -27,6 +32,8 @@ export class DynamicListRadioGroupModel extends DynamicRadioGroupModel<any> {
this.vocabularyOptions = config.vocabularyOptions;
this.groupLength = config.groupLength || 5;
this.repeatable = config.repeatable;
this.required = config.required;
this.hint = config.hint;
this.value = config.value;
}

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

@@ -17,7 +17,6 @@
[id]="item.id"
[formControlName]="item.id"
[name]="model.name"
[required]="model.required"
[value]="item.value"
(blur)="onBlur($event)"
(change)="onChange($event)"

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

@@ -1,6 +1,5 @@
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormGroup, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
import {
DynamicCheckboxModel,
DynamicFormControlComponent,
@@ -110,6 +109,9 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
protected setOptionsFromVocabulary() {
if (this.model.vocabularyOptions.name && this.model.vocabularyOptions.name.length > 0) {
const listGroup = this.group.controls[this.model.id] as FormGroup;
if (this.model.repeatable && this.model.required) {
listGroup.addValidators(this.hasAtLeastOneVocabularyEntry());
}
const pageInfo: PageInfo = new PageInfo({
elementsPerPage: 9999, currentPage: 1
} as PageInfo);
@@ -121,7 +123,7 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
let tempList: ListItem[] = [];
this.optionsList = entries.page;
// Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
entries.page.forEach((option, key) => {
entries.page.forEach((option: VocabularyEntry, key: number) => {
const value = option.authority || option.value;
const checked: boolean = isNotEmpty(findKey(
this.model.value,
@@ -156,4 +158,13 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
}
}
/**
* Checks if at least one {@link VocabularyEntry} has been selected.
*/
hasAtLeastOneVocabularyEntry(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
return control && control.value && Object.values(control.value).find((checked: boolean) => checked === true) ? null : this.model.errorMessages;
};
}
}

10
src/app/shared/form/builder/form-builder.service.spec.ts
View File

@@ -235,10 +235,16 @@ describe('FormBuilderService test suite', () => {
new DynamicListCheckboxGroupModel({
id: 'testCheckboxList',
vocabularyOptions: vocabularyOptions,
repeatable: true
repeatable: true,
required: false,
}),
new DynamicListRadioGroupModel({ id: 'testRadioList', vocabularyOptions: vocabularyOptions, repeatable: false }),
new DynamicListRadioGroupModel({
id: 'testRadioList',
vocabularyOptions: vocabularyOptions,
repeatable: false,
required: false,
}),
new DynamicRelationGroupModel({
submissionId,