continued refactoring

This commit is contained in:
lotte
2019-07-15 16:26:27 +02:00
parent b1585ac7f2
commit 65a66a104c
6 changed files with 69 additions and 51 deletions

View File

@@ -117,7 +117,7 @@
</div>
</div>
<div class="modal-footer">
<small>Selected {{selection.length}} items</small>
<small>Selected {{(selection | async)?.length || 0}} items</small>
<div>
<button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss()">Cancel
</button>

View File

@@ -15,11 +15,11 @@ import { Router } from '@angular/router';
import { SEARCH_CONFIG_SERVICE } from '../../../../../../+my-dspace-page/my-dspace-page.component';
import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
import { SelectableListService } from '../../../../../object-list/selectable-list/selectable-list.service';
import { ListableObject } from '../../../../../object-collection/shared/listable-object.model';
import { SelectableListState } from '../../../../../object-list/selectable-list/selectable-list.reducer';
const RELATION_TYPE_FILTER_PREFIX = 'f.entityType=';
/* TODO take a look at this when the REST entities submission is finished: we will probably need to get the fixed filter from the REST instead of filtering is out from the metadata field */
const RELATION_TYPE_METADATA_PREFIX = 'relation.isPublicationOf';
@Component({
selector: 'ds-dynamic-lookup-relation-modal',
@@ -35,25 +35,24 @@ const RELATION_TYPE_METADATA_PREFIX = 'relation.isPublicationOf';
export class DsDynamicLookupRelationModalComponent implements OnInit {
relationKey: string;
fieldName: string;
listId: string;
resultsRD$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>;
searchConfig: PaginatedSearchOptions;
repeatable: boolean;
previousSelection: DSpaceObject[] = [];
searchQuery;
initialPagination = Object.assign(new PaginationComponentOptions(), {
id: 'submission-relation-list',
pageSize: 10
});
listId;
selection: Observable<ListableObject[]>;
constructor(public modal: NgbActiveModal, private searchService: SearchService, private router: Router, private selectableListService: SelectableListService) {
}
ngOnInit(): void {
this.resetRoute();
this.fieldName = this.relationKey.substring(RELATION_TYPE_METADATA_PREFIX.length);
this.listId = 'list-' + this.fieldName;
this.onPaginationChange(this.initialPagination);
this.selectableListService.getSelectableList(this.listId).pipe(map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : []));
}
search(query: string) {
@@ -84,7 +83,7 @@ export class DsDynamicLookupRelationModalComponent implements OnInit {
}
close() {
this.modal.close(this.selectableListService.getSelectableList(this.listId));
this.modal.close();
}
resetRoute() {

View File

@@ -1,6 +1,6 @@
<script src="dynamic-lookup-relation.component.ts"></script>
<div>
<div *ngIf="model.repeatable || !(model.value && model.value.length > 0)" class="form-row align-items-center">
<div *ngIf="model.repeatable || !((model.value | async) && (model.value | async).length > 0)" class="form-row align-items-center">
<div class="col">
<input class="form-control"
[class.is-invalid]="showErrorMessages"
@@ -18,22 +18,23 @@
(click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
</button>
</div>
<div class="col-auto text-center">
<button class="btn btn-secondary"
type="button"
ngbTooltip="{{'form.add-help' | translate}}"
#tooltip = ngbTooltip
placement="top"
[disabled]="!hasResultsSelected()"
(click)="add(); tooltip.close(); $event.stopPropagation();">{{'form.add' | translate}}
</button>
</div>
<!--<div class="col-auto text-center">-->
<!--<button class="btn btn-secondary"-->
<!--type="button"-->
<!--ngbTooltip="{{'form.add-help' | translate}}"-->
<!--#tooltip = ngbTooltip-->
<!--placement="top"-->
<!--[disabled]="!hasResultsSelected()"-->
<!--(click)="add(); tooltip.close(); $event.stopPropagation();">{{'form.add' | translate}}-->
<!--</button>-->
<!--</div>-->
</div>
<div class="mt-3">
<ul class="list-unstyled">
<li *ngFor="let value of model.value">
<li *ngFor="let result of (model.value | async)">
<ng-container *ngVar="result.indexableObject as value">
<button type="button" class="close float-left" aria-label="Close button"
(click)="removeSelection(value.uuid)">
(click)="removeSelection(value)">
<span aria-hidden="true">&times;</span>
</button>
<span class="d-inline-block align-middle ml-1">{{value.name}}</span>
@@ -43,6 +44,7 @@
[ngModel]="value.uuid"
[disabled]="true"
[readonly]="true">
</ng-container>
</li>
</ul>
</div>

View File

@@ -6,13 +6,22 @@ import {
DynamicFormValidationService
} from '@ng-dynamic-forms/core';
import { FormGroup } from '@angular/forms';
import { isNotEmpty } from '../../../../../empty.util';
import { hasValue, isNotEmpty } from '../../../../../empty.util';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { DsDynamicLookupRelationModalComponent } from './dynamic-lookup-relation-modal.component';
import { DynamicLookupRelationModel } from './dynamic-lookup-relation.model';
import { DSpaceObject } from '../../../../../../core/shared/dspace-object.model';
import { RelationshipService } from '../../../../../../core/data/relationship.service';
import { Item } from '../../../../../../core/shared/item.model';
import { SelectableListService } from '../../../../../object-list/selectable-list/selectable-list.service';
import { SelectableListState } from '../../../../../object-list/selectable-list/selectable-list.reducer';
import { Observable } from 'rxjs';
import { ListableObject } from '../../../../../object-collection/shared/listable-object.model';
import { map } from 'rxjs/operators';
import { SearchResult } from '../../../../../search/search-result.model';
/* TODO take a look at this when the REST entities submission is finished: we will probably need to get the fixed filter from the REST instead of filtering is out from the metadata field */
const RELATION_TYPE_METADATA_PREFIX = 'relation.isPublicationOf';
@Component({
selector: 'ds-dynamic-lookup-relation',
@@ -30,50 +39,58 @@ export class DsDynamicLookupRelationComponent extends DynamicFormControlComponen
modalRef: NgbModalRef;
modalValuesString = '';
selectedResults: Item[];
fieldName: string;
listId: string;
constructor(private modalService: NgbModal,
protected layoutService: DynamicFormLayoutService,
protected validationService: DynamicFormValidationService,
private relationService: RelationshipService
private relationService: RelationshipService,
private selectableListService: SelectableListService
) {
super(layoutService, validationService);
}
ngOnInit(): void {
this.fieldName = this.model.name.substring(RELATION_TYPE_METADATA_PREFIX.length);
this.listId = 'list-' + this.fieldName;
this.model.value = this.selectableListService.getSelectableList(this.listId).pipe(
map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : []),
);
}
public hasResultsSelected() {
return isNotEmpty(this.selectedResults);
public hasResultsSelected(): Observable<boolean> {
return this.model.value.pipe(map((list: SearchResult<DSpaceObject>[]) => isNotEmpty(list)));
}
openLookup() {
this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, { size: 'lg' });
this.modalRef.componentInstance.repeatable = this.model.repeatable;
this.modalRef.componentInstance.selection = this.selectedResults || [];
this.modalRef.componentInstance.previousSelection = this.model.value || [];
this.modalRef.componentInstance.relationKey = this.model.name;
this.modalRef.result.then((resultList) => {
this.selectedResults = resultList;
this.modalValuesString = resultList.map((dso: DSpaceObject) => dso.name).join('; ');
const modalComp = this.modalRef.componentInstance;
modalComp.repeatable = this.model.repeatable;
modalComp.relationKey = this.model.name;
modalComp.listId = this.listId;
modalComp.fieldName = this.fieldName;
this.modalRef.result.then((resultString = '') => {
this.modalValuesString = resultString;
});
}
add() {
if (isNotEmpty(this.model.value)) {
this.model.value = [...this.model.value, ...this.selectedResults];
} else {
this.model.value = this.selectedResults;
}
// add() {
// if (isNotEmpty(this.model.value)) {
// this.model.value = [...this.model.value, ...this.selectedResults];
// } else {
// this.model.value = this.selectedResults;
// }
//
// this.modalValuesString = '';
// this.selectedResults = [];
// this.selectedResults.forEach((item: Item) => {
// this.relationService.addRelationship(this.model.item, item);
// })
// }
this.modalValuesString = '';
this.selectedResults = [];
this.selectedResults.forEach((item: Item) => {
this.relationService.addRelationship(this.model.item, item);
})
}
removeSelection(uuid: string) {
this.model.value = this.model.value.filter((dso: DSpaceObject) => dso.uuid !== uuid);
removeSelection(object: SearchResult<DSpaceObject>) {
this.selectableListService.deselectSingle(this.listId, object);
}
}

View File

@@ -13,7 +13,7 @@ export interface DynamicLookupRelationModelConfig extends DsDynamicInputModelCon
export class DynamicLookupRelationModel extends DsDynamicInputModel {
@serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_RELATION;
@serializable() value: any[];
@serializable() value: any;
@serializable() repeatable: boolean;
item: Item;

View File

@@ -32,7 +32,7 @@ export class SelectableListSelectAction extends SelectableListAction {
payload: ListableObject[];
constructor(id: string, objects: ListableObject[]) {
super(SelectableListActionTypes.SELECT_SINGLE, id);
super(SelectableListActionTypes.SELECT, id);
this.payload = objects;
}
}
@@ -44,7 +44,7 @@ export class SelectableListSelectSingleAction extends SelectableListAction {
};
constructor(id: string, object: ListableObject, multipleSelectionsAllowed: boolean = true) {
super(SelectableListActionTypes.SELECT, id);
super(SelectableListActionTypes.SELECT_SINGLE, id);
this.payload = { object, multipleSelectionsAllowed };
}
}