Merge pull request #1087 from atmire/w2p-77631_dropzone-issues

Submission dropzone issues [Fixed]

src/app/shared/mocks/submission.mock.ts

@@ -1101,6 +1101,91 @@ export const mockSubmissionState: SubmissionObjectState = Object.assign({}, {
   }
 });
 
+export const mockSubmissionStateWithoutUpload: SubmissionObjectState = Object.assign({}, {
+  826: {
+    collection: mockSubmissionCollectionId,
+    definition: 'traditional',
+    selfUrl: mockSubmissionSelfUrl,
+    activeSection: null,
+    sections: {
+      extraction: {
+        config: '',
+        mandatory: true,
+        sectionType: 'utils',
+        visibility: {
+          main: 'HIDDEN',
+          other: 'HIDDEN'
+        },
+        collapsed: false,
+        enabled: true,
+        data: {},
+        errors: [],
+        isLoading: false,
+        isValid: false
+      } as any,
+      collection: {
+        config: '',
+        mandatory: true,
+        sectionType: 'collection',
+        visibility: {
+          main: 'HIDDEN',
+          other: 'HIDDEN'
+        },
+        collapsed: false,
+        enabled: true,
+        data: {},
+        errors: [],
+        isLoading: false,
+        isValid: false
+      } as any,
+      traditionalpageone: {
+        header: 'submit.progressbar.describe.stepone',
+        config: 'https://rest.api/dspace-spring-rest/api/config/submissionforms/traditionalpageone',
+        mandatory: true,
+        sectionType: 'submission-form',
+        collapsed: false,
+        enabled: true,
+        data: {},
+        errors: [],
+        formId: '2_traditionalpageone',
+        isLoading: false,
+        isValid: false
+      } as any,
+      traditionalpagetwo: {
+        header: 'submit.progressbar.describe.steptwo',
+        config: 'https://rest.api/dspace-spring-rest/api/config/submissionforms/traditionalpagetwo',
+        mandatory: false,
+        sectionType: 'submission-form',
+        collapsed: false,
+        enabled: false,
+        data: {},
+        errors: [],
+        isLoading: false,
+        isValid: false
+      } as any,
+      license: {
+        header: 'submit.progressbar.license',
+        config: '',
+        mandatory: true,
+        sectionType: 'license',
+        visibility: {
+          main: null,
+          other: 'READONLY'
+        },
+        collapsed: false,
+        enabled: true,
+        data: {},
+        errors: [],
+        isLoading: false,
+        isValid: false
+      } as any
+    },
+    isLoading: false,
+    savePending: false,
+    depositPending: false
+  }
+});
+
 export const mockSectionsState = Object.assign({}, {
   extraction: {
     config: '',

src/app/shared/uploader/uploader.component.html

@@ -1,5 +1,5 @@
 <div ng2FileDrop
-     *ngIf="enableDragOverDocument"
+     *ngIf="(isOverDocumentDropZone | async)"
      class="ds-document-drop-zone position-fixed h-100 w-100"
      [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
      [uploader]="uploader"

src/app/shared/uploader/uploader.component.ts

@@ -1,29 +1,16 @@
-import {
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation, } from '@angular/core';
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  HostListener,
-  Input,
-  Output,
-  ViewEncapsulation,
-} from '@angular/core';
 
 import { of as observableOf } from 'rxjs';
 import { FileUploader } from 'ng2-file-upload';
 import { uniqueId } from 'lodash';
-import { ScrollToConfigOptions, ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
+import { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
 
 import { UploaderOptions } from './uploader-options.model';
 import { hasValue, isNotEmpty, isUndefined } from '../empty.util';
 import { UploaderService } from './uploader.service';
 import { UploaderProperties } from './uploader-properties.model';
 import { HttpXsrfTokenExtractor } from '@angular/common/http';
-import {
+import { XSRF_COOKIE, XSRF_REQUEST_HEADER, XSRF_RESPONSE_HEADER } from '../../core/xsrf/xsrf.interceptor';
-  XSRF_REQUEST_HEADER,
-  XSRF_RESPONSE_HEADER,
-  XSRF_COOKIE
-} from '../../core/xsrf/xsrf.interceptor';
 import { CookieService } from '../../core/services/cookie.service';
 
 @Component({
@@ -146,12 +133,6 @@ export class UploaderComponent {
       this.uploader.options.headers = [{ name: XSRF_REQUEST_HEADER, value: this.tokenExtractor.getToken() }];
       this.onBeforeUpload();
       this.isOverDocumentDropZone = observableOf(false);
-
-      // Move page target to the uploader
-      const config: ScrollToConfigOptions = {
-        target: this.uploaderId
-      };
-      this.scrollToService.scrollTo(config);
     };
     if (hasValue(this.uploadProperties)) {
       this.uploader.onBuildItemForm = (item, form) => {

src/app/submission/form/submission-form.component.html

@@ -1,35 +1,36 @@
 <div class="container-fluid">
-  <div *ngIf="!(isLoading() | async)">
+    <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
-    <ds-submission-upload-files [submissionId]="submissionId"
+        <div *ngIf="(uploadEnabled$ | async)" class="w-100">
-                                [collectionId]="collectionId"
+            <ds-submission-upload-files [submissionId]="submissionId"
-                                [sectionId]="'upload'"
+                                        [collectionId]="collectionId"
-                                [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
+                                        [sectionId]="'upload'"
-    <div class="clearfix"></div>
+                                        [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
-  </div>
+            <div class="clearfix"></div>
-  <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
+        </div>
-      <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
-        <ds-submission-form-collection [currentCollectionId]="collectionId"
-                                       [currentDefinition]="definitionId"
-                                       [submissionId]="submissionId"
-                                       (collectionChange)="onCollectionChange($event)">
-        </ds-submission-form-collection>
-      </div>
-      <div class="submission-form-header-item text-right">
-        <ds-submission-form-section-add [collectionId]="collectionId"
-                                        [submissionId]="submissionId">
-        </ds-submission-form-section-add>
-      </div>
-  </div>
 
-  <div class="submission-form-content">
+        <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
-    <ds-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-loading>
+            <ds-submission-form-collection [currentCollectionId]="collectionId"
-    <ng-container *ngFor="let object of (submissionSections | async)">
+                                           [currentDefinition]="definitionId"
-      <ds-submission-section-container [collectionId]="collectionId"
+                                           [submissionId]="submissionId"
-                                       [submissionId]="submissionId"
+                                           (collectionChange)="onCollectionChange($event)">
-                                       [sectionData]="object"></ds-submission-section-container>
+            </ds-submission-form-collection>
-    </ng-container>
+        </div>
-  </div>
+        <div class="submission-form-header-item text-right">
-  <div *ngIf="!(isLoading() | async)" class="submission-form-footer mt-3 mb-3 position-sticky">
+            <ds-submission-form-section-add [collectionId]="collectionId"
-    <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
+                                            [submissionId]="submissionId">
-  </div>
+            </ds-submission-form-section-add>
+        </div>
+    </div>
+
+    <div class="submission-form-content">
+        <ds-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-loading>
+        <ng-container *ngFor="let object of (submissionSections | async)">
+            <ds-submission-section-container [collectionId]="collectionId"
+                                             [submissionId]="submissionId"
+                                             [sectionData]="object"></ds-submission-section-container>
+        </ng-container>
+    </div>
+    <div *ngIf="!(isLoading() | async)" class="submission-form-footer mt-3 mb-3 position-sticky">
+        <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
+    </div>
 </div>

src/app/submission/form/submission-form.component.spec.ts

@@ -24,7 +24,7 @@ import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-servic
 import { createTestComponent } from '../../shared/testing/utils.test';
 import { Item } from '../../core/shared/item.model';
 import { TestScheduler } from 'rxjs/testing';
-
+import { SectionsService } from '../sections/sections.service';
 
 describe('SubmissionFormComponent Component', () => {
 
@@ -55,6 +55,7 @@ describe('SubmissionFormComponent Component', () => {
         { provide: AuthService, useClass: AuthServiceStub },
         { provide: HALEndpointService, useValue: new HALEndpointServiceStub('workspaceitems') },
         { provide: SubmissionService, useValue: submissionServiceStub },
+        { provide: SectionsService, useValue: { isSectionTypeAvailable: () => observableOf(true) } },
         ChangeDetectorRef,
         SubmissionFormComponent
       ],
@@ -115,7 +116,7 @@ describe('SubmissionFormComponent Component', () => {
       expect(compAsAny.submissionSections).toBeUndefined();
       expect(compAsAny.subs).toEqual([]);
       expect(submissionServiceStub.startAutoSave).not.toHaveBeenCalled();
-      expect(comp.loading).toBeObservable(cold('(a|)', {a: true}));
+      expect(comp.loading).toBeObservable(cold('(a|)', { a: true }));
       done();
     });
 
@@ -140,7 +141,7 @@ describe('SubmissionFormComponent Component', () => {
       });
       scheduler.flush();
 
-      expect(comp.submissionSections).toBeObservable(cold('(a|)', {a: sectionsList}));
+      expect(comp.submissionSections).toBeObservable(cold('(a|)', { a: sectionsList }));
 
       expect(submissionServiceStub.dispatchInit).toHaveBeenCalledWith(
         collectionId,
@@ -201,7 +202,7 @@ describe('SubmissionFormComponent Component', () => {
           submissionDefinition: {
             name: 'traditional'
           }
-        } as  any);
+        } as any);
         fixture.detectChanges();
       });
       scheduler.flush();

src/app/submission/form/submission-form.component.ts

@@ -15,6 +15,8 @@ import { SubmissionObjectEntry } from '../objects/submission-objects.reducer';
 import { SectionDataObject } from '../sections/models/section-data.model';
 import { SubmissionService } from '../submission.service';
 import { Item } from '../../core/shared/item.model';
+import { SectionsType } from '../sections/sections-type';
+import { SectionsService } from '../sections/sections.service';
 
 /**
  * This component represents the submission form.
@@ -69,6 +71,11 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
    */
   public loading: Observable<boolean> = observableOf(true);
 
+  /**
+   * Emits true when the submission config has bitstream uploading enabled in submission
+   */
+  public uploadEnabled$: Observable<boolean>;
+
   /**
    * Observable of the list of submission's sections
    * @type {Observable<WorkspaceitemSectionsObject>}
@@ -100,12 +107,14 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
    * @param {ChangeDetectorRef} changeDetectorRef
    * @param {HALEndpointService} halService
    * @param {SubmissionService} submissionService
+   * @param {SectionsService} sectionsService
    */
   constructor(
     private authService: AuthService,
     private changeDetectorRef: ChangeDetectorRef,
     private halService: HALEndpointService,
-    private submissionService: SubmissionService) {
+    private submissionService: SubmissionService,
+    private sectionsService: SectionsService) {
     this.isActive = true;
   }
 
@@ -129,6 +138,7 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
             return observableOf([]);
           }
         }));
+      this.uploadEnabled$ = this.sectionsService.isSectionTypeAvailable(this.submissionId, SectionsType.Upload);
 
       // check if is submission loading
       this.loading = this.submissionService.getSubmissionObject(this.submissionId).pipe(

src/app/submission/sections/sections.service.spec.ts

@@ -1,4 +1,4 @@
-import { waitForAsync, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { cold, getTestScheduler } from 'jasmine-marbles';
 import { of as observableOf } from 'rxjs';
@@ -17,7 +17,8 @@ import { SectionsService } from './sections.service';
 import {
   mockSectionsData,
   mockSectionsErrors,
-  mockSubmissionState
+  mockSubmissionState,
+  mockSubmissionStateWithoutUpload
 } from '../../shared/mocks/submission.mock';
 import {
   DisableSectionAction,
@@ -27,11 +28,7 @@ import {
   SectionStatusChangeAction,
   UpdateSectionDataAction
 } from '../objects/submission-objects.actions';
-import {
+import { FormAddError, FormClearErrorsAction, FormRemoveErrorAction } from '../../shared/form/form.actions';
-  FormAddError,
-  FormClearErrorsAction,
-  FormRemoveErrorAction
-} from '../../shared/form/form.actions';
 import parseSectionErrors from '../utils/parseSectionErrors';
 import { SubmissionScopeType } from '../../core/submission/submission-scope-type';
 import { SubmissionSectionError } from '../objects/submission-objects.reducer';
@@ -52,6 +49,7 @@ describe('SectionsService test suite', () => {
   const sectionErrors: any = parseSectionErrors(mockSectionsErrors);
   const sectionData: any = mockSectionsData;
   const submissionState: any = Object.assign({}, mockSubmissionState[submissionId]);
+  const submissionStateWithoutUpload: any = Object.assign({}, mockSubmissionStateWithoutUpload[submissionId]);
   const sectionState: any = Object.assign({}, mockSubmissionState['826'].sections[sectionId]);
 
   const store: any = jasmine.createSpyObj('store', {
@@ -314,6 +312,28 @@ describe('SectionsService test suite', () => {
     });
   });
 
+  describe('isSectionTypeAvailable', () => {
+    it('should return an observable of true when section is available', () => {
+      store.select.and.returnValue(observableOf(submissionState));
+
+      const expected = cold('(b|)', {
+        b: true
+      });
+
+      expect(service.isSectionTypeAvailable(submissionId, SectionsType.Upload)).toBeObservable(expected);
+    });
+
+    it('should return an observable of false when section is not available', () => {
+      store.select.and.returnValue(observableOf(submissionStateWithoutUpload));
+
+      const expected = cold('(b|)', {
+        b: false
+      });
+
+      expect(service.isSectionAvailable(submissionId, SectionsType.Upload)).toBeObservable(expected);
+    });
+  });
+
   describe('addSection', () => {
     it('should dispatch a new EnableSectionAction a move target to new section', () => {
 

src/app/submission/sections/sections.service.ts

@@ -5,7 +5,7 @@ import { distinctUntilChanged, filter, map, take } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { ScrollToConfigOptions, ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
-import { isEqual } from 'lodash';
+import { findKey, isEqual } from 'lodash';
 
 import { SubmissionState } from '../submission.reducers';
 import { hasValue, isEmpty, isNotEmpty, isNotUndefined } from '../../shared/empty.util';
@@ -291,14 +291,14 @@ export class SectionsService {
   }
 
   /**
-   * Check if a given section is a read only available
+   * Check if a given section id is present in the list of sections
    *
    * @param submissionId
    *    The submission id
    * @param sectionId
    *    The section id
    * @return Observable<boolean>
-   *    Emits true whenever a given section should be available
+   *    Emits true whenever a given section id should be available
    */
   public isSectionAvailable(submissionId: string, sectionId: string): Observable<boolean> {
     return this.store.select(submissionObjectFromIdSelector(submissionId)).pipe(
@@ -309,6 +309,25 @@ export class SectionsService {
       distinctUntilChanged());
   }
 
+  /**
+   * Check if a given section type is present in the list of sections
+   *
+   * @param submissionId
+   *    The submission id
+   * @param sectionType
+   *    The section type
+   * @return Observable<boolean>
+   *    Emits true whenever a given section type should be available
+   */
+  public isSectionTypeAvailable(submissionId: string, sectionType: SectionsType): Observable<boolean> {
+    return this.store.select(submissionObjectFromIdSelector(submissionId)).pipe(
+      filter((submissionState: SubmissionObjectEntry) => isNotUndefined(submissionState)),
+      map((submissionState: SubmissionObjectEntry) => {
+        return isNotUndefined(submissionState.sections) && isNotUndefined(findKey(submissionState.sections, {sectionType: sectionType}));
+      }),
+      distinctUntilChanged());
+  }
+
   /**
    * Dispatch a new [EnableSectionAction] to add a new section and move page target to it
    *