hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-08 10:34:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

continued refactoring

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup-relation/dynamic-lookup-relation-modal.component.html
View File

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

13
src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup-relation/dynamic-lookup-relation-modal.component.ts
View File

@@ -15,11 +15,11 @@ import { Router } from '@angular/router';
import { SEARCH_CONFIG_SERVICE } from '../../../../../../+my-dspace-page/my-dspace-page.component'; import { SEARCH_CONFIG_SERVICE } from '../../../../../../+my-dspace-page/my-dspace-page.component';
import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service'; import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
import { SelectableListService } from '../../../../../object-list/selectable-list/selectable-list.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='; 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({ @Component({
selector: 'ds-dynamic-lookup-relation-modal', selector: 'ds-dynamic-lookup-relation-modal',
@@ -35,25 +35,24 @@ const RELATION_TYPE_METADATA_PREFIX = 'relation.isPublicationOf';
export class DsDynamicLookupRelationModalComponent implements OnInit { export class DsDynamicLookupRelationModalComponent implements OnInit {
relationKey: string; relationKey: string;
fieldName: string; fieldName: string;
listId: string;
resultsRD$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>; resultsRD$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>;
searchConfig: PaginatedSearchOptions; searchConfig: PaginatedSearchOptions;
repeatable: boolean; repeatable: boolean;
previousSelection: DSpaceObject[] = [];
searchQuery; searchQuery;
initialPagination = Object.assign(new PaginationComponentOptions(), { initialPagination = Object.assign(new PaginationComponentOptions(), {
id: 'submission-relation-list', id: 'submission-relation-list',
pageSize: 10 pageSize: 10
}); });
listId; selection: Observable<ListableObject[]>;
constructor(public modal: NgbActiveModal, private searchService: SearchService, private router: Router, private selectableListService: SelectableListService) { constructor(public modal: NgbActiveModal, private searchService: SearchService, private router: Router, private selectableListService: SelectableListService) {
} }
ngOnInit(): void { ngOnInit(): void {
this.resetRoute(); this.resetRoute();
this.fieldName = this.relationKey.substring(RELATION_TYPE_METADATA_PREFIX.length);
this.listId = 'list-' + this.fieldName;
this.onPaginationChange(this.initialPagination); this.onPaginationChange(this.initialPagination);
this.selectableListService.getSelectableList(this.listId).pipe(map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : []));
} }
search(query: string) { search(query: string) {
@@ -84,7 +83,7 @@ export class DsDynamicLookupRelationModalComponent implements OnInit {
} }
close() { close() {
this.modal.close(this.selectableListService.getSelectableList(this.listId)); this.modal.close();
} }
resetRoute() { resetRoute() {

28
src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup-relation/dynamic-lookup-relation.component.html
View File

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

71
src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup-relation/dynamic-lookup-relation.component.ts
View File

@@ -6,13 +6,22 @@ import {
DynamicFormValidationService DynamicFormValidationService
} from '@ng-dynamic-forms/core'; } from '@ng-dynamic-forms/core';
import { FormGroup } from '@angular/forms'; 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 { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { DsDynamicLookupRelationModalComponent } from './dynamic-lookup-relation-modal.component'; import { DsDynamicLookupRelationModalComponent } from './dynamic-lookup-relation-modal.component';
import { DynamicLookupRelationModel } from './dynamic-lookup-relation.model'; import { DynamicLookupRelationModel } from './dynamic-lookup-relation.model';
import { DSpaceObject } from '../../../../../../core/shared/dspace-object.model'; import { DSpaceObject } from '../../../../../../core/shared/dspace-object.model';
import { RelationshipService } from '../../../../../../core/data/relationship.service'; import { RelationshipService } from '../../../../../../core/data/relationship.service';
import { Item } from '../../../../../../core/shared/item.model'; 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({ @Component({
selector: 'ds-dynamic-lookup-relation', selector: 'ds-dynamic-lookup-relation',
@@ -30,50 +39,58 @@ export class DsDynamicLookupRelationComponent extends DynamicFormControlComponen
modalRef: NgbModalRef; modalRef: NgbModalRef;
modalValuesString = ''; modalValuesString = '';
selectedResults: Item[]; fieldName: string;
listId: string;
constructor(private modalService: NgbModal, constructor(private modalService: NgbModal,
protected layoutService: DynamicFormLayoutService, protected layoutService: DynamicFormLayoutService,
protected validationService: DynamicFormValidationService, protected validationService: DynamicFormValidationService,
private relationService: RelationshipService private relationService: RelationshipService,
private selectableListService: SelectableListService
) { ) {
super(layoutService, validationService); super(layoutService, validationService);
} }
ngOnInit(): void { 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() { public hasResultsSelected(): Observable<boolean> {
return isNotEmpty(this.selectedResults); return this.model.value.pipe(map((list: SearchResult<DSpaceObject>[]) => isNotEmpty(list)));
} }
openLookup() { openLookup() {
this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, { size: 'lg' }); this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, { size: 'lg' });
this.modalRef.componentInstance.repeatable = this.model.repeatable; const modalComp = this.modalRef.componentInstance;
this.modalRef.componentInstance.selection = this.selectedResults || []; modalComp.repeatable = this.model.repeatable;
this.modalRef.componentInstance.previousSelection = this.model.value || []; modalComp.relationKey = this.model.name;
this.modalRef.componentInstance.relationKey = this.model.name; modalComp.listId = this.listId;
this.modalRef.result.then((resultList) => { modalComp.fieldName = this.fieldName;
this.selectedResults = resultList;
this.modalValuesString = resultList.map((dso: DSpaceObject) => dso.name).join('; '); this.modalRef.result.then((resultString = '') => {
this.modalValuesString = resultString;
}); });
} }
add() { // add() {
if (isNotEmpty(this.model.value)) { // if (isNotEmpty(this.model.value)) {
this.model.value = [...this.model.value, ...this.selectedResults]; // this.model.value = [...this.model.value, ...this.selectedResults];
} else { // } else {
this.model.value = this.selectedResults; // this.model.value = this.selectedResults;
} // }
//
// this.modalValuesString = '';
// this.selectedResults = [];
// this.selectedResults.forEach((item: Item) => {
// this.relationService.addRelationship(this.model.item, item);
// })
// }
this.modalValuesString = ''; removeSelection(object: SearchResult<DSpaceObject>) {
this.selectedResults = []; this.selectableListService.deselectSingle(this.listId, object);
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);
} }
} }

2
src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup-relation/dynamic-lookup-relation.model.ts
View File

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

4
src/app/shared/object-list/selectable-list/selectable-list.actions.ts
View File

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