From 16d3d0e063cf3b0229ea90b1a7e41d33b61e6c3c Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Mon, 15 Jun 2020 17:48:03 +0200 Subject: [PATCH 01/28] 71380: Remove object updates for drag-and-drop and send out immediate patch requests for bitstream drag-and-drop --- .../item-bitstreams.component.html | 3 +- .../item-bitstreams.component.ts | 67 +++--- .../item-edit-bitstream-bundle.component.html | 2 +- .../item-edit-bitstream-bundle.component.ts | 9 +- .../object-updates/object-updates.actions.ts | 88 +------- .../object-updates/object-updates.reducer.ts | 193 +----------------- .../object-updates/object-updates.service.ts | 89 +------- ...-paginated-drag-and-drop-list.component.ts | 121 +++++------ 8 files changed, 98 insertions(+), 474 deletions(-) diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html index dc017a9f92..82ca1f58d9 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html @@ -36,7 +36,8 @@ + [columnSizes]="columnSizes" + (dropObject)="dropBitstream(bundle, $event)">
observableZip(...bundles.map((bundle: Bundle) => - this.objectUpdatesService.getMoveOperations(bundle.self).pipe( - take(1), - map((operations: MoveOperation[]) => [...operations.map((operation: MoveOperation) => Object.assign(operation, { - from: `/_links/bitstreams${operation.from}/href`, - path: `/_links/bitstreams${operation.path}/href` - }))]) - ) - ))) - ); - - // Send out an immediate patch request for each bundle - const patchResponses$ = observableCombineLatest(bundlesOnce$, moveOperations$).pipe( - switchMap(([bundles, moveOperationList]: [Bundle[], Operation[][]]) => - observableZip(...bundles.map((bundle: Bundle, index: number) => { - if (isNotEmpty(moveOperationList[index])) { - return this.bundleService.patch(bundle, moveOperationList[index]); - } else { - return observableOf(undefined); - } - })) - ) - ); - // Fetch all removed bitstreams from the object update service const removedBitstreams$ = bundlesOnce$.pipe( switchMap((bundles: Bundle[]) => observableZip( @@ -201,19 +172,35 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme ); // Perform the setup actions from above in order and display notifications - patchResponses$.pipe( - switchMap((responses: RestResponse[]) => { - this.displayNotifications('item.edit.bitstreams.notifications.move', responses); - return removedResponses$ - }), - take(1) - ).subscribe((responses: RestResponse[]) => { + removedResponses$.pipe(take(1)).subscribe((responses: RestResponse[]) => { this.displayNotifications('item.edit.bitstreams.notifications.remove', responses); this.reset(); this.submitting = false; }); } + /** + * A bitstream was dropped in a new location. Send out a Move Patch request to the REST API, display notifications, + * refresh the bundle's cache (so the lists can properly reload) and call the event's callback function (which will + * navigate the user to the correct page) + * @param bundle The bundle to send patch requests to + * @param event The event containing the index the bitstream came from and was dropped to + */ + dropBitstream(bundle: Bundle, event: any) { + if (hasValue(event) && hasValue(event.fromIndex) && hasValue(event.toIndex) && hasValue(event.finish)) { + const moveOperation = Object.assign({ + op: 'move', + from: `/_links/bitstreams/${event.fromIndex}/href`, + path: `/_links/bitstreams/${event.toIndex}/href` + }); + this.bundleService.patch(bundle, [moveOperation]).pipe(take(1)).subscribe((response: RestResponse) => { + this.displayNotifications('item.edit.bitstreams.notifications.move', [response]); + this.requestService.removeByHrefSubstring(bundle.self); + event.finish(); + }); + } + } + /** * Display notifications * - Error notification for each failed response with their message diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html index 58273bb931..c28ef9b525 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html @@ -17,5 +17,5 @@
- + diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts index 115e326241..72e2055bf7 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core'; import { Bundle } from '../../../../core/shared/bundle.model'; import { Item } from '../../../../core/shared/item.model'; import { ResponsiveColumnSizes } from '../../../../shared/responsive-table-sizes/responsive-column-sizes'; @@ -36,6 +36,13 @@ export class ItemEditBitstreamBundleComponent implements OnInit { */ @Input() columnSizes: ResponsiveTableSizes; + /** + * Send an event when the user drops an object on the pagination + * The event contains details about the index the object came from and is dropped to (across the entirety of the list, + * not just within a single page) + */ + @Output() dropObject: EventEmitter = new EventEmitter(); + /** * The bootstrap sizes used for the Bundle Name column * This column stretches over the first 3 columns and thus is a combination of their sizes processed in ngOnInit diff --git a/src/app/core/data/object-updates/object-updates.actions.ts b/src/app/core/data/object-updates/object-updates.actions.ts index 94918157ee..f26be768b1 100644 --- a/src/app/core/data/object-updates/object-updates.actions.ts +++ b/src/app/core/data/object-updates/object-updates.actions.ts @@ -8,7 +8,6 @@ import {INotification} from '../../../shared/notifications/models/notification.m */ export const ObjectUpdatesActionTypes = { INITIALIZE_FIELDS: type('dspace/core/cache/object-updates/INITIALIZE_FIELDS'), - ADD_PAGE_TO_CUSTOM_ORDER: type('dspace/core/cache/object-updates/ADD_PAGE_TO_CUSTOM_ORDER'), SET_EDITABLE_FIELD: type('dspace/core/cache/object-updates/SET_EDITABLE_FIELD'), SET_VALID_FIELD: type('dspace/core/cache/object-updates/SET_VALID_FIELD'), ADD_FIELD: type('dspace/core/cache/object-updates/ADD_FIELD'), @@ -17,8 +16,7 @@ export const ObjectUpdatesActionTypes = { REINSTATE: type('dspace/core/cache/object-updates/REINSTATE'), REMOVE: type('dspace/core/cache/object-updates/REMOVE'), REMOVE_ALL: type('dspace/core/cache/object-updates/REMOVE_ALL'), - REMOVE_FIELD: type('dspace/core/cache/object-updates/REMOVE_FIELD'), - MOVE: type('dspace/core/cache/object-updates/MOVE'), + REMOVE_FIELD: type('dspace/core/cache/object-updates/REMOVE_FIELD') }; /* tslint:disable:max-classes-per-file */ @@ -29,8 +27,7 @@ export const ObjectUpdatesActionTypes = { export enum FieldChangeType { UPDATE = 0, ADD = 1, - REMOVE = 2, - MOVE = 3 + REMOVE = 2 } /** @@ -41,10 +38,7 @@ export class InitializeFieldsAction implements Action { payload: { url: string, fields: Identifiable[], - lastModified: Date, - order: string[], - pageSize: number, - page: number + lastModified: Date }; /** @@ -61,42 +55,9 @@ export class InitializeFieldsAction implements Action { constructor( url: string, fields: Identifiable[], - lastModified: Date, - order: string[] = [], - pageSize: number = 9999, - page: number = 0 + lastModified: Date ) { - this.payload = { url, fields, lastModified, order, pageSize, page }; - } -} - -/** - * An ngrx action to initialize a new page's fields in the ObjectUpdates state - */ -export class AddPageToCustomOrderAction implements Action { - type = ObjectUpdatesActionTypes.ADD_PAGE_TO_CUSTOM_ORDER; - payload: { - url: string, - fields: Identifiable[], - order: string[], - page: number - }; - - /** - * Create a new AddPageToCustomOrderAction - * - * @param url The unique url of the page for which the fields are being added - * @param fields The identifiable fields of which the updates are kept track of - * @param order A custom order to keep track of objects moving around - * @param page The page to populate in the custom order - */ - constructor( - url: string, - fields: Identifiable[], - order: string[] = [], - page: number = 0 - ) { - this.payload = { url, fields, order, page }; + this.payload = { url, fields, lastModified }; } } @@ -320,43 +281,6 @@ export class RemoveFieldUpdateAction implements Action { } } -/** - * An ngrx action to remove a single field update in the ObjectUpdates state for a certain page url and field uuid - */ -export class MoveFieldUpdateAction implements Action { - type = ObjectUpdatesActionTypes.MOVE; - payload: { - url: string, - from: number, - to: number, - fromPage: number, - toPage: number, - field?: Identifiable - }; - - /** - * Create a new RemoveObjectUpdatesAction - * - * @param url - * the unique url of the page for which a field's change should be removed - * @param from The index of the object to move - * @param to The index to move the object to - * @param fromPage The page to move the object from - * @param toPage The page to move the object to - * @param field Optional field to add to the fieldUpdates list (useful when we want to track updates across multiple pages) - */ - constructor( - url: string, - from: number, - to: number, - fromPage: number, - toPage: number, - field?: Identifiable - ) { - this.payload = { url, from, to, fromPage, toPage, field }; - } -} - /* tslint:enable:max-classes-per-file */ /** @@ -369,8 +293,6 @@ export type ObjectUpdatesAction | ReinstateObjectUpdatesAction | RemoveObjectUpdatesAction | RemoveFieldUpdateAction - | MoveFieldUpdateAction - | AddPageToCustomOrderAction | RemoveAllObjectUpdatesAction | SelectVirtualMetadataAction | SetEditableFieldUpdateAction diff --git a/src/app/core/data/object-updates/object-updates.reducer.ts b/src/app/core/data/object-updates/object-updates.reducer.ts index 759a9f5c87..b1626a5ff5 100644 --- a/src/app/core/data/object-updates/object-updates.reducer.ts +++ b/src/app/core/data/object-updates/object-updates.reducer.ts @@ -1,8 +1,8 @@ import { - AddFieldUpdateAction, AddPageToCustomOrderAction, + AddFieldUpdateAction, DiscardObjectUpdatesAction, FieldChangeType, - InitializeFieldsAction, MoveFieldUpdateAction, + InitializeFieldsAction, ObjectUpdatesAction, ObjectUpdatesActionTypes, ReinstateObjectUpdatesAction, @@ -12,9 +12,7 @@ import { SetValidFieldUpdateAction, SelectVirtualMetadataAction, } from './object-updates.actions'; -import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util'; -import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; -import { from } from 'rxjs/internal/observable/from'; +import { hasNoValue, hasValue } from '../../../shared/empty.util'; import {Relationship} from '../../shared/item-relationships/relationship.model'; /** @@ -83,20 +81,6 @@ export interface DeleteRelationship extends Relationship { keepRightVirtualMetadata: boolean, } -/** - * A custom order given to the list of objects - */ -export interface CustomOrder { - initialOrderPages: OrderPage[], - newOrderPages: OrderPage[], - pageSize: number; - changed: boolean -} - -export interface OrderPage { - order: string[] -} - /** * The updated state of a single page */ @@ -105,7 +89,6 @@ export interface ObjectUpdatesEntry { fieldUpdates: FieldUpdates; virtualMetadataSources: VirtualMetadataSources; lastModified: Date; - customOrder: CustomOrder } /** @@ -138,9 +121,6 @@ export function objectUpdatesReducer(state = initialState, action: ObjectUpdates case ObjectUpdatesActionTypes.INITIALIZE_FIELDS: { return initializeFieldsUpdate(state, action as InitializeFieldsAction); } - case ObjectUpdatesActionTypes.ADD_PAGE_TO_CUSTOM_ORDER: { - return addPageToCustomOrder(state, action as AddPageToCustomOrderAction); - } case ObjectUpdatesActionTypes.ADD_FIELD: { return addFieldUpdate(state, action as AddFieldUpdateAction); } @@ -168,9 +148,6 @@ export function objectUpdatesReducer(state = initialState, action: ObjectUpdates case ObjectUpdatesActionTypes.SET_VALID_FIELD: { return setValidFieldUpdate(state, action as SetValidFieldUpdateAction); } - case ObjectUpdatesActionTypes.MOVE: { - return moveFieldUpdate(state, action as MoveFieldUpdateAction); - } default: { return state; } @@ -186,50 +163,18 @@ function initializeFieldsUpdate(state: any, action: InitializeFieldsAction) { const url: string = action.payload.url; const fields: Identifiable[] = action.payload.fields; const lastModifiedServer: Date = action.payload.lastModified; - const order = action.payload.order; - const pageSize = action.payload.pageSize; - const page = action.payload.page; const fieldStates = createInitialFieldStates(fields); - const initialOrderPages = addOrderToPages([], order, pageSize, page); const newPageState = Object.assign( {}, state[url], { fieldStates: fieldStates }, { fieldUpdates: {} }, { virtualMetadataSources: {} }, - { lastModified: lastModifiedServer }, - { customOrder: { - initialOrderPages: initialOrderPages, - newOrderPages: initialOrderPages, - pageSize: pageSize, - changed: false } - } + { lastModified: lastModifiedServer } ); return Object.assign({}, state, { [url]: newPageState }); } -/** - * Add a page of objects to the state of a specific url and update a specific page of the custom order - * @param state The current state - * @param action The action to perform on the current state - */ -function addPageToCustomOrder(state: any, action: AddPageToCustomOrderAction) { - const url: string = action.payload.url; - const fields: Identifiable[] = action.payload.fields; - const fieldStates = createInitialFieldStates(fields); - const order = action.payload.order; - const page = action.payload.page; - const pageState: ObjectUpdatesEntry = state[url] || {}; - const newPageState = Object.assign({}, pageState, { - fieldStates: Object.assign({}, pageState.fieldStates, fieldStates), - customOrder: Object.assign({}, pageState.customOrder, { - newOrderPages: addOrderToPages(pageState.customOrder.newOrderPages, order, pageState.customOrder.pageSize, page), - initialOrderPages: addOrderToPages(pageState.customOrder.initialOrderPages, order, pageState.customOrder.pageSize, page) - }) - }); - return Object.assign({}, state, { [url]: newPageState }); -} - /** * Add a new update for a specific field to the store * @param state The current state @@ -338,19 +283,9 @@ function discardObjectUpdatesFor(url: string, state: any) { } }); - const newCustomOrder = Object.assign({}, pageState.customOrder); - if (pageState.customOrder.changed) { - const initialOrder = pageState.customOrder.initialOrderPages; - if (isNotEmpty(initialOrder)) { - newCustomOrder.newOrderPages = initialOrder; - newCustomOrder.changed = false; - } - } - const discardedPageState = Object.assign({}, pageState, { fieldUpdates: {}, - fieldStates: newFieldStates, - customOrder: newCustomOrder + fieldStates: newFieldStates }); return Object.assign({}, state, { [url]: discardedPageState }, { [url + OBJECT_UPDATES_TRASH_PATH]: pageState }); } @@ -504,121 +439,3 @@ function createInitialFieldStates(fields: Identifiable[]) { uuids.forEach((uuid: string) => fieldStates[uuid] = initialFieldState); return fieldStates; } - -/** - * Method to add a list of objects to an existing FieldStates object - * @param fieldStates FieldStates to add states to - * @param fields Identifiable objects The list of objects to add to the FieldStates - */ -function addFieldStates(fieldStates: FieldStates, fields: Identifiable[]) { - const uuids = fields.map((field: Identifiable) => field.uuid); - uuids.forEach((uuid: string) => fieldStates[uuid] = initialFieldState); - return fieldStates; -} - -/** - * Move an object within the custom order of a page state - * @param state The current state - * @param action The move action to perform - */ -function moveFieldUpdate(state: any, action: MoveFieldUpdateAction) { - const url = action.payload.url; - const fromIndex = action.payload.from; - const toIndex = action.payload.to; - const fromPage = action.payload.fromPage; - const toPage = action.payload.toPage; - const field = action.payload.field; - - const pageState: ObjectUpdatesEntry = state[url]; - const initialOrderPages = pageState.customOrder.initialOrderPages; - const customOrderPages = [...pageState.customOrder.newOrderPages]; - - // Create a copy of the custom orders for the from- and to-pages - const fromPageOrder = [...customOrderPages[fromPage].order]; - const toPageOrder = [...customOrderPages[toPage].order]; - if (fromPage === toPage) { - if (isNotEmpty(customOrderPages[fromPage]) && isNotEmpty(customOrderPages[fromPage].order[fromIndex]) && isNotEmpty(customOrderPages[fromPage].order[toIndex])) { - // Move an item from one index to another within the same page - moveItemInArray(fromPageOrder, fromIndex, toIndex); - // Update the custom order for this page - customOrderPages[fromPage] = { order: fromPageOrder }; - } - } else { - if (isNotEmpty(customOrderPages[fromPage]) && hasValue(customOrderPages[toPage]) && isNotEmpty(customOrderPages[fromPage].order[fromIndex])) { - // Move an item from one index of one page to an index in another page - transferArrayItem(fromPageOrder, toPageOrder, fromIndex, toIndex); - // Update the custom order for both pages - customOrderPages[fromPage] = { order: fromPageOrder }; - customOrderPages[toPage] = { order: toPageOrder }; - } - } - - // Create a field update if it doesn't exist for this field yet - let fieldUpdate = {}; - if (hasValue(field)) { - fieldUpdate = pageState.fieldUpdates[field.uuid]; - if (hasNoValue(fieldUpdate)) { - fieldUpdate = { field: field, changeType: undefined } - } - } - - // Update the store's state with new values and return - return Object.assign({}, state, { [url]: Object.assign({}, pageState, { - fieldUpdates: Object.assign({}, pageState.fieldUpdates, hasValue(field) ? { [field.uuid]: fieldUpdate } : {}), - customOrder: Object.assign({}, pageState.customOrder, { newOrderPages: customOrderPages, changed: checkForOrderChanges(initialOrderPages, customOrderPages) }) - })}) -} - -/** - * Compare two lists of OrderPage objects and return whether there's at least one change in the order of objects within - * @param initialOrderPages The initial list of OrderPages - * @param customOrderPages The changed list of OrderPages - */ -function checkForOrderChanges(initialOrderPages: OrderPage[], customOrderPages: OrderPage[]) { - let changed = false; - initialOrderPages.forEach((orderPage: OrderPage, page: number) => { - if (isNotEmpty(orderPage) && isNotEmpty(orderPage.order) && isNotEmpty(customOrderPages[page]) && isNotEmpty(customOrderPages[page].order)) { - orderPage.order.forEach((id: string, index: number) => { - if (id !== customOrderPages[page].order[index]) { - changed = true; - return; - } - }); - if (changed) { - return; - } - } - }); - return changed; -} - -/** - * Initialize a custom order page by providing the list of all pages, a list of UUIDs, pageSize and the page to populate - * @param initialPages The initial list of OrderPage objects - * @param order The list of UUIDs to create a page for - * @param pageSize The pageSize used to populate empty spacer pages - * @param page The index of the page to add - */ -function addOrderToPages(initialPages: OrderPage[], order: string[], pageSize: number, page: number): OrderPage[] { - const result = [...initialPages]; - const orderPage: OrderPage = { order: order }; - if (page < result.length) { - // The page we're trying to add already exists in the list. Overwrite it. - result[page] = orderPage; - } else if (page === result.length) { - // The page we're trying to add is the next page in the list, add it. - result.push(orderPage); - } else { - // The page we're trying to add is at least one page ahead of the list, fill the list with empty pages before adding the page. - const emptyOrder = []; - for (let i = 0; i < pageSize; i++) { - emptyOrder.push(undefined); - } - const emptyOrderPage: OrderPage = { order: emptyOrder }; - for (let i = result.length; i < page; i++) { - result.push(emptyOrderPage); - } - result.push(orderPage); - } - return result; -} diff --git a/src/app/core/data/object-updates/object-updates.service.ts b/src/app/core/data/object-updates/object-updates.service.ts index c9a7f47e81..779a22fb5b 100644 --- a/src/app/core/data/object-updates/object-updates.service.ts +++ b/src/app/core/data/object-updates/object-updates.service.ts @@ -8,16 +8,15 @@ import { Identifiable, OBJECT_UPDATES_TRASH_PATH, ObjectUpdatesEntry, - ObjectUpdatesState, OrderPage, + ObjectUpdatesState, VirtualMetadataSource } from './object-updates.reducer'; import { Observable } from 'rxjs'; import { - AddFieldUpdateAction, AddPageToCustomOrderAction, + AddFieldUpdateAction, DiscardObjectUpdatesAction, FieldChangeType, InitializeFieldsAction, - MoveFieldUpdateAction, ReinstateObjectUpdatesAction, RemoveFieldUpdateAction, SelectVirtualMetadataAction, @@ -27,9 +26,6 @@ import { import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators'; import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util'; import { INotification } from '../../../shared/notifications/models/notification.model'; -import { ArrayMoveChangeAnalyzer } from '../array-move-change-analyzer.service'; -import { MoveOperation } from 'fast-json-patch/lib/core'; -import { flatten } from '@angular/compiler'; function objectUpdatesStateSelector(): MemoizedSelector { return createSelector(coreSelector, (state: CoreState) => state['cache/object-updates']); @@ -52,9 +48,7 @@ function virtualMetadataSourceSelector(url: string, source: string): MemoizedSel */ @Injectable() export class ObjectUpdatesService { - constructor(private store: Store, - private comparator: ArrayMoveChangeAnalyzer) { - + constructor(private store: Store) { } /** @@ -67,28 +61,6 @@ export class ObjectUpdatesService { this.store.dispatch(new InitializeFieldsAction(url, fields, lastModified)); } - /** - * Method to dispatch an InitializeFieldsAction to the store and keeping track of the order objects are stored - * @param url The page's URL for which the changes are being mapped - * @param fields The initial fields for the page's object - * @param lastModified The date the object was last modified - * @param pageSize The page size to use for adding pages to the custom order - * @param page The first page to populate the custom order with - */ - initializeWithCustomOrder(url, fields: Identifiable[], lastModified: Date, pageSize = 9999, page = 0): void { - this.store.dispatch(new InitializeFieldsAction(url, fields, lastModified, fields.map((field) => field.uuid), pageSize, page)); - } - - /** - * Method to dispatch an AddPageToCustomOrderAction, adding a new page to an already existing custom order tracking - * @param url The URL for which the changes are being mapped - * @param fields The fields to add a new page for - * @param page The page number (starting from index 0) - */ - addPageToCustomOrder(url, fields: Identifiable[], page: number): void { - this.store.dispatch(new AddPageToCustomOrderAction(url, fields, fields.map((field) => field.uuid), page)); - } - /** * Method to dispatch an AddFieldUpdateAction to the store * @param url The page's URL for which the changes are saved @@ -166,31 +138,6 @@ export class ObjectUpdatesService { })) } - /** - * Method that combines the state's updates with the initial values (when there's no update), - * sorted by their custom order to create a FieldUpdates object - * @param url The URL of the page for which the FieldUpdates should be requested - * @param initialFields The initial values of the fields - * @param page The page to retrieve - */ - getFieldUpdatesByCustomOrder(url: string, initialFields: Identifiable[], page = 0): Observable { - const objectUpdates = this.getObjectEntry(url); - return objectUpdates.pipe(map((objectEntry) => { - const fieldUpdates: FieldUpdates = {}; - if (hasValue(objectEntry) && hasValue(objectEntry.customOrder) && isNotEmpty(objectEntry.customOrder.newOrderPages) && page < objectEntry.customOrder.newOrderPages.length) { - for (const uuid of objectEntry.customOrder.newOrderPages[page].order) { - let fieldUpdate = objectEntry.fieldUpdates[uuid]; - if (isEmpty(fieldUpdate)) { - const identifiable = initialFields.find((object: Identifiable) => object.uuid === uuid); - fieldUpdate = {field: identifiable, changeType: undefined}; - } - fieldUpdates[uuid] = fieldUpdate; - } - } - return fieldUpdates; - })) - } - /** * Method to check if a specific field is currently editable in the store * @param url The URL of the page on which the field resides @@ -260,19 +207,6 @@ export class ObjectUpdatesService { this.saveFieldUpdate(url, field, FieldChangeType.UPDATE); } - /** - * Dispatches a MoveFieldUpdateAction - * @param url The page's URL for which the changes are saved - * @param from The index of the object to move - * @param to The index to move the object to - * @param fromPage The page to move the object from - * @param toPage The page to move the object to - * @param field Optional field to add to the fieldUpdates list (useful if we want to track updates across multiple pages) - */ - saveMoveFieldUpdate(url: string, from: number, to: number, fromPage = 0, toPage = 0, field?: Identifiable) { - this.store.dispatch(new MoveFieldUpdateAction(url, from, to, fromPage, toPage, field)); - } - /** * Check whether the virtual metadata of a given item is selected to be saved as real metadata * @param url The URL of the page on which the field resides @@ -387,7 +321,7 @@ export class ObjectUpdatesService { * @param url The page's url to check for in the store */ hasUpdates(url: string): Observable { - return this.getObjectEntry(url).pipe(map((objectEntry) => hasValue(objectEntry) && (isNotEmpty(objectEntry.fieldUpdates) || objectEntry.customOrder.changed))); + return this.getObjectEntry(url).pipe(map((objectEntry) => hasValue(objectEntry) && isNotEmpty(objectEntry.fieldUpdates))); } /** @@ -405,19 +339,4 @@ export class ObjectUpdatesService { getLastModified(url: string): Observable { return this.getObjectEntry(url).pipe(map((entry: ObjectUpdatesEntry) => entry.lastModified)); } - - /** - * Get move operations based on the custom order - * @param url The page's url - */ - getMoveOperations(url: string): Observable { - return this.getObjectEntry(url).pipe( - map((objectEntry) => objectEntry.customOrder), - map((customOrder) => this.comparator.diff( - flatten(customOrder.initialOrderPages.map((orderPage: OrderPage) => orderPage.order)), - flatten(customOrder.newOrderPages.map((orderPage: OrderPage) => orderPage.order))) - ) - ); - } - } diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts index a34b5d5bc0..a0f1d3386e 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts @@ -5,19 +5,20 @@ import { PaginatedList } from '../../core/data/paginated-list'; import { PaginationComponentOptions } from '../pagination/pagination-component-options.model'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; import { ObjectUpdatesService } from '../../core/data/object-updates/object-updates.service'; -import { switchMap, take, tap } from 'rxjs/operators'; -import { hasValue, isEmpty, isNotEmpty } from '../empty.util'; +import { switchMap, take } from 'rxjs/operators'; +import { hasValue } from '../empty.util'; import { paginatedListToArray } from '../../core/shared/operators'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; -import { ElementRef, ViewChild } from '@angular/core'; +import { ElementRef, EventEmitter, Output, ViewChild } from '@angular/core'; import { PaginationComponent } from '../pagination/pagination.component'; /** * An abstract component containing general methods and logic to be able to drag and drop objects within a paginated * list. This implementation supports being able to drag and drop objects between pages. - * Dragging an object on top of a page number will automatically detect the page it's being dropped on, send an update - * to the store and add the object on top of that page. + * Dragging an object on top of a page number will automatically detect the page it's being dropped on and send a + * dropObject event to the parent component containing detailed information about the indexes the object was dropped from + * and to. * * To extend this component, it is important to make sure to: * - Initialize objectsRD$ within the initializeObjectsRD() method @@ -34,6 +35,13 @@ export abstract class AbstractPaginatedDragAndDropListComponent = new EventEmitter(); + /** * The URL to use for accessing the object updates from this list */ @@ -52,7 +60,7 @@ export abstract class AbstractPaginatedDragAndDropListComponent(1); - /** - * A list of pages that have been initialized in the field-update store - */ - initializedPages: number[] = []; - - /** - * An object storing information about an update that should be fired whenever fireToUpdate is called - */ - toUpdate: { - fromIndex: number, - toIndex: number, - fromPage: number, - toPage: number, - field?: T - }; - protected constructor(protected objectUpdatesService: ObjectUpdatesService, protected elRef: ElementRef) { } @@ -110,28 +102,17 @@ export abstract class AbstractPaginatedDragAndDropListComponent { + this.objectUpdatesService.initialize(this.url, objects, new Date()); + }); this.updates$ = this.objectsRD$.pipe( paginatedListToArray(), - tap((objects: T[]) => { - // Pages in the field-update store are indexed starting at 0 (because they're stored in an array of pages) - const updatesPage = this.currentPage$.value - 1; - if (isEmpty(this.initializedPages)) { - // No updates have been initialized yet for this list, initialize the first page - this.objectUpdatesService.initializeWithCustomOrder(this.url, objects, new Date(), this.pageSize, updatesPage); - this.initializedPages.push(updatesPage); - } else if (this.initializedPages.indexOf(updatesPage) < 0) { - // Updates were initialized for this list, but not the page we're on. Add the current page to the field-update store for this list - this.objectUpdatesService.addPageToCustomOrder(this.url, objects, updatesPage); - this.initializedPages.push(updatesPage); - } - - // The new page is loaded into the store, check if there are any updates waiting and fire those as well - this.fireToUpdate(); - }), - switchMap((objects: T[]) => this.objectUpdatesService.getFieldUpdatesByCustomOrder(this.url, objects, this.currentPage$.value - 1)) + switchMap((objects: T[]) => this.objectUpdatesService.getFieldUpdatesExclusive(this.url, objects)) ); } @@ -144,52 +125,42 @@ export abstract class AbstractPaginatedDragAndDropListComponent) { + const dragIndex = event.previousIndex; + let dropIndex = event.currentIndex; + const dragPage = this.currentPage$.value - 1; + let dropPage = this.currentPage$.value - 1; + // Check if the user is hovering over any of the pagination's pages at the time of dropping the object const droppedOnElement = this.elRef.nativeElement.querySelector('.page-item:hover'); if (hasValue(droppedOnElement) && hasValue(droppedOnElement.textContent)) { // The user is hovering over a page, fetch the page's number from the element - const page = Number(droppedOnElement.textContent); - if (hasValue(page) && !Number.isNaN(page)) { - const id = event.item.element.nativeElement.id; - this.updates$.pipe(take(1)).subscribe((updates: FieldUpdates) => { - const field = hasValue(updates[id]) ? updates[id].field : undefined; - this.toUpdate = Object.assign({ - fromIndex: event.previousIndex, - toIndex: 0, - fromPage: this.currentPage$.value - 1, - toPage: page - 1, - field - }); - // Switch to the dropped-on page and force a page update for the pagination component - this.currentPage$.next(page); - this.paginationComponent.doPageChange(page); - if (this.initializedPages.indexOf(page - 1) >= 0) { - // The page the object is being dropped to has already been loaded before, directly fire an update to the store. - // For pages that haven't been loaded before, the updates$ observable will call fireToUpdate after the new page - // has loaded - this.fireToUpdate(); - } - }); + const droppedPage = Number(droppedOnElement.textContent); + if (hasValue(droppedPage) && !Number.isNaN(droppedPage)) { + dropPage = droppedPage - 1; + dropIndex = 0; } - } else { - this.objectUpdatesService.saveMoveFieldUpdate(this.url, event.previousIndex, event.currentIndex, this.currentPage$.value - 1, this.currentPage$.value - 1); } - } - /** - * Method checking if there's an update ready to be fired. Send out a MoveFieldUpdate to the store if there's an - * update present and clear the update afterwards. - */ - fireToUpdate() { - if (hasValue(this.toUpdate)) { - this.objectUpdatesService.saveMoveFieldUpdate(this.url, this.toUpdate.fromIndex, this.toUpdate.toIndex, this.toUpdate.fromPage, this.toUpdate.toPage, this.toUpdate.field); - this.toUpdate = undefined; + const redirectPage = dropPage + 1; + const fromIndex = (dragPage * this.pageSize) + dragIndex; + const toIndex = (dropPage * this.pageSize) + dropIndex; + // Send out a drop event when the field exists and the "from" and "to" indexes are different from each other + if (fromIndex !== toIndex) { + this.dropObject.emit(Object.assign({ + fromIndex, + toIndex, + finish: () => { + this.currentPage$.next(redirectPage); + this.paginationComponent.doPageChange(redirectPage); + } + })); } } } From c6ee46fdea68fe7b89fe92daa20ef1f94a0ca44f Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Mon, 15 Jun 2020 17:57:25 +0200 Subject: [PATCH 02/28] 71380: Reset page size back to normal --- .../abstract-paginated-drag-and-drop-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts index a0f1d3386e..7f94a5eaa5 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts @@ -60,7 +60,7 @@ export abstract class AbstractPaginatedDragAndDropListComponent Date: Tue, 16 Jun 2020 14:26:59 +0200 Subject: [PATCH 03/28] [CST-3090] done --- .../my-dspace-new-submission.component.html | 4 +- .../my-dspace-new-submission.component.ts | 15 +- src/app/core/data/collection-data.service.ts | 16 +- .../collection-dropdown.component.html | 43 +++ .../collection-dropdown.component.scss | 15 + .../collection-dropdown.component.spec.ts | 200 +++++++++++++ .../collection-dropdown.component.ts | 229 +++++++++++++++ ...create-item-parent-selector.component.html | 11 + .../create-item-parent-selector.component.ts | 3 +- src/app/shared/shared.module.ts | 7 +- .../submission-form-collection.component.html | 28 +- ...bmission-form-collection.component.spec.ts | 274 +----------------- .../submission-form-collection.component.ts | 104 +------ 13 files changed, 550 insertions(+), 399 deletions(-) create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.html create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.scss create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts create mode 100644 src/app/shared/collection-dropdown/collection-dropdown.component.ts create mode 100644 src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html diff --git a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html index 911ba26b31..4809f206ae 100644 --- a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html +++ b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html @@ -7,9 +7,9 @@
- +
diff --git a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts index 81d66bb5f7..8d20a5736a 100644 --- a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts +++ b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts @@ -15,6 +15,9 @@ import { HALEndpointService } from '../../core/shared/hal-endpoint.service'; import { NotificationType } from '../../shared/notifications/models/notification-type'; import { hasValue } from '../../shared/empty.util'; import { SearchResult } from '../../shared/search/search-result.model'; +import { Router } from '@angular/router'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { CreateItemParentSelectorComponent } from 'src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component'; /** * This component represents the whole mydspace page header @@ -55,7 +58,9 @@ export class MyDSpaceNewSubmissionComponent implements OnDestroy, OnInit { private halService: HALEndpointService, private notificationsService: NotificationsService, private store: Store, - private translate: TranslateService) { + private translate: TranslateService, + private router: Router, + private modalService: NgbModal) { } /** @@ -105,6 +110,14 @@ export class MyDSpaceNewSubmissionComponent implements OnDestroy, OnInit { this.notificationsService.error(null, this.translate.get('mydspace.upload.upload-failed')); } + /** + * Method called on clicking the button "New Submition", It opens a dialog for + * select a collection. + */ + openDialog() { + this.modalService.open(CreateItemParentSelectorComponent); + } + /** * Unsubscribe from the subscription */ diff --git a/src/app/core/data/collection-data.service.ts b/src/app/core/data/collection-data.service.ts index 0639a7d8ca..d28421356a 100644 --- a/src/app/core/data/collection-data.service.ts +++ b/src/app/core/data/collection-data.service.ts @@ -72,14 +72,18 @@ export class CollectionDataService extends ComColDataService { /** * Get all collections the user is authorized to submit to * + * @param query limit the returned collection to those with metadata values matching the query terms. * @param options The [[FindListOptions]] object * @return Observable>> * collection list */ - getAuthorizedCollection(options: FindListOptions = {}): Observable>> { + getAuthorizedCollection(query: string, options: FindListOptions = {}, ...linksToFollow: Array>): Observable>> { const searchHref = 'findAuthorized'; + options = Object.assign({}, options, { + searchParams: [new RequestParam('query', query)] + }); - return this.searchBy(searchHref, options).pipe( + return this.searchBy(searchHref, options, ...linksToFollow).pipe( filter((collections: RemoteData>) => !collections.isResponsePending)); } @@ -87,14 +91,18 @@ export class CollectionDataService extends ComColDataService { * Get all collections the user is authorized to submit to, by community * * @param communityId The community id + * @param query limit the returned collection to those with metadata values matching the query terms. * @param options The [[FindListOptions]] object * @return Observable>> * collection list */ - getAuthorizedCollectionByCommunity(communityId: string, options: FindListOptions = {}): Observable>> { + getAuthorizedCollectionByCommunity(communityId: string, query: string, options: FindListOptions = {}): Observable>> { const searchHref = 'findAuthorizedByCommunity'; options = Object.assign({}, options, { - searchParams: [new RequestParam('uuid', communityId)] + searchParams: [ + new RequestParam('uuid', communityId), + new RequestParam('query', query) + ] }); return this.searchBy(searchHref, options).pipe( diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html new file mode 100644 index 0000000000..0674084a43 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -0,0 +1,43 @@ +
+ +
+
+
+
+ + + +
+
\ No newline at end of file diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.scss b/src/app/shared/collection-dropdown/collection-dropdown.component.scss new file mode 100644 index 0000000000..deecc39510 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.scss @@ -0,0 +1,15 @@ +.scrollable-menu { + height: auto; + max-height: $dropdown-menu-max-height; + overflow-x: hidden; +} + +.collection-item { + border-bottom: $dropdown-border-width solid $dropdown-border-color; +} + +#collectionControlsDropdownMenu { + outline: 0; + left: 0 !important; + box-shadow: $btn-focus-box-shadow; +} diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts new file mode 100644 index 0000000000..33c848f9c4 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts @@ -0,0 +1,200 @@ +import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; + +import { CollectionDropdownComponent } from './collection-dropdown.component'; +import { FollowLinkConfig } from '../utils/follow-link-config.model'; +import { Observable, of } from 'rxjs'; +import { RemoteData } from 'src/app/core/data/remote-data'; +import { PaginatedList } from 'src/app/core/data/paginated-list'; +import { cold, getTestScheduler, hot } from 'jasmine-marbles'; +import { createSuccessfulRemoteDataObject } from '../remote-data.utils'; +import { PageInfo } from 'src/app/core/shared/page-info.model'; +import { Collection } from '../../core/shared/collection.model'; +import { NO_ERRORS_SCHEMA, ChangeDetectorRef, ElementRef } from '@angular/core'; +import { CollectionDataService } from 'src/app/core/data/collection-data.service'; +import { FindListOptions } from 'src/app/core/data/request.models'; +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; +import { TranslateLoaderMock } from '../mocks/translate-loader.mock'; +import { TestScheduler } from 'rxjs/testing'; +import { By } from '@angular/platform-browser'; +import { Community } from 'src/app/core/shared/community.model'; + +const community: Community = Object.assign(new Community(), { + id: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + uuid: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + name: 'Community 1' +}); + +const collections: Collection[] = [ + Object.assign(new Collection(), { + id: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + name: 'Collection 1', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 1' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: '59ee713b-ee53-4220-8c3f-9860dc84fe33', + name: 'Collection 2', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 2' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: 'e9dbf393-7127-415f-8919-55be34a6e9ed', + name: 'Collection 3', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 3' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: '59da2ff0-9bf4-45bf-88be-e35abd33f304', + name: 'Collection 4', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 4' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }), + Object.assign(new Collection(), { + id: 'a5159760-f362-4659-9e81-e3253ad91ede', + name: 'Collection 5', + metadata: [ + { + key: 'dc.title', + language: 'en_US', + value: 'Community 1-Collection 5' + }], + parentCommunity: of( + new RemoteData(false, false, true, undefined, community, 200) + ) + }) +]; + +const listElementMock = { + communities: [ + { + id: 'ce64f48e-2c9b-411a-ac36-ee429c0e6a88', + name: 'Community 1' + } + ], + collection: { + id: 'e9dbf393-7127-415f-8919-55be34a6e9ed', + uuid: 'e9dbf393-7127-415f-8919-55be34a6e9ed', + name: 'Collection 3' + } + }; + +// tslint:disable-next-line: max-classes-per-file +class CollectionDataServiceMock { + getAuthorizedCollection(query: string, options: FindListOptions = {}, ...linksToFollow: Array>): Observable>> { + return of( + createSuccessfulRemoteDataObject( + new PaginatedList(new PageInfo(), collections) + ) + ); + } +} + +describe('CollectionDropdownComponent', () => { + let component: CollectionDropdownComponent; + let fixture: ComponentFixture; + let scheduler: TestScheduler; + const searchedCollection = 'TEXT'; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateLoaderMock + } + }) + ], + declarations: [ CollectionDropdownComponent ], + providers: [ + {provide: CollectionDataService, useClass: CollectionDataServiceMock}, + {provide: ChangeDetectorRef, useValue: {}}, + {provide: ElementRef, userValue: {}} + ], + schemas: [NO_ERRORS_SCHEMA] + }) + .compileComponents(); + })); + + beforeEach(() => { + scheduler = getTestScheduler(); + fixture = TestBed.createComponent(CollectionDropdownComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should populate collections list with five items', () => { + const elements = fixture.debugElement.queryAll(By.css('.collection-item')); + expect(elements.length).toEqual(5); + }); + + it('should trigger onSelect method when select a new collection from list', fakeAsync(() => { + spyOn(component, 'onSelect'); + const collectionItem = fixture.debugElement.query(By.css('.collection-item:nth-child(2)')); + collectionItem.triggerEventHandler('click', null); + fixture.detectChanges(); + tick(); + fixture.whenStable().then(() => { + expect(component.onSelect).toHaveBeenCalled(); + }); + })); + + it('should emit collectionChange event when selecting a new collection', () => { + spyOn(component.selectionChange, 'emit').and.callThrough(); + component.ngOnInit(); + component.onSelect(listElementMock as any); + fixture.detectChanges(); + + expect(component.selectionChange.emit).toHaveBeenCalledWith(listElementMock as any); + }); + + it('should reset collections list after reset of searchField', fakeAsync(() => { + spyOn(component, 'reset').and.callThrough(); + spyOn(component.searchField, 'setValue').and.callThrough(); + spyOn(component, 'resetPagination').and.callThrough(); + spyOn(component, 'populateCollectionList').and.callThrough(); + component.reset(); + const input = fixture.debugElement.query(By.css('input.form-control')); + const el = input.nativeElement; + el.value = searchedCollection; + el.dispatchEvent(new Event('input')); + fixture.detectChanges(); + tick(250); + + fixture.whenStable().then(() => { + expect(component.reset).toHaveBeenCalled(); + expect(component.searchField.setValue).toHaveBeenCalledWith(''); + expect(component.resetPagination).toHaveBeenCalled(); + expect(component.currentQuery).toEqual(''); + expect(component.populateCollectionList).toHaveBeenCalledWith(component.currentQuery, component.currentPage); + }); + })); +}); diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts new file mode 100644 index 0000000000..e9e0445ca6 --- /dev/null +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -0,0 +1,229 @@ +import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { Observable, of, Subscription } from 'rxjs'; +import { hasValue, isNotEmpty } from '../empty.util'; +import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { RemoteData } from 'src/app/core/data/remote-data'; +import { FindListOptions } from 'src/app/core/data/request.models'; +import { PaginatedList } from 'src/app/core/data/paginated-list'; +import { Community } from 'src/app/core/shared/community.model'; +import { CollectionDataService } from 'src/app/core/data/collection-data.service'; +import { Collection } from '../../core/shared/collection.model'; +import { followLink } from '../utils/follow-link-config.model'; + +/** + * An interface to represent a collection entry + */ +interface CollectionListEntryItem { + id: string; + uuid: string; + name: string; +} + +/** + * An interface to represent an entry in the collection list + */ +interface CollectionListEntry { + communities: CollectionListEntryItem[], + collection: CollectionListEntryItem +} + +@Component({ + selector: 'ds-collection-dropdown', + templateUrl: './collection-dropdown.component.html', + styleUrls: ['./collection-dropdown.component.scss'] +}) +export class CollectionDropdownComponent implements OnInit, OnDestroy { + + /** + * The search form control + * @type {FormControl} + */ + public searchField: FormControl = new FormControl(); + + /** + * The collection list obtained from a search + * @type {Observable} + */ + public searchListCollection$: Observable; + + /** + * A boolean representing if dropdown list is scrollable to the bottom + * @type {boolean} + */ + private scrollableBottom = false; + + /** + * A boolean representing if dropdown list is scrollable to the top + * @type {boolean} + */ + private scrollableTop = false; + + /** + * Array to track all subscriptions and unsubscribe them onDestroy + * @type {Array} + */ + private subs: Subscription[] = []; + + /** + * The list of collection to render + */ + searchListCollection: CollectionListEntry[] = []; + + @Output() selectionChange = new EventEmitter(); + /** + * A boolean representing if the loader is visible or not + */ + isLoadingList: boolean; + + /** + * A numeric representig current page + */ + currentPage: number; + + /** + * A boolean representing if exist another page to render + */ + hasNextPage: boolean; + + /** + * Current seach query used to filter collection list + */ + currentQuery: string; + + constructor( + private changeDetectorRef: ChangeDetectorRef, + private collectionDataService: CollectionDataService, + private el: ElementRef + ) { } + + /** + * Method called on mousewheel event, it prevent the page scroll + * when arriving at the top/bottom of dropdown menu + * + * @param event + * mousewheel event + */ + @HostListener('mousewheel', ['$event']) onMousewheel(event) { + if (event.wheelDelta > 0 && this.scrollableTop) { + event.preventDefault(); + } + if (event.wheelDelta < 0 && this.scrollableBottom) { + event.preventDefault(); + } + } + + /** + * Initialize collection list + */ + ngOnInit() { + this.subs.push(this.searchField.valueChanges.pipe( + debounceTime(200), + distinctUntilChanged(), + startWith('') + ).subscribe( + (next) => { + if (hasValue(next)) { + this.resetPagination(); + this.currentQuery = next; + this.populateCollectionList(this.currentQuery, this.currentPage); + } + } + )); + // Workaround for prevent the scroll of main page when this component is placed in a dialog + setTimeout(() => this.el.nativeElement.querySelector('input').focus(), 0); + } + + /** + * Check if dropdown scrollbar is at the top or bottom of the dropdown list + * + * @param event + */ + onScroll(event) { + this.scrollableBottom = (event.target.scrollTop + event.target.clientHeight === event.target.scrollHeight); + this.scrollableTop = (event.target.scrollTop === 0); + } + + /** + * Method used from infitity scroll for retrive more data on scroll down + */ + onScrollDown() { + if ( this.hasNextPage ) { + this.populateCollectionList(this.currentQuery, ++this.currentPage); + } + } + + /** + * Emit a [selectionChange] event when a new collection is selected from list + * + * @param event + * the selected [CollectionListEntry] + */ + onSelect(event: CollectionListEntry) { + this.selectionChange.emit(event); + } + + /** + * Method called for populate the collection list + * @param query text for filter the collection list + * @param page page number + */ + populateCollectionList(query?: string, page?: number) { + this.isLoadingList = true; + // Set the pagination info + const findOptions: FindListOptions = { + elementsPerPage: 10, + currentPage: page + }; + this.searchListCollection$ = this.collectionDataService + .getAuthorizedCollection(query, findOptions, followLink('parentCommunity')) + .pipe( + find((collections: RemoteData>) => !collections.isResponsePending && collections.hasSucceeded), + mergeMap((collections: RemoteData>) => { + if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collections.payload.totalElements ) { + this.hasNextPage = false; + } + return collections.payload.page; + }), + filter((collectionData: Collection) => isNotEmpty(collectionData)), + mergeMap((collection: Collection) => collection.parentCommunity.pipe( + find((communityResponse: RemoteData) => !communityResponse.isResponsePending && communityResponse.hasSucceeded), + mergeMap((communityResponse: RemoteData) => of(communityResponse.payload)), + map((community: Community) => ({ + communities: [{ id: community.id, name: community.name }], + collection: { id: collection.id, uuid: collection.id, name: collection.name } + }) + ))), + reduce((acc: any, value: any) => [...acc, ...value], []), + startWith([]) + ); + this.subs.push(this.searchListCollection$.subscribe( + (next) => { this.searchListCollection.push(...next); }, undefined, + () => { this.isLoadingList = false; this.changeDetectorRef.detectChanges(); } + )); + } + + /** + * Unsubscribe from all subscriptions + */ + ngOnDestroy(): void { + this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe()); + } + + /** + * Reset search form control + */ + reset() { + this.searchField.setValue(''); + } + + /** + * Reset pagination values + */ + resetPagination() { + this.currentPage = 1; + this.currentQuery = ''; + this.hasNextPage = true; + this.searchListCollection = []; + } +} diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html new file mode 100644 index 0000000000..ef8865ad87 --- /dev/null +++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html @@ -0,0 +1,11 @@ +
+
{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}} + +
+
+ + +
+
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts index 02a0bd79cd..45d15ae306 100644 --- a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts +++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.ts @@ -13,7 +13,8 @@ import { DSOSelectorModalWrapperComponent, SelectorActionType } from '../dso-sel @Component({ selector: 'ds-create-item-parent-selector', // styleUrls: ['./create-item-parent-selector.component.scss'], - templateUrl: '../dso-selector-modal-wrapper.component.html', + // templateUrl: '../dso-selector-modal-wrapper.component.html', + templateUrl: './create-item-parent-selector.component.html' }) export class CreateItemParentSelectorComponent extends DSOSelectorModalWrapperComponent implements OnInit { objectType = DSpaceObjectType.ITEM; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 67d7db5c5d..8ef3f91257 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -202,6 +202,7 @@ import { ResourcePolicyTargetResolver } from './resource-policies/resolvers/reso import { ResourcePolicyResolver } from './resource-policies/resolvers/resource-policy.resolver'; import { EpersonSearchBoxComponent } from './resource-policies/form/eperson-group-list/eperson-search-box/eperson-search-box.component'; import { GroupSearchBoxComponent } from './resource-policies/form/eperson-group-list/group-search-box/group-search-box.component'; +import { CollectionDropdownComponent } from './collection-dropdown/collection-dropdown.component'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -386,7 +387,8 @@ const COMPONENTS = [ ResourcePolicyFormComponent, EpersonGroupListComponent, EpersonSearchBoxComponent, - GroupSearchBoxComponent + GroupSearchBoxComponent, + CollectionDropdownComponent ]; const ENTRY_COMPONENTS = [ @@ -504,8 +506,7 @@ const DIRECTIVES = [ ...COMPONENTS, ...DIRECTIVES, ...ENTRY_COMPONENTS, - ...SHARED_ITEM_PAGE_COMPONENTS, - + ...SHARED_ITEM_PAGE_COMPONENTS ], providers: [ ...PROVIDERS diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html index 6f4a8a864c..ad53be200c 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.html +++ b/src/app/submission/form/collection/submission-form-collection.component.html @@ -20,31 +20,9 @@ class="dropdown-menu" id="collectionControlsDropdownMenu" aria-labelledby="collectionControlsMenuButton"> -
- -
-
-
- - -
+ + diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts index 105d94b966..5baa1013ab 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts @@ -1,17 +1,14 @@ -import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core'; +import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core'; import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { of as observableOf } from 'rxjs'; -import { filter } from 'rxjs/operators'; import { TranslateModule } from '@ngx-translate/core'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { Store } from '@ngrx/store'; -import { cold } from 'jasmine-marbles'; import { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub'; -import { mockSubmissionId, mockSubmissionRestResponse } from '../../../shared/mocks/submission.mock'; +import { mockSubmissionId } from '../../../shared/mocks/submission.mock'; import { SubmissionService } from '../../submission.service'; import { SubmissionFormCollectionComponent } from './submission-form-collection.component'; import { CommunityDataService } from '../../../core/data/community-data.service'; @@ -19,173 +16,9 @@ import { SubmissionJsonPatchOperationsService } from '../../../core/submission/s import { SubmissionJsonPatchOperationsServiceStub } from '../../../shared/testing/submission-json-patch-operations-service.stub'; import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder'; import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; -import { RemoteData } from '../../../core/data/remote-data'; -import { Community } from '../../../core/shared/community.model'; -import { PaginatedList } from '../../../core/data/paginated-list'; -import { PageInfo } from '../../../core/shared/page-info.model'; -import { Collection } from '../../../core/shared/collection.model'; import { createTestComponent } from '../../../shared/testing/utils.test'; import { CollectionDataService } from '../../../core/data/collection-data.service'; -const subcommunities = [Object.assign(new Community(), { - name: 'SubCommunity 1', - id: '123456789-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'SubCommunity 1' - }] -}), - Object.assign(new Community(), { - name: 'SubCommunity 1', - id: '123456789s-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'SubCommunity 1' - }] - }) -]; - -const mockCommunity1Collection1 = Object.assign(new Collection(), { - name: 'Community 1-Collection 1', - id: '1234567890-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 1-Collection 1' - }] -}); - -const mockCommunity1Collection2 = Object.assign(new Collection(), { - name: 'Community 1-Collection 2', - id: '1234567890-2', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 1-Collection 2' - }] -}); - -const mockCommunity2Collection1 = Object.assign(new Collection(), { - name: 'Community 2-Collection 1', - id: '1234567890-3', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 2-Collection 1' - }] -}); - -const mockCommunity2Collection2 = Object.assign(new Collection(), { - name: 'Community 2-Collection 2', - id: '1234567890-4', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 2-Collection 2' - }] -}); - -const mockCommunity = Object.assign(new Community(), { - name: 'Community 1', - id: '123456789-1', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 1' - }], - collections: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity1Collection1, mockCommunity1Collection2]))), - subcommunities: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), subcommunities))), -}); - -const mockCommunity2 = Object.assign(new Community(), { - name: 'Community 2', - id: '123456789-2', - metadata: [ - { - key: 'dc.title', - language: 'en_US', - value: 'Community 2' - }], - collections: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity2Collection1, mockCommunity2Collection2]))), - subcommunities: observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), []))), -}); - -const mockCommunity1Collection1Rd = observableOf(new RemoteData(true, true, true, - undefined, mockCommunity1Collection1)); - -const mockCommunityList = observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity, mockCommunity2]))); - -const mockCommunityCollectionList = observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity1Collection1, mockCommunity1Collection2]))); - -const mockCommunity2CollectionList = observableOf(new RemoteData(true, true, true, - undefined, new PaginatedList(new PageInfo(), [mockCommunity2Collection1, mockCommunity2Collection2]))); - -const mockCollectionList = [ - { - communities: [ - { - id: '123456789-1', - name: 'Community 1' - } - ], - collection: { - id: '1234567890-1', - name: 'Community 1-Collection 1' - } - }, - { - communities: [ - { - id: '123456789-1', - name: 'Community 1' - } - ], - collection: { - id: '1234567890-2', - name: 'Community 1-Collection 2' - } - }, - { - communities: [ - { - id: '123456789-2', - name: 'Community 2' - } - ], - collection: { - id: '1234567890-3', - name: 'Community 2-Collection 1' - } - }, - { - communities: [ - { - id: '123456789-2', - name: 'Community 2' - } - ], - collection: { - id: '1234567890-4', - name: 'Community 2-Collection 2' - } - } -]; - describe('SubmissionFormCollectionComponent Component', () => { let comp: SubmissionFormCollectionComponent; @@ -197,8 +30,6 @@ describe('SubmissionFormCollectionComponent Component', () => { const submissionId = mockSubmissionId; const collectionId = '1234567890-1'; const definition = 'traditional'; - const submissionRestResponse = mockSubmissionRestResponse; - const searchedCollection = 'Community 2-Collection 2'; const communityDataService: any = jasmine.createSpyObj('communityDataService', { findAll: jasmine.createSpy('findAll') @@ -299,72 +130,11 @@ describe('SubmissionFormCollectionComponent Component', () => { expect(compAsAny.pathCombiner).toEqual(expected); }); - it('should init collection list properly', () => { - communityDataService.findAll.and.returnValue(mockCommunityList); - collectionDataService.findById.and.returnValue(mockCommunity1Collection1Rd); - collectionDataService.getAuthorizedCollectionByCommunity.and.returnValues(mockCommunityCollectionList, mockCommunity2CollectionList); - - comp.ngOnChanges({ - currentCollectionId: new SimpleChange(null, collectionId, true) - }); - - expect(comp.searchListCollection$).toBeObservable(cold('(ab)', { - a: [], - b: mockCollectionList - })); - - expect(comp.selectedCollectionName$).toBeObservable(cold('(a|)', { - a: 'Community 1-Collection 1' - })); - }); - - it('should show only the searched collection', () => { - comp.searchListCollection$ = observableOf(mockCollectionList); - fixture.detectChanges(); - - comp.searchField.setValue(searchedCollection); - fixture.detectChanges(); - - comp.searchListCollection$.pipe( - filter(() => !comp.disabled$.getValue()) - ).subscribe((list) => { - expect(list).toEqual([mockCollectionList[3]]); - }); - - }); - - it('should emit collectionChange event when selecting a new collection', () => { - spyOn(comp.searchField, 'reset').and.callThrough(); - spyOn(comp.collectionChange, 'emit').and.callThrough(); - jsonPatchOpServiceStub.jsonPatchByResourceID.and.returnValue(observableOf(submissionRestResponse)); - comp.ngOnInit(); - comp.onSelect(mockCollectionList[1]); - fixture.detectChanges(); - - expect(comp.searchField.reset).toHaveBeenCalled(); - expect(comp.collectionChange.emit).toHaveBeenCalledWith(submissionRestResponse[0] as any); - expect(submissionServiceStub.changeSubmissionCollection).toHaveBeenCalled(); - expect(comp.selectedCollectionId).toBe(mockCollectionList[1].collection.id); - expect(comp.selectedCollectionName$).toBeObservable(cold('(a|)', { - a: mockCollectionList[1].collection.name - })); - - }); - - it('should reset searchField when dropdown menu has been closed', () => { - spyOn(comp.searchField, 'reset').and.callThrough(); - comp.toggled(false); - - expect(comp.searchField.reset).toHaveBeenCalled(); - }); - describe('', () => { let dropdowBtn: DebugElement; let dropdownMenu: DebugElement; beforeEach(() => { - - comp.searchListCollection$ = observableOf(mockCollectionList); fixture.detectChanges(); dropdowBtn = fixture.debugElement.query(By.css('#collectionControlsMenuButton')); dropdownMenu = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); @@ -387,46 +157,6 @@ describe('SubmissionFormCollectionComponent Component', () => { fixture.whenStable().then(() => { expect(comp.onClose).toHaveBeenCalled(); expect(dropdownMenu.nativeElement.classList).toContain('show'); - expect(dropdownMenu.queryAll(By.css('.collection-item')).length).toBe(4); - }); - })); - - it('should trigger onSelect method when select a new collection from dropdown menu', fakeAsync(() => { - - spyOn(comp, 'onSelect'); - dropdowBtn.triggerEventHandler('click', null); - tick(); - fixture.detectChanges(); - - const secondLink: DebugElement = dropdownMenu.query(By.css('.collection-item:nth-child(2)')); - secondLink.triggerEventHandler('click', null); - tick(); - fixture.detectChanges(); - - fixture.whenStable().then(() => { - - expect(comp.onSelect).toHaveBeenCalled(); - }); - })); - - it('should update searchField on input type', fakeAsync(() => { - - dropdowBtn.triggerEventHandler('click', null); - tick(); - fixture.detectChanges(); - - fixture.whenStable().then(() => { - const input = fixture.debugElement.query(By.css('input.form-control')); - const el = input.nativeElement; - - expect(el.value).toBe(''); - - el.value = searchedCollection; - el.dispatchEvent(new Event('input')); - - fixture.detectChanges(); - - expect(fixture.componentInstance.searchField.value).toEqual(searchedCollection); }); })); diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index f84764d6a4..691d93aed1 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -7,52 +7,27 @@ import { OnChanges, OnInit, Output, - SimpleChanges + SimpleChanges, + ViewChild } from '@angular/core'; -import { FormControl } from '@angular/forms'; -import { BehaviorSubject, combineLatest, Observable, of as observableOf, Subscription } from 'rxjs'; +import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs'; import { - debounceTime, - distinctUntilChanged, - filter, find, - flatMap, - map, - mergeMap, - reduce, - startWith + map } from 'rxjs/operators'; import { Collection } from '../../../core/shared/collection.model'; import { CommunityDataService } from '../../../core/data/community-data.service'; -import { Community } from '../../../core/shared/community.model'; -import { hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util'; +import { hasValue, isNotEmpty } from '../../../shared/empty.util'; import { RemoteData } from '../../../core/data/remote-data'; import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder'; -import { PaginatedList } from '../../../core/data/paginated-list'; import { SubmissionService } from '../../submission.service'; import { SubmissionObject } from '../../../core/submission/models/submission-object.model'; import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service'; import { CollectionDataService } from '../../../core/data/collection-data.service'; -import { FindListOptions } from '../../../core/data/request.models'; - -/** - * An interface to represent a collection entry - */ -interface CollectionListEntryItem { - id: string; - name: string; -} - -/** - * An interface to represent an entry in the collection list - */ -interface CollectionListEntry { - communities: CollectionListEntryItem[], - collection: CollectionListEntryItem -} +import { CollectionDropdownComponent } from 'src/app/shared/collection-dropdown/collection-dropdown.component'; /** * This component allows to show the current collection the submission belonging to and to change it. @@ -100,18 +75,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ public processingChange$ = new BehaviorSubject(false); - /** - * The search form control - * @type {FormControl} - */ - public searchField: FormControl = new FormControl(); - - /** - * The collection list obtained from a search - * @type {Observable} - */ - public searchListCollection$: Observable; - /** * The selected collection id * @type {string} @@ -148,6 +111,11 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ private subs: Subscription[] = []; + /** + * The html child that contains the collections list + */ + @ViewChild(CollectionDropdownComponent, {static: false}) collectionDropdown: CollectionDropdownComponent; + /** * Initialize instance variables * @@ -204,51 +172,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { find((collectionRD: RemoteData) => isNotEmpty(collectionRD.payload)), map((collectionRD: RemoteData) => collectionRD.payload.name) ); - - const findOptions: FindListOptions = { - elementsPerPage: 1000 - }; - - // Retrieve collection list only when is the first change - if (changes.currentCollectionId.isFirstChange()) { - // @TODO replace with search/top browse endpoint - // @TODO implement community/subcommunity hierarchy - const communities$ = this.communityDataService.findAll(findOptions).pipe( - find((communities: RemoteData>) => isNotEmpty(communities.payload)), - mergeMap((communities: RemoteData>) => communities.payload.page)); - - const listCollection$ = communities$.pipe( - flatMap((communityData: Community) => { - return this.collectionDataService.getAuthorizedCollectionByCommunity(communityData.uuid, findOptions).pipe( - find((collections: RemoteData>) => !collections.isResponsePending && collections.hasSucceeded), - mergeMap((collections: RemoteData>) => collections.payload.page), - filter((collectionData: Collection) => isNotEmpty(collectionData)), - map((collectionData: Collection) => ({ - communities: [{ id: communityData.id, name: communityData.name }], - collection: { id: collectionData.id, name: collectionData.name } - })) - ); - }), - reduce((acc: any, value: any) => [...acc, ...value], []), - startWith([]) - ); - - const searchTerm$ = this.searchField.valueChanges.pipe( - debounceTime(200), - distinctUntilChanged(), - startWith('') - ); - - this.searchListCollection$ = combineLatest(searchTerm$, listCollection$).pipe( - map(([searchTerm, listCollection]) => { - this.disabled$.next(isEmpty(listCollection)); - if (isEmpty(searchTerm)) { - return listCollection; - } else { - return listCollection.filter((v) => v.collection.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1).slice(0, 5); - } - })); - } } } @@ -273,7 +196,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { * the selected [CollectionListEntryItem] */ onSelect(event) { - this.searchField.reset(); this.processingChange$.next(true); this.operationsBuilder.replace(this.pathCombiner.getPath(), event.collection.id, true); this.subs.push(this.operationsService.jsonPatchByResourceID( @@ -296,7 +218,7 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { * Reset search form control on dropdown menu close */ onClose() { - this.searchField.reset(); + this.collectionDropdown.reset(); } /** @@ -307,7 +229,7 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ toggled(isOpen: boolean) { if (!isOpen) { - this.searchField.reset(); + this.collectionDropdown.reset(); } } } From 5f0f665501825a7f873fb2af40b575fcb3101f1d Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Tue, 16 Jun 2020 15:51:56 +0200 Subject: [PATCH 04/28] [CTS-3090] - fix --- .../collection-dropdown/collection-dropdown.component.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index e9e0445ca6..cf69fc31a6 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -10,7 +10,7 @@ import { Community } from 'src/app/core/shared/community.model'; import { CollectionDataService } from 'src/app/core/data/collection-data.service'; import { Collection } from '../../core/shared/collection.model'; import { followLink } from '../utils/follow-link-config.model'; - +import { getFirstSucceededRemoteDataPayload, getAllSucceededRemoteData, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; /** * An interface to represent a collection entry */ @@ -178,17 +178,15 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { this.searchListCollection$ = this.collectionDataService .getAuthorizedCollection(query, findOptions, followLink('parentCommunity')) .pipe( - find((collections: RemoteData>) => !collections.isResponsePending && collections.hasSucceeded), + getSucceededRemoteWithNotEmptyData(), mergeMap((collections: RemoteData>) => { if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collections.payload.totalElements ) { this.hasNextPage = false; } return collections.payload.page; }), - filter((collectionData: Collection) => isNotEmpty(collectionData)), mergeMap((collection: Collection) => collection.parentCommunity.pipe( - find((communityResponse: RemoteData) => !communityResponse.isResponsePending && communityResponse.hasSucceeded), - mergeMap((communityResponse: RemoteData) => of(communityResponse.payload)), + getFirstSucceededRemoteDataPayload(), map((community: Community) => ({ communities: [{ id: community.id, name: community.name }], collection: { id: collection.id, uuid: collection.id, name: collection.name } From efc476ab312eb45924f84b5cc11f0b9ddf40a92d Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Tue, 16 Jun 2020 17:46:24 +0200 Subject: [PATCH 05/28] remove unused disabled$ variable --- .../collection/submission-form-collection.component.html | 2 +- .../form/collection/submission-form-collection.component.ts | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html index ad53be200c..98ec9e0576 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.html +++ b/src/app/submission/form/collection/submission-form-collection.component.html @@ -10,7 +10,7 @@ class="btn btn-outline-primary" (blur)="onClose()" (click)="onClose()" - [disabled]="(disabled$ | async) || (processingChange$ | async)" + [disabled]="(processingChange$ | async)" ngbDropdownToggle> {{ selectedCollectionName$ | async }} diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index 691d93aed1..613bf70ede 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -63,12 +63,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ @Output() collectionChange: EventEmitter = new EventEmitter(); - /** - * A boolean representing if this dropdown button is disabled - * @type {BehaviorSubject} - */ - public disabled$ = new BehaviorSubject(true); - /** * A boolean representing if a collection change operation is processing * @type {BehaviorSubject} From 294f5e5f3140128845a67eeb16faf012e9955b6b Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Wed, 17 Jun 2020 10:47:46 +0200 Subject: [PATCH 06/28] [CST-3090] fix services name and dropdown --- src/app/core/data/collection-data.service.ts | 6 +-- .../collection-dropdown.component.ts | 2 +- .../submission-form-collection.component.ts | 39 ------------------- 3 files changed, 4 insertions(+), 43 deletions(-) diff --git a/src/app/core/data/collection-data.service.ts b/src/app/core/data/collection-data.service.ts index d28421356a..41f70dd31c 100644 --- a/src/app/core/data/collection-data.service.ts +++ b/src/app/core/data/collection-data.service.ts @@ -78,7 +78,7 @@ export class CollectionDataService extends ComColDataService { * collection list */ getAuthorizedCollection(query: string, options: FindListOptions = {}, ...linksToFollow: Array>): Observable>> { - const searchHref = 'findAuthorized'; + const searchHref = 'findSubmitAuthorized'; options = Object.assign({}, options, { searchParams: [new RequestParam('query', query)] }); @@ -97,7 +97,7 @@ export class CollectionDataService extends ComColDataService { * collection list */ getAuthorizedCollectionByCommunity(communityId: string, query: string, options: FindListOptions = {}): Observable>> { - const searchHref = 'findAuthorizedByCommunity'; + const searchHref = 'findSubmitAuthorizedByCommunity'; options = Object.assign({}, options, { searchParams: [ new RequestParam('uuid', communityId), @@ -116,7 +116,7 @@ export class CollectionDataService extends ComColDataService { * true if the user has at least one collection to submit to */ hasAuthorizedCollection(): Observable { - const searchHref = 'findAuthorized'; + const searchHref = 'findSubmitAuthorized'; const options = new FindListOptions(); options.elementsPerPage = 1; diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index cf69fc31a6..0bb3ebdad9 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -123,7 +123,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { startWith('') ).subscribe( (next) => { - if (hasValue(next)) { + if (hasValue(next) && next !== this.currentQuery) { this.resetPagination(); this.currentQuery = next; this.populateCollectionList(this.currentQuery, this.currentPage); diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index 613bf70ede..d2f45e002c 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -87,18 +87,6 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ protected pathCombiner: JsonPatchOperationPathCombiner; - /** - * A boolean representing if dropdown list is scrollable to the bottom - * @type {boolean} - */ - private scrollableBottom = false; - - /** - * A boolean representing if dropdown list is scrollable to the top - * @type {boolean} - */ - private scrollableTop = false; - /** * Array to track all subscriptions and unsubscribe them onDestroy * @type {Array} @@ -121,39 +109,12 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { * @param {SubmissionService} submissionService */ constructor(protected cdr: ChangeDetectorRef, - private communityDataService: CommunityDataService, private collectionDataService: CollectionDataService, private operationsBuilder: JsonPatchOperationsBuilder, private operationsService: SubmissionJsonPatchOperationsService, private submissionService: SubmissionService) { } - /** - * Method called on mousewheel event, it prevent the page scroll - * when arriving at the top/bottom of dropdown menu - * - * @param event - * mousewheel event - */ - @HostListener('mousewheel', ['$event']) onMousewheel(event) { - if (event.wheelDelta > 0 && this.scrollableTop) { - event.preventDefault(); - } - if (event.wheelDelta < 0 && this.scrollableBottom) { - event.preventDefault(); - } - } - - /** - * Check if dropdown scrollbar is at the top or bottom of the dropdown list - * - * @param event - */ - onScroll(event) { - this.scrollableBottom = (event.target.scrollTop + event.target.clientHeight === event.target.scrollHeight); - this.scrollableTop = (event.target.scrollTop === 0); - } - /** * Initialize collection list */ From 752cf9778789d587b550b17f7cbd1641bbc3d6b9 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Wed, 17 Jun 2020 13:12:49 +0200 Subject: [PATCH 07/28] 71380: Fix tests --- .../item-bitstreams.component.spec.ts | 15 ++- .../object-updates.reducer.spec.ts | 74 +----------- .../object-updates.service.spec.ts | 113 +----------------- ...nated-drag-and-drop-list.component.spec.ts | 79 +++--------- 4 files changed, 38 insertions(+), 243 deletions(-) diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts index cc1ec39bad..5aa085a42c 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts @@ -188,8 +188,21 @@ describe('ItemBitstreamsComponent', () => { it('should not call deleteAndReturnResponse on the bitstreamService for the unmarked field', () => { expect(bitstreamService.deleteAndReturnResponse).not.toHaveBeenCalledWith(bitstream1.id); }); + }); - it('should send out a patch for the move operations', () => { + describe('when dropBitstream is called', () => { + const event = { + fromIndex: 0, + toIndex: 50, + // tslint:disable-next-line:no-empty + finish: () => {} + }; + + beforeEach(() => { + comp.dropBitstream(bundle, event); + }); + + it('should send out a patch for the move operation', () => { expect(bundleService.patch).toHaveBeenCalled(); }); }); diff --git a/src/app/core/data/object-updates/object-updates.reducer.spec.ts b/src/app/core/data/object-updates/object-updates.reducer.spec.ts index bdf202049e..cb7f44039c 100644 --- a/src/app/core/data/object-updates/object-updates.reducer.spec.ts +++ b/src/app/core/data/object-updates/object-updates.reducer.spec.ts @@ -1,9 +1,9 @@ import * as deepFreeze from 'deep-freeze'; import { - AddFieldUpdateAction, AddPageToCustomOrderAction, + AddFieldUpdateAction, DiscardObjectUpdatesAction, FieldChangeType, - InitializeFieldsAction, MoveFieldUpdateAction, + InitializeFieldsAction, ReinstateObjectUpdatesAction, RemoveAllObjectUpdatesAction, RemoveFieldUpdateAction, RemoveObjectUpdatesAction, SelectVirtualMetadataAction, SetEditableFieldUpdateAction, SetValidFieldUpdateAction @@ -85,16 +85,6 @@ describe('objectUpdatesReducer', () => { virtualMetadataSources: { [relationship.uuid]: {[identifiable1.uuid]: true} }, - customOrder: { - initialOrderPages: [ - { order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] } - ], - newOrderPages: [ - { order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] } - ], - pageSize: 10, - changed: false - } } }; @@ -121,16 +111,6 @@ describe('objectUpdatesReducer', () => { virtualMetadataSources: { [relationship.uuid]: {[identifiable1.uuid]: true} }, - customOrder: { - initialOrderPages: [ - { order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] } - ], - newOrderPages: [ - { order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] } - ], - pageSize: 10, - changed: false - } }, [url + OBJECT_UPDATES_TRASH_PATH]: { fieldStates: { @@ -165,16 +145,6 @@ describe('objectUpdatesReducer', () => { virtualMetadataSources: { [relationship.uuid]: {[identifiable1.uuid]: true} }, - customOrder: { - initialOrderPages: [ - { order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] } - ], - newOrderPages: [ - { order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] } - ], - pageSize: 10, - changed: false - } } }; @@ -243,7 +213,7 @@ describe('objectUpdatesReducer', () => { }); it('should initialize all fields when the INITIALIZE action is dispatched, based on the payload', () => { - const action = new InitializeFieldsAction(url, [identifiable1, identifiable3], modDate, [identifiable1.uuid, identifiable3.uuid], 10, 0); + const action = new InitializeFieldsAction(url, [identifiable1, identifiable3], modDate); const expectedState = { [url]: { @@ -261,17 +231,7 @@ describe('objectUpdatesReducer', () => { }, fieldUpdates: {}, virtualMetadataSources: {}, - lastModified: modDate, - customOrder: { - initialOrderPages: [ - { order: [identifiable1.uuid, identifiable3.uuid] } - ], - newOrderPages: [ - { order: [identifiable1.uuid, identifiable3.uuid] } - ], - pageSize: 10, - changed: false - } + lastModified: modDate } }; const newState = objectUpdatesReducer(testState, action); @@ -337,30 +297,4 @@ describe('objectUpdatesReducer', () => { const newState = objectUpdatesReducer(testState, action); expect(newState[url].fieldUpdates[uuid]).toBeUndefined(); }); - - it('should move the custom order from the state when the MOVE action is dispatched', () => { - const action = new MoveFieldUpdateAction(url, 0, 1, 0, 0); - - const newState = objectUpdatesReducer(testState, action); - expect(newState[url].customOrder.newOrderPages[0].order[0]).toEqual(testState[url].customOrder.newOrderPages[0].order[1]); - expect(newState[url].customOrder.newOrderPages[0].order[1]).toEqual(testState[url].customOrder.newOrderPages[0].order[0]); - expect(newState[url].customOrder.changed).toEqual(true); - }); - - it('should add a new page to the custom order and add empty pages in between when the ADD_PAGE_TO_CUSTOM_ORDER action is dispatched', () => { - const identifiable4 = { - uuid: 'a23eae5a-7857-4ef9-8e52-989436ad2955', - key: 'dc.description.abstract', - language: null, - value: 'Extra value' - }; - const action = new AddPageToCustomOrderAction(url, [identifiable4], [identifiable4.uuid], 2); - - const newState = objectUpdatesReducer(testState, action); - // Confirm the page in between the two pages (index 1) has been filled with 10 (page size) undefined values - expect(newState[url].customOrder.newOrderPages[1].order.length).toEqual(10); - expect(newState[url].customOrder.newOrderPages[1].order[0]).toBeUndefined(); - // Verify the new page is correct - expect(newState[url].customOrder.newOrderPages[2].order[0]).toEqual(identifiable4.uuid); - }); }); diff --git a/src/app/core/data/object-updates/object-updates.service.spec.ts b/src/app/core/data/object-updates/object-updates.service.spec.ts index 780a402a84..04018b8de2 100644 --- a/src/app/core/data/object-updates/object-updates.service.spec.ts +++ b/src/app/core/data/object-updates/object-updates.service.spec.ts @@ -2,7 +2,6 @@ import { Store } from '@ngrx/store'; import { CoreState } from '../../core.reducers'; import { ObjectUpdatesService } from './object-updates.service'; import { - AddPageToCustomOrderAction, DiscardObjectUpdatesAction, FieldChangeType, InitializeFieldsAction, ReinstateObjectUpdatesAction, RemoveFieldUpdateAction, SelectVirtualMetadataAction, @@ -13,8 +12,6 @@ import { Notification } from '../../../shared/notifications/models/notification. import { NotificationType } from '../../../shared/notifications/models/notification-type'; import { OBJECT_UPDATES_TRASH_PATH } from './object-updates.reducer'; import {Relationship} from '../../shared/item-relationships/relationship.model'; -import { MoveOperation } from 'fast-json-patch/lib/core'; -import { ArrayMoveChangeAnalyzer } from '../array-move-change-analyzer.service'; describe('ObjectUpdatesService', () => { let service: ObjectUpdatesService; @@ -47,7 +44,7 @@ describe('ObjectUpdatesService', () => { }; store = new Store(undefined, undefined, undefined); spyOn(store, 'dispatch'); - service = new ObjectUpdatesService(store, new ArrayMoveChangeAnalyzer()); + service = new ObjectUpdatesService(store); spyOn(service as any, 'getObjectEntry').and.returnValue(observableOf(objectEntry)); spyOn(service as any, 'getFieldState').and.callFake((uuid) => { @@ -63,25 +60,6 @@ describe('ObjectUpdatesService', () => { }); }); - describe('initializeWithCustomOrder', () => { - const pageSize = 20; - const page = 0; - - it('should dispatch an INITIALIZE action with the correct URL, initial identifiables, last modified , custom order, page size and page', () => { - service.initializeWithCustomOrder(url, identifiables, modDate, pageSize, page); - expect(store.dispatch).toHaveBeenCalledWith(new InitializeFieldsAction(url, identifiables, modDate, identifiables.map((identifiable) => identifiable.uuid), pageSize, page)); - }); - }); - - describe('addPageToCustomOrder', () => { - const page = 2; - - it('should dispatch an ADD_PAGE_TO_CUSTOM_ORDER action with the correct URL, identifiables, custom order and page number to add', () => { - service.addPageToCustomOrder(url, identifiables, page); - expect(store.dispatch).toHaveBeenCalledWith(new AddPageToCustomOrderAction(url, identifiables, identifiables.map((identifiable) => identifiable.uuid), page)); - }); - }); - describe('getFieldUpdates', () => { it('should return the list of all fields, including their update if there is one', () => { const result$ = service.getFieldUpdates(url, identifiables); @@ -116,49 +94,6 @@ describe('ObjectUpdatesService', () => { }); }); - describe('getFieldUpdatesByCustomOrder', () => { - beforeEach(() => { - const fieldStates = { - [identifiable1.uuid]: { editable: false, isNew: false, isValid: true }, - [identifiable2.uuid]: { editable: true, isNew: false, isValid: false }, - [identifiable3.uuid]: { editable: true, isNew: true, isValid: true }, - }; - - const customOrder = { - initialOrderPages: [{ - order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] - }], - newOrderPages: [{ - order: [identifiable2.uuid, identifiable3.uuid, identifiable1.uuid] - }], - pageSize: 20, - changed: true - }; - - const objectEntry = { - fieldStates, fieldUpdates, lastModified: modDate, virtualMetadataSources: {}, customOrder - }; - - (service as any).getObjectEntry.and.returnValue(observableOf(objectEntry)) - }); - - it('should return the list of all fields, including their update if there is one, ordered by their custom order', (done) => { - const result$ = service.getFieldUpdatesByCustomOrder(url, identifiables); - expect((service as any).getObjectEntry).toHaveBeenCalledWith(url); - - const expectedResult = { - [identifiable2.uuid]: { field: identifiable2, changeType: undefined }, - [identifiable3.uuid]: { field: identifiable3, changeType: FieldChangeType.ADD }, - [identifiable1.uuid]: { field: identifiable1Updated, changeType: FieldChangeType.UPDATE } - }; - - result$.subscribe((result) => { - expect(result).toEqual(expectedResult); - done(); - }); - }); - }); - describe('isEditable', () => { it('should return false if this identifiable is currently not editable in the store', () => { const result$ = service.isEditable(url, identifiable1.uuid); @@ -274,11 +209,7 @@ describe('ObjectUpdatesService', () => { }); describe('when updates are emtpy', () => { beforeEach(() => { - (service as any).getObjectEntry.and.returnValue(observableOf({ - customOrder: { - changed: false - } - })) + (service as any).getObjectEntry.and.returnValue(observableOf({})) }); it('should return false when there are no updates', () => { @@ -346,44 +277,4 @@ describe('ObjectUpdatesService', () => { }); }); - describe('getMoveOperations', () => { - beforeEach(() => { - const fieldStates = { - [identifiable1.uuid]: { editable: false, isNew: false, isValid: true }, - [identifiable2.uuid]: { editable: true, isNew: false, isValid: false }, - [identifiable3.uuid]: { editable: true, isNew: true, isValid: true }, - }; - - const customOrder = { - initialOrderPages: [{ - order: [identifiable1.uuid, identifiable2.uuid, identifiable3.uuid] - }], - newOrderPages: [{ - order: [identifiable2.uuid, identifiable3.uuid, identifiable1.uuid] - }], - pageSize: 20, - changed: true - }; - - const objectEntry = { - fieldStates, fieldUpdates, lastModified: modDate, virtualMetadataSources: {}, customOrder - }; - - (service as any).getObjectEntry.and.returnValue(observableOf(objectEntry)) - }); - - it('should return the expected move operations', (done) => { - const result$ = service.getMoveOperations(url); - - const expectedResult = [ - { op: 'move', from: '/0', path: '/2' } - ] as MoveOperation[]; - - result$.subscribe((result) => { - expect(result).toEqual(expectedResult); - done(); - }); - }); - }); - }); diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts index 9fcfd21586..0c55afb2e0 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts @@ -52,10 +52,8 @@ describe('AbstractPaginatedDragAndDropListComponent', () => { beforeEach(() => { objectUpdatesService = jasmine.createSpyObj('objectUpdatesService', { - initializeWithCustomOrder: {}, - addPageToCustomOrder: {}, - getFieldUpdatesByCustomOrder: observableOf(updates), - saveMoveFieldUpdate: {} + initialize: {}, + getFieldUpdatesExclusive: observableOf(updates) }); elRef = { nativeElement: jasmine.createSpyObj('nativeElement', { @@ -71,13 +69,8 @@ describe('AbstractPaginatedDragAndDropListComponent', () => { component.ngOnInit(); }); - it('should call initializeWithCustomOrder to initialize the first page and add it to initializedPages', (done) => { - expect(component.initializedPages.indexOf(0)).toBeLessThan(0); - component.updates$.pipe(take(1)).subscribe(() => { - expect(objectUpdatesService.initializeWithCustomOrder).toHaveBeenCalled(); - expect(component.initializedPages.indexOf(0)).toBeGreaterThanOrEqual(0); - done(); - }); + it('should call initialize to initialize the objects in the store', () => { + expect(objectUpdatesService.initialize).toHaveBeenCalled(); }); it('should initialize the updates correctly', (done) => { @@ -87,43 +80,6 @@ describe('AbstractPaginatedDragAndDropListComponent', () => { }); }); - describe('when a new page is loaded', () => { - const page = 5; - - beforeEach((done) => { - component.updates$.pipe(take(1)).subscribe(() => { - component.currentPage$.next(page); - objectsRD$.next(objectsRD); - done(); - }); - }); - - it('should call addPageToCustomOrder to initialize the new page and add it to initializedPages', (done) => { - component.updates$.pipe(take(1)).subscribe(() => { - expect(objectUpdatesService.addPageToCustomOrder).toHaveBeenCalled(); - expect(component.initializedPages.indexOf(page - 1)).toBeGreaterThanOrEqual(0); - done(); - }); - }); - - describe('twice', () => { - beforeEach((done) => { - component.updates$.pipe(take(1)).subscribe(() => { - component.currentPage$.next(page); - objectsRD$.next(objectsRD); - done(); - }); - }); - - it('shouldn\'t call addPageToCustomOrder again, as the page has already been initialized', (done) => { - component.updates$.pipe(take(1)).subscribe(() => { - expect(objectUpdatesService.addPageToCustomOrder).toHaveBeenCalledTimes(1); - done(); - }); - }); - }); - }); - describe('switchPage', () => { const page = 3; @@ -149,30 +105,31 @@ describe('AbstractPaginatedDragAndDropListComponent', () => { beforeEach(() => { elRef.nativeElement.querySelector.and.returnValue(hoverElement); - component.initializedPages.push(hoverPage - 1); + spyOn(component.dropObject, 'emit'); component.drop(event); }); - it('should detect the page and set currentPage$ to its value', () => { - expect(component.currentPage$.value).toEqual(hoverPage); - }); - - it('should detect the page and update the pagination component with its value', () => { - expect(paginationComponent.doPageChange).toHaveBeenCalledWith(hoverPage); - }); - - it('should send out a saveMoveFieldUpdate with the correct values', () => { - expect(objectUpdatesService.saveMoveFieldUpdate).toHaveBeenCalledWith(url, event.previousIndex, 0, 0, hoverPage - 1, object1); + it('should send out a dropObject event with the expected processed paginated indexes', () => { + expect(component.dropObject.emit).toHaveBeenCalledWith(Object.assign({ + fromIndex: ((component.currentPage$.value - 1) * component.pageSize) + event.previousIndex, + toIndex: ((hoverPage - 1) * component.pageSize), + finish: jasmine.anything() + })); }); }); describe('when the user is not hovering over a new page', () => { beforeEach(() => { + spyOn(component.dropObject, 'emit'); component.drop(event); }); - it('should send out a saveMoveFieldUpdate with the correct values', () => { - expect(objectUpdatesService.saveMoveFieldUpdate).toHaveBeenCalledWith(url, event.previousIndex, event.currentIndex, 0, 0); + it('should send out a dropObject event with the expected properties', () => { + expect(component.dropObject.emit).toHaveBeenCalledWith(Object.assign({ + fromIndex: event.previousIndex, + toIndex: event.currentIndex, + finish: jasmine.anything() + })); }); }); }); From 3b581b93c5e7ae90e173ebb587033cfb0f27488c Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Wed, 17 Jun 2020 16:31:11 +0200 Subject: [PATCH 08/28] [CST-3090] fix --- .../collection-dropdown.component.html | 4 +-- .../collection-dropdown.component.ts | 33 +++++++++++++------ 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html index 0674084a43..36269294c1 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.html +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html @@ -20,7 +20,7 @@ [infiniteScrollContainer]="'.scrollable-menu'" [fromRoot]="true" (scrolled)="onScrollDown()"> - - diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index 0bb3ebdad9..0c36d40ff6 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core'; import { FormControl } from '@angular/forms'; -import { Observable, of, Subscription } from 'rxjs'; +import { Observable, of, Subscription, BehaviorSubject } from 'rxjs'; import { hasValue, isNotEmpty } from '../empty.util'; -import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; import { RemoteData } from 'src/app/core/data/remote-data'; import { FindListOptions } from 'src/app/core/data/request.models'; import { PaginatedList } from 'src/app/core/data/paginated-list'; @@ -11,6 +11,8 @@ import { CollectionDataService } from 'src/app/core/data/collection-data.service import { Collection } from '../../core/shared/collection.model'; import { followLink } from '../utils/follow-link-config.model'; import { getFirstSucceededRemoteDataPayload, getAllSucceededRemoteData, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; +import { constructor } from 'lodash'; +import { query } from '@angular/animations'; /** * An interface to represent a collection entry */ @@ -74,7 +76,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { /** * A boolean representing if the loader is visible or not */ - isLoadingList: boolean; + isLoadingList: BehaviorSubject = new BehaviorSubject(false); /** * A numeric representig current page @@ -91,6 +93,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ currentQuery: string; + hideLoaderWhenUnsubscribed$ = new Observable(() => () => this.hideShowLoader(false) ); + constructor( private changeDetectorRef: ChangeDetectorRef, private collectionDataService: CollectionDataService, @@ -118,7 +122,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ ngOnInit() { this.subs.push(this.searchField.valueChanges.pipe( - debounceTime(200), + debounceTime(300), distinctUntilChanged(), startWith('') ).subscribe( @@ -168,8 +172,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { * @param query text for filter the collection list * @param page page number */ - populateCollectionList(query?: string, page?: number) { - this.isLoadingList = true; + populateCollectionList(query: string, page: number) { + this.isLoadingList.next(true); // Set the pagination info const findOptions: FindListOptions = { elementsPerPage: 10, @@ -179,7 +183,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { .getAuthorizedCollection(query, findOptions, followLink('parentCommunity')) .pipe( getSucceededRemoteWithNotEmptyData(), - mergeMap((collections: RemoteData>) => { + switchMap((collections: RemoteData>) => { if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collections.payload.totalElements ) { this.hasNextPage = false; } @@ -192,12 +196,13 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { collection: { id: collection.id, uuid: collection.id, name: collection.name } }) ))), - reduce((acc: any, value: any) => [...acc, ...value], []), - startWith([]) + scan((acc: any, value: any) => [...acc, ...value], []), + startWith([]), + merge(this.hideLoaderWhenUnsubscribed$) ); this.subs.push(this.searchListCollection$.subscribe( (next) => { this.searchListCollection.push(...next); }, undefined, - () => { this.isLoadingList = false; this.changeDetectorRef.detectChanges(); } + () => { this.hideShowLoader(false); this.changeDetectorRef.detectChanges(); } )); } @@ -224,4 +229,12 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { this.hasNextPage = true; this.searchListCollection = []; } + + /** + * Hide/Show the collection list loader + * @param hideShow true for show, false otherwise + */ + hideShowLoader(hideShow: boolean) { + this.isLoadingList.next(hideShow); + } } From be2d49633533323551302aca1daea34269b5ce19 Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Wed, 17 Jun 2020 17:02:27 +0200 Subject: [PATCH 09/28] [CTS-3090] update imports --- .../collection-dropdown.component.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index 0c36d40ff6..fb044ce073 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -1,8 +1,8 @@ -import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, AfterViewChecked } from '@angular/core'; +import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, EventEmitter, ElementRef } from '@angular/core'; import { FormControl } from '@angular/forms'; -import { Observable, of, Subscription, BehaviorSubject } from 'rxjs'; -import { hasValue, isNotEmpty } from '../empty.util'; -import { find, map, mergeMap, filter, reduce, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; +import { Observable, Subscription, BehaviorSubject } from 'rxjs'; +import { hasValue } from '../empty.util'; +import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; import { RemoteData } from 'src/app/core/data/remote-data'; import { FindListOptions } from 'src/app/core/data/request.models'; import { PaginatedList } from 'src/app/core/data/paginated-list'; @@ -10,9 +10,8 @@ import { Community } from 'src/app/core/shared/community.model'; import { CollectionDataService } from 'src/app/core/data/collection-data.service'; import { Collection } from '../../core/shared/collection.model'; import { followLink } from '../utils/follow-link-config.model'; -import { getFirstSucceededRemoteDataPayload, getAllSucceededRemoteData, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; -import { constructor } from 'lodash'; -import { query } from '@angular/animations'; +import { getFirstSucceededRemoteDataPayload, getSucceededRemoteWithNotEmptyData } from '../../core/shared/operators'; + /** * An interface to represent a collection entry */ From f33f391eb39ef7e918899e23a77b656ad54cda7b Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Thu, 18 Jun 2020 10:23:56 +0200 Subject: [PATCH 10/28] [CTS-3090] - fix pagination --- .../collection-dropdown.component.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index fb044ce073..0986badf45 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, import { FormControl } from '@angular/forms'; import { Observable, Subscription, BehaviorSubject } from 'rxjs'; import { hasValue } from '../empty.util'; -import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan } from 'rxjs/operators'; +import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan, reduce } from 'rxjs/operators'; import { RemoteData } from 'src/app/core/data/remote-data'; import { FindListOptions } from 'src/app/core/data/request.models'; import { PaginatedList } from 'src/app/core/data/paginated-list'; @@ -92,8 +92,6 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ currentQuery: string; - hideLoaderWhenUnsubscribed$ = new Observable(() => () => this.hideShowLoader(false) ); - constructor( private changeDetectorRef: ChangeDetectorRef, private collectionDataService: CollectionDataService, @@ -121,7 +119,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { */ ngOnInit() { this.subs.push(this.searchField.valueChanges.pipe( - debounceTime(300), + debounceTime(500), distinctUntilChanged(), startWith('') ).subscribe( @@ -195,9 +193,8 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { collection: { id: collection.id, uuid: collection.id, name: collection.name } }) ))), - scan((acc: any, value: any) => [...acc, ...value], []), - startWith([]), - merge(this.hideLoaderWhenUnsubscribed$) + reduce((acc: any, value: any) => [...acc, ...value], []), + startWith([]) ); this.subs.push(this.searchListCollection$.subscribe( (next) => { this.searchListCollection.push(...next); }, undefined, From 136e36afab428d104dcb8e95d5aba0cbbb7b9958 Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Thu, 18 Jun 2020 11:30:45 +0200 Subject: [PATCH 11/28] [CST-3105] done --- .../submission-form-collection.component.html | 17 ++++++++++++++++- .../submission-form-collection.component.ts | 11 ++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html index 98ec9e0576..d897cc31fd 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.html +++ b/src/app/submission/form/collection/submission-form-collection.component.html @@ -1,5 +1,20 @@
-
+
+
+ {{ 'submission.sections.general.collection' | translate }} +
+
+ {{ selectedCollectionName$ | async }} +
+
+
{{ 'submission.sections.general.collection' | translate }} diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index d2f45e002c..6517be7101 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -28,6 +28,7 @@ import { SubmissionObject } from '../../../core/submission/models/submission-obj import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service'; import { CollectionDataService } from '../../../core/data/collection-data.service'; import { CollectionDropdownComponent } from 'src/app/shared/collection-dropdown/collection-dropdown.component'; +import { SectionsService } from '../../sections/sections.service'; /** * This component allows to show the current collection the submission belonging to and to change it. @@ -98,6 +99,12 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ @ViewChild(CollectionDropdownComponent, {static: false}) collectionDropdown: CollectionDropdownComponent; + /** + * A boolean representing if the collection section is available + * @type {BehaviorSubject} + */ + available$: Observable; + /** * Initialize instance variables * @@ -112,7 +119,8 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { private collectionDataService: CollectionDataService, private operationsBuilder: JsonPatchOperationsBuilder, private operationsService: SubmissionJsonPatchOperationsService, - private submissionService: SubmissionService) { + private submissionService: SubmissionService, + private sectionsService: SectionsService) { } /** @@ -135,6 +143,7 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit { */ ngOnInit() { this.pathCombiner = new JsonPatchOperationPathCombiner('sections', 'collection'); + this.available$ = this.sectionsService.isSectionAvailable(this.submissionId, 'collection'); } /** From 709726e04122d62db1afda4df0aa43850b31808f Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Thu, 18 Jun 2020 12:00:30 +0200 Subject: [PATCH 12/28] [CST-3105] tests --- ...bmission-form-collection.component.spec.ts | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts index 5baa1013ab..cfdc2e2406 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts @@ -18,8 +18,12 @@ import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/jso import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; import { createTestComponent } from '../../../shared/testing/utils.test'; import { CollectionDataService } from '../../../core/data/collection-data.service'; +import { hot } from 'jasmine-marbles'; +import { of } from 'rxjs'; +import { SectionsService } from '../../sections/sections.service'; +import { componentFactoryName } from '@angular/compiler'; -describe('SubmissionFormCollectionComponent Component', () => { +fdescribe('SubmissionFormCollectionComponent Component', () => { let comp: SubmissionFormCollectionComponent; let compAsAny: any; @@ -48,6 +52,10 @@ describe('SubmissionFormCollectionComponent Component', () => { replace: jasmine.createSpy('replace') }); + const sectionsService: any = jasmine.createSpyObj('sectionsService', { + isSectionAvailable: of(true) + }); + beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ @@ -67,6 +75,7 @@ describe('SubmissionFormCollectionComponent Component', () => { { provide: CommunityDataService, useValue: communityDataService }, { provide: JsonPatchOperationsBuilder, useValue: jsonPatchOpBuilder }, { provide: Store, useValue: store }, + { provide: SectionsService, useValue: sectionsService }, ChangeDetectorRef, SubmissionFormCollectionComponent ], @@ -160,6 +169,17 @@ describe('SubmissionFormCollectionComponent Component', () => { }); })); + it('the dropdown menu should be enable', () => { + const dropDown = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); + expect(dropDown).toBeTruthy(); + }); + + it('the dropdown menu should be disabled', () => { + comp.available$ = of(false); + fixture.detectChanges(); + const dropDown = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); + expect(dropDown).toBeFalsy(); + }); }); }); From 82a3014af4f6f5ee81ea2d787d02b023ecb0c84e Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 18 Jun 2020 12:11:20 +0200 Subject: [PATCH 13/28] 71380: drag-and-drop-list customOrder to avoid elements hopping back after drop + freeze fix --- .../edit-item-page/edit-item-page.module.ts | 4 +- .../item-bitstreams.component.ts | 31 ++++---- ...rag-and-drop-bitstream-list.component.html | 39 ++++++---- ...-and-drop-bitstream-list.component.spec.ts | 8 +- ...-drag-and-drop-bitstream-list.component.ts | 4 +- .../object-updates/object-updates.service.ts | 4 +- ...nated-drag-and-drop-list.component.spec.ts | 8 +- ...-paginated-drag-and-drop-list.component.ts | 77 ++++++++++++++++--- 8 files changed, 126 insertions(+), 49 deletions(-) diff --git a/src/app/+item-page/edit-item-page/edit-item-page.module.ts b/src/app/+item-page/edit-item-page/edit-item-page.module.ts index acb23fe592..44cb4099f0 100644 --- a/src/app/+item-page/edit-item-page/edit-item-page.module.ts +++ b/src/app/+item-page/edit-item-page/edit-item-page.module.ts @@ -32,6 +32,7 @@ import { ItemVersionHistoryComponent } from './item-version-history/item-version import { ItemAuthorizationsComponent } from './item-authorizations/item-authorizations.component'; import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit/resource-policy-edit.component'; import { ResourcePolicyCreateComponent } from '../../shared/resource-policies/create/resource-policy-create.component'; +import { ObjectValuesPipe } from '../../shared/utils/object-values-pipe'; /** * Module that contains all components related to the Edit Item page administrator functionality @@ -75,7 +76,8 @@ import { ResourcePolicyCreateComponent } from '../../shared/resource-policies/cr ResourcePolicyCreateComponent, ], providers: [ - BundleDataService + BundleDataService, + ObjectValuesPipe ] }) export class EditItemPageModule { diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts index 40602e0969..35da302961 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core'; +import { ChangeDetectorRef, Component, NgZone, OnDestroy } from '@angular/core'; import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component'; import { filter, map, switchMap, take } from 'rxjs/operators'; import { Observable } from 'rxjs/internal/Observable'; @@ -88,7 +88,8 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme public objectCache: ObjectCacheService, public requestService: RequestService, public cdRef: ChangeDetectorRef, - public bundleService: BundleDataService + public bundleService: BundleDataService, + public zone: NgZone ) { super(itemService, objectUpdatesService, router, notificationsService, translateService, route); } @@ -187,18 +188,20 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme * @param event The event containing the index the bitstream came from and was dropped to */ dropBitstream(bundle: Bundle, event: any) { - if (hasValue(event) && hasValue(event.fromIndex) && hasValue(event.toIndex) && hasValue(event.finish)) { - const moveOperation = Object.assign({ - op: 'move', - from: `/_links/bitstreams/${event.fromIndex}/href`, - path: `/_links/bitstreams/${event.toIndex}/href` - }); - this.bundleService.patch(bundle, [moveOperation]).pipe(take(1)).subscribe((response: RestResponse) => { - this.displayNotifications('item.edit.bitstreams.notifications.move', [response]); - this.requestService.removeByHrefSubstring(bundle.self); - event.finish(); - }); - } + this.zone.runOutsideAngular(() => { + if (hasValue(event) && hasValue(event.fromIndex) && hasValue(event.toIndex) && hasValue(event.finish)) { + const moveOperation = Object.assign({ + op: 'move', + from: `/_links/bitstreams/${event.fromIndex}/href`, + path: `/_links/bitstreams/${event.toIndex}/href` + }); + this.bundleService.patch(bundle, [moveOperation]).pipe(take(1)).subscribe((response: RestResponse) => { + this.displayNotifications('item.edit.bitstreams.notifications.move', [response]); + this.requestService.removeByHrefSubstring(bundle.self); + this.zone.run(() => event.finish()); + }); + } + }); } /** diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html index 25941f472e..9197b89796 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html @@ -7,24 +7,29 @@ [collectionSize]="(objectsRD$ | async)?.payload?.totalElements" [disableRouteParameterUpdate]="true" (pageChange)="switchPage($event)"> -
-
+
+ +
- -
- + +
+ +
+
- +
-
+ + diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts index 03d1d00520..54171ed8af 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts @@ -22,6 +22,7 @@ describe('PaginatedDragAndDropBitstreamListComponent', () => { let fixture: ComponentFixture; let objectUpdatesService: ObjectUpdatesService; let bundleService: BundleDataService; + let objectValuesPipe: ObjectValuesPipe; const columnSizes = new ResponsiveTableSizes([ new ResponsiveColumnSizes(2, 2, 3, 4, 4), @@ -100,12 +101,15 @@ describe('PaginatedDragAndDropBitstreamListComponent', () => { getBitstreams: createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1, bitstream2])) }); + objectValuesPipe = new ObjectValuesPipe(); + TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], - declarations: [PaginatedDragAndDropBitstreamListComponent, VarDirective, ObjectValuesPipe], + declarations: [PaginatedDragAndDropBitstreamListComponent, VarDirective], providers: [ { provide: ObjectUpdatesService, useValue: objectUpdatesService }, - { provide: BundleDataService, useValue: bundleService } + { provide: BundleDataService, useValue: bundleService }, + { provide: ObjectValuesPipe, useValue: objectValuesPipe } ], schemas: [ NO_ERRORS_SCHEMA ] diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts index 5548da4029..19cf3b27e4 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts @@ -8,6 +8,7 @@ import { switchMap } from 'rxjs/operators'; import { PaginatedSearchOptions } from '../../../../../shared/search/paginated-search-options.model'; import { ResponsiveTableSizes } from '../../../../../shared/responsive-table-sizes/responsive-table-sizes'; import { followLink } from '../../../../../shared/utils/follow-link-config.model'; +import { ObjectValuesPipe } from '../../../../../shared/utils/object-values-pipe'; @Component({ selector: 'ds-paginated-drag-and-drop-bitstream-list', @@ -33,8 +34,9 @@ export class PaginatedDragAndDropBitstreamListComponent extends AbstractPaginate constructor(protected objectUpdatesService: ObjectUpdatesService, protected elRef: ElementRef, + protected objectValuesPipe: ObjectValuesPipe, protected bundleService: BundleDataService) { - super(objectUpdatesService, elRef); + super(objectUpdatesService, elRef, objectValuesPipe); } ngOnInit() { diff --git a/src/app/core/data/object-updates/object-updates.service.ts b/src/app/core/data/object-updates/object-updates.service.ts index 779a22fb5b..84f0f06035 100644 --- a/src/app/core/data/object-updates/object-updates.service.ts +++ b/src/app/core/data/object-updates/object-updates.service.ts @@ -24,7 +24,7 @@ import { SetValidFieldUpdateAction } from './object-updates.actions'; import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators'; -import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util'; +import { hasNoValue, hasValue, isEmpty, isNotEmpty, isNotEmptyOperator } from '../../../shared/empty.util'; import { INotification } from '../../../shared/notifications/models/notification.model'; function objectUpdatesStateSelector(): MemoizedSelector { @@ -125,7 +125,7 @@ export class ObjectUpdatesService { */ getFieldUpdatesExclusive(url: string, initialFields: Identifiable[]): Observable { const objectUpdates = this.getObjectEntry(url); - return objectUpdates.pipe(map((objectEntry) => { + return objectUpdates.pipe(isNotEmptyOperator(), map((objectEntry) => { const fieldUpdates: FieldUpdates = {}; for (const object of initialFields) { let fieldUpdate = objectEntry.fieldUpdates[object.uuid]; diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts index 0c55afb2e0..5fd7f3ec56 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.spec.ts @@ -12,14 +12,16 @@ import { take } from 'rxjs/operators'; import { PaginationComponent } from '../pagination/pagination.component'; import { createSuccessfulRemoteDataObject } from '../remote-data.utils'; import { createPaginatedList } from '../testing/utils.test'; +import { ObjectValuesPipe } from '../utils/object-values-pipe'; class MockAbstractPaginatedDragAndDropListComponent extends AbstractPaginatedDragAndDropListComponent { constructor(protected objectUpdatesService: ObjectUpdatesService, protected elRef: ElementRef, + protected objectValuesPipe: ObjectValuesPipe, protected mockUrl: string, protected mockObjectsRD$: Observable>>) { - super(objectUpdatesService, elRef); + super(objectUpdatesService, elRef, objectValuesPipe); } initializeObjectsRD(): void { @@ -35,6 +37,7 @@ describe('AbstractPaginatedDragAndDropListComponent', () => { let component: MockAbstractPaginatedDragAndDropListComponent; let objectUpdatesService: ObjectUpdatesService; let elRef: ElementRef; + let objectValuesPipe: ObjectValuesPipe; const url = 'mock-abstract-paginated-drag-and-drop-list-component'; @@ -60,11 +63,12 @@ describe('AbstractPaginatedDragAndDropListComponent', () => { querySelector: {} }) }; + objectValuesPipe = new ObjectValuesPipe(); paginationComponent = jasmine.createSpyObj('paginationComponent', { doPageChange: {} }); objectsRD$ = new BehaviorSubject(objectsRD); - component = new MockAbstractPaginatedDragAndDropListComponent(objectUpdatesService, elRef, url, objectsRD$); + component = new MockAbstractPaginatedDragAndDropListComponent(objectUpdatesService, elRef, objectValuesPipe, url, objectsRD$); component.paginationComponent = paginationComponent; component.ngOnInit(); }); diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts index 7f94a5eaa5..37279bcfed 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts @@ -1,17 +1,26 @@ -import { FieldUpdates } from '../../core/data/object-updates/object-updates.reducer'; +import { FieldUpdate, FieldUpdates, Identifiable } from '../../core/data/object-updates/object-updates.reducer'; import { Observable } from 'rxjs/internal/Observable'; import { RemoteData } from '../../core/data/remote-data'; import { PaginatedList } from '../../core/data/paginated-list'; import { PaginationComponentOptions } from '../pagination/pagination-component-options.model'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; import { ObjectUpdatesService } from '../../core/data/object-updates/object-updates.service'; -import { switchMap, take } from 'rxjs/operators'; +import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators'; import { hasValue } from '../empty.util'; import { paginatedListToArray } from '../../core/shared/operators'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; -import { CdkDragDrop } from '@angular/cdk/drag-drop'; -import { ElementRef, EventEmitter, Output, ViewChild } from '@angular/core'; +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; +import { ElementRef, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core'; import { PaginationComponent } from '../pagination/pagination.component'; +import { ObjectValuesPipe } from '../utils/object-values-pipe'; +import { compareArraysUsing } from '../../+item-page/simple/item-types/shared/item-relationships-utils'; +import { Subscription } from 'rxjs/internal/Subscription'; + +/** + * Operator used for comparing {@link FieldUpdate}s by their field's UUID + */ +export const compareArraysUsingFieldUuids = () => + compareArraysUsing((fieldUpdate: FieldUpdate) => (hasValue(fieldUpdate) && hasValue(fieldUpdate.field)) ? fieldUpdate.field.uuid : undefined); /** * An abstract component containing general methods and logic to be able to drag and drop objects within a paginated @@ -29,7 +38,7 @@ import { PaginationComponent } from '../pagination/pagination.component'; * * An example component extending from this abstract component: PaginatedDragAndDropBitstreamListComponent */ -export abstract class AbstractPaginatedDragAndDropListComponent { +export abstract class AbstractPaginatedDragAndDropListComponent implements OnDestroy { /** * A view on the child pagination component */ @@ -57,10 +66,16 @@ export abstract class AbstractPaginatedDragAndDropListComponent; + /** + * A list of object UUIDs + * This is the order the objects will be displayed in + */ + customOrder: string[]; + /** * The amount of objects to display per page */ - pageSize = 10; + pageSize = 3; /** * The page options to use for fetching the objects @@ -77,8 +92,21 @@ export abstract class AbstractPaginatedDragAndDropListComponent(1); + /** + * Whether or not we should display a loading animation + * This is used to display a loading page when the user drops a bitstream onto a new page. The loading animation + * should stop once the bitstream has moved to the new page and the new page's response has loaded + */ + loading$: BehaviorSubject = new BehaviorSubject(false); + + /** + * List of subscriptions + */ + subs: Subscription[] = []; + protected constructor(protected objectUpdatesService: ObjectUpdatesService, - protected elRef: ElementRef) { + protected elRef: ElementRef, + protected objectValuesPipe: ObjectValuesPipe) { } /** @@ -114,6 +142,14 @@ export abstract class AbstractPaginatedDragAndDropListComponent this.objectUpdatesService.getFieldUpdatesExclusive(this.url, objects)) ); + this.subs.push( + this.updates$.pipe( + map((fieldUpdates) => this.objectValuesPipe.transform(fieldUpdates)), + distinctUntilChanged(compareArraysUsingFieldUuids()) + ).subscribe((updateValues) => { + this.customOrder = updateValues.map((fieldUpdate) => fieldUpdate.field.uuid); + }) + ); } /** @@ -148,19 +184,40 @@ export abstract class AbstractPaginatedDragAndDropListComponent { - this.currentPage$.next(redirectPage); - this.paginationComponent.doPageChange(redirectPage); + if (isNewPage) { + this.currentPage$.next(redirectPage); + this.loading$.next(false); + } } })); } } + + /** + * unsub all subscriptions + */ + ngOnDestroy(): void { + this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe()); + } } From 28891211e49b87ccbec20a48be86270a462d7eb8 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 18 Jun 2020 12:13:32 +0200 Subject: [PATCH 14/28] 71380: Reset page size --- .../abstract-paginated-drag-and-drop-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts index 37279bcfed..3d249b7393 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts @@ -75,7 +75,7 @@ export abstract class AbstractPaginatedDragAndDropListComponent Date: Thu, 18 Jun 2020 15:38:03 +0200 Subject: [PATCH 15/28] [CST-3090] fix tests --- ...my-dspace-new-submission.component.spec.ts | 28 +++++- .../core/data/collection-data.service.spec.ts | 87 ++++++++++++++++++- .../collection-dropdown.component.spec.ts | 43 ++++++++- .../collection-dropdown.component.ts | 2 +- ...bmission-form-collection.component.spec.ts | 85 +++++++++++++++++- 5 files changed, 237 insertions(+), 8 deletions(-) diff --git a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts index ac9eea6c0c..16b50d18f0 100644 --- a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts +++ b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.spec.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, inject, TestBed, tick, fakeAsync } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { Store } from '@ngrx/store'; @@ -21,6 +21,8 @@ import { NotificationsServiceStub } from '../../shared/testing/notifications-ser import { SharedModule } from '../../shared/shared.module'; import { getMockScrollToService } from '../../shared/mocks/scroll-to-service.mock'; import { UploaderService } from '../../shared/uploader/uploader.service'; +import { By } from '@angular/platform-browser'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; describe('MyDSpaceNewSubmissionComponent test', () => { @@ -54,6 +56,11 @@ describe('MyDSpaceNewSubmissionComponent test', () => { { provide: ScrollToService, useValue: getMockScrollToService() }, { provide: Store, useValue: store }, { provide: TranslateService, useValue: translateService }, + { + provide: NgbModal, useValue: { + open: () => {/*comment*/} + } + }, ChangeDetectorRef, MyDSpaceNewSubmissionComponent, UploaderService @@ -86,6 +93,25 @@ describe('MyDSpaceNewSubmissionComponent test', () => { })); }); + describe('', () => { + let fixture: ComponentFixture; + let comp: MyDSpaceNewSubmissionComponent; + + beforeEach(() => { + fixture = TestBed.createComponent(MyDSpaceNewSubmissionComponent); + comp = fixture.componentInstance; + }); + + it('should call app.openDialog', () => { + spyOn(comp, 'openDialog'); + const submissionButton = fixture.debugElement.query(By.css('button.btn-primary')); + submissionButton.triggerEventHandler('click', { + preventDefault: () => {/**/ + } + }); + expect(comp.openDialog).toHaveBeenCalled(); + }); + }); }); // declare a test component diff --git a/src/app/core/data/collection-data.service.spec.ts b/src/app/core/data/collection-data.service.spec.ts index eb3dabf195..7087655a26 100644 --- a/src/app/core/data/collection-data.service.spec.ts +++ b/src/app/core/data/collection-data.service.spec.ts @@ -13,13 +13,19 @@ import { RequestEntry } from './request.reducer'; import { ErrorResponse, RestResponse } from '../cache/response.models'; import { ObjectCacheService } from '../cache/object-cache.service'; import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service'; +import { Collection } from '../shared/collection.model'; +import { PageInfo } from '../shared/page-info.model'; +import { PaginatedList } from './paginated-list'; +import { createSuccessfulRemoteDataObject } from 'src/app/shared/remote-data.utils'; +import { hot, getTestScheduler, cold } from 'jasmine-marbles'; +import { TestScheduler } from 'rxjs/testing'; const url = 'fake-url'; const collectionId = 'fake-collection-id'; describe('CollectionDataService', () => { let service: CollectionDataService; - + let scheduler: TestScheduler; let requestService: RequestService; let translate: TranslateService; let notificationsService: any; @@ -27,6 +33,44 @@ describe('CollectionDataService', () => { let objectCache: ObjectCacheService; let halService: any; + const mockCollection1: Collection = Object.assign(new Collection(), { + id: 'test-collection-1-1', + name: 'test-collection-1', + _links: { + self: { + href: 'https://rest.api/collections/test-collection-1-1' + } + } + }); + + const mockCollection2: Collection = Object.assign(new Collection(), { + id: 'test-collection-2-2', + name: 'test-collection-2', + _links: { + self: { + href: 'https://rest.api/collections/test-collection-2-2' + } + } + }); + + const mockCollection3: Collection = Object.assign(new Collection(), { + id: 'test-collection-3-3', + name: 'test-collection-3', + _links: { + self: { + href: 'https://rest.api/collections/test-collection-3-3' + } + } + }); + + const queryString = 'test-string'; + const communityId = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a'; + + const pageInfo = new PageInfo(); + const array = [mockCollection1, mockCollection2, mockCollection3]; + const paginatedList = new PaginatedList(pageInfo, array); + const paginatedListRD = createSuccessfulRemoteDataObject(paginatedList); + describe('when the requests are successful', () => { beforeEach(() => { createService(); @@ -74,6 +118,43 @@ describe('CollectionDataService', () => { }); }); + describe('when calling getAuthorizedCollection', () => { + beforeEach(() => { + scheduler = getTestScheduler(); + spyOn(service, 'getAuthorizedCollection').and.callThrough(); + spyOn(service, 'getAuthorizedCollectionByCommunity').and.callThrough(); + }); + + it('should proxy the call to getAuthorizedCollection', () => { + scheduler.schedule(() => service.getAuthorizedCollection(queryString)); + scheduler.flush(); + + expect(service.getAuthorizedCollection).toHaveBeenCalledWith(queryString); + }); + + it('should return a RemoteData> for the getAuthorizedCollection', () => { + const result = service.getAuthorizedCollection(queryString) + const expected = cold('a|', { + a: paginatedListRD + }); + expect(result).toBeObservable(expected); + }); + + it('should proxy the call to getAuthorizedCollectionByCommunity', () => { + scheduler.schedule(() => service.getAuthorizedCollectionByCommunity(communityId, queryString)); + scheduler.flush(); + + expect(service.getAuthorizedCollectionByCommunity).toHaveBeenCalledWith(communityId, queryString); + }); + + it('should return a RemoteData> for the getAuthorizedCollectionByCommunity', () => { + const result = service.getAuthorizedCollectionByCommunity(communityId, queryString) + const expected = cold('a|', { + a: paginatedListRD + }); + expect(result).toBeObservable(expected); + }); + }); }); describe('when the requests are unsuccessful', () => { @@ -117,7 +198,9 @@ describe('CollectionDataService', () => { function createService(requestEntry$?) { requestService = getMockRequestService(requestEntry$); rdbService = jasmine.createSpyObj('rdbService', { - buildList: jasmine.createSpy('buildList') + buildList: hot('a|', { + a: paginatedListRD + }) }); objectCache = jasmine.createSpyObj('objectCache', { remove: jasmine.createSpy('remove') diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts index 33c848f9c4..8530be665e 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.spec.ts @@ -167,6 +167,21 @@ describe('CollectionDropdownComponent', () => { }); })); + it('should init component with collection list', fakeAsync(() => { + spyOn(component.subs, 'push').and.callThrough(); + spyOn(component, 'resetPagination').and.callThrough(); + spyOn(component, 'populateCollectionList').and.callThrough(); + component.ngOnInit(); + tick(); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + expect(component.subs.push).toHaveBeenCalled(); + expect(component.resetPagination).toHaveBeenCalled(); + expect(component.populateCollectionList).toHaveBeenCalled(); + }); + })); + it('should emit collectionChange event when selecting a new collection', () => { spyOn(component.selectionChange, 'emit').and.callThrough(); component.ngOnInit(); @@ -177,6 +192,7 @@ describe('CollectionDropdownComponent', () => { }); it('should reset collections list after reset of searchField', fakeAsync(() => { + spyOn(component.subs, 'push').and.callThrough(); spyOn(component, 'reset').and.callThrough(); spyOn(component.searchField, 'setValue').and.callThrough(); spyOn(component, 'resetPagination').and.callThrough(); @@ -187,7 +203,7 @@ describe('CollectionDropdownComponent', () => { el.value = searchedCollection; el.dispatchEvent(new Event('input')); fixture.detectChanges(); - tick(250); + tick(500); fixture.whenStable().then(() => { expect(component.reset).toHaveBeenCalled(); @@ -195,6 +211,31 @@ describe('CollectionDropdownComponent', () => { expect(component.resetPagination).toHaveBeenCalled(); expect(component.currentQuery).toEqual(''); expect(component.populateCollectionList).toHaveBeenCalledWith(component.currentQuery, component.currentPage); + expect(component.searchListCollection).toEqual(collections as any); + expect(component.subs.push).toHaveBeenCalled(); }); })); + + it('should reset searchField when dropdown menu has been closed', () => { + spyOn(component.searchField, 'setValue').and.callThrough(); + component.reset(); + + expect(component.searchField.setValue).toHaveBeenCalled(); + }); + + it('should change loader status', () => { + spyOn(component.isLoadingList, 'next').and.callThrough(); + component.hideShowLoader(true); + + expect(component.isLoadingList.next).toHaveBeenCalledWith(true); + }); + + it('reset pagination fields', () => { + component.resetPagination(); + + expect(component.currentPage).toEqual(1); + expect(component.currentQuery).toEqual(''); + expect(component.hasNextPage).toEqual(true); + expect(component.searchListCollection).toEqual([]); + }); }); diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index 0986badf45..0e9a4ab629 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -64,7 +64,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy { * Array to track all subscriptions and unsubscribe them onDestroy * @type {Array} */ - private subs: Subscription[] = []; + public subs: Subscription[] = []; /** * The list of collection to render diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts index cfdc2e2406..0132289266 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts @@ -8,7 +8,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { Store } from '@ngrx/store'; import { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub'; -import { mockSubmissionId } from '../../../shared/mocks/submission.mock'; +import { mockSubmissionId, mockSubmissionRestResponse } from '../../../shared/mocks/submission.mock'; import { SubmissionService } from '../../submission.service'; import { SubmissionFormCollectionComponent } from './submission-form-collection.component'; import { CommunityDataService } from '../../../core/data/community-data.service'; @@ -18,12 +18,13 @@ import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/jso import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; import { createTestComponent } from '../../../shared/testing/utils.test'; import { CollectionDataService } from '../../../core/data/collection-data.service'; -import { hot } from 'jasmine-marbles'; +import { hot, cold } from 'jasmine-marbles'; import { of } from 'rxjs'; import { SectionsService } from '../../sections/sections.service'; import { componentFactoryName } from '@angular/compiler'; +import { Collection } from 'src/app/core/shared/collection.model'; -fdescribe('SubmissionFormCollectionComponent Component', () => { +describe('SubmissionFormCollectionComponent Component', () => { let comp: SubmissionFormCollectionComponent; let compAsAny: any; @@ -34,6 +35,58 @@ fdescribe('SubmissionFormCollectionComponent Component', () => { const submissionId = mockSubmissionId; const collectionId = '1234567890-1'; const definition = 'traditional'; + const submissionRestResponse = mockSubmissionRestResponse; + + const mockCollectionList = [ + { + communities: [ + { + id: '123456789-1', + name: 'Community 1' + } + ], + collection: { + id: '1234567890-1', + name: 'Community 1-Collection 1' + } + }, + { + communities: [ + { + id: '123456789-1', + name: 'Community 1' + } + ], + collection: { + id: '1234567890-2', + name: 'Community 1-Collection 2' + } + }, + { + communities: [ + { + id: '123456789-2', + name: 'Community 2' + } + ], + collection: { + id: '1234567890-3', + name: 'Community 2-Collection 1' + } + }, + { + communities: [ + { + id: '123456789-2', + name: 'Community 2' + } + ], + collection: { + id: '1234567890-4', + name: 'Community 2-Collection 2' + } + } + ]; const communityDataService: any = jasmine.createSpyObj('communityDataService', { findAll: jasmine.createSpy('findAll') @@ -180,6 +233,32 @@ fdescribe('SubmissionFormCollectionComponent Component', () => { const dropDown = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu')); expect(dropDown).toBeFalsy(); }); + + it('should be simulated when the drop-down menu is closed', () => { + spyOn(comp, 'onClose'); + comp.onClose(); + expect(comp.onClose).toHaveBeenCalled(); + }); + + it('should be simulated when the drop-down menu is toggled', () => { + spyOn(comp, 'toggled'); + comp.toggled(false); + expect(comp.toggled).toHaveBeenCalled(); + }); + + it('should ', () => { + spyOn(comp.collectionChange, 'emit').and.callThrough(); + jsonPatchOpServiceStub.jsonPatchByResourceID.and.returnValue(of(submissionRestResponse)); + comp.ngOnInit(); + comp.onSelect(mockCollectionList[1]); + fixture.detectChanges(); + + expect(submissionServiceStub.changeSubmissionCollection).toHaveBeenCalled(); + expect(comp.selectedCollectionId).toBe(mockCollectionList[1].collection.id); + expect(comp.selectedCollectionName$).toBeObservable(cold('(a|)', { + a: mockCollectionList[1].collection.name + })); + }); }); }); From 73c25998e37139618c6ab3f5e52fb7db140cb6a5 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 25 Jun 2020 11:09:37 +0200 Subject: [PATCH 16/28] 71380: Fix loading/cache issue with dropping objects on page --- .../item-bitstreams.component.ts | 8 +++--- ...-and-drop-bitstream-list.component.spec.ts | 12 +++++++-- ...-drag-and-drop-bitstream-list.component.ts | 20 +++++++++----- src/app/core/data/bundle-data.service.ts | 11 ++++---- ...-paginated-drag-and-drop-list.component.ts | 27 +++++++++++++++---- 5 files changed, 57 insertions(+), 21 deletions(-) diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts index 35da302961..115e8489d4 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts @@ -196,9 +196,11 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme path: `/_links/bitstreams/${event.toIndex}/href` }); this.bundleService.patch(bundle, [moveOperation]).pipe(take(1)).subscribe((response: RestResponse) => { - this.displayNotifications('item.edit.bitstreams.notifications.move', [response]); - this.requestService.removeByHrefSubstring(bundle.self); - this.zone.run(() => event.finish()); + this.zone.run(() => { + this.displayNotifications('item.edit.bitstreams.notifications.move', [response]); + this.requestService.removeByHrefSubstring(bundle.self); + event.finish(); + }); }); } }); diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts index 54171ed8af..118f2b1619 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.spec.ts @@ -16,6 +16,7 @@ import { ResponsiveTableSizes } from '../../../../../shared/responsive-table-siz import { ResponsiveColumnSizes } from '../../../../../shared/responsive-table-sizes/responsive-column-sizes'; import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils'; import { createPaginatedList } from '../../../../../shared/testing/utils.test'; +import { RequestService } from '../../../../../core/data/request.service'; describe('PaginatedDragAndDropBitstreamListComponent', () => { let comp: PaginatedDragAndDropBitstreamListComponent; @@ -23,6 +24,7 @@ describe('PaginatedDragAndDropBitstreamListComponent', () => { let objectUpdatesService: ObjectUpdatesService; let bundleService: BundleDataService; let objectValuesPipe: ObjectValuesPipe; + let requestService: RequestService; const columnSizes = new ResponsiveTableSizes([ new ResponsiveColumnSizes(2, 2, 3, 4, 4), @@ -98,18 +100,24 @@ describe('PaginatedDragAndDropBitstreamListComponent', () => { ); bundleService = jasmine.createSpyObj('bundleService', { - getBitstreams: createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1, bitstream2])) + getBitstreams: createSuccessfulRemoteDataObject$(createPaginatedList([bitstream1, bitstream2])), + getBitstreamsEndpoint: observableOf('') }); objectValuesPipe = new ObjectValuesPipe(); + requestService = jasmine.createSpyObj('requestService', { + hasByHrefObservable: observableOf(true) + }); + TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], declarations: [PaginatedDragAndDropBitstreamListComponent, VarDirective], providers: [ { provide: ObjectUpdatesService, useValue: objectUpdatesService }, { provide: BundleDataService, useValue: bundleService }, - { provide: ObjectValuesPipe, useValue: objectValuesPipe } + { provide: ObjectValuesPipe, useValue: objectValuesPipe }, + { provide: RequestService, useValue: requestService } ], schemas: [ NO_ERRORS_SCHEMA ] diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts index 19cf3b27e4..a288e9993a 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.ts @@ -9,6 +9,7 @@ import { PaginatedSearchOptions } from '../../../../../shared/search/paginated-s import { ResponsiveTableSizes } from '../../../../../shared/responsive-table-sizes/responsive-table-sizes'; import { followLink } from '../../../../../shared/utils/follow-link-config.model'; import { ObjectValuesPipe } from '../../../../../shared/utils/object-values-pipe'; +import { RequestService } from '../../../../../core/data/request.service'; @Component({ selector: 'ds-paginated-drag-and-drop-bitstream-list', @@ -35,7 +36,8 @@ export class PaginatedDragAndDropBitstreamListComponent extends AbstractPaginate constructor(protected objectUpdatesService: ObjectUpdatesService, protected elRef: ElementRef, protected objectValuesPipe: ObjectValuesPipe, - protected bundleService: BundleDataService) { + protected bundleService: BundleDataService, + protected requestService: RequestService) { super(objectUpdatesService, elRef, objectValuesPipe); } @@ -48,11 +50,17 @@ export class PaginatedDragAndDropBitstreamListComponent extends AbstractPaginate */ initializeObjectsRD(): void { this.objectsRD$ = this.currentPage$.pipe( - switchMap((page: number) => this.bundleService.getBitstreams( - this.bundle.id, - new PaginatedSearchOptions({pagination: Object.assign({}, this.options, { currentPage: page })}), - followLink('format') - )) + switchMap((page: number) => { + const paginatedOptions = new PaginatedSearchOptions({pagination: Object.assign({}, this.options, { currentPage: page })}); + return this.bundleService.getBitstreamsEndpoint(this.bundle.id, paginatedOptions).pipe( + switchMap((href) => this.requestService.hasByHrefObservable(href)), + switchMap(() => this.bundleService.getBitstreams( + this.bundle.id, + paginatedOptions, + followLink('format') + )) + ); + }) ); } diff --git a/src/app/core/data/bundle-data.service.ts b/src/app/core/data/bundle-data.service.ts index 160ea0ff0d..de0e8a4337 100644 --- a/src/app/core/data/bundle-data.service.ts +++ b/src/app/core/data/bundle-data.service.ts @@ -88,10 +88,12 @@ export class BundleDataService extends DataService { /** * Get the bitstreams endpoint for a bundle * @param bundleId + * @param searchOptions */ - getBitstreamsEndpoint(bundleId: string): Observable { + getBitstreamsEndpoint(bundleId: string, searchOptions?: PaginatedSearchOptions): Observable { return this.getBrowseEndpoint().pipe( - switchMap((href: string) => this.halService.getEndpoint(this.bitstreamsEndpoint, `${href}/${bundleId}`)) + switchMap((href: string) => this.halService.getEndpoint(this.bitstreamsEndpoint, `${href}/${bundleId}`)), + map((href) => searchOptions ? searchOptions.toRestUrl(href) : href) ); } @@ -102,9 +104,8 @@ export class BundleDataService extends DataService { * @param linksToFollow The {@link FollowLinkConfig}s for the request */ getBitstreams(bundleId: string, searchOptions?: PaginatedSearchOptions, ...linksToFollow: Array>): Observable>> { - const hrefObs = this.getBitstreamsEndpoint(bundleId).pipe( - map((href) => searchOptions ? searchOptions.toRestUrl(href) : href) - ); + const hrefObs = this.getBitstreamsEndpoint(bundleId, searchOptions); + hrefObs.pipe( take(1) ).subscribe((href) => { diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts index 3d249b7393..9c46a70b5e 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts @@ -1,4 +1,4 @@ -import { FieldUpdate, FieldUpdates, Identifiable } from '../../core/data/object-updates/object-updates.reducer'; +import { FieldUpdate, FieldUpdates } from '../../core/data/object-updates/object-updates.reducer'; import { Observable } from 'rxjs/internal/Observable'; import { RemoteData } from '../../core/data/remote-data'; import { PaginatedList } from '../../core/data/paginated-list'; @@ -6,7 +6,7 @@ import { PaginationComponentOptions } from '../pagination/pagination-component-o import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; import { ObjectUpdatesService } from '../../core/data/object-updates/object-updates.service'; import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators'; -import { hasValue } from '../empty.util'; +import { hasValue, isNotEmpty } from '../empty.util'; import { paginatedListToArray } from '../../core/shared/operators'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; @@ -95,10 +95,19 @@ export abstract class AbstractPaginatedDragAndDropListComponent = new BehaviorSubject(false); + /** + * ID of the object the page's first element needs to match in order to stop the loading animation. + * This is to ensure the new page is fully loaded containing the latest data from the REST API whenever an object is + * dropped on a new page. This allows the component to expect the dropped object to be present on top of the new page, + * while displaying a loading animation until this is the case. + */ + stopLoadingWhenFirstIs: string; + /** * List of subscriptions */ @@ -148,7 +157,15 @@ export abstract class AbstractPaginatedDragAndDropListComponent { this.customOrder = updateValues.map((fieldUpdate) => fieldUpdate.field.uuid); - }) + // Check if stopLoadingWhenFirstIs contains a value. If it does and it equals the first value in customOrder, stop the loading animation. + // This is to ensure the page is updated to contain the new values first, before displaying it. + if (hasValue(this.stopLoadingWhenFirstIs) && isNotEmpty(this.customOrder) && this.customOrder[0] === this.stopLoadingWhenFirstIs) { + this.stopLoadingWhenFirstIs = undefined; + this.loading$.next(false); + } + }), + // Disable the pagination when objects are loading + this.loading$.subscribe((loading) => this.options.disabled = loading) ); } @@ -197,6 +214,7 @@ export abstract class AbstractPaginatedDragAndDropListComponent { if (isNewPage) { this.currentPage$.next(redirectPage); - this.loading$.next(false); } } })); From bfdd943d45cdfac688145c2047a975896c6f494a Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 25 Jun 2020 17:51:11 +0200 Subject: [PATCH 17/28] 71380: Remove redundant code and add subscribable removeByHrefSubstring --- .../item-bitstreams.component.ts | 7 ++++-- src/app/core/data/request.service.ts | 8 ++++++- src/app/shared/mocks/request.service.mock.ts | 2 +- ...-paginated-drag-and-drop-list.component.ts | 23 ++++--------------- 4 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts index 115e8489d4..45b8e23108 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts @@ -198,8 +198,11 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme this.bundleService.patch(bundle, [moveOperation]).pipe(take(1)).subscribe((response: RestResponse) => { this.zone.run(() => { this.displayNotifications('item.edit.bitstreams.notifications.move', [response]); - this.requestService.removeByHrefSubstring(bundle.self); - event.finish(); + // Remove all cached requests from this bundle and call the event's callback when the requests are cleared + this.requestService.removeByHrefSubstring(bundle.self).pipe( + filter((isCached) => isCached), + take(1) + ).subscribe(() => event.finish()); }); }); } diff --git a/src/app/core/data/request.service.ts b/src/app/core/data/request.service.ts index 105d84cf4a..9a2c565301 100644 --- a/src/app/core/data/request.service.ts +++ b/src/app/core/data/request.service.ts @@ -201,8 +201,9 @@ export class RequestService { * Remove all request cache providing (part of) the href * This also includes href-to-uuid index cache * @param href A substring of the request(s) href + * @return Returns an observable emitting whether or not the cache is removed */ - removeByHrefSubstring(href: string) { + removeByHrefSubstring(href: string): Observable { this.store.pipe( select(uuidsFromHrefSubstringSelector(requestIndexSelector, href)), take(1) @@ -213,6 +214,11 @@ export class RequestService { }); this.requestsOnTheirWayToTheStore = this.requestsOnTheirWayToTheStore.filter((reqHref: string) => reqHref.indexOf(href) < 0); this.indexStore.dispatch(new RemoveFromIndexBySubstringAction(IndexName.REQUEST, href)); + + return this.store.pipe( + select(uuidsFromHrefSubstringSelector(requestIndexSelector, href)), + map((uuids) => isEmpty(uuids)) + ); } /** diff --git a/src/app/shared/mocks/request.service.mock.ts b/src/app/shared/mocks/request.service.mock.ts index da297f56ac..6a3f182868 100644 --- a/src/app/shared/mocks/request.service.mock.ts +++ b/src/app/shared/mocks/request.service.mock.ts @@ -11,7 +11,7 @@ export function getMockRequestService(requestEntry$: Observable = getByUUID: requestEntry$, uriEncodeBody: jasmine.createSpy('uriEncodeBody'), isCachedOrPending: false, - removeByHrefSubstring: jasmine.createSpy('removeByHrefSubstring'), + removeByHrefSubstring: jasmine.createSpy('removeByHrefSubstring').and.returnValue(observableOf(true)), hasByHrefObservable: observableOf(false) }); } diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts index 9c46a70b5e..433d6877fb 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts @@ -75,7 +75,7 @@ export abstract class AbstractPaginatedDragAndDropListComponent = new BehaviorSubject(false); - /** - * ID of the object the page's first element needs to match in order to stop the loading animation. - * This is to ensure the new page is fully loaded containing the latest data from the REST API whenever an object is - * dropped on a new page. This allows the component to expect the dropped object to be present on top of the new page, - * while displaying a loading animation until this is the case. - */ - stopLoadingWhenFirstIs: string; - /** * List of subscriptions */ @@ -157,12 +149,8 @@ export abstract class AbstractPaginatedDragAndDropListComponent { this.customOrder = updateValues.map((fieldUpdate) => fieldUpdate.field.uuid); - // Check if stopLoadingWhenFirstIs contains a value. If it does and it equals the first value in customOrder, stop the loading animation. - // This is to ensure the page is updated to contain the new values first, before displaying it. - if (hasValue(this.stopLoadingWhenFirstIs) && isNotEmpty(this.customOrder) && this.customOrder[0] === this.stopLoadingWhenFirstIs) { - this.stopLoadingWhenFirstIs = undefined; - this.loading$.next(false); - } + // We received new values, stop displaying a loading indicator if it's present + this.loading$.next(false); }), // Disable the pagination when objects are loading this.loading$.subscribe((loading) => this.options.disabled = loading) @@ -214,9 +202,6 @@ export abstract class AbstractPaginatedDragAndDropListComponent { if (isNewPage) { - this.currentPage$.next(redirectPage); + this.paginationComponent.doPageChange(redirectPage); } } })); From f24bd9fe36d5e1dd7cde7cb9b5428f1b4723d736 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 25 Jun 2020 17:52:02 +0200 Subject: [PATCH 18/28] 71380: Reset page size --- .../abstract-paginated-drag-and-drop-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts index 433d6877fb..f8a4cdee61 100644 --- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts +++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts @@ -75,7 +75,7 @@ export abstract class AbstractPaginatedDragAndDropListComponent Date: Fri, 26 Jun 2020 09:37:43 +0200 Subject: [PATCH 19/28] [CST-3090] fix position of word 'here' --- src/app/shared/notifications/notifications.service.ts | 2 +- src/assets/i18n/en.json5 | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/shared/notifications/notifications.service.ts b/src/app/shared/notifications/notifications.service.ts index fa65d69530..ab21ab61f7 100644 --- a/src/app/shared/notifications/notifications.service.ts +++ b/src/app/shared/notifications/notifications.service.ts @@ -75,7 +75,7 @@ export class NotificationsService { this.translate.get(hrefTranslateLabel) .pipe(first()) .subscribe((hrefMsg) => { - const anchor = ` + const anchor = ` ${hrefMsg} `; const interpolateParams = Object.create({}); diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 4173fa1cf2..388874e107 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -1737,7 +1737,7 @@ "mydspace.description": "", - "mydspace.general.text-here": "HERE", + "mydspace.general.text-here": "here", "mydspace.messages.controller-help": "Select this option to send a message to item's submitter.", From 5642a2798aff510511dcd80470e089d9c28a0d56 Mon Sep 17 00:00:00 2001 From: Danilo Di Nuzzo Date: Fri, 26 Jun 2020 09:55:01 +0200 Subject: [PATCH 20/28] [CST-3090] fix unused import alerts --- .../shared/collection-dropdown/collection-dropdown.component.ts | 2 +- .../form/collection/submission-form-collection.component.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts index 0e9a4ab629..05105d74a7 100644 --- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts +++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, HostListener, ChangeDetectorRef, OnDestroy, Output, import { FormControl } from '@angular/forms'; import { Observable, Subscription, BehaviorSubject } from 'rxjs'; import { hasValue } from '../empty.util'; -import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, merge, scan, reduce } from 'rxjs/operators'; +import { map, mergeMap, startWith, debounceTime, distinctUntilChanged, switchMap, reduce } from 'rxjs/operators'; import { RemoteData } from 'src/app/core/data/remote-data'; import { FindListOptions } from 'src/app/core/data/request.models'; import { PaginatedList } from 'src/app/core/data/paginated-list'; diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts index 6517be7101..aa1bf9cb0a 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectorRef, Component, EventEmitter, - HostListener, Input, OnChanges, OnInit, @@ -18,7 +17,6 @@ import { } from 'rxjs/operators'; import { Collection } from '../../../core/shared/collection.model'; -import { CommunityDataService } from '../../../core/data/community-data.service'; import { hasValue, isNotEmpty } from '../../../shared/empty.util'; import { RemoteData } from '../../../core/data/remote-data'; import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner'; From e1199673258678c3acc3f3a20723f75dd31ecc39 Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Mon, 29 Jun 2020 17:24:00 +0200 Subject: [PATCH 21/28] fix issue where beforeEach wouldn't wait for dropBitstream to end --- .../item-bitstreams.component.spec.ts | 18 +++++++++--------- src/app/shared/mocks/request.service.mock.ts | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts index 5aa085a42c..125fc1fb0c 100644 --- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts +++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts @@ -191,15 +191,15 @@ describe('ItemBitstreamsComponent', () => { }); describe('when dropBitstream is called', () => { - const event = { - fromIndex: 0, - toIndex: 50, - // tslint:disable-next-line:no-empty - finish: () => {} - }; - - beforeEach(() => { - comp.dropBitstream(bundle, event); + beforeEach((done) => { + comp.dropBitstream(bundle, { + fromIndex: 0, + toIndex: 50, + // tslint:disable-next-line:no-empty + finish: () => { + done(); + } + }) }); it('should send out a patch for the move operation', () => { diff --git a/src/app/shared/mocks/request.service.mock.ts b/src/app/shared/mocks/request.service.mock.ts index 6a3f182868..385195bc77 100644 --- a/src/app/shared/mocks/request.service.mock.ts +++ b/src/app/shared/mocks/request.service.mock.ts @@ -11,7 +11,7 @@ export function getMockRequestService(requestEntry$: Observable = getByUUID: requestEntry$, uriEncodeBody: jasmine.createSpy('uriEncodeBody'), isCachedOrPending: false, - removeByHrefSubstring: jasmine.createSpy('removeByHrefSubstring').and.returnValue(observableOf(true)), + removeByHrefSubstring: observableOf(true), hasByHrefObservable: observableOf(false) }); } From 066e6cd142b69a1be5fe9b6509ec4f06ce3ebb81 Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Mon, 29 Jun 2020 17:42:16 +0200 Subject: [PATCH 22/28] fixed a number of instances in community-list-service.spec.ts where async code was presumed synchronous --- .../community-list-service.spec.ts | 131 +++++++++++------- 1 file changed, 84 insertions(+), 47 deletions(-) diff --git a/src/app/community-list-page/community-list-service.spec.ts b/src/app/community-list-page/community-list-service.spec.ts index 6b7ab2bd77..f4955b2a36 100644 --- a/src/app/community-list-page/community-list-service.spec.ts +++ b/src/app/community-list-page/community-list-service.spec.ts @@ -210,13 +210,16 @@ describe('CommunityListService', () => { let flatNodeList; describe('None expanded: should return list containing only flatnodes of the test top communities page 1 and 2', () => { let findTopSpy; - beforeEach(() => { + beforeEach((done) => { findTopSpy = spyOn(communityDataServiceStub, 'findTop').and.callThrough(); service.getNextPageTopCommunities(); - const sub = service.loadCommunities(null) - .subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + service.loadCommunities(null) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('flatnode list should contain just flatnodes of top community list page 1 and 2', () => { expect(findTopSpy).toHaveBeenCalled(); @@ -236,10 +239,13 @@ describe('CommunityListService', () => { describe('should transform all communities in a list of flatnodes with possible subcoms and collections as subflatnodes if they\'re expanded', () => { let flatNodeList; describe('None expanded: should return list containing only flatnodes of the test top communities', () => { - beforeEach(() => { - const sub = service.loadCommunities(null) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + beforeEach((done) => { + service.loadCommunities(null) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('length of flatnode list should be as big as top community list', () => { expect(flatNodeList.length).toEqual(mockListOfTopCommunitiesPage1.length); @@ -256,7 +262,7 @@ describe('CommunityListService', () => { }); }); describe('All top expanded, all page 1: should return list containing flatnodes of the communities in the test list and all its possible page-limited children (subcommunities and collections)', () => { - beforeEach(() => { + beforeEach((done) => { const expandedNodes = []; mockListOfTopCommunitiesPage1.map((community: Community) => { const communityFlatNode = toFlatNode(community, observableOf(true), 0, true, null); @@ -264,9 +270,12 @@ describe('CommunityListService', () => { communityFlatNode.currentCommunityPage = 1; expandedNodes.push(communityFlatNode); }); - const sub = service.loadCommunities(expandedNodes) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + service.loadCommunities(expandedNodes) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('length of flatnode list should be as big as top community list and size of its possible page-limited children', () => { expect(flatNodeList.length).toEqual(mockListOfTopCommunitiesPage1.length + mockSubcommunities1Page1.length + mockSubcommunities1Page1.length); @@ -281,14 +290,17 @@ describe('CommunityListService', () => { }); }); describe('Just first top comm expanded, all page 1: should return list containing flatnodes of the communities in the test list and all its possible page-limited children (subcommunities and collections)', () => { - beforeEach(() => { + beforeEach((done) => { const communityFlatNode = toFlatNode(mockListOfTopCommunitiesPage1[0], observableOf(true), 0, true, null); communityFlatNode.currentCollectionPage = 1; communityFlatNode.currentCommunityPage = 1; const expandedNodes = [communityFlatNode]; - const sub = service.loadCommunities(expandedNodes) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + service.loadCommunities(expandedNodes) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('length of flatnode list should be as big as top community list and size of page-limited children of first top community', () => { expect(flatNodeList.length).toEqual(mockListOfTopCommunitiesPage1.length + mockSubcommunities1Page1.length); @@ -300,14 +312,17 @@ describe('CommunityListService', () => { }); }); describe('Just second top comm expanded, collections at page 2: should return list containing flatnodes of the communities in the test list and all its possible page-limited children (subcommunities and collections)', () => { - beforeEach(() => { + beforeEach((done) => { const communityFlatNode = toFlatNode(mockListOfTopCommunitiesPage1[1], observableOf(true), 0, true, null); communityFlatNode.currentCollectionPage = 2; communityFlatNode.currentCommunityPage = 1; const expandedNodes = [communityFlatNode]; - const sub = service.loadCommunities(expandedNodes) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + service.loadCommunities(expandedNodes) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('length of flatnode list should be as big as top community list and size of page-limited children of second top community', () => { expect(flatNodeList.length).toEqual(mockListOfTopCommunitiesPage1.length + mockCollectionsPage1.length + mockCollectionsPage2.length); @@ -333,10 +348,13 @@ describe('CommunityListService', () => { }); let flatNodeList; describe('None expanded: should return list containing only flatnodes of the communities in the test list', () => { - beforeEach(() => { - const sub = service.transformListOfCommunities(new PaginatedList(new PageInfo(), listOfCommunities), 0, null, null) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + beforeEach((done) => { + service.transformListOfCommunities(new PaginatedList(new PageInfo(), listOfCommunities), 0, null, null) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('length of flatnode list should be as big as community test list', () => { expect(flatNodeList.length).toEqual(listOfCommunities.length); @@ -353,7 +371,7 @@ describe('CommunityListService', () => { }); }); describe('All top expanded, all page 1: should return list containing flatnodes of the communities in the test list and all its possible page-limited children (subcommunities and collections)', () => { - beforeEach(() => { + beforeEach((done) => { const expandedNodes = []; listOfCommunities.map((community: Community) => { const communityFlatNode = toFlatNode(community, observableOf(true), 0, true, null); @@ -361,9 +379,12 @@ describe('CommunityListService', () => { communityFlatNode.currentCommunityPage = 1; expandedNodes.push(communityFlatNode); }); - const sub = service.transformListOfCommunities(new PaginatedList(new PageInfo(), listOfCommunities), 0, null, expandedNodes) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + service.transformListOfCommunities(new PaginatedList(new PageInfo(), listOfCommunities), 0, null, expandedNodes) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('length of flatnode list should be as big as community test list and size of its possible children', () => { expect(flatNodeList.length).toEqual(listOfCommunities.length + mockSubcommunities1Page1.length + mockSubcommunities1Page1.length); @@ -397,10 +418,13 @@ describe('CommunityListService', () => { }); let flatNodeList; describe('should return list containing only flatnode corresponding to that community', () => { - beforeEach(() => { - const sub = service.transformCommunity(communityWithNoSubcomsOrColls, 0, null, null) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + beforeEach((done) => { + service.transformCommunity(communityWithNoSubcomsOrColls, 0, null, null) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('length of flatnode list should be 1', () => { expect(flatNodeList.length).toEqual(1); @@ -426,10 +450,14 @@ describe('CommunityListService', () => { }); let flatNodeList; describe('should return list containing only flatnode corresponding to that community', () => { - beforeAll(() => { - const sub = service.transformCommunity(communityWithSubcoms, 0, null, null) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + beforeAll((done) => { + service.transformCommunity(communityWithSubcoms, 0, null, null) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); + }); it('length of flatnode list should be 1', () => { expect(flatNodeList.length).toEqual(1); @@ -455,14 +483,17 @@ describe('CommunityListService', () => { } }); let flatNodeList; - beforeEach(() => { + beforeEach((done) => { const communityFlatNode = toFlatNode(communityWithSubcoms, observableOf(true), 0, true, null); communityFlatNode.currentCollectionPage = 1; communityFlatNode.currentCommunityPage = 1; const expandedNodes = [communityFlatNode]; - const sub = service.transformCommunity(communityWithSubcoms, 0, null, expandedNodes) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + service.transformCommunity(communityWithSubcoms, 0, null, expandedNodes) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('list of flatnodes is length is 1 + nrOfSubcoms & first flatnode is of expanded test community', () => { expect(flatNodeList.length).toEqual(1 + mockSubcommunities1Page1.length); @@ -485,7 +516,7 @@ describe('CommunityListService', () => { describe('should return list containing flatnodes of that community, its collections of the first two pages', () => { let communityWithCollections; let flatNodeList; - beforeEach(() => { + beforeEach((done) => { communityWithCollections = Object.assign(new Community(), { id: '9076bd16-e69a-48d6-9e41-0238cb40d863', uuid: '9076bd16-e69a-48d6-9e41-0238cb40d863', @@ -500,9 +531,12 @@ describe('CommunityListService', () => { communityFlatNode.currentCollectionPage = 2; communityFlatNode.currentCommunityPage = 1; const expandedNodes = [communityFlatNode]; - const sub = service.transformCommunity(communityWithCollections, 0, null, expandedNodes) - .pipe(take(1)).subscribe((value) => flatNodeList = value); - sub.unsubscribe(); + service.transformCommunity(communityWithCollections, 0, null, expandedNodes) + .pipe(take(1)) + .subscribe((value) => { + flatNodeList = value; + done(); + }); }); it('list of flatnodes is length is 1 + nrOfCollections & first flatnode is of expanded test community', () => { expect(flatNodeList.length).toEqual(1 + mockCollectionsPage1.length + mockCollectionsPage2.length); @@ -533,7 +567,7 @@ describe('CommunityListService', () => { describe('getIsExpandable', () => { describe('should return true', () => { - it('if community has subcommunities', () => { + it('if community has subcommunities', (done) => { const communityWithSubcoms = Object.assign(new Community(), { id: '7669c72a-3f2a-451f-a3b9-9210e7a4c02f', uuid: '7669c72a-3f2a-451f-a3b9-9210e7a4c02f', @@ -546,9 +580,10 @@ describe('CommunityListService', () => { }); service.getIsExpandable(communityWithSubcoms).pipe(take(1)).subscribe((result) => { expect(result).toEqual(true); + done(); }); }); - it('if community has collections', () => { + it('if community has collections', (done) => { const communityWithCollections = Object.assign(new Community(), { id: '9076bd16-e69a-48d6-9e41-0238cb40d863', uuid: '9076bd16-e69a-48d6-9e41-0238cb40d863', @@ -561,11 +596,12 @@ describe('CommunityListService', () => { }); service.getIsExpandable(communityWithCollections).pipe(take(1)).subscribe((result) => { expect(result).toEqual(true); + done(); }); }); }); describe('should return false', () => { - it('if community has neither subcommunities nor collections', () => { + it('if community has neither subcommunities nor collections', (done) => { const communityWithNoSubcomsOrColls = Object.assign(new Community(), { id: 'efbf25e1-2d8c-4c28-8f3e-2e04c215be24', uuid: 'efbf25e1-2d8c-4c28-8f3e-2e04c215be24', @@ -578,6 +614,7 @@ describe('CommunityListService', () => { }); service.getIsExpandable(communityWithNoSubcomsOrColls).pipe(take(1)).subscribe((result) => { expect(result).toEqual(false); + done(); }); }); }); From b1e44a7fa583da100dc3609dd40be5b1d9e2b5da Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Sun, 3 May 2020 01:53:46 +0200 Subject: [PATCH 23/28] 70599: Improvements comcol tree --- .../community-list-datasource.ts | 5 +- .../community-list-service.ts | 119 +++++++----------- .../community-list.component.ts | 18 ++- .../builders/remote-data-build.service.ts | 7 +- 4 files changed, 60 insertions(+), 89 deletions(-) diff --git a/src/app/community-list-page/community-list-datasource.ts b/src/app/community-list-page/community-list-datasource.ts index 3a9d9f2077..4974b2c4fe 100644 --- a/src/app/community-list-page/community-list-datasource.ts +++ b/src/app/community-list-page/community-list-datasource.ts @@ -1,3 +1,4 @@ +import { FindListOptions } from '../core/data/request.models'; import { CommunityListService, FlatNode } from './community-list-service'; import { CollectionViewer, DataSource } from '@angular/cdk/typings/collections'; import { BehaviorSubject, Observable, } from 'rxjs'; @@ -21,10 +22,10 @@ export class CommunityListDatasource implements DataSource { return this.communityList$.asObservable(); } - loadCommunities(expandedNodes: FlatNode[]) { + loadCommunities(findOptions: FindListOptions, expandedNodes: FlatNode[]) { this.loading$.next(true); - this.communityListService.loadCommunities(expandedNodes).pipe( + this.communityListService.loadCommunities(findOptions, expandedNodes).pipe( take(1), finalize(() => this.loading$.next(false)), ).subscribe((flatNodes: FlatNode[]) => { diff --git a/src/app/community-list-page/community-list-service.ts b/src/app/community-list-page/community-list-service.ts index be04887e71..70db048d3e 100644 --- a/src/app/community-list-page/community-list-service.ts +++ b/src/app/community-list-page/community-list-service.ts @@ -4,11 +4,12 @@ import { combineLatest as observableCombineLatest } from 'rxjs/internal/observab import { Observable, of as observableOf } from 'rxjs'; import { AppState } from '../app.reducer'; import { CommunityDataService } from '../core/data/community-data.service'; -import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model'; -import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model'; -import { catchError, filter, map, switchMap, take } from 'rxjs/operators'; +import { FindListOptions } from '../core/data/request.models'; +import { map, flatMap } from 'rxjs/operators'; import { Community } from '../core/shared/community.model'; import { Collection } from '../core/shared/collection.model'; +import { getSucceededRemoteData } from '../core/shared/operators'; +import { PageInfo } from '../core/shared/page-info.model'; import { hasValue, isNotEmpty } from '../shared/empty.util'; import { RemoteData } from '../core/data/remote-data'; import { PaginatedList } from '../core/data/paginated-list'; @@ -46,8 +47,7 @@ export class ShowMoreFlatNode { // Helper method to combine an flatten an array of observables of flatNode arrays export const combineAndFlatten = (obsList: Array>): Observable => observableCombineLatest(...obsList).pipe( - map((matrix: FlatNode[][]) => - matrix.reduce((combinedList, currentList: FlatNode[]) => [...combinedList, ...currentList])) + map((matrix: any[][]) => [].concat(...matrix)) ); /** @@ -99,6 +99,8 @@ const communityListStateSelector = (state: AppState) => state.communityList; const expandedNodesSelector = createSelector(communityListStateSelector, (communityList: CommunityListState) => communityList.expandedNodes); const loadingNodeSelector = createSelector(communityListStateSelector, (communityList: CommunityListState) => communityList.loadingNode); +export const MAX_COMCOLS_PER_PAGE = 2; + /** * Service class for the community list, responsible for the creating of the flat list used by communityList dataSource * and connection to the store to retrieve and save the state of the community list @@ -107,26 +109,8 @@ const loadingNodeSelector = createSelector(communityListStateSelector, (communit @Injectable() export class CommunityListService { - // page-limited list of top-level communities - payloads$: Array>>; - - topCommunitiesConfig: PaginationComponentOptions; - topCommunitiesSortConfig: SortOptions; - - maxSubCommunitiesPerPage: number; - maxCollectionsPerPage: number; - constructor(private communityDataService: CommunityDataService, private collectionDataService: CollectionDataService, private store: Store) { - this.topCommunitiesConfig = new PaginationComponentOptions(); - this.topCommunitiesConfig.id = 'top-level-pagination'; - this.topCommunitiesConfig.pageSize = 10; - this.topCommunitiesConfig.currentPage = 1; - this.topCommunitiesSortConfig = new SortOptions('dc.title', SortDirection.ASC); - this.initTopCommunityList(); - - this.maxSubCommunitiesPerPage = 3; - this.maxCollectionsPerPage = 3; } saveCommunityListStateToStore(expandedNodes: FlatNode[], loadingNode: FlatNode): void { @@ -141,57 +125,46 @@ export class CommunityListService { return this.store.select(loadingNodeSelector); } - /** - * Increases the payload so it contains the next page of top level communities - */ - getNextPageTopCommunities(): void { - this.topCommunitiesConfig.currentPage = this.topCommunitiesConfig.currentPage + 1; - this.payloads$ = [...this.payloads$, this.communityDataService.findTop({ - currentPage: this.topCommunitiesConfig.currentPage, - elementsPerPage: this.topCommunitiesConfig.pageSize, - sort: { - field: this.topCommunitiesSortConfig.field, - direction: this.topCommunitiesSortConfig.direction - } - }).pipe( - take(1), - map((results) => results.payload), - )]; - } - /** * Gets all top communities, limited by page, and transforms this in a list of flatNodes. * @param expandedNodes List of expanded nodes; if a node is not expanded its subCommunities and collections need * not be added to the list */ - loadCommunities(expandedNodes: FlatNode[]): Observable { - const res = this.payloads$.map((payload) => { - return payload.pipe( - take(1), - switchMap((result: PaginatedList) => { - return this.transformListOfCommunities(result, 0, null, expandedNodes); - }), - catchError(() => observableOf([])), - ); - }); - return combineAndFlatten(res); + loadCommunities(findOptions: FindListOptions, expandedNodes: FlatNode[]): Observable { + const currentPage = findOptions.currentPage; + const topCommunities = []; + for (let i = 1; i <= currentPage; i++) { + const pagination: FindListOptions = Object.assign({}, findOptions, { currentPage: i }); + topCommunities.push(this.getTopCommunities(pagination)); + } + const topComs$ = observableCombineLatest(...topCommunities).pipe( + map((coms: Array>) => { + const newPages: Community[][] = coms.map((unit: PaginatedList) => unit.page); + const newPage: Community[] = [].concat(...newPages); + let newPageInfo = new PageInfo(); + if (coms && coms.length > 0) { + newPageInfo = Object.assign({}, coms[0].pageInfo, { currentPage }) + } + return new PaginatedList(newPageInfo, newPage); + }) + ); + return topComs$.pipe(flatMap((topComs: PaginatedList) => this.transformListOfCommunities(topComs, 0, null, expandedNodes))); }; /** * Puts the initial top level communities in a list to be called upon */ - private initTopCommunityList(): void { - this.payloads$ = [this.communityDataService.findTop({ - currentPage: this.topCommunitiesConfig.currentPage, - elementsPerPage: this.topCommunitiesConfig.pageSize, + private getTopCommunities(options: FindListOptions): Observable> { + return this.communityDataService.findTop({ + currentPage: options.currentPage, + elementsPerPage: MAX_COMCOLS_PER_PAGE, sort: { - field: this.topCommunitiesSortConfig.field, - direction: this.topCommunitiesSortConfig.direction + field: options.sort.field, + direction: options.sort.direction } }).pipe( - take(1), map((results) => results.payload), - )]; + ); } /** @@ -206,16 +179,15 @@ export class CommunityListService { parent: FlatNode, expandedNodes: FlatNode[]): Observable { if (isNotEmpty(listOfPaginatedCommunities.page)) { - let currentPage = this.topCommunitiesConfig.currentPage; + let currentPage = listOfPaginatedCommunities.currentPage; if (isNotEmpty(parent)) { currentPage = expandedNodes.find((node: FlatNode) => node.id === parent.id).currentCommunityPage; } - const isNotAllCommunities = (listOfPaginatedCommunities.totalElements > (listOfPaginatedCommunities.elementsPerPage * currentPage)); let obsList = listOfPaginatedCommunities.page .map((community: Community) => { return this.transformCommunity(community, level, parent, expandedNodes) }); - if (isNotAllCommunities && listOfPaginatedCommunities.currentPage > currentPage) { + if (currentPage < listOfPaginatedCommunities.totalPages && currentPage === listOfPaginatedCommunities.currentPage) { obsList = [...obsList, observableOf([showMoreFlatNode('community', level, parent)])]; } @@ -252,13 +224,12 @@ export class CommunityListService { let subcoms = []; for (let i = 1; i <= currentCommunityPage; i++) { const nextSetOfSubcommunitiesPage = this.communityDataService.findByParent(community.uuid, { - elementsPerPage: this.maxSubCommunitiesPerPage, + elementsPerPage: MAX_COMCOLS_PER_PAGE, currentPage: i }) .pipe( - filter((rd: RemoteData>) => rd.hasSucceeded), - take(1), - switchMap((rd: RemoteData>) => + getSucceededRemoteData(), + flatMap((rd: RemoteData>) => this.transformListOfCommunities(rd.payload, level + 1, communityFlatNode, expandedNodes)) ); @@ -271,16 +242,15 @@ export class CommunityListService { let collections = []; for (let i = 1; i <= currentCollectionPage; i++) { const nextSetOfCollectionsPage = this.collectionDataService.findByParent(community.uuid, { - elementsPerPage: this.maxCollectionsPerPage, + elementsPerPage: MAX_COMCOLS_PER_PAGE, currentPage: i }) .pipe( - filter((rd: RemoteData>) => rd.hasSucceeded), - take(1), + getSucceededRemoteData(), map((rd: RemoteData>) => { let nodes = rd.payload.page .map((collection: Collection) => toFlatNode(collection, observableOf(false), level + 1, false, communityFlatNode)); - if ((rd.payload.elementsPerPage * currentCollectionPage) < rd.payload.totalElements && rd.payload.currentPage > currentCollectionPage) { + if (currentCollectionPage < rd.payload.totalPages && currentCollectionPage === rd.payload.currentPage) { nodes = [...nodes, showMoreFlatNode('collection', level + 1, communityFlatNode)]; } return nodes; @@ -305,21 +275,18 @@ export class CommunityListService { let hasColls$: Observable; hasSubcoms$ = this.communityDataService.findByParent(community.uuid, { elementsPerPage: 1 }) .pipe( - filter((rd: RemoteData>) => rd.hasSucceeded), - take(1), + getSucceededRemoteData(), map((results) => results.payload.totalElements > 0), ); hasColls$ = this.collectionDataService.findByParent(community.uuid, { elementsPerPage: 1 }) .pipe( - filter((rd: RemoteData>) => rd.hasSucceeded), - take(1), + getSucceededRemoteData(), map((results) => results.payload.totalElements > 0), ); let hasChildren$: Observable; hasChildren$ = observableCombineLatest(hasSubcoms$, hasColls$).pipe( - take(1), map(([hasSubcoms, hasColls]: [boolean, boolean]) => { if (hasSubcoms || hasColls) { return true; diff --git a/src/app/community-list-page/community-list/community-list.component.ts b/src/app/community-list-page/community-list/community-list.component.ts index ddcd49cd1c..f672eae151 100644 --- a/src/app/community-list-page/community-list/community-list.component.ts +++ b/src/app/community-list-page/community-list/community-list.component.ts @@ -1,5 +1,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { take } from 'rxjs/operators'; +import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; +import { FindListOptions } from '../../core/data/request.models'; import { CommunityListService, FlatNode } from '../community-list-service'; import { CommunityListDatasource } from '../community-list-datasource'; import { FlatTreeControl } from '@angular/cdk/tree'; @@ -27,7 +29,13 @@ export class CommunityListComponent implements OnInit, OnDestroy { dataSource: CommunityListDatasource; + paginationConfig: FindListOptions; + constructor(private communityListService: CommunityListService) { + this.paginationConfig = new FindListOptions(); + this.paginationConfig.elementsPerPage = 2; + this.paginationConfig.currentPage = 1; + this.paginationConfig.sort = new SortOptions('dc.title', SortDirection.ASC); } ngOnInit() { @@ -37,7 +45,7 @@ export class CommunityListComponent implements OnInit, OnDestroy { }); this.communityListService.getExpandedNodesFromStore().pipe(take(1)).subscribe((result) => { this.expandedNodes = [...result]; - this.dataSource.loadCommunities(this.expandedNodes); + this.dataSource.loadCommunities(this.paginationConfig, this.expandedNodes); }); } @@ -74,7 +82,7 @@ export class CommunityListComponent implements OnInit, OnDestroy { node.currentCommunityPage = 1; } } - this.dataSource.loadCommunities(this.expandedNodes); + this.dataSource.loadCommunities(this.paginationConfig, this.expandedNodes); } /** @@ -94,10 +102,10 @@ export class CommunityListComponent implements OnInit, OnDestroy { const parentNodeInExpandedNodes = this.expandedNodes.find((node2: FlatNode) => node.parent.id === node2.id); parentNodeInExpandedNodes.currentCommunityPage++; } - this.dataSource.loadCommunities(this.expandedNodes); + this.dataSource.loadCommunities(this.paginationConfig, this.expandedNodes); } else { - this.communityListService.getNextPageTopCommunities(); - this.dataSource.loadCommunities(this.expandedNodes); + this.paginationConfig.currentPage++; + this.dataSource.loadCommunities(this.paginationConfig, this.expandedNodes); } } diff --git a/src/app/core/cache/builders/remote-data-build.service.ts b/src/app/core/cache/builders/remote-data-build.service.ts index 88d1890de2..6c9f40888f 100644 --- a/src/app/core/cache/builders/remote-data-build.service.ts +++ b/src/app/core/cache/builders/remote-data-build.service.ts @@ -150,12 +150,7 @@ export class RemoteDataBuildService { filterSuccessfulResponses(), map((response: DSOSuccessResponse) => { if (hasValue((response as DSOSuccessResponse).pageInfo)) { - const resPageInfo = (response as DSOSuccessResponse).pageInfo; - if (isNotEmpty(resPageInfo) && resPageInfo.currentPage >= 0) { - return Object.assign({}, resPageInfo, { currentPage: resPageInfo.currentPage + 1 }); - } else { - return resPageInfo; - } + return (response as DSOSuccessResponse).pageInfo; } }) ); From 1dfe7ec170137ca806000425fe82ec2332df7e78 Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Mon, 4 May 2020 10:47:19 +0200 Subject: [PATCH 24/28] 70599: Test fixes comcol tree after changes --- .../community-list-service.spec.ts | 42 ++++++++++++------- .../community-list.component.spec.ts | 20 ++++----- 2 files changed, 35 insertions(+), 27 deletions(-) diff --git a/src/app/community-list-page/community-list-service.spec.ts b/src/app/community-list-page/community-list-service.spec.ts index f4955b2a36..accd0f23a5 100644 --- a/src/app/community-list-page/community-list-service.spec.ts +++ b/src/app/community-list-page/community-list-service.spec.ts @@ -1,21 +1,19 @@ -import { of as observableOf } from 'rxjs'; -import { TestBed, inject, async } from '@angular/core/testing'; +import { inject, TestBed } from '@angular/core/testing'; import { Store } from '@ngrx/store'; +import { of as observableOf } from 'rxjs'; +import { take } from 'rxjs/operators'; import { AppState } from '../app.reducer'; +import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model'; +import { PaginatedList } from '../core/data/paginated-list'; +import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils'; import { StoreMock } from '../shared/testing/store.mock'; import { CommunityListService, FlatNode, toFlatNode } from './community-list-service'; import { CollectionDataService } from '../core/data/collection-data.service'; -import { PaginatedList } from '../core/data/paginated-list'; -import { PageInfo } from '../core/shared/page-info.model'; import { CommunityDataService } from '../core/data/community-data.service'; -import { - createFailedRemoteDataObject$, - createSuccessfulRemoteDataObject$ -} from '../shared/remote-data.utils'; import { Community } from '../core/shared/community.model'; import { Collection } from '../core/shared/collection.model'; -import { take } from 'rxjs/operators'; import { FindListOptions } from '../core/data/request.models'; +import { PageInfo } from '../core/shared/page-info.model'; describe('CommunityListService', () => { let store: StoreMock; @@ -212,9 +210,11 @@ describe('CommunityListService', () => { let findTopSpy; beforeEach((done) => { findTopSpy = spyOn(communityDataServiceStub, 'findTop').and.callThrough(); - service.getNextPageTopCommunities(); - service.loadCommunities(null) + service.loadCommunities({ + currentPage: 2, + sort: new SortOptions('dc.title', SortDirection.ASC) + }, null) .pipe(take(1)) .subscribe((value) => { flatNodeList = value; @@ -240,7 +240,10 @@ describe('CommunityListService', () => { let flatNodeList; describe('None expanded: should return list containing only flatnodes of the test top communities', () => { beforeEach((done) => { - service.loadCommunities(null) + service.loadCommunities({ + currentPage: 1, + sort: new SortOptions('dc.title', SortDirection.ASC) + }, null) .pipe(take(1)) .subscribe((value) => { flatNodeList = value; @@ -270,7 +273,10 @@ describe('CommunityListService', () => { communityFlatNode.currentCommunityPage = 1; expandedNodes.push(communityFlatNode); }); - service.loadCommunities(expandedNodes) + service.loadCommunities({ + currentPage: 1, + sort: new SortOptions('dc.title', SortDirection.ASC) + }, expandedNodes) .pipe(take(1)) .subscribe((value) => { flatNodeList = value; @@ -295,7 +301,10 @@ describe('CommunityListService', () => { communityFlatNode.currentCollectionPage = 1; communityFlatNode.currentCommunityPage = 1; const expandedNodes = [communityFlatNode]; - service.loadCommunities(expandedNodes) + service.loadCommunities({ + currentPage: 1, + sort: new SortOptions('dc.title', SortDirection.ASC) + }, expandedNodes) .pipe(take(1)) .subscribe((value) => { flatNodeList = value; @@ -317,7 +326,10 @@ describe('CommunityListService', () => { communityFlatNode.currentCollectionPage = 2; communityFlatNode.currentCommunityPage = 1; const expandedNodes = [communityFlatNode]; - service.loadCommunities(expandedNodes) + service.loadCommunities({ + currentPage: 1, + sort: new SortOptions('dc.title', SortDirection.ASC) + }, expandedNodes) .pipe(take(1)) .subscribe((value) => { flatNodeList = value; diff --git a/src/app/community-list-page/community-list/community-list.component.spec.ts b/src/app/community-list-page/community-list/community-list.component.spec.ts index a91c5fa057..f4c5f959d1 100644 --- a/src/app/community-list-page/community-list/community-list.component.spec.ts +++ b/src/app/community-list-page/community-list/community-list.component.spec.ts @@ -114,15 +114,9 @@ describe('CommunityListComponent', () => { beforeEach(async(() => { communityListServiceStub = { - topPageSize: 2, - topCurrentPage: 1, - collectionPageSize: 2, - subcommunityPageSize: 2, + pageSize: 2, expandedNodes: [], loadingNode: null, - getNextPageTopCommunities() { - this.topCurrentPage++; - }, getLoadingNodeFromStore() { return observableOf(this.loadingNode); }, @@ -133,12 +127,12 @@ describe('CommunityListComponent', () => { this.expandedNodes = expandedNodes; this.loadingNode = loadingNode; }, - loadCommunities(expandedNodes) { + loadCommunities(options, expandedNodes) { let flatnodes; let showMoreTopComNode = false; flatnodes = [...mockTopFlatnodesUnexpanded]; - const currentPage = this.topCurrentPage; - const elementsPerPage = this.topPageSize; + const currentPage = options.currentPage; + const elementsPerPage = this.pageSize; let endPageIndex = (currentPage * elementsPerPage); if (endPageIndex >= flatnodes.length) { endPageIndex = flatnodes.length; @@ -171,14 +165,14 @@ describe('CommunityListComponent', () => { collFlatnodes = [...collFlatnodes, toFlatNode(coll, observableOf(false), topNode.level + 1, false, topNode)]; }); if (isNotEmpty(subComFlatnodes)) { - const endSubComIndex = this.subcommunityPageSize * expandedParent.currentCommunityPage; + const endSubComIndex = this.pageSize * expandedParent.currentCommunityPage; flatnodes = [...flatnodes, ...subComFlatnodes.slice(0, endSubComIndex)]; if (subComFlatnodes.length > endSubComIndex) { flatnodes = [...flatnodes, showMoreFlatNode('community', topNode.level + 1, expandedParent)]; } } if (isNotEmpty(collFlatnodes)) { - const endColIndex = this.collectionPageSize * expandedParent.currentCollectionPage; + const endColIndex = this.pageSize * expandedParent.currentCollectionPage; flatnodes = [...flatnodes, ...collFlatnodes.slice(0, endColIndex)]; if (collFlatnodes.length > endColIndex) { flatnodes = [...flatnodes, showMoreFlatNode('collection', topNode.level + 1, expandedParent)]; @@ -225,6 +219,8 @@ describe('CommunityListComponent', () => { it('should render a cdk tree with the first elementsPerPage (2) nr of top level communities, unexpanded', () => { const expandableNodesFound = fixture.debugElement.queryAll(By.css('.expandable-node a')); const childlessNodesFound = fixture.debugElement.queryAll(By.css('.childless-node a')); + console.log('expandableNodesFound', expandableNodesFound) + console.log('childlessNodesFound', childlessNodesFound) const allNodes = [...expandableNodesFound, ...childlessNodesFound]; expect(allNodes.length).toEqual(2); mockTopFlatnodesUnexpanded.slice(0, 2).map((topFlatnode: FlatNode) => { From 53779cf69e4df943b756f044cf2f74d4f6de1f7a Mon Sep 17 00:00:00 2001 From: Ben Bosman Date: Thu, 11 Jun 2020 11:52:58 +0200 Subject: [PATCH 25/28] remove console logs --- .../community-list/community-list.component.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/community-list-page/community-list/community-list.component.spec.ts b/src/app/community-list-page/community-list/community-list.component.spec.ts index f4c5f959d1..ef9e89ff1b 100644 --- a/src/app/community-list-page/community-list/community-list.component.spec.ts +++ b/src/app/community-list-page/community-list/community-list.component.spec.ts @@ -219,8 +219,6 @@ describe('CommunityListComponent', () => { it('should render a cdk tree with the first elementsPerPage (2) nr of top level communities, unexpanded', () => { const expandableNodesFound = fixture.debugElement.queryAll(By.css('.expandable-node a')); const childlessNodesFound = fixture.debugElement.queryAll(By.css('.childless-node a')); - console.log('expandableNodesFound', expandableNodesFound) - console.log('childlessNodesFound', childlessNodesFound) const allNodes = [...expandableNodesFound, ...childlessNodesFound]; expect(allNodes.length).toEqual(2); mockTopFlatnodesUnexpanded.slice(0, 2).map((topFlatnode: FlatNode) => { From 94e3f2d5e0f5618342afc2f562b7d3cfabe80a53 Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Fri, 19 Jun 2020 13:17:46 +0200 Subject: [PATCH 26/28] Feedback processed: - pagesize comcol changed to 50 & - loadCommunities inside ngZone.runOutsideAngular - Chevron size small unexpanded and large expanded when logged in fixed --- ...pandable-admin-sidebar-section.component.scss | 4 ++-- .../community-list-datasource.ts | 16 ++++++++++------ .../community-list-service.ts | 2 +- .../community-list/community-list.component.ts | 7 ++++--- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss index 37fe15bd40..1f6e288608 100644 --- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss +++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss @@ -1,4 +1,4 @@ -::ng-deep { +:host ::ng-deep { .fa-chevron-right { padding-left: $spacer/2; font-size: 0.5rem; @@ -16,4 +16,4 @@ display: flex; flex-direction: column; } -} \ No newline at end of file +} diff --git a/src/app/community-list-page/community-list-datasource.ts b/src/app/community-list-page/community-list-datasource.ts index 4974b2c4fe..8cd0c6b0af 100644 --- a/src/app/community-list-page/community-list-datasource.ts +++ b/src/app/community-list-page/community-list-datasource.ts @@ -1,3 +1,4 @@ +import { NgZone } from '@angular/core'; import { FindListOptions } from '../core/data/request.models'; import { CommunityListService, FlatNode } from './community-list-service'; import { CollectionViewer, DataSource } from '@angular/cdk/typings/collections'; @@ -15,7 +16,8 @@ export class CommunityListDatasource implements DataSource { private communityList$ = new BehaviorSubject([]); public loading$ = new BehaviorSubject(false); - constructor(private communityListService: CommunityListService) { + constructor(private communityListService: CommunityListService, + private zone: NgZone) { } connect(collectionViewer: CollectionViewer): Observable { @@ -25,11 +27,13 @@ export class CommunityListDatasource implements DataSource { loadCommunities(findOptions: FindListOptions, expandedNodes: FlatNode[]) { this.loading$.next(true); - this.communityListService.loadCommunities(findOptions, expandedNodes).pipe( - take(1), - finalize(() => this.loading$.next(false)), - ).subscribe((flatNodes: FlatNode[]) => { - this.communityList$.next(flatNodes); + this.zone.runOutsideAngular(() => { + this.communityListService.loadCommunities(findOptions, expandedNodes).pipe( + take(1), + finalize(() => this.loading$.next(false)), + ).subscribe((flatNodes: FlatNode[]) => { + this.communityList$.next(flatNodes); + }); }); } diff --git a/src/app/community-list-page/community-list-service.ts b/src/app/community-list-page/community-list-service.ts index 70db048d3e..a5c3506e3d 100644 --- a/src/app/community-list-page/community-list-service.ts +++ b/src/app/community-list-page/community-list-service.ts @@ -99,7 +99,7 @@ const communityListStateSelector = (state: AppState) => state.communityList; const expandedNodesSelector = createSelector(communityListStateSelector, (communityList: CommunityListState) => communityList.expandedNodes); const loadingNodeSelector = createSelector(communityListStateSelector, (communityList: CommunityListState) => communityList.loadingNode); -export const MAX_COMCOLS_PER_PAGE = 2; +export const MAX_COMCOLS_PER_PAGE = 50; /** * Service class for the community list, responsible for the creating of the flat list used by communityList dataSource diff --git a/src/app/community-list-page/community-list/community-list.component.ts b/src/app/community-list-page/community-list/community-list.component.ts index f672eae151..be96ff1a0a 100644 --- a/src/app/community-list-page/community-list/community-list.component.ts +++ b/src/app/community-list-page/community-list/community-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, NgZone, OnDestroy, OnInit } from '@angular/core'; import { take } from 'rxjs/operators'; import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; import { FindListOptions } from '../../core/data/request.models'; @@ -31,7 +31,8 @@ export class CommunityListComponent implements OnInit, OnDestroy { paginationConfig: FindListOptions; - constructor(private communityListService: CommunityListService) { + constructor(private communityListService: CommunityListService, + private zone: NgZone) { this.paginationConfig = new FindListOptions(); this.paginationConfig.elementsPerPage = 2; this.paginationConfig.currentPage = 1; @@ -39,7 +40,7 @@ export class CommunityListComponent implements OnInit, OnDestroy { } ngOnInit() { - this.dataSource = new CommunityListDatasource(this.communityListService); + this.dataSource = new CommunityListDatasource(this.communityListService, this.zone); this.communityListService.getLoadingNodeFromStore().pipe(take(1)).subscribe((result) => { this.loadingNode = result; }); From 6433e211a8bdcd1c0ad3769fa192eb4ed446b6ac Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Fri, 19 Jun 2020 13:59:21 +0200 Subject: [PATCH 27/28] Feedback processed: - change so state change behaviourSubjects back in NgZone.run --- src/app/community-list-page/community-list-datasource.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/community-list-page/community-list-datasource.ts b/src/app/community-list-page/community-list-datasource.ts index 8cd0c6b0af..4ffb16759d 100644 --- a/src/app/community-list-page/community-list-datasource.ts +++ b/src/app/community-list-page/community-list-datasource.ts @@ -25,14 +25,13 @@ export class CommunityListDatasource implements DataSource { } loadCommunities(findOptions: FindListOptions, expandedNodes: FlatNode[]) { - this.loading$.next(true); - this.zone.runOutsideAngular(() => { + this.loading$.next(true); this.communityListService.loadCommunities(findOptions, expandedNodes).pipe( take(1), - finalize(() => this.loading$.next(false)), + finalize(() => this.zone.run(() => this.loading$.next(false))), ).subscribe((flatNodes: FlatNode[]) => { - this.communityList$.next(flatNodes); + this.zone.run(() => this.communityList$.next(flatNodes)); }); }); } From f992fe1afd57b5019fe39f82fb42379494ddb42b Mon Sep 17 00:00:00 2001 From: Marie Verdonck Date: Tue, 30 Jun 2020 10:48:50 +0200 Subject: [PATCH 28/28] Feedback: - set initial loading moved outside of of NgZone --- src/app/community-list-page/community-list-datasource.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/community-list-page/community-list-datasource.ts b/src/app/community-list-page/community-list-datasource.ts index 4ffb16759d..b77cbb5246 100644 --- a/src/app/community-list-page/community-list-datasource.ts +++ b/src/app/community-list-page/community-list-datasource.ts @@ -25,8 +25,8 @@ export class CommunityListDatasource implements DataSource { } loadCommunities(findOptions: FindListOptions, expandedNodes: FlatNode[]) { + this.loading$.next(true); this.zone.runOutsideAngular(() => { - this.loading$.next(true); this.communityListService.loadCommunities(findOptions, expandedNodes).pipe( take(1), finalize(() => this.zone.run(() => this.loading$.next(false))),