mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-13 13:03:04 +00:00
changed rendering of values
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
import { DSOResponseParsingService } from '../data/dso-response-parsing.service';
|
||||
|
||||
import { ResponseParsingService } from '../data/parsing.service';
|
||||
import { RestRequest } from '../data/request.models';
|
||||
@@ -76,7 +77,9 @@ export class SubmissionResponseParsingService extends BaseResponseParsingService
|
||||
protected toCache = false;
|
||||
|
||||
constructor(@Inject(GLOBAL_CONFIG) protected EnvConfig: GlobalConfig,
|
||||
protected objectCache: ObjectCacheService) {
|
||||
protected objectCache: ObjectCacheService,
|
||||
protected dsoParser: DSOResponseParsingService
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
@@ -88,6 +91,7 @@ export class SubmissionResponseParsingService extends BaseResponseParsingService
|
||||
* @returns {RestResponse}
|
||||
*/
|
||||
parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
|
||||
this.dsoParser.parse(request, data);
|
||||
if (isNotEmpty(data.payload)
|
||||
&& isNotEmpty(data.payload._links)
|
||||
&& this.isSuccessStatus(data.statusCode)) {
|
||||
@@ -162,5 +166,4 @@ export class SubmissionResponseParsingService extends BaseResponseParsingService
|
||||
|
||||
return normalizedDefinition;
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<div class="d-flex">
|
||||
<div class="person-thumbnail pr-2">
|
||||
<ds-thumbnail [thumbnail]="dso.getThumbnail() | async" [defaultImage]="'assets/images/person-placeholder.svg'"></ds-thumbnail>
|
||||
<!-- <ds-thumbnail [thumbnail]="dso.getThumbnail() | async" [defaultImage]="'assets/images/person-placeholder.svg'"></ds-thumbnail>-->
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<ds-person-input-suggestions [suggestions]="allSuggestions" [(ngModel)]="selectedName" (clickSuggestion)="select($event)" (submitSuggestion)="selectCustom($event)"></ds-person-input-suggestions>
|
||||
|
@@ -1,41 +0,0 @@
|
||||
<div class="form-group"
|
||||
[formGroup]="group">
|
||||
<ds-dynamic-form-control-container
|
||||
*ngFor="let field of model.group"
|
||||
[formId]="formId"
|
||||
[group]="group"
|
||||
[hasErrorMessaging]="field.hasErrorMessages"
|
||||
[hidden]="field.hidden"
|
||||
[layout]="layout"
|
||||
[model]="field"
|
||||
[templates]="inputTemplateList"
|
||||
(dfBlur)="blur.emit($event)"
|
||||
(dfChange)="change.emit($event)"
|
||||
(dfFocus)="focus.emit($event)"></ds-dynamic-form-control-container>
|
||||
<div *ngIf="hasRelationLookup" class="col-auto text-center">
|
||||
<button *ngIf="model.repeatable" class="btn btn-secondary"
|
||||
type="submit"
|
||||
ngbTooltip="{{'form.add-help' | translate}}"
|
||||
placement="top"
|
||||
(click)="addValue(); $event.stopPropagation();">{{'form.add' | translate}}
|
||||
</button>
|
||||
<button class="btn btn-secondary"
|
||||
type="submit"
|
||||
ngbTooltip="{{'form.lookup-help' | translate}}"
|
||||
placement="top"
|
||||
(click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="hasRelationLookup" class="mt-3">
|
||||
<ul class="list-unstyled" cdkDropList (cdkDropListDropped)="moveSelection($event)">
|
||||
<ds-existing-metadata-list-element cdkDrag
|
||||
*ngFor="let reorderable of reorderables; trackBy: trackReorderable"
|
||||
[reoRel]="reorderable"
|
||||
[submissionItem]="item"
|
||||
[listId]="listId"
|
||||
[metadataFields]="model.metadataFields"
|
||||
[relationshipOptions]="model.relationship">
|
||||
</ds-existing-metadata-list-element>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
@@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DsDynamicFormControlContainerWrapperComponent } from './ds-dynamic-form-control-container-wrapper.component';
|
||||
|
||||
describe('DsDynamicFormControlContainerWrapperComponent', () => {
|
||||
let component: DsDynamicFormControlContainerWrapperComponent;
|
||||
let fixture: ComponentFixture<DsDynamicFormControlContainerWrapperComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DsDynamicFormControlContainerWrapperComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DsDynamicFormControlContainerWrapperComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@@ -1,198 +0,0 @@
|
||||
import { ChangeDetectorRef, Component, ComponentFactoryResolver, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
|
||||
import {
|
||||
DynamicFormControlContainerComponent,
|
||||
DynamicFormControlEvent,
|
||||
DynamicFormLayout,
|
||||
DynamicFormLayoutService,
|
||||
DynamicFormValidationService,
|
||||
DynamicTemplateDirective
|
||||
} from '@ng-dynamic-forms/core';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
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 { ItemDataService } from '../../../../../core/data/item-data.service';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppState } from '../../../../../app.reducer';
|
||||
import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
|
||||
import { Reorderable, ReorderableRelationship } from '../existing-metadata-list-element/existing-metadata-list-element.component';
|
||||
import { Item } from '../../../../../core/shared/item.model';
|
||||
import { hasValue } from '../../../../empty.util';
|
||||
import { getAllSucceededRemoteData, getRemoteDataPayload, getSucceededRemoteData } from '../../../../../core/shared/operators';
|
||||
import { map, startWith, switchMap } from 'rxjs/operators';
|
||||
import { SubmissionObject } from '../../../../../core/submission/models/submission-object.model';
|
||||
import { RemoteData } from '../../../../../core/data/remote-data';
|
||||
import { PaginatedList } from '../../../../../core/data/paginated-list';
|
||||
import { Relationship } from '../../../../../core/shared/item-relationships/relationship.model';
|
||||
import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
|
||||
import { SearchResult } from '../../../../search/search-result.model';
|
||||
import { DsDynamicLookupRelationModalComponent } from '../relation-lookup-modal/dynamic-lookup-relation-modal.component';
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
|
||||
@Component({
|
||||
selector: 'ds-dynamic-form-control-container-wrapper',
|
||||
templateUrl: './ds-dynamic-form-control-container-wrapper.component.html',
|
||||
styleUrls: ['./ds-dynamic-form-control-container-wrapper.component.scss']
|
||||
})
|
||||
export class DsDynamicFormControlContainerWrapperComponent implements OnInit, OnDestroy {
|
||||
@Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
|
||||
|
||||
@Input() formId: string;
|
||||
@Input() context: any | null = null;
|
||||
@Input() group: FormGroup;
|
||||
@Input() hasErrorMessaging = false;
|
||||
@Input() layout = null as DynamicFormLayout;
|
||||
@Input() model: any;
|
||||
|
||||
reorderables$: Observable<ReorderableRelationship[]>;
|
||||
reorderables: ReorderableRelationship[];
|
||||
hasRelationLookup: boolean;
|
||||
modalRef: NgbModalRef;
|
||||
item: Item;
|
||||
listId: string;
|
||||
searchConfig: string;
|
||||
|
||||
/**
|
||||
* List of subscriptions to unsubscribe from
|
||||
*/
|
||||
private subs: Subscription[] = [];
|
||||
|
||||
/* tslint:disable:no-output-rename */
|
||||
@Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
|
||||
@Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
|
||||
@Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
|
||||
|
||||
constructor(
|
||||
protected componentFactoryResolver: ComponentFactoryResolver,
|
||||
protected layoutService: DynamicFormLayoutService,
|
||||
protected validationService: DynamicFormValidationService,
|
||||
protected translateService: TranslateService,
|
||||
private modalService: NgbModal,
|
||||
private relationService: RelationshipService,
|
||||
private selectableListService: SelectableListService,
|
||||
private itemService: ItemDataService,
|
||||
private relationshipService: RelationshipService,
|
||||
private zone: NgZone,
|
||||
private store: Store<AppState>,
|
||||
private submissionObjectService: SubmissionObjectDataService,
|
||||
private ref: ChangeDetectorRef
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.hasRelationLookup = hasValue(this.model.relationship);
|
||||
this.reorderables = [];
|
||||
if (this.hasRelationLookup) {
|
||||
this.listId = 'list-' + this.model.relationship.relationshipType;
|
||||
const item$ = this.submissionObjectService
|
||||
.findById(this.model.submissionId).pipe(
|
||||
getAllSucceededRemoteData(),
|
||||
getRemoteDataPayload(),
|
||||
switchMap((submissionObject: SubmissionObject) => (submissionObject.item as Observable<RemoteData<Item>>)
|
||||
.pipe(
|
||||
getAllSucceededRemoteData(),
|
||||
getRemoteDataPayload()
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
this.subs.push(item$.subscribe((item) => this.item = item));
|
||||
this.reorderables$ = item$.pipe(
|
||||
switchMap((item) => this.relationService.getItemRelationshipsByLabel(item, this.model.relationship.relationshipType)
|
||||
.pipe(
|
||||
getAllSucceededRemoteData(),
|
||||
getRemoteDataPayload(),
|
||||
map((relationshipList: PaginatedList<Relationship>) => relationshipList.page),
|
||||
startWith([]),
|
||||
switchMap((relationships: Relationship[]) =>
|
||||
observableCombineLatest(
|
||||
relationships.map((relationship: Relationship) =>
|
||||
relationship.leftItem.pipe(
|
||||
getSucceededRemoteData(),
|
||||
getRemoteDataPayload(),
|
||||
map((leftItem: Item) => {
|
||||
return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
|
||||
}),
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
map((relationships: ReorderableRelationship[]) =>
|
||||
relationships
|
||||
.sort((a: Reorderable, b: Reorderable) => {
|
||||
return Math.sign(a.getPlace() - b.getPlace());
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
this.subs.push(this.reorderables$.subscribe((rs) => {
|
||||
this.reorderables = rs;
|
||||
this.ref.detectChanges();
|
||||
}));
|
||||
|
||||
this.relationService.getRelatedItemsByLabel(this.item, this.model.relationship.relationshipType).pipe(
|
||||
map((items: RemoteData<PaginatedList<Item>>) => items.payload.page.map((item) => Object.assign(new ItemSearchResult(), { indexableObject: item }))),
|
||||
).subscribe((relatedItems: Array<SearchResult<Item>>) => this.selectableListService.select(this.listId, relatedItems));
|
||||
}
|
||||
}
|
||||
|
||||
openLookup() {
|
||||
this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
|
||||
size: 'lg'
|
||||
});
|
||||
const modalComp = this.modalRef.componentInstance;
|
||||
modalComp.repeatable = this.model.repeatable;
|
||||
modalComp.listId = this.listId;
|
||||
modalComp.relationshipOptions = this.model.relationship;
|
||||
modalComp.label = this.model.label;
|
||||
modalComp.metadataFields = this.model.metadataFields;
|
||||
modalComp.item = this.item;
|
||||
}
|
||||
|
||||
addValue() {
|
||||
// console.log(this.model.value);
|
||||
// const event = { type: DynamicFormControlEventType.Change, model: this.model } as any;
|
||||
// this.change.emit(event);
|
||||
}
|
||||
|
||||
moveSelection(event: CdkDragDrop<Relationship>) {
|
||||
this.zone.runOutsideAngular(() => {
|
||||
moveItemInArray(this.reorderables, event.previousIndex, event.currentIndex);
|
||||
const reorderables = this.reorderables.map((reo: Reorderable, index: number) => {
|
||||
reo.oldIndex = reo.getPlace();
|
||||
reo.newIndex = index;
|
||||
return reo;
|
||||
}
|
||||
);
|
||||
return observableCombineLatest(reorderables.map((rel: ReorderableRelationship) => {
|
||||
if (rel.oldIndex !== rel.newIndex) {
|
||||
return this.relationshipService.updatePlace(rel);
|
||||
} else {
|
||||
return observableOf(undefined);
|
||||
}
|
||||
})
|
||||
).pipe(getSucceededRemoteData()).subscribe();
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent unnecessary rerendering so fields don't lose focus
|
||||
*/
|
||||
trackReorderable(index, reorderable: Reorderable) {
|
||||
return hasValue(reorderable) ? reorderable.getId() : undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe from all subscriptions
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
this.subs
|
||||
.filter((sub) => hasValue(sub))
|
||||
.forEach((sub) => sub.unsubscribe());
|
||||
}
|
||||
}
|
@@ -1,13 +1,14 @@
|
||||
|
||||
<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
|
||||
[formGroup]="group"
|
||||
[ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
|
||||
|
||||
<label *ngIf="!isCheckbox && hasLabel"
|
||||
[for]="model.id"
|
||||
[innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
|
||||
[ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
|
||||
|
||||
<ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
|
||||
|
||||
<div [ngClass]="{'form-row': model.hasLanguages }">
|
||||
<!-- Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
|
||||
<div [ngClass]="{'form-row': model.hasLanguages || hasRelationLookup, 'd-none': hasRelationLookup && model.value}">
|
||||
<div [ngClass]="getClass('grid', 'control')">
|
||||
|
||||
<ng-container #componentViewContainer></ng-container>
|
||||
@@ -34,8 +35,41 @@
|
||||
<option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div *ngIf="hasRelationLookup" class="col-auto text-center">
|
||||
<button class="btn btn-secondary"
|
||||
type="submit"
|
||||
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="hasRelationLookup && model.value && reorderable">
|
||||
<ds-existing-metadata-list-element cdkDrag
|
||||
[reoRel]="reorderable"
|
||||
[submissionItem]="item"
|
||||
[listId]="listId"
|
||||
[metadataFields]="model.metadataFields"
|
||||
[relationshipOptions]="model.relationship">
|
||||
</ds-existing-metadata-list-element>
|
||||
</ng-container>
|
||||
<ng-content></ng-content>
|
||||
|
||||
|
||||
<!-- <div *ngIf="hasRelationLookup" class="mt-3">-->
|
||||
<!-- <ul class="list-unstyled" cdkDropList (cdkDropListDropped)="moveSelection($event)">-->
|
||||
<!-- <ds-existing-metadata-list-element cdkDrag-->
|
||||
<!-- *ngFor="let reorderable of reorderables; trackBy: trackReorderable"-->
|
||||
<!-- [reoRel]="reorderable"-->
|
||||
<!-- [submissionItem]="item"-->
|
||||
<!-- [listId]="listId"-->
|
||||
<!-- [metadataFields]="model.metadataFields"-->
|
||||
<!-- [relationshipOptions]="model.relationship">-->
|
||||
<!-- </ds-existing-metadata-list-element>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
|
@@ -1,12 +1,14 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectionStrategy, ChangeDetectorRef,
|
||||
Component,
|
||||
ComponentFactoryResolver,
|
||||
ContentChildren,
|
||||
EventEmitter,
|
||||
Input,
|
||||
NgZone,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
QueryList,
|
||||
SimpleChanges,
|
||||
@@ -48,6 +50,10 @@ import {
|
||||
DynamicNGBootstrapTimePickerComponent
|
||||
} from '@ng-dynamic-forms/ui-ng-bootstrap';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import {
|
||||
Reorderable,
|
||||
ReorderableRelationship
|
||||
} from './existing-metadata-list-element/existing-metadata-list-element.component';
|
||||
|
||||
import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model';
|
||||
import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
|
||||
@@ -56,7 +62,7 @@ import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/dat
|
||||
import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP } from './models/lookup/dynamic-lookup.model';
|
||||
import { DynamicListCheckboxGroupModel } from './models/list/dynamic-list-checkbox-group.model';
|
||||
import { DynamicListRadioGroupModel } from './models/list/dynamic-list-radio-group.model';
|
||||
import { isNotEmpty, isNotUndefined } from '../../../empty.util';
|
||||
import { hasValue, isNotEmpty, isNotUndefined } from '../../../empty.util';
|
||||
import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME } from './models/lookup/dynamic-lookup-name.model';
|
||||
import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component';
|
||||
import { DsDatePickerComponent } from './models/date-picker/date-picker.component';
|
||||
@@ -69,12 +75,30 @@ import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-a
|
||||
import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
|
||||
import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-group/dynamic-relation-group.model';
|
||||
import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, startWith, switchMap, take } from 'rxjs/operators';
|
||||
import { combineLatest as observableCombineLatest, Observable, of as observableOf, 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, getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
|
||||
import { RemoteData } from '../../../../core/data/remote-data';
|
||||
import { Item } from '../../../../core/shared/item.model';
|
||||
import { ItemDataService } from '../../../../core/data/item-data.service';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppState } from '../../../../app.reducer';
|
||||
import { SubmissionObjectDataService } from '../../../../core/submission/submission-object-data.service';
|
||||
import { SubmissionObject } from '../../../../core/submission/models/submission-object.model';
|
||||
import { PaginatedList } from '../../../../core/data/paginated-list';
|
||||
import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { Relationship } from '../../../../core/shared/item-relationships/relationship.model';
|
||||
import { MetadataValue } from '../../../../core/shared/metadata.models';
|
||||
import { DynamicRowArrayModel } from './models/ds-dynamic-row-array-model';
|
||||
|
||||
export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {
|
||||
switch (model.type) {
|
||||
@@ -145,7 +169,7 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<
|
||||
templateUrl: './ds-dynamic-form-control-container.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.Default
|
||||
})
|
||||
export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent implements OnChanges {
|
||||
export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent implements OnInit, OnChanges, OnDestroy {
|
||||
@ContentChildren(DynamicTemplateDirective) contentTemplateList: QueryList<DynamicTemplateDirective>;
|
||||
// tslint:disable-next-line:no-input-rename
|
||||
@Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
|
||||
@@ -158,6 +182,18 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
|
||||
@Input() hasErrorMessaging = false;
|
||||
@Input() layout = null as DynamicFormLayout;
|
||||
@Input() model: any;
|
||||
reorderable$: Observable<ReorderableRelationship>;
|
||||
reorderable: ReorderableRelationship;
|
||||
hasRelationLookup: boolean;
|
||||
modalRef: NgbModalRef;
|
||||
item: Item;
|
||||
listId: string;
|
||||
searchConfig: string;
|
||||
|
||||
/**
|
||||
* List of subscriptions to unsubscribe from
|
||||
*/
|
||||
private subs: Subscription[] = [];
|
||||
|
||||
/* tslint:disable:no-output-rename */
|
||||
@Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
|
||||
@@ -178,11 +214,97 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
|
||||
protected layoutService: DynamicFormLayoutService,
|
||||
protected validationService: DynamicFormValidationService,
|
||||
protected translateService: TranslateService,
|
||||
private modalService: NgbModal,
|
||||
private relationService: RelationshipService,
|
||||
private selectableListService: SelectableListService,
|
||||
private itemService: ItemDataService,
|
||||
private relationshipService: RelationshipService,
|
||||
private zone: NgZone,
|
||||
private store: Store<AppState>,
|
||||
private submissionObjectService: SubmissionObjectDataService,
|
||||
private ref: ChangeDetectorRef
|
||||
) {
|
||||
super(componentFactoryResolver, layoutService, validationService);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.model.type === 'ARRAY') {
|
||||
console.log((this.model as DynamicRowArrayModel).get(1));
|
||||
}
|
||||
this.hasRelationLookup = hasValue(this.model.relationship);
|
||||
if (this.hasRelationLookup) {
|
||||
|
||||
this.listId = 'list-' + this.model.relationship.relationshipType;
|
||||
const item$ = this.submissionObjectService
|
||||
.findById(this.model.submissionId).pipe(
|
||||
getAllSucceededRemoteData(),
|
||||
getRemoteDataPayload(),
|
||||
switchMap((submissionObject: SubmissionObject) => (submissionObject.item as Observable<RemoteData<Item>>)
|
||||
.pipe(
|
||||
getAllSucceededRemoteData(),
|
||||
getRemoteDataPayload()
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
this.subs.push(item$.subscribe((item) => this.item = item));
|
||||
const value = Object.assign(new MetadataValue(), this.model.value);
|
||||
if (hasValue(value) && value.isVirtual) {
|
||||
this.reorderable$ = this.relationshipService.findById(value.virtualValue)
|
||||
.pipe(
|
||||
getAllSucceededRemoteData(),
|
||||
getRemoteDataPayload(),
|
||||
switchMap((relationship: Relationship) =>
|
||||
relationship.leftItem.pipe(
|
||||
getSucceededRemoteData(),
|
||||
getRemoteDataPayload(),
|
||||
map((leftItem: Item) => {
|
||||
return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
|
||||
}),
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
this.subs.push(this.reorderable$.subscribe((rs) => {
|
||||
this.reorderable = rs;
|
||||
this.ref.detectChanges();
|
||||
}));
|
||||
|
||||
}
|
||||
// this.reorderable$ =
|
||||
// item$.pipe(
|
||||
// switchMap((item) => this.relationService.getItemRelationshipsByLabel(item, this.model.relationship.relationshipType)
|
||||
// .pipe(
|
||||
// getAllSucceededRemoteData(),
|
||||
// getRemoteDataPayload(),
|
||||
// map((relationshipList: PaginatedList<Relationship>) => relationshipList.page),
|
||||
// startWith([]),
|
||||
// switchMap((relationships: Relationship[]) =>
|
||||
// observableCombineLatest(
|
||||
// relationships.map((relationship: Relationship) =>
|
||||
// relationship.leftItem.pipe(
|
||||
// getSucceededRemoteData(),
|
||||
// getRemoteDataPayload(),
|
||||
// map((leftItem: Item) => {
|
||||
// return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
|
||||
// }),
|
||||
// )
|
||||
// ))),
|
||||
// map((relationships: ReorderableRelationship[]) =>
|
||||
// relationships
|
||||
// .sort((a: Reorderable, b: Reorderable) => {
|
||||
// return Math.sign(a.getPlace() - b.getPlace());
|
||||
// })
|
||||
// )
|
||||
// )
|
||||
// )
|
||||
// );
|
||||
|
||||
this.relationService.getRelatedItemsByLabel(this.item, this.model.relationship.relationshipType).pipe(
|
||||
map((items: RemoteData<PaginatedList<Item>>) => items.payload.page.map((item) => Object.assign(new ItemSearchResult(), { indexableObject: item }))),
|
||||
).subscribe((relatedItems: Array<SearchResult<Item>>) => this.selectableListService.select(this.listId, relatedItems));
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes) {
|
||||
@@ -224,4 +346,53 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
|
||||
public hasResultsSelected(): Observable<boolean> {
|
||||
return this.model.value.pipe(map((list: Array<SearchResult<DSpaceObject>>) => isNotEmpty(list)));
|
||||
}
|
||||
|
||||
openLookup() {
|
||||
this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
|
||||
size: 'lg'
|
||||
});
|
||||
const modalComp = this.modalRef.componentInstance;
|
||||
modalComp.repeatable = this.model.repeatable;
|
||||
modalComp.listId = this.listId;
|
||||
modalComp.relationshipOptions = this.model.relationship;
|
||||
modalComp.label = this.model.label;
|
||||
modalComp.metadataFields = this.model.metadataFields;
|
||||
modalComp.item = this.item;
|
||||
}
|
||||
|
||||
// moveSelection(event: CdkDragDrop<Relationship>) {
|
||||
// this.zone.runOutsideAngular(() => {
|
||||
// moveItemInArray(this.reorderables, event.previousIndex, event.currentIndex);
|
||||
// const reorderables = this.reorderables.map((reo: Reorderable, index: number) => {
|
||||
// reo.oldIndex = reo.getPlace();
|
||||
// reo.newIndex = index;
|
||||
// return reo;
|
||||
// }
|
||||
// );
|
||||
// return observableCombineLatest(reorderables.map((rel: ReorderableRelationship) => {
|
||||
// if (rel.oldIndex !== rel.newIndex) {
|
||||
// return this.relationshipService.updatePlace(rel);
|
||||
// } else {
|
||||
// return observableOf(undefined);
|
||||
// }
|
||||
// })
|
||||
// ).pipe(getSucceededRemoteData()).subscribe();
|
||||
// })
|
||||
// }
|
||||
|
||||
/**
|
||||
* Unsubscribe from all subscriptions
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
this.subs
|
||||
.filter((sub) => hasValue(sub))
|
||||
.forEach((sub) => sub.unsubscribe());
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent unnecessary rerendering so fields don't lose focus
|
||||
*/
|
||||
trackReorderable(index, reorderable: Reorderable) {
|
||||
return hasValue(reorderable) ? reorderable.getId() : undefined;
|
||||
}
|
||||
}
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<ds-dynamic-form-control-container-wrapper *ngFor="let model of formModel; trackBy: trackByFn"
|
||||
<ds-dynamic-form-control-container *ngFor="let model of formModel; trackBy: trackByFn"
|
||||
[formId]="formId"
|
||||
[group]="formGroup"
|
||||
[hasErrorMessaging]="model.hasErrorMessages"
|
||||
@@ -8,5 +8,5 @@
|
||||
[ngClass]="[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]"
|
||||
[templates]="templates"
|
||||
(dfBlur)="onEvent($event, 'blur')"
|
||||
(dfChange)="onEvent($event, 'change'); test($event);"
|
||||
(dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container-wrapper>
|
||||
(dfChange)="onEvent($event, 'change')"
|
||||
(dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container>
|
||||
|
@@ -14,7 +14,6 @@ import { SelectableListService } from '../../../../object-list/selectable-list/s
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppState } from '../../../../../app.reducer';
|
||||
import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
|
||||
import { Metadata } from '../../../../../core/shared/metadata.utils';
|
||||
|
||||
export abstract class Reorderable {
|
||||
constructor(public oldIndex?: number, public newIndex?: number) {
|
||||
|
@@ -44,19 +44,18 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
|
||||
this.required = config.required;
|
||||
this.metadataFields = config.metadataFields;
|
||||
this.submissionId = config.submissionId;
|
||||
|
||||
this.valueUpdates = new Subject<string>();
|
||||
this.valueUpdates.subscribe((value: string) => this.value = value);
|
||||
}
|
||||
|
||||
get value() {
|
||||
const firstValue = (this.get(0) as DsDynamicInputModel).value;
|
||||
const secondValue = (this.get(1) as DsDynamicInputModel).value;
|
||||
const firstValue = (this.get(0) as DsDynamicInputModel).value as any;
|
||||
const secondValue = (this.get(1) as DsDynamicInputModel).value as any;
|
||||
|
||||
if (isNotEmpty(firstValue) && isNotEmpty(secondValue)) {
|
||||
return new FormFieldMetadataValueObject(firstValue + this.separator + secondValue);
|
||||
return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value + this.separator + secondValue.value);
|
||||
} else if (isNotEmpty(firstValue)) {
|
||||
return new FormFieldMetadataValueObject(firstValue);
|
||||
return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
@@ -71,12 +70,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
|
||||
} else {
|
||||
tempValue = value.value;
|
||||
}
|
||||
|
||||
if (tempValue.includes(this.separator)) {
|
||||
values = tempValue.split(this.separator);
|
||||
} else {
|
||||
values = [tempValue, null];
|
||||
}
|
||||
values = [...tempValue.split(this.separator), null].map((v) => Object.assign(new FormFieldMetadataValueObject(), value, { value: v }));
|
||||
|
||||
if (values[0]) {
|
||||
(this.get(0) as DsDynamicInputModel).valueUpdates.next(values[0]);
|
||||
|
@@ -14,6 +14,7 @@ import { setLayout } from './parser.utils';
|
||||
import { AuthorityOptions } from '../../../../core/integration/models/authority-options.model';
|
||||
import { ParserOptions } from './parser-options';
|
||||
import { RelationshipOptions } from '../models/relationship-options.model';
|
||||
import { relationship } from '../../../../core/cache/builders/build-decorators';
|
||||
|
||||
export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
|
||||
export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
|
||||
@@ -39,7 +40,6 @@ export abstract class FieldParser {
|
||||
&& (this.configData.input.type !== 'list')
|
||||
&& (this.configData.input.type !== 'tag')
|
||||
&& (this.configData.input.type !== 'group')
|
||||
&& isEmpty(this.configData.selectableRelationship)
|
||||
) {
|
||||
let arrayCounter = 0;
|
||||
let fieldArrayCounter = 0;
|
||||
@@ -48,10 +48,11 @@ export abstract class FieldParser {
|
||||
id: uniqueId() + '_array',
|
||||
label: this.configData.label,
|
||||
initialCount: this.getInitArrayIndex(),
|
||||
notRepeatable: !this.configData.repeatable,
|
||||
notRepeatable: !this.configData.repeatable || hasValue(this.configData.selectableRelationship),
|
||||
required: isNotEmpty(this.configData.mandatory),
|
||||
groupFactory: () => {
|
||||
let model;
|
||||
console.log(arrayCounter);
|
||||
if ((arrayCounter === 0)) {
|
||||
model = this.modelFactory();
|
||||
arrayCounter++;
|
||||
@@ -85,7 +86,7 @@ export abstract class FieldParser {
|
||||
|
||||
} else {
|
||||
const model = this.modelFactory(this.getInitFieldValue());
|
||||
if (model.hasLanguages) {
|
||||
if (model.hasLanguages || isNotEmpty(model.relationship)) {
|
||||
setLayout(model, 'grid', 'control', 'col');
|
||||
}
|
||||
return model;
|
||||
|
@@ -48,10 +48,7 @@ import { LogOutComponent } from './log-out/log-out.component';
|
||||
import { FormComponent } from './form/form.component';
|
||||
import { DsDynamicTypeaheadComponent } from './form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component';
|
||||
import { DsDynamicScrollableDropdownComponent } from './form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
|
||||
import {
|
||||
DsDynamicFormControlContainerComponent,
|
||||
dsDynamicFormControlMapFn
|
||||
} from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
|
||||
import { DsDynamicFormControlContainerComponent, dsDynamicFormControlMapFn } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
|
||||
import { DsDynamicFormComponent } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form.component';
|
||||
import { DYNAMIC_FORM_CONTROL_MAP_FN, DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
|
||||
import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
|
||||
@@ -176,7 +173,6 @@ import { MetadataRepresentationListComponent } from '../+item-page/simple/metada
|
||||
import { SelectableListItemControlComponent } from './object-collection/shared/selectable-list-item-control/selectable-list-item-control.component';
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
import { ExistingMetadataListElementComponent } from './form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component';
|
||||
import { DsDynamicFormControlContainerWrapperComponent } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container-wrapper/ds-dynamic-form-control-container-wrapper.component';
|
||||
|
||||
const MODULES = [
|
||||
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
|
||||
@@ -438,8 +434,7 @@ const DIRECTIVES = [
|
||||
...ENTRY_COMPONENTS,
|
||||
...SHARED_ITEM_PAGE_COMPONENTS,
|
||||
PublicationSearchResultListElementComponent,
|
||||
ExistingMetadataListElementComponent,
|
||||
DsDynamicFormControlContainerWrapperComponent
|
||||
ExistingMetadataListElementComponent
|
||||
],
|
||||
providers: [
|
||||
...PROVIDERS
|
||||
|
Reference in New Issue
Block a user