diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts index 241eb797efd..cb6ceae54ac 100644 --- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts +++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { Component, ComponentRef, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { LinkService } from '../../../../core/cache/builders/link.service'; import { ObjectUpdatesService } from '../../../../core/data/object-updates/object-updates.service'; @@ -215,7 +215,7 @@ export class EditRelationshipListComponent implements OnInit, OnDestroy { this.modalRef = this.modalService.open(ThemedDynamicLookupRelationModalComponent, { size: 'lg' }); - const modalComp: DynamicLookupRelationModalComponent = this.modalRef.componentInstance.compRef; + const modalComp: ThemedDynamicLookupRelationModalComponent = this.modalRef.componentInstance; modalComp.repeatable = true; modalComp.isEditRelationship = true; modalComp.listId = this.listId; @@ -232,112 +232,114 @@ export class EditRelationshipListComponent implements OnInit, OnDestroy { modalComp.collection = collection; }); - modalComp.select = (...selectableObjects: SearchResult[]) => { - selectableObjects.forEach((searchResult) => { - const relatedItem: Item = searchResult.indexableObject; + this.subs.push(modalComp.compRef$.pipe( + hasValueOperator(), + map((compRef: ComponentRef) => compRef.instance), + ).subscribe((modalComponent: DynamicLookupRelationModalComponent) => { + modalComponent.select = (...selectableObjects: SearchResult[]) => { + selectableObjects.forEach((searchResult) => { + const relatedItem: Item = searchResult.indexableObject; - const foundIndex = modalComp.toRemove.findIndex( el => el.uuid === relatedItem.uuid); + const foundIndex = modalComponent.toRemove.findIndex(el => el.uuid === relatedItem.uuid); - if (foundIndex !== -1) { - modalComp.toRemove.splice(foundIndex,1); - } else { + if (foundIndex !== -1) { + modalComponent.toRemove.splice(foundIndex, 1); + } else { - this.getRelationFromId(relatedItem) - .subscribe((relationship: Relationship) => { - if (!relationship ) { - modalComp.toAdd.push(searchResult); - } else { - const foundIndexRemove = modalComp.toRemove.findIndex( el => el.indexableObject.uuid === relatedItem.uuid); - if (foundIndexRemove !== -1) { - modalComp.toRemove.splice(foundIndexRemove,1); + this.getRelationFromId(relatedItem) + .subscribe((relationship: Relationship) => { + if (!relationship) { + modalComponent.toAdd.push(searchResult); + } else { + const foundIndexRemove = modalComponent.toRemove.findIndex(el => el.indexableObject.uuid === relatedItem.uuid); + if (foundIndexRemove !== -1) { + modalComponent.toRemove.splice(foundIndexRemove, 1); + } } - } - - this.loading$.next(true); - // emit the last page again to trigger a fieldupdates refresh - this.relationshipsRd$.next(this.relationshipsRd$.getValue()); - }); - } - }); - }; - modalComp.deselect = (...selectableObjects: SearchResult[]) => { - selectableObjects.forEach((searchResult) => { - const relatedItem: Item = searchResult.indexableObject; - - const foundIndex = modalComp.toAdd.findIndex( el => el.indexableObject.uuid === relatedItem.uuid); - - if (foundIndex !== -1) { - modalComp.toAdd.splice(foundIndex,1); - } else { - modalComp.toRemove.push(searchResult); - } - }); - }; - - - - modalComp.submitEv = () => { - - const subscriptions = []; - - modalComp.toAdd.forEach((searchResult: SearchResult) => { - const relatedItem = searchResult.indexableObject; - subscriptions.push(this.relationshipService.getNameVariant(this.listId, relatedItem.uuid).pipe( - map((nameVariant) => { - const update = { - uuid: this.relationshipType.id + '-' + searchResult.indexableObject.uuid, - nameVariant, - type: this.relationshipType, - relatedItem, - } as RelationshipIdentifiable; - this.objectUpdatesService.saveAddFieldUpdate(this.url, update); - return update; - }) - )); - }); - - modalComp.toRemove.forEach( (searchResult) => { - subscriptions.push(this.relationshipService.getNameVariant(this.listId, searchResult.indexableObjectuuid).pipe( - switchMap((nameVariant) => { - return this.getRelationFromId(searchResult.indexableObject).pipe( - map( (relationship: Relationship) => { - const update = { - uuid: relationship.id, - nameVariant, - type: this.relationshipType, - relationship, - } as RelationshipIdentifiable; - this.objectUpdatesService.saveRemoveFieldUpdate(this.url,update); - return update; - }) - ); - }) - )); - }); - - observableCombineLatest(subscriptions).subscribe( (res) => { - // Wait until the states changes since there are multiple items - setTimeout( () => { - this.submit.emit(); - },1000); - - modalComp.isPending = true; - }); - }; + this.loading$.next(true); + // emit the last page again to trigger a fieldupdates refresh + this.relationshipsRd$.next(this.relationshipsRd$.getValue()); + }); + } + }); + }; - modalComp.discardEv = () => { - modalComp.toAdd.forEach( (searchResult) => { - this.selectableListService.deselectSingle(this.listId,searchResult); - }); + modalComponent.deselect = (...selectableObjects: SearchResult[]) => { + selectableObjects.forEach((searchResult) => { + const relatedItem: Item = searchResult.indexableObject; - modalComp.toRemove.forEach( (searchResult) => { - this.selectableListService.selectSingle(this.listId,searchResult); - }); + const foundIndex = modalComponent.toAdd.findIndex(el => el.indexableObject.uuid === relatedItem.uuid); - modalComp.toAdd = []; - modalComp.toRemove = []; - }; + if (foundIndex !== -1) { + modalComponent.toAdd.splice(foundIndex, 1); + } else { + modalComponent.toRemove.push(searchResult); + } + }); + }; + + modalComponent.submitEv = () => { + const subscriptions = []; + + modalComponent.toAdd.forEach((searchResult: SearchResult) => { + const relatedItem = searchResult.indexableObject; + subscriptions.push(this.relationshipService.getNameVariant(this.listId, relatedItem.uuid).pipe( + map((nameVariant) => { + const update = { + uuid: this.relationshipType.id + '-' + searchResult.indexableObject.uuid, + nameVariant, + type: this.relationshipType, + relatedItem, + } as RelationshipIdentifiable; + this.objectUpdatesService.saveAddFieldUpdate(this.url, update); + return update; + }) + )); + }); + + modalComponent.toRemove.forEach((searchResult) => { + subscriptions.push(this.relationshipService.getNameVariant(this.listId, searchResult.indexableObjectuuid).pipe( + switchMap((nameVariant) => { + return this.getRelationFromId(searchResult.indexableObject).pipe( + map((relationship: Relationship) => { + const update = { + uuid: relationship.id, + nameVariant, + type: this.relationshipType, + relationship, + } as RelationshipIdentifiable; + this.objectUpdatesService.saveRemoveFieldUpdate(this.url, update); + return update; + }) + ); + }) + )); + }); + + observableCombineLatest(subscriptions).subscribe((res) => { + // Wait until the states changes since there are multiple items + setTimeout(() => { + this.submit.emit(); + }, 1000); + + modalComponent.isPending = true; + }); + }; + + modalComponent.discardEv = () => { + modalComponent.toAdd.forEach((searchResult) => { + this.selectableListService.deselectSingle(this.listId, searchResult); + }); + + modalComponent.toRemove.forEach((searchResult) => { + this.selectableListService.selectSingle(this.listId, searchResult); + }); + + modalComponent.toAdd = []; + modalComponent.toRemove = []; + }; + })); this.relatedEntityType$ .pipe(take(1)) diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts index 277fafa1e2b..6428253048c 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts @@ -448,7 +448,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo this.submissionService.dispatchSave(this.model.submissionId); - const modalComp = this.modalRef.componentInstance; + const modalComp: ThemedDynamicLookupRelationModalComponent = this.modalRef.componentInstance; if (hasValue(this.model.value) && !this.model.readOnly) { if (typeof this.model.value === 'string') { diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts index 5a319f3e95e..ed25157db7b 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts @@ -1,4 +1,4 @@ -import { Component, NgZone, OnDestroy, OnInit } from '@angular/core'; +import { Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core'; import { combineLatest as observableCombineLatest, Observable, Subscription, BehaviorSubject } from 'rxjs'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { hasValue, isNotEmpty } from '../../../../empty.util'; @@ -28,6 +28,7 @@ import { RemoteDataBuildService } from '../../../../../core/cache/builders/remot import { getAllSucceededRemoteDataPayload } from '../../../../../core/shared/operators'; import { followLink } from '../../../../utils/follow-link-config.model'; import { RelationshipType } from '../../../../../core/shared/item-relationships/relationship-type.model'; +import { Collection } from '../../../../../core/shared/collection.model'; @Component({ selector: 'ds-dynamic-lookup-relation-modal', @@ -49,32 +50,32 @@ export class DynamicLookupRelationModalComponent implements OnInit, OnDestroy { /** * The label to use to display i18n messages (describing the type of relationship) */ - label: string; + @Input() label: string; /** * Options for searching related items */ - relationshipOptions: RelationshipOptions; + @Input() relationshipOptions: RelationshipOptions; /** * The ID of the list to add/remove selected items to/from */ - listId: string; + @Input() listId: string; /** * The item we're adding relationships to */ - item; + @Input() item: Item; /** * The collection we're submitting an item to */ - collection; + @Input() collection: Collection; /** * Is the selection repeatable? */ - repeatable: boolean; + @Input() repeatable: boolean; /** * The list of selected items @@ -84,14 +85,14 @@ export class DynamicLookupRelationModalComponent implements OnInit, OnDestroy { /** * The context to display lists */ - context: Context; + @Input() context: Context; /** * The metadata-fields describing these relationships */ - metadataFields: string; + @Input() metadataFields: string; - query: string; + @Input() query: string; /** * A map of subscriptions within this component @@ -99,7 +100,8 @@ export class DynamicLookupRelationModalComponent implements OnInit, OnDestroy { subMap: { [uuid: string]: Subscription } = {}; - submissionId: string; + + @Input() submissionId: string; /** * A list of the available external sources configured for this relationship @@ -119,12 +121,12 @@ export class DynamicLookupRelationModalComponent implements OnInit, OnDestroy { /** * The type of relationship */ - relationshipType: RelationshipType; + @Input() relationshipType: RelationshipType; /** * Checks if relationship is left */ - currentItemIsLeftItem$: Observable; + @Input() currentItemIsLeftItem$: Observable; /** * Relationship is left @@ -134,22 +136,22 @@ export class DynamicLookupRelationModalComponent implements OnInit, OnDestroy { /** * Checks if modal is being used by edit relationship page */ - isEditRelationship = false; + @Input() isEditRelationship = false; /** * Maintain the list of the related items to be added */ - toAdd = []; + @Input() toAdd = []; /** * Maintain the list of the related items to be removed */ - toRemove = []; + @Input() toRemove = []; /** * Disable buttons while the submit button is pressed */ - isPending = false; + @Input() isPending = false; constructor( public modal: NgbActiveModal, diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/themed-dynamic-lookup-relation-modal.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/themed-dynamic-lookup-relation-modal.component.ts index fb7babcd2da..66fde879d6e 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/themed-dynamic-lookup-relation-modal.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/themed-dynamic-lookup-relation-modal.component.ts @@ -1,6 +1,13 @@ import { ThemedComponent } from '../../../../theme-support/themed.component'; import { DynamicLookupRelationModalComponent } from './dynamic-lookup-relation-modal.component'; -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { RelationshipOptions } from '../../models/relationship-options.model'; +import { Item } from '../../../../../core/shared/item.model'; +import { Collection } from '../../../../../core/shared/collection.model'; +import { Observable } from 'rxjs'; +import { Context } from '../../../../../core/shared/context.model'; +import { RelationshipType } from '../../../../../core/shared/item-relationships/relationship-type.model'; +import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model'; /** * Themed wrapper for {@link DynamicLookupRelationModalComponent} @@ -11,6 +18,57 @@ import { Component } from '@angular/core'; }) export class ThemedDynamicLookupRelationModalComponent extends ThemedComponent { + @Input() label: string; + + @Input() relationshipOptions: RelationshipOptions; + + @Input() listId: string; + + @Input() item: Item; + + @Input() collection: Collection; + + @Input() repeatable: boolean; + + @Input() context: Context; + + @Input() metadataFields: string; + + @Input() query: string; + + @Input() relationshipType: RelationshipType; + + @Input() currentItemIsLeftItem$: Observable; + + @Input() isEditRelationship: boolean; + + @Input() toAdd: ItemSearchResult[]; + + @Input() toRemove: ItemSearchResult[]; + + @Input() isPending: boolean; + + @Input() submissionId: string; + + protected inAndOutputNames: (keyof DynamicLookupRelationModalComponent & keyof this)[] = [ + 'label', + 'relationshipOptions', + 'listId', + 'item', + 'collection', + 'repeatable', + 'context', + 'metadataFields', + 'query', + 'relationshipType', + 'currentItemIsLeftItem$', + 'isEditRelationship', + 'toAdd', + 'toRemove', + 'isPending', + 'submissionId', + ]; + protected getComponentName(): string { return 'DynamicLookupRelationModalComponent'; } diff --git a/src/themes/custom/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html b/src/themes/custom/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/themes/custom/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss b/src/themes/custom/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/themes/custom/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts b/src/themes/custom/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts new file mode 100644 index 00000000000..f8946472e64 --- /dev/null +++ b/src/themes/custom/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; + +import { SearchConfigurationService } from '../../../../../../../../app/core/shared/search/search-configuration.service'; +import { SEARCH_CONFIG_SERVICE } from '../../../../../../../../app/my-dspace-page/my-dspace-page.component'; +import { DynamicLookupRelationModalComponent as BaseComponent } from '../../../../../../../../app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component'; + +@Component({ + selector: 'ds-dynamic-lookup-relation-modal', + // styleUrls: ['./dynamic-lookup-relation-modal.component.scss'], + styleUrls: ['../../../../../../../../app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.scss'], + // templateUrl: './dynamic-lookup-relation-modal.component.html', + templateUrl: '../../../../../../../../app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html', + providers: [ + { + provide: SEARCH_CONFIG_SERVICE, + useClass: SearchConfigurationService, + }, + ], +}) +export class DynamicLookupRelationModalComponent extends BaseComponent { +} diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts index edb3f5478c9..1d126fb5d99 100644 --- a/src/themes/custom/lazy-theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -156,6 +156,7 @@ import { ItemStatusComponent } from './app/item-page/edit-item-page/item-status/ import { EditBitstreamPageComponent } from './app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component'; import { FormModule } from '../../app/shared/form/form.module'; import { RequestCopyModule } from 'src/app/request-copy/request-copy.module'; +import { DynamicLookupRelationModalComponent } from './app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component'; const DECLARATIONS = [ FileSectionComponent, @@ -239,6 +240,7 @@ const DECLARATIONS = [ SubmissionSectionUploadFileComponent, ItemStatusComponent, EditBitstreamPageComponent, + DynamicLookupRelationModalComponent, ]; @NgModule({