[CST-3782] Changes in order to display add more and lookup button at the end of the repeatable fields array

This commit is contained in:
Giuseppe Digilio
2021-02-17 20:25:46 +01:00
parent d208cf16fa
commit 1901ace5a6
13 changed files with 160 additions and 84 deletions

View File

@@ -11,13 +11,12 @@
'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
<div [ngClass]="getClass('grid', 'control')">
<ng-container #componentViewContainer></ng-container>
<!-- In case of repeatable fields show hint only for first element -->
<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>
<!-- In case of repeatable fields show empty space for all elements except the first -->
<div *ngIf="context?.index > 0
&& (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
<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>
@@ -37,14 +36,6 @@
<option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
</select>
</div>
<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}}"
placement="top"
(click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
</button>
</div>
</div>
<ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
<ng-container *ngIf="value?.isVirtual">
@@ -70,6 +61,7 @@
[relationshipOptions]="model.relationship"
>
</ds-existing-relation-list-element>
<div class="clearfix w-100 mb-2"></div>
</ng-container>
<ng-content></ng-content>
</div>

View File

@@ -37,7 +37,6 @@ import {
DynamicFormControl,
DynamicFormControlContainerComponent,
DynamicFormControlEvent,
DynamicFormControlEventType,
DynamicFormControlModel,
DynamicFormLayout,
DynamicFormLayoutService,
@@ -83,18 +82,16 @@ import { find, map, startWith, switchMap, take } from 'rxjs/operators';
import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
import { SearchResult } from '../../../search/search-result.model';
import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { RelationshipService } from '../../../../core/data/relationship.service';
import { SelectableListService } from '../../../object-list/selectable-list/selectable-list.service';
import { DsDynamicDisabledComponent } from './models/disabled/dynamic-disabled.component';
import { DYNAMIC_FORM_CONTROL_TYPE_DISABLED } from './models/disabled/dynamic-disabled.model';
import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component';
import {
getAllSucceededRemoteData,
getFirstSucceededRemoteData,
getFirstSucceededRemoteDataPayload,
getPaginatedListPayload,
getRemoteDataPayload,
getFirstSucceededRemoteData
getRemoteDataPayload
} from '../../../../core/shared/operators';
import { RemoteData } from '../../../../core/data/remote-data';
import { Item } from '../../../../core/shared/item.model';
@@ -110,7 +107,6 @@ import { Collection } from '../../../../core/shared/collection.model';
import { MetadataValue, VIRTUAL_METADATA_PREFIX } from '../../../../core/shared/metadata.models';
import { FormService } from '../../form.service';
import { SelectableListState } from '../../../object-list/selectable-list/selectable-list.reducer';
import { SubmissionService } from '../../../../submission/submission.service';
import { followLink } from '../../../utils/follow-link-config.model';
import { paginatedRelationsToItems } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
import { RelationshipOptions } from '../models/relationship-options.model';
@@ -206,7 +202,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
@Input() model: any;
relationshipValue$: Observable<ReorderableRelationship>;
isRelationship: boolean;
modalRef: NgbModalRef;
item: Item;
item$: Observable<Item>;
collection: Collection;
@@ -239,7 +234,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
protected validationService: DynamicFormValidationService,
protected translateService: TranslateService,
protected relationService: DynamicFormRelationService,
private modalService: NgbModal,
private relationshipService: RelationshipService,
private selectableListService: SelectableListService,
private itemService: ItemDataService,
@@ -249,7 +243,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
private ref: ChangeDetectorRef,
private formService: FormService,
private formBuilderService: FormBuilderService,
private submissionService: SubmissionService
) {
super(ref, componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
}
@@ -264,7 +257,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
if (this.isRelationship || isWrapperAroundRelationshipList) {
const config = this.model.relationshipConfig || this.model.relationship;
const relationshipOptions = Object.assign(new RelationshipOptions(), config);
this.listId = `list-${this.model.submissionId}-${relationshipOptions.relationshipType}`;
this.setItem();
if (isWrapperAroundRelationshipList || !this.model.repeatable) {
@@ -378,45 +370,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
return this.model.value.pipe(map((list: SearchResult<DSpaceObject>[]) => isNotEmpty(list)));
}
/**
* Open a modal where the user can select relationships to be added to item being submitted
*/
openLookup() {
this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
size: 'lg'
});
const modalComp = this.modalRef.componentInstance;
if (hasValue(this.model.value) && !this.model.readOnly) {
if (typeof this.model.value === 'string') {
modalComp.query = this.model.value;
} else if (typeof this.model.value.value === 'string') {
modalComp.query = this.model.value.value;
}
}
if (hasValue(this.model.value)) {
this.model.value = '';
this.onChange({
$event: { previousIndex: 0 },
context: { index: 0 },
control: this.control,
model: this.model,
type: DynamicFormControlEventType.Change
});
}
this.submissionService.dispatchSave(this.model.submissionId);
modalComp.repeatable = this.model.repeatable;
modalComp.listId = this.listId;
modalComp.relationshipOptions = this.model.relationship;
modalComp.label = this.model.relationship.relationshipType;
modalComp.metadataFields = this.model.metadataFields;
modalComp.item = this.item;
modalComp.collection = this.collection;
modalComp.submissionId = this.model.submissionId;
}
/**
* Callback for the remove event,
* remove the current control from its array

View File

@@ -8,6 +8,7 @@
</ng-container>
</span>
<button type="button" class="btn btn-secondary"
title="{{'form.remove' | translate}}"
(click)="removeSelection()">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>

View File

@@ -14,6 +14,8 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils
import { RemoveRelationshipAction } from '../relation-lookup-modal/relationship.actions';
import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
import { of as observableOf } from 'rxjs';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateLoaderMock } from '../../../../testing/translate-loader.mock';
describe('ExistingMetadataListElementComponent', () => {
let component: ExistingMetadataListElementComponent;
@@ -65,6 +67,14 @@ describe('ExistingMetadataListElementComponent', () => {
beforeEach(waitForAsync(() => {
init();
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useClass: TranslateLoaderMock
}
})
],
declarations: [ExistingMetadataListElementComponent],
providers: [
{ provide: SelectableListService, useValue: selectionService },

View File

@@ -12,7 +12,7 @@
[ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
cdkDrag cdkDragHandle>
<!-- Item content -->
<i class="drag-icon fas fa-grip-vertical fa-fw"></i>
<i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="model.groups.length === 1"></i>
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
[bindId]="false"

View File

@@ -14,7 +14,8 @@
color: $gray-600;
margin: $btn-padding-y 0;
line-height: $btn-line-height;
text-indent: 0.5 * $spacer
text-indent: 0.5 * $spacer;
cursor: grab;
}
&:hover, &:focus {

View File

@@ -6,7 +6,8 @@
</button>
</div>
<div class="modal-body">
<ngb-tabset>
<ds-loading *ngIf="!item || !collection"></ds-loading>
<ngb-tabset *ngIf="item && collection">
<ngb-tab [title]="'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate : {count: (totalInternal$ | async)}">
<ng-template ngbTabContent>
<ds-dynamic-lookup-relation-search-tab

View File

@@ -20,6 +20,10 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils
import { createPaginatedList } from '../../../../testing/utils.test';
import { ExternalSourceService } from '../../../../../core/data/external-source.service';
import { LookupRelationService } from '../../../../../core/data/lookup-relation.service';
import { SubmissionService } from '../../../../../submission/submission.service';
import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
import { Collection } from '../../../../../core/shared/collection.model';
describe('DsDynamicLookupRelationModalComponent', () => {
let component: DsDynamicLookupRelationModalComponent;
@@ -27,6 +31,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
let item;
let item1;
let item2;
let testWSI;
let searchResult1;
let searchResult2;
let listID;
@@ -39,6 +44,8 @@ describe('DsDynamicLookupRelationModalComponent', () => {
let externalSourceService;
let lookupRelationService;
let submissionId;
let submissionService;
let submissionObjectDataService;
const externalSources = [
Object.assign(new ExternalSource(), {
@@ -54,11 +61,16 @@ describe('DsDynamicLookupRelationModalComponent', () => {
];
const totalLocal = 10;
const totalExternal = 8;
const collection: Collection = new Collection();
function init() {
item = Object.assign(new Item(), { uuid: '7680ca97-e2bd-4398-bfa7-139a8673dc42', metadata: {} });
item1 = Object.assign(new Item(), { uuid: 'e1c51c69-896d-42dc-8221-1d5f2ad5516e' });
item2 = Object.assign(new Item(), { uuid: 'c8279647-1acc-41ae-b036-951d5f65649b' });
testWSI = new WorkspaceItem();
testWSI.item = createSuccessfulRemoteDataObject$(item);
testWSI.collection = createSuccessfulRemoteDataObject$(collection);
searchResult1 = Object.assign(new ItemSearchResult(), { indexableObject: item1 });
searchResult2 = Object.assign(new ItemSearchResult(), { indexableObject: item2 });
listID = '6b0c8221-fcb4-47a8-b483-ca32363fffb3';
@@ -80,6 +92,12 @@ describe('DsDynamicLookupRelationModalComponent', () => {
getTotalLocalResults: observableOf(totalLocal),
getTotalExternalResults: observableOf(totalExternal)
});
submissionService = jasmine.createSpyObj('SubmissionService', {
dispatchSave: jasmine.createSpy('dispatchSave')
});
submissionObjectDataService = jasmine.createSpyObj('SubmissionObjectDataService', {
findById: createSuccessfulRemoteDataObject$(testWSI)
});
submissionId = '1234';
}
@@ -103,6 +121,8 @@ describe('DsDynamicLookupRelationModalComponent', () => {
provide: RelationshipService, useValue: { getNameVariant: () => observableOf(nameVariant) }
},
{ provide: RelationshipTypeService, useValue: {} },
{ provide: SubmissionService, useValue: submissionService },
{ provide: SubmissionObjectDataService, useValue: submissionObjectDataService },
{
provide: Store, useValue: {
// tslint:disable-next-line:no-empty

View File

@@ -24,6 +24,11 @@ import { PaginatedList } from '../../../../../core/data/paginated-list.model';
import { ExternalSource } from '../../../../../core/shared/external-source.model';
import { ExternalSourceService } from '../../../../../core/data/external-source.service';
import { Router } from '@angular/router';
import { followLink } from '../../../../utils/follow-link-config.model';
import { SubmissionObject } from '../../../../../core/submission/models/submission-object.model';
import { Collection } from '../../../../../core/shared/collection.model';
import { SubmissionService } from '../../../../../submission/submission.service';
import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
@Component({
selector: 'ds-dynamic-lookup-relation-modal',
@@ -113,6 +118,11 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
*/
totalExternal$: Observable<number[]>;
/**
* List of subscriptions to unsubscribe from
*/
private subs: Subscription[] = [];
constructor(
public modal: NgbActiveModal,
private selectableListService: SelectableListService,
@@ -121,14 +131,18 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
private externalSourceService: ExternalSourceService,
private lookupRelationService: LookupRelationService,
private searchConfigService: SearchConfigurationService,
private submissionService: SubmissionService,
private submissionObjectService: SubmissionObjectDataService,
private zone: NgZone,
private store: Store<AppState>,
private router: Router,
private router: Router
) {
}
ngOnInit(): void {
this.setItem();
this.submissionService.dispatchSave(this.submissionId);
this.selection$ = this.selectableListService
.getSelectableList(this.listId)
.pipe(map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : []));
@@ -182,6 +196,24 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
});
}
/**
* Initialize this.item$ based on this.model.submissionId
*/
private setItem() {
const submissionObject$ = this.submissionObjectService
.findById(this.submissionId, true, true, followLink('item'), followLink('collection')).pipe(
getAllSucceededRemoteData(),
getRemoteDataPayload()
);
const item$ = submissionObject$.pipe(switchMap((submissionObject: SubmissionObject) => (submissionObject.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload())));
const collection$ = submissionObject$.pipe(switchMap((submissionObject: SubmissionObject) => (submissionObject.collection as Observable<RemoteData<Collection>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload())));
this.subs.push(item$.subscribe((item) => this.item = item));
this.subs.push(collection$.subscribe((collection) => this.collection = collection));
}
/**
* Add a subscription updating relationships with name variants
* @param sri The search result to track name variants for
@@ -240,5 +272,8 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
ngOnDestroy() {
this.router.navigate([], {});
Object.values(this.subMap).forEach((subscription) => subscription.unsubscribe());
this.subs
.filter((sub) => hasValue(sub))
.forEach((sub) => sub.unsubscribe());
}
}

View File

@@ -12,27 +12,41 @@
(dfFocus)="onFocus($event)">
<ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
<!--Array with repeatable items-->
<div *ngIf="(!context.notRepeatable)"
<div *ngIf="(!context.notRepeatable) && !isVirtual(context, index)"
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"
<div class="btn-group" role="group" aria-label="remove button">
<button type="button" class="btn btn-secondary"
title="{{'form.remove' | translate}}"
(click)="removeItem($event, context, index)"
[disabled]="isItemReadOnly(context, index)">
<span attr.aria-label="{{'form.remove' | translate}}"><i class="fas fa-trash" aria-hidden="true"></i></span>
</button>
</div>
</div>
<div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1)" class="clearfix pl-4 w-100">
<div class="btn-group" role="group" aria-label="remove button">
<button type="button" class="ds-form-add-more btn btn-link"
title="{{'form.add' | translate}}"
[disabled]="isItemReadOnly(context, index)"
(click)="insertItem($event, group.context, group.context.groups.length)">
<span attr.aria-label="{{'form.add' | translate}}">{{'form.add' | translate}}</span>
<span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-plus"></i> {{'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 *ngIf="hasRelationship(context, index)"
type="button" class="ds-form-add-more btn btn-link"
title="{{'form.add' | translate}}"
[disabled]="isItemReadOnly(context, index)"
(click)="openLookup(context, index)">
<span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-search-plus"></i> {{'form.lookup' | translate}}</span>
</button>
</div>
</div>
<!--Array with non repeatable items - Only delete button-->
<!--Array with non repeatable items - Only discard 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"
title="{{'form.discard' | translate}}"
(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>
@@ -40,7 +54,6 @@
</div>
</div>
</ng-template>
</ds-dynamic-form>
<ng-content></ng-content>

View File

@@ -15,6 +15,11 @@
box-shadow: none !important;
}
button.ds-form-add-more:focus {
outline: none;
box-shadow: none !important;
}
.ds-form-input-value {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;

View File

@@ -2,6 +2,7 @@ import { distinctUntilChanged, filter, map } from 'rxjs/operators';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { Observable, Subscription } from 'rxjs';
import {
DynamicFormArrayModel,
DynamicFormControlEvent,
@@ -9,15 +10,16 @@ import {
DynamicFormGroupModel,
DynamicFormLayout,
} from '@ng-dynamic-forms/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { findIndex } from 'lodash';
import { FormBuilderService } from './builder/form-builder.service';
import { Observable, Subscription } from 'rxjs';
import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
import { FormService } from './form.service';
import { FormEntry, FormError } from './form.reducer';
import { QUALDROP_GROUP_SUFFIX } from './builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
const QUALDROP_GROUP_REGEX = new RegExp(`${QUALDROP_GROUP_SUFFIX}_\\d+$`);
import { DsDynamicLookupRelationModalComponent } from './builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component';
import { RelationshipOptions } from './builder/models/relationship-options.model';
import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
/**
* The default form component.
@@ -87,9 +89,9 @@ export class FormComponent implements OnDestroy, OnInit {
@Output() submitForm: EventEmitter<Observable<any>> = new EventEmitter<Observable<any>>();
/**
* An object of FormGroup type
* Reference to NgbModal
*/
// public formGroup: FormGroup;
modalRef: NgbModalRef;
/**
* Array to track all subscriptions and unsubscribe them onDestroy
@@ -99,7 +101,8 @@ export class FormComponent implements OnDestroy, OnInit {
constructor(private formService: FormService,
protected changeDetectorRef: ChangeDetectorRef,
private formBuilderService: FormBuilderService) {
private formBuilderService: FormBuilderService,
private modalService: NgbModal) {
}
/**
@@ -311,6 +314,48 @@ export class FormComponent implements OnDestroy, OnInit {
this.formService.changeForm(this.formId, this.formModel);
}
isVirtual(arrayContext: DynamicFormArrayModel, index: number) {
const context = arrayContext.groups[index];
const value: FormFieldMetadataValueObject = (context.group[0] as any).metadataValue;
return isNotEmpty(value) && value.isVirtual;
}
hasRelationship(arrayContext: DynamicFormArrayModel, index: number) {
const context = arrayContext.groups[index];
const model = context.group[0] as any;
return isNotEmpty(model) && model.hasOwnProperty('relationship') && isNotEmpty(model.relationship);
}
/**
* Open a modal where the user can select relationships to be added to item being submitted
*/
openLookup(arrayContext: DynamicFormArrayModel, index: number) {
const context = arrayContext.groups[index];
const model = context.group[0] as any;
this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
size: 'lg'
});
const modalComp = this.modalRef.componentInstance;
if (hasValue(model.value) && !model.readOnly) {
if (typeof model.value === 'string') {
modalComp.query = model.value;
} else if (typeof model.value.value === 'string') {
modalComp.query = model.value.value;
}
}
const config = model.relationshipConfig || model.relationship;
const relationshipOptions = Object.assign(new RelationshipOptions(), config);
modalComp.repeatable = model.repeatable;
modalComp.listId = `list-${model.submissionId}-${relationshipOptions.relationshipType}`;
modalComp.relationshipOptions = model.relationship;
modalComp.label = model.relationship.relationshipType;
modalComp.metadataFields = model.metadataFields;
modalComp.submissionId = model.submissionId;
}
protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent {
const context = arrayContext.groups[index];
const itemGroupModel = context.context;

View File

@@ -1257,7 +1257,7 @@
"form.add": "Add",
"form.add": "Add more",
"form.add-help": "Click here to add the current entry and to add another one",