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

Submission dropzone issues [Fixed]
2025-10-07 10:04:11 +00:00 · 2021-04-06 11:22:03 -05:00
parent 9586428b12 3482db0686
commit 88f5a3d256
8 changed files with 187 additions and 70 deletions
--- a/src/app/shared/mocks/submission.mock.ts
+++ b/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: '',
--- a/src/app/shared/uploader/uploader.component.html
+++ b/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"
--- a/src/app/shared/uploader/uploader.component.ts
+++ b/src/app/shared/uploader/uploader.component.ts
@@ -1,29 +1,16 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  HostListener,
-  Input,
-  Output,
-  ViewEncapsulation,
-} from '@angular/core';
+import { 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 {
-  XSRF_REQUEST_HEADER,
-  XSRF_RESPONSE_HEADER,
-  XSRF_COOKIE
-} from '../../core/xsrf/xsrf.interceptor';
+import { XSRF_COOKIE, XSRF_REQUEST_HEADER, XSRF_RESPONSE_HEADER } 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) => {
--- a/src/app/submission/form/submission-form.component.html
+++ b/src/app/submission/form/submission-form.component.html
@@ -1,35 +1,36 @@
 <div class="container-fluid">
-  <div *ngIf="!(isLoading() | async)">
-    <ds-submission-upload-files [submissionId]="submissionId"
-                                [collectionId]="collectionId"
-                                [sectionId]="'upload'"
-                                [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
-    <div class="clearfix"></div>
-  </div>
-  <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
-      <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 *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
+        <div *ngIf="(uploadEnabled$ | async)" class="w-100">
+            <ds-submission-upload-files [submissionId]="submissionId"
+                                        [collectionId]="collectionId"
+                                        [sectionId]="'upload'"
+                                        [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
+            <div class="clearfix"></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 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">
+        <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>
--- a/src/app/submission/form/submission-form.component.spec.ts
+++ b/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();
--- a/src/app/submission/form/submission-form.component.ts
+++ b/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(
--- a/src/app/submission/sections/sections.service.spec.ts
+++ b/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 {
-  FormAddError,
-  FormClearErrorsAction,
-  FormRemoveErrorAction
-} from '../../shared/form/form.actions';
+import { 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', () => {

--- a/src/app/submission/sections/sections.service.ts
+++ b/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
   *