[CST-3782] Make changes in order to remove template row in form's repeatable fields

This commit is contained in:
Giuseppe Digilio
2021-02-17 16:10:22 +01:00
parent 942dd2e72e
commit 151b02aeec
12 changed files with 154 additions and 179 deletions

View File

@@ -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')">&nbsp;</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}}"

View File

@@ -437,6 +437,10 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
.forEach((sub) => sub.unsubscribe());
}
get hasHint(): boolean {
return isNotEmpty(this.model.hint) && this.model.hint !== '&nbsp;';
}
/**
* Initialize this.item$ based on this.model.submissionId
*/

View File

@@ -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>
</div>
</div>
</ng-container>
<ng-template #controlContainer let-idx>
<ds-dynamic-form-control-container *ngFor="let _model of model.groups[idx].group"
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
[bindId]="false"
[context]="model.groups[idx]"
[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)="update($event, idx)"
(dfChange)="update($event, idx)"
(dfBlur)="onBlur($event)"
(dfChange)="onChange($event)"
(dfFocus)="onFocus($event)"
(ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
</ng-template>
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
</div>
</div>
</ng-container>

View File

@@ -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 */

View File

@@ -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 {

View File

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

View File

@@ -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) ? '&nbsp;' : this.configData.label;
}
}

View File

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

View File

@@ -12,25 +12,30 @@
(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"
<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 type="button" class="btn btn-secondary"
<button *ngIf="index === 0" 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>
(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>
<!--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)"
<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)">
<i class="fas fa-trash" aria-hidden="true"></i>
<span attr.aria-label="{{'form.discard' | translate}}">{{'form.discard' | translate}}</span>
</button>
</div>
</div>

View File

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

View File

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

View File

@@ -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",