mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-07 01:54:15 +00:00
[CST-3782] Make changes in order to remove template row in form's repeatable fields
This commit is contained in:
@@ -13,6 +13,11 @@
|
||||
<ng-container #componentViewContainer></ng-container>
|
||||
<small *ngIf="hasHint && (model.repeatable === false || context?.index === 0) && (!showErrorMessages || errorMessages.length === 0)"
|
||||
class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
|
||||
<!-- -->
|
||||
<small *ngIf="(model.type !== 'GROUP') && !asBootstrapFormGroup
|
||||
&& (context?.index > 0 && context?.index < context?.context?.groups?.length - 1)
|
||||
&& (!showErrorMessages || errorMessages.length === 0)"
|
||||
class="text-muted" [ngClass]="getClass('element', 'hint')"> </small>
|
||||
|
||||
<div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
|
||||
<small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
|
||||
@@ -32,7 +37,7 @@
|
||||
<option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div *ngIf="isRelationship" class="col-auto text-center" [class.invisible]="context?.index > 0">
|
||||
<div *ngIf="isRelationship" class="col-auto text-center" [class.d-none]="context?.index > 0">
|
||||
<button class="btn btn-secondary"
|
||||
type="button"
|
||||
ngbTooltip="{{'form.lookup-help' | translate}}"
|
||||
|
@@ -437,6 +437,10 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
|
||||
.forEach((sub) => sub.unsubscribe());
|
||||
}
|
||||
|
||||
get hasHint(): boolean {
|
||||
return isNotEmpty(this.model.hint) && this.model.hint !== ' ';
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize this.item$ based on this.model.submissionId
|
||||
*/
|
||||
|
@@ -2,44 +2,31 @@
|
||||
<div [id]="id"
|
||||
[formArrayName]="model.id"
|
||||
[ngClass]="getClass('element', 'control')">
|
||||
<div role="group"
|
||||
formGroupName="0" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
|
||||
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model.groups[0]"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: 0}"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model.groups[0]"></ng-container>
|
||||
</div>
|
||||
<div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
|
||||
<div *ngFor="let groupModel of model.groups; let idx = index"
|
||||
[ngClass]="{'pt-2 pb-2': idx > 0}" cdkDrag cdkDragHandle>
|
||||
<div [formGroupName]="idx"
|
||||
[class]="getClass('element', 'group') + ' ' + getClass('grid', 'group')"
|
||||
[ngClass]="{'d-flex align-items-center': idx > 0}"
|
||||
>
|
||||
<ng-container *ngIf="idx > 0">
|
||||
<i class="drag-icon fas fa-grip-vertical fa-fw"></i>
|
||||
|
||||
<div *ngFor="let groupModel of model.groups; let idx = index" role="group"
|
||||
[formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
|
||||
|
||||
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: idx}"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
|
||||
[bindId]="false"
|
||||
[formGroup]="group"
|
||||
[context]="groupModel"
|
||||
[group]="control.get([idx])"
|
||||
[hidden]="_model.hidden"
|
||||
[layout]="formLayout"
|
||||
[model]="_model"
|
||||
[templates]="templates"
|
||||
[ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
|
||||
(dfBlur)="onBlur($event)"
|
||||
(dfChange)="onChange($event)"
|
||||
(dfFocus)="onFocus($event)"
|
||||
(ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
|
||||
|
||||
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-template #controlContainer let-idx>
|
||||
<ds-dynamic-form-control-container *ngFor="let _model of model.groups[idx].group"
|
||||
[bindId]="false"
|
||||
[context]="model.groups[idx]"
|
||||
[group]="control.get([idx])"
|
||||
[hidden]="_model.hidden"
|
||||
[layout]="formLayout"
|
||||
[model]="_model"
|
||||
[templates]="templates"
|
||||
[ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
|
||||
(dfBlur)="update($event, idx)"
|
||||
(dfChange)="update($event, idx)"
|
||||
(dfFocus)="onFocus($event)"
|
||||
(ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
|
||||
</ng-template>
|
||||
|
@@ -3,16 +3,17 @@ import { Component, EventEmitter, Input, Output, QueryList } from '@angular/core
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import {
|
||||
DynamicFormArrayComponent,
|
||||
DynamicFormArrayModel,
|
||||
DynamicFormControlCustomEvent,
|
||||
DynamicFormControlEvent,
|
||||
DynamicFormControlEventType,
|
||||
DynamicFormControlLayout, DynamicFormLayout,
|
||||
DynamicFormControlLayout,
|
||||
DynamicFormLayout,
|
||||
DynamicFormLayoutService,
|
||||
DynamicFormValidationService,
|
||||
DynamicTemplateDirective
|
||||
} from '@ng-dynamic-forms/core';
|
||||
import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
|
||||
import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
|
||||
import { hasValue } from '../../../../../empty.util';
|
||||
|
||||
@Component({
|
||||
@@ -25,7 +26,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
|
||||
@Input() formLayout: DynamicFormLayout;
|
||||
@Input() group: FormGroup;
|
||||
@Input() layout: DynamicFormControlLayout;
|
||||
@Input() model: DynamicRowArrayModel;
|
||||
@Input() model: DynamicFormArrayModel;
|
||||
@Input() templates: QueryList<DynamicTemplateDirective> | undefined;
|
||||
|
||||
/* tslint:disable:no-output-rename */
|
||||
|
@@ -28,7 +28,7 @@ import { DynamicRelationGroupModel } from './ds-dynamic-form-ui/models/relation-
|
||||
import { DynamicRowArrayModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
|
||||
import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-input.model';
|
||||
import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
|
||||
import { isNgbDateStruct } from '../../date.util';
|
||||
import { dateToString, isNgbDateStruct } from '../../date.util';
|
||||
import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-ui/ds-dynamic-form-constants';
|
||||
import { CONCAT_GROUP_SUFFIX, DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
|
||||
|
||||
@@ -123,6 +123,8 @@ export class FormBuilderService extends DynamicFormService {
|
||||
const controlLanguage = (controlModel as DsDynamicInputModel).hasLanguages ? (controlModel as DsDynamicInputModel).language : null;
|
||||
if (isString(controlValue)) {
|
||||
return new FormFieldMetadataValueObject(controlValue, controlLanguage, null, null, controlModelIndex);
|
||||
} else if (isNgbDateStruct(controlValue)) {
|
||||
return new FormFieldMetadataValueObject(dateToString(controlValue));
|
||||
} else if (isObject(controlValue)) {
|
||||
const authority = (controlValue as any).authority || (controlValue as any).id || null;
|
||||
const place = controlModelIndex || (controlValue as any).place;
|
||||
@@ -240,7 +242,7 @@ export class FormBuilderService extends DynamicFormService {
|
||||
}
|
||||
|
||||
hasArrayGroupValue(model: DynamicFormControlModel): boolean {
|
||||
return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG || model.type === DYNAMIC_FORM_CONTROL_TYPE_ARRAY);
|
||||
return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG);
|
||||
}
|
||||
|
||||
hasMappedGroupValue(model: DynamicFormControlModel): boolean {
|
||||
@@ -310,7 +312,7 @@ export class FormBuilderService extends DynamicFormService {
|
||||
let tempModel: DynamicFormControlModel;
|
||||
|
||||
if (this.isArrayGroup(model as DynamicFormControlModel)) {
|
||||
return hasValue((model as any).metadataKey) ? (model as any).metadataKey : model.index.toString();
|
||||
return model.index.toString();
|
||||
} else if (this.isModelInCustomGroup(model as DynamicFormControlModel)) {
|
||||
tempModel = (model as any).parent;
|
||||
} else {
|
||||
|
@@ -58,8 +58,20 @@ export class ConcatFieldParser extends FieldParser {
|
||||
concatGroup.group = [];
|
||||
concatGroup.separator = this.separator;
|
||||
|
||||
const input1ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_FIRST_INPUT_SUFFIX, false, false);
|
||||
const input2ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_SECOND_INPUT_SUFFIX, false, false);
|
||||
const input1ModelConfig: DynamicInputModelConfig = this.initModel(
|
||||
id + CONCAT_FIRST_INPUT_SUFFIX,
|
||||
false,
|
||||
true,
|
||||
true,
|
||||
false
|
||||
);
|
||||
const input2ModelConfig: DynamicInputModelConfig = this.initModel(
|
||||
id + CONCAT_SECOND_INPUT_SUFFIX,
|
||||
false,
|
||||
true,
|
||||
true,
|
||||
false
|
||||
);
|
||||
|
||||
if (hasNoValue(concatGroup.hint) && hasValue(input1ModelConfig.hint) && hasNoValue(input2ModelConfig.hint)) {
|
||||
concatGroup.hint = input1ModelConfig.hint;
|
||||
|
@@ -15,6 +15,8 @@ import { setLayout } from './parser.utils';
|
||||
import { ParserOptions } from './parser-options';
|
||||
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';
|
||||
|
||||
export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
|
||||
export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
|
||||
@@ -37,9 +39,8 @@ export abstract class FieldParser {
|
||||
|
||||
public parse() {
|
||||
if (((this.getInitValueCount() > 1 && !this.configData.repeatable) || (this.configData.repeatable))
|
||||
&& (this.configData.input.type !== 'list')
|
||||
&& (this.configData.input.type !== 'tag')
|
||||
&& (this.configData.input.type !== 'group')
|
||||
&& (this.configData.input.type !== ParserType.List)
|
||||
&& (this.configData.input.type !== ParserType.Tag)
|
||||
) {
|
||||
let arrayCounter = 0;
|
||||
let fieldArrayCounter = 0;
|
||||
@@ -66,22 +67,16 @@ export abstract class FieldParser {
|
||||
model = this.modelFactory();
|
||||
arrayCounter++;
|
||||
} else {
|
||||
const fieldArrayOfValueLength = this.getInitValueCount(arrayCounter - 1);
|
||||
const fieldArrayOfValueLenght = this.getInitValueCount(arrayCounter - 1);
|
||||
let fieldValue = null;
|
||||
if (fieldArrayOfValueLength > 0) {
|
||||
if (fieldArrayCounter === 0) {
|
||||
fieldValue = '';
|
||||
} else {
|
||||
fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter - 1);
|
||||
}
|
||||
fieldArrayCounter++;
|
||||
if (fieldArrayCounter === fieldArrayOfValueLength + 1) {
|
||||
if (fieldArrayOfValueLenght > 0) {
|
||||
fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter++);
|
||||
if (fieldArrayCounter === fieldArrayOfValueLenght) {
|
||||
fieldArrayCounter = 0;
|
||||
arrayCounter++;
|
||||
}
|
||||
}
|
||||
model = this.modelFactory(fieldValue, false);
|
||||
model.id = `${model.id}_${fieldArrayCounter}`;
|
||||
}
|
||||
setLayout(model, 'element', 'host', 'col');
|
||||
if (model.hasLanguages || isNotEmpty(model.relationship)) {
|
||||
@@ -130,7 +125,9 @@ export abstract class FieldParser {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof fieldValue === 'object') {
|
||||
if (isNgbDateStruct(fieldValue)) {
|
||||
modelConfig.value = fieldValue;
|
||||
} else if (typeof fieldValue === 'object') {
|
||||
modelConfig.metadataValue = fieldValue;
|
||||
modelConfig.language = fieldValue.language;
|
||||
modelConfig.place = fieldValue.place;
|
||||
@@ -210,10 +207,9 @@ export abstract class FieldParser {
|
||||
}
|
||||
|
||||
protected getInitArrayIndex() {
|
||||
let fieldCount = 0;
|
||||
const fieldIds: any = this.getAllFieldIds();
|
||||
if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds)) {
|
||||
fieldCount = this.initFormValues[fieldIds].filter((value) => hasValue(value) && hasValue(value.value)).length;
|
||||
return this.initFormValues[fieldIds].length;
|
||||
} else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
|
||||
let counter = 0;
|
||||
fieldIds.forEach((id) => {
|
||||
@@ -221,9 +217,10 @@ export abstract class FieldParser {
|
||||
counter = counter + this.initFormValues[id].length;
|
||||
}
|
||||
});
|
||||
fieldCount = counter;
|
||||
return (counter === 0) ? 1 : counter;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
return (fieldCount === 0) ? 1 : fieldCount + 1;
|
||||
}
|
||||
|
||||
protected getFieldId(): string {
|
||||
@@ -245,7 +242,7 @@ export abstract class FieldParser {
|
||||
}
|
||||
}
|
||||
|
||||
protected initModel(id?: string, label = true, setErrors = true, hint = true) {
|
||||
protected initModel(id?: string, label = true, labelEmpty = false, setErrors = true, hint = true) {
|
||||
|
||||
const controlModel = Object.create(null);
|
||||
|
||||
@@ -316,7 +313,7 @@ export abstract class FieldParser {
|
||||
|
||||
protected setLabel(controlModel, label = true, labelEmpty = false) {
|
||||
if (label) {
|
||||
controlModel.label = this.configData.label;
|
||||
controlModel.label = (labelEmpty) ? ' ' : this.configData.label;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -59,7 +59,7 @@ export class OneboxFieldParser extends FieldParser {
|
||||
this.setLabel(inputSelectGroup, label);
|
||||
inputSelectGroup.required = isNotEmpty(this.configData.mandatory);
|
||||
|
||||
const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false);
|
||||
const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false, false);
|
||||
selectModelConfig.hint = null;
|
||||
this.setOptions(selectModelConfig);
|
||||
if (isNotEmpty(fieldValue)) {
|
||||
@@ -67,7 +67,7 @@ export class OneboxFieldParser extends FieldParser {
|
||||
}
|
||||
inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
|
||||
|
||||
const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false);
|
||||
const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
|
||||
inputModelConfig.hint = null;
|
||||
this.setValues(inputModelConfig, fieldValue);
|
||||
inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
|
||||
|
@@ -1,57 +1,62 @@
|
||||
<div class="container-fluid">
|
||||
<form class="form-horizontal" [formGroup]="formGroup">
|
||||
<form class="form-horizontal" [formGroup]="formGroup">
|
||||
|
||||
<ds-dynamic-form
|
||||
[formId]="formId"
|
||||
[formGroup]="formGroup"
|
||||
[formModel]="formModel"
|
||||
[formLayout]="formLayout"
|
||||
(change)="$event.stopPropagation();"
|
||||
(dfBlur)="onBlur($event)"
|
||||
(dfChange)="onChange($event)"
|
||||
(dfFocus)="onFocus($event)">
|
||||
<ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
|
||||
<!--Array with repeatable items-->
|
||||
<div *ngIf="context.hasSelectableMetadata && !context.notRepeatable && index < 1"
|
||||
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
|
||||
<div class="btn-group" role="group" aria-label="Add and remove button">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
[disabled]="isItemReadOnly(context, index)"
|
||||
(click)="insertItem($event, group.context, group.index)">
|
||||
<span aria-label="Add">{{'form.add' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Array with non repeatable items - Only delete button-->
|
||||
<div *ngIf="context.notRepeatable && group.context.groups.length > 1 || index > 0 && !(group.group[0]?.value?.isVirtual || group.group[0]?.metadataValue?.isVirtual)"
|
||||
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
|
||||
<div class="btn-group" role="group" aria-label="Remove button">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
(click)="removeItem($event, context, index)"
|
||||
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
|
||||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</ds-dynamic-form>
|
||||
|
||||
<ng-content></ng-content>
|
||||
|
||||
<div *ngIf="displaySubmit">
|
||||
<hr>
|
||||
<div class="form-group row">
|
||||
<div class="col text-right">
|
||||
<button type="reset" class="btn btn-default" (click)="reset()">{{cancelLabel | translate}}</button>
|
||||
<button type="submit" class="btn btn-primary" (click)="onSubmit()"
|
||||
[disabled]="!(isValid() | async)">{{submitLabel | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ds-dynamic-form
|
||||
[formId]="formId"
|
||||
[formGroup]="formGroup"
|
||||
[formModel]="formModel"
|
||||
[formLayout]="formLayout"
|
||||
(change)="$event.stopPropagation();"
|
||||
(dfBlur)="onBlur($event)"
|
||||
(dfChange)="onChange($event)"
|
||||
(dfFocus)="onFocus($event)">
|
||||
<ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
|
||||
<!--Array with repeatable items-->
|
||||
<div *ngIf="(!context.notRepeatable)"
|
||||
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
|
||||
<div class="btn-group" role="group" aria-label="Add and remove button">
|
||||
<button *ngIf="index === 0" type="button" class="btn btn-secondary"
|
||||
[disabled]="isItemReadOnly(context, index)"
|
||||
(click)="insertItem($event, group.context, group.context.groups.length)">
|
||||
<span attr.aria-label="{{'form.add' | translate}}">{{'form.add' | translate}}</span>
|
||||
</button>
|
||||
<button *ngIf="index > 0" type="button" class="btn btn-secondary"
|
||||
(click)="removeItem($event, context, index)"
|
||||
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
|
||||
<span attr.aria-label="{{'form.remove' | translate}}">{{'form.remove' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!--Array with non repeatable items - Only delete button-->
|
||||
<div *ngIf="context.notRepeatable && context.showButtons && group.context.groups.length > 1"
|
||||
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
|
||||
<div class="btn-group" role="group" aria-label="Remove button">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
(click)="removeItem($event, context, index)"
|
||||
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
|
||||
<span attr.aria-label="{{'form.discard' | translate}}">{{'form.discard' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</ds-dynamic-form>
|
||||
|
||||
<ng-content></ng-content>
|
||||
|
||||
<div *ngIf="displaySubmit">
|
||||
<hr>
|
||||
<div class="form-group row">
|
||||
<div class="col text-right">
|
||||
<button type="reset" class="btn btn-default" (click)="reset()">{{cancelLabel | translate}}</button>
|
||||
<button type="submit" class="btn btn-primary" (click)="onSubmit()"
|
||||
[disabled]="!(isValid() | async)">{{submitLabel | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
@@ -187,7 +187,6 @@ export class FormComponent implements OnDestroy, OnInit {
|
||||
if (field) {
|
||||
const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
|
||||
this.formService.addErrorToField(field, model, error.message);
|
||||
// this.formService.validateAllFormFields(formGroup);
|
||||
this.changeDetectorRef.detectChanges();
|
||||
|
||||
}
|
||||
@@ -300,55 +299,15 @@ export class FormComponent implements OnDestroy, OnInit {
|
||||
|
||||
removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
|
||||
const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
|
||||
this.removeArrayItem.emit(this.getEvent($event, arrayContext, index - 1, 'remove'));
|
||||
this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove'));
|
||||
this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
|
||||
this.formService.changeForm(this.formId, this.formModel);
|
||||
}
|
||||
|
||||
insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
|
||||
const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
|
||||
|
||||
// First emit the new value so it can be sent to the server
|
||||
const value = formArrayControl.controls[0].value;
|
||||
const event = this.getEvent($event, arrayContext, 0, 'add');
|
||||
this.addArrayItem.emit(event);
|
||||
this.change.emit(event);
|
||||
|
||||
// Next: update the UI so the user sees the changes
|
||||
// without having to wait for the server's reply
|
||||
|
||||
// add an empty new field at the bottom
|
||||
this.formBuilderService.addFormArrayGroup(formArrayControl, arrayContext);
|
||||
|
||||
// set that field to the new value
|
||||
const model = arrayContext.groups[arrayContext.groups.length - 1].group[0] as any;
|
||||
if (model.hasAuthority) {
|
||||
model.value = Object.values(value)[0];
|
||||
const ctrl = formArrayControl.controls[formArrayControl.length - 1];
|
||||
const ctrlValue = ctrl.value;
|
||||
const ctrlValueKey = Object.keys(ctrlValue)[0];
|
||||
ctrl.setValue({
|
||||
[ctrlValueKey]: model.value
|
||||
});
|
||||
} else if (this.formBuilderService.isQualdropGroup(model)) {
|
||||
const ctrl = formArrayControl.controls[formArrayControl.length - 1];
|
||||
const ctrlKey = Object.keys(ctrl.value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
|
||||
const valueKey = Object.keys(value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
|
||||
if (ctrlKey !== valueKey) {
|
||||
Object.defineProperty(value, ctrlKey, Object.getOwnPropertyDescriptor(value, valueKey));
|
||||
delete value[valueKey];
|
||||
}
|
||||
ctrl.setValue(value);
|
||||
} else {
|
||||
formArrayControl.controls[formArrayControl.length - 1].setValue(value);
|
||||
}
|
||||
|
||||
// Clear the topmost field by removing the filled out version and inserting a new, empty version.
|
||||
// Doing it this way ensures an empty value of the correct type is added without a bunch of ifs here
|
||||
this.formBuilderService.removeFormArrayGroup(0, formArrayControl, arrayContext);
|
||||
this.formBuilderService.insertFormArrayGroup(0, formArrayControl, arrayContext);
|
||||
|
||||
// Tell the formService that it should rerender.
|
||||
this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
|
||||
this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
|
||||
this.formService.changeForm(this.formId, this.formModel);
|
||||
}
|
||||
|
||||
|
@@ -9,15 +9,7 @@ import {
|
||||
DynamicFormControlModel
|
||||
} from '@ng-dynamic-forms/core';
|
||||
|
||||
import {
|
||||
hasNoValue,
|
||||
hasValue,
|
||||
isNotEmpty,
|
||||
isNotNull,
|
||||
isNotUndefined,
|
||||
isNull,
|
||||
isUndefined
|
||||
} from '../../../shared/empty.util';
|
||||
import { hasValue, isNotEmpty, isNotNull, isNotUndefined, isNull, isUndefined } from '../../../shared/empty.util';
|
||||
import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
|
||||
import { FormFieldPreviousValueObject } from '../../../shared/form/builder/models/form-field-previous-value-object';
|
||||
import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
|
||||
@@ -30,6 +22,7 @@ import { DynamicQualdropModel } from '../../../shared/form/builder/ds-dynamic-fo
|
||||
import { DynamicRelationGroupModel } from '../../../shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model';
|
||||
import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
|
||||
import { deepClone } from 'fast-json-patch';
|
||||
import { dateToString, isNgbDateStruct } from '../../../shared/date.util';
|
||||
|
||||
/**
|
||||
* The service handling all form section operations
|
||||
@@ -71,9 +64,6 @@ export class SectionFormOperationsService {
|
||||
case 'change':
|
||||
this.dispatchOperationsFromChangeEvent(pathCombiner, event, previousValue, hasStoredValue);
|
||||
break;
|
||||
case 'add':
|
||||
this.dispatchOperationsFromAddEvent(pathCombiner, event);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@@ -245,6 +235,8 @@ export class SectionFormOperationsService {
|
||||
// Language without Authority (input, textArea)
|
||||
fieldValue = new FormFieldMetadataValueObject(value, language);
|
||||
}
|
||||
} else if (isNgbDateStruct(value)) {
|
||||
fieldValue = new FormFieldMetadataValueObject(dateToString(value));
|
||||
} else if (value instanceof FormFieldLanguageValueObject || value instanceof VocabularyEntry
|
||||
|| value instanceof VocabularyEntryDetail || isObject(value)) {
|
||||
fieldValue = value;
|
||||
@@ -295,7 +287,7 @@ export class SectionFormOperationsService {
|
||||
const value = this.getFieldValueFromChangeEvent(event);
|
||||
if (this.formBuilder.isQualdropGroup(event.model as DynamicFormControlModel)) {
|
||||
this.dispatchOperationsFromMap(this.getQualdropValueMap(event), pathCombiner, event, previousValue);
|
||||
} else if (isNotEmpty(value)) {
|
||||
} else if (isNotEmpty(value) && (value instanceof FormFieldMetadataValueObject && value.hasValue())) {
|
||||
this.operationsBuilder.remove(pathCombiner.getPath(path));
|
||||
}
|
||||
}
|
||||
@@ -362,7 +354,7 @@ export class SectionFormOperationsService {
|
||||
} else if (this.formBuilder.isRelationGroup(event.model)) {
|
||||
// It's a relation model
|
||||
this.dispatchOperationsFromMap(this.getValueMap(value), pathCombiner, event, previousValue);
|
||||
} else if (this.formBuilder.hasArrayGroupValue(event.model) && hasNoValue((event.model as any).relationshipConfig)) {
|
||||
} else if (this.formBuilder.hasArrayGroupValue(event.model)) {
|
||||
// Model has as value an array, so dispatch an add operation with entire block of values
|
||||
this.operationsBuilder.add(
|
||||
pathCombiner.getPath(segmentedPath),
|
||||
@@ -398,13 +390,22 @@ export class SectionFormOperationsService {
|
||||
value);
|
||||
}
|
||||
previousValue.delete();
|
||||
} else if (value.hasValue() && (isUndefined(this.getArrayIndexFromEvent(event))
|
||||
|| this.getArrayIndexFromEvent(event) === 0)) {
|
||||
} else if (value.hasValue()) {
|
||||
// Here model has no previous value but a new one
|
||||
if (isUndefined(this.getArrayIndexFromEvent(event))
|
||||
|| this.getArrayIndexFromEvent(event) === 0) {
|
||||
// Model is single field or is part of an array model but is the first item,
|
||||
// so dispatch an add operation that initialize the values of a specific metadata
|
||||
this.operationsBuilder.add(
|
||||
pathCombiner.getPath(segmentedPath),
|
||||
value, true);
|
||||
} else {
|
||||
// Model is part of an array model but is not the first item,
|
||||
// so dispatch an add operation that add a value to an existent metadata
|
||||
this.operationsBuilder.add(
|
||||
pathCombiner.getPath(path),
|
||||
value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -1267,6 +1267,8 @@
|
||||
|
||||
"form.clear-help": "Click here to remove the selected value",
|
||||
|
||||
"form.discard": "Discard",
|
||||
|
||||
"form.edit": "Edit",
|
||||
|
||||
"form.edit-help": "Click here to edit the selected value",
|
||||
|
Reference in New Issue
Block a user