[CST-4884] Bitstream edit form moved inside modal (test TBD)

2025-10-07 01:54:15 +00:00 · 2021-11-22 18:14:45 +01:00
parent 5df2f6f8d5
commit 624f39df1e
4 changed files with 355 additions and 294 deletions
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
@@ -1,9 +1,21 @@
 <div>
+  <div class="modal-header">
+    <h4 class="modal-title">{{'submission.sections.upload.edit.title' | translate}}</h4>
+    <button type="button" class="close" (click)="onModalClose()" aria-label="Close" [disabled]="isSaving">
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+  <div class="modal-body">
+
    <ds-form *ngIf="formModel"
             #formRef="formComponent"
             [formId]="formId"
             [formModel]="formModel"
-           [displaySubmit]="false"
-           [displayCancel]="false"
+             [displaySubmit]="!isSaving"
+             [displayCancel]="!isSaving"
+             (submitForm)="onSubmit()"
+             (cancel)="onModalClose()"
             (dfChange)="onChange($event)"></ds-form>
+
+  </div>
 </div>
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';

 import {
@@ -32,13 +32,23 @@ import {
  BITSTREAM_METADATA_FORM_GROUP_LAYOUT
 } from './section-upload-file-edit.model';
 import { POLICY_DEFAULT_WITH_LIST } from '../../section-upload.component';
-import { isNotEmpty } from '../../../../../shared/empty.util';
+import { hasNoValue, hasValue, isNotEmpty, isNotNull } from '../../../../../shared/empty.util';
 import { SubmissionFormsModel } from '../../../../../core/config/models/config-submission-forms.model';
 import { FormFieldModel } from '../../../../../shared/form/builder/models/form-field.model';
 import { AccessConditionOption } from '../../../../../core/config/models/config-access-condition-option.model';
 import { SubmissionService } from '../../../../submission.service';
 import { FormService } from '../../../../../shared/form/form.service';
 import { FormComponent } from '../../../../../shared/form/form.component';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { filter, mergeMap, take } from 'rxjs/operators';
+import { dateToISOFormat } from '../../../../../shared/date.util';
+import { SubmissionObject } from '../../../../../core/submission/models/submission-object.model';
+import { WorkspaceitemSectionUploadObject } from '../../../../../core/submission/models/workspaceitem-section-upload.model';
+import { JsonPatchOperationsBuilder } from '../../../../../core/json-patch/builder/json-patch-operations-builder';
+import { SubmissionJsonPatchOperationsService } from '../../../../../core/submission/submission-json-patch-operations.service';
+import { JsonPatchOperationPathCombiner } from '../../../../../core/json-patch/builder/json-patch-operation-path-combiner';
+import { SectionUploadService } from '../../section-upload.service';
+import { Subscription } from 'rxjs';

 /**
 * This component represents the edit form for bitstream
@@ -48,7 +58,31 @@ import { FormComponent } from '../../../../../shared/form/form.component';
  styleUrls: ['./section-upload-file-edit.component.scss'],
  templateUrl: './section-upload-file-edit.component.html',
 })
-export class SubmissionSectionUploadFileEditComponent implements OnChanges {
+export class SubmissionSectionUploadFileEditComponent implements OnInit {
+
+  /**
+   * Initialize instance variables
+   *
+   * @param activeModal
+   * @param {ChangeDetectorRef} cdr
+   * @param {FormBuilderService} formBuilderService
+   * @param {FormService} formService
+   * @param {SubmissionService} submissionService
+   * @param {JsonPatchOperationsBuilder} operationsBuilder
+   * @param {SubmissionJsonPatchOperationsService} operationsService
+   * @param {SectionUploadService} uploadService
+   */
+  constructor(
+    protected activeModal: NgbActiveModal,
+    private cdr: ChangeDetectorRef,
+    private formBuilderService: FormBuilderService,
+    private formService: FormService,
+    private submissionService: SubmissionService,
+    private operationsBuilder: JsonPatchOperationsBuilder,
+    private operationsService: SubmissionJsonPatchOperationsService,
+    private uploadService: SectionUploadService,
+  ) {
+  }

  /**
   * The list of available access condition
@@ -113,10 +147,15 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
  @Input() submissionId: string;

  /**
-   * The form model
-   * @type {DynamicFormControlModel[]}
+   * The list of all available metadata
   */
-  public formModel: DynamicFormControlModel[];
+  @Input() formMetadata: string[] = [];
+
+  /**
+   * The [JsonPatchOperationPathCombiner] object
+   * @type {JsonPatchOperationPathCombiner}
+   */
+  @Input() pathCombiner: JsonPatchOperationPathCombiner;

  /**
   * The FormComponent reference
@@ -124,108 +163,18 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
  @ViewChild('formRef') public formRef: FormComponent;

  /**
-   * Initialize instance variables
-   *
-   * @param {ChangeDetectorRef} cdr
-   * @param {FormBuilderService} formBuilderService
-   * @param {FormService} formService
-   * @param {SubmissionService} submissionService
+   * The form model
+   * @type {DynamicFormControlModel[]}
   */
-  constructor(private cdr: ChangeDetectorRef,
-              private formBuilderService: FormBuilderService,
-              private formService: FormService,
-              private submissionService: SubmissionService) {
-  }
+  formModel: DynamicFormControlModel[];

-  /**
-   * Dispatch form model init
-   */
-  ngOnChanges() {
-    if (this.fileData && this.formId) {
-      this.formModel = this.buildFileEditForm();
-      this.cdr.detectChanges();
-    }
-  }
+  isSaving = false;

-  /**
-   * Initialize form model
-   */
-  protected buildFileEditForm() {
-    const configDescr: FormFieldModel = Object.assign({}, this.configMetadataForm.rows[0].fields[0]);
-    configDescr.repeatable = false;
-    const configForm = Object.assign({}, this.configMetadataForm, {
-      fields: Object.assign([], this.configMetadataForm.rows[0].fields[0], [
-        this.configMetadataForm.rows[0].fields[0],
-        configDescr
-      ])
-    });
-    const formModel: DynamicFormControlModel[] = [];
-    const metadataGroupModelConfig = Object.assign({}, BITSTREAM_METADATA_FORM_GROUP_CONFIG);
-    metadataGroupModelConfig.group = this.formBuilderService.modelFromConfiguration(
-      this.submissionId,
-      configForm,
-      this.collectionId,
-      this.fileData.metadata,
-      this.submissionService.getSubmissionScope()
-    );
-    formModel.push(new DynamicFormGroupModel(metadataGroupModelConfig, BITSTREAM_METADATA_FORM_GROUP_LAYOUT));
-    const accessConditionTypeModelConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_CONFIG);
-    const accessConditionsArrayConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG);
-    const accessConditionTypeOptions = [];
+  protected subscriptions: Subscription[] = [];

-    if (this.collectionPolicyType === POLICY_DEFAULT_WITH_LIST) {
-      for (const accessCondition of this.availableAccessConditionOptions) {
-        accessConditionTypeOptions.push(
-          {
-            label: accessCondition.name,
-            value: accessCondition.name
-          }
-        );
-      }
-      accessConditionTypeModelConfig.options = accessConditionTypeOptions;
-
-      // Dynamically assign of relation in config. For startdate, endDate, groups.
-      const hasStart = [];
-      const hasEnd = [];
-      const hasGroups = [];
-      this.availableAccessConditionOptions.forEach((condition) => {
-        const showStart: boolean = condition.hasStartDate === true;
-        const showEnd: boolean = condition.hasEndDate === true;
-        const showGroups: boolean = showStart || showEnd;
-        if (showStart) {
-          hasStart.push({ id: 'name', value: condition.name });
-        }
-        if (showEnd) {
-          hasEnd.push({ id: 'name', value: condition.name });
-        }
-        if (showGroups) {
-          hasGroups.push({ id: 'name', value: condition.name });
-        }
-      });
-      const confStart = { relations: [{ match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasStart }] };
-      const confEnd = { relations: [{ match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasEnd }] };
-
-      accessConditionsArrayConfig.groupFactory = () => {
-        const type = new DynamicSelectModel(accessConditionTypeModelConfig, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_LAYOUT);
-        const startDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_CONFIG, confStart);
-        const endDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_CONFIG, confEnd);
-
-        const startDate = new DynamicDatePickerModel(startDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT);
-        const endDate = new DynamicDatePickerModel(endDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT);
-        const accessConditionGroupConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITION_GROUP_CONFIG);
-        accessConditionGroupConfig.group = [type, startDate, endDate];
-        return [new DynamicFormGroupModel(accessConditionGroupConfig, BITSTREAM_ACCESS_CONDITION_GROUP_LAYOUT)];
-      };
-
-      // Number of access conditions blocks in form
-      accessConditionsArrayConfig.initialCount = isNotEmpty(this.fileData.accessConditions) ? this.fileData.accessConditions.length : 1;
-      formModel.push(
-        new DynamicFormArrayModel(accessConditionsArrayConfig, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT)
-      );
-
-    }
-    this.initModelData(formModel);
-    return formModel;
+  private static retrieveValueFromField(field: any) {
+    const temp = Array.isArray(field) ? field[0] : field;
+    return (temp) ? temp.value : undefined;
  }

  /**
@@ -262,12 +211,21 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
   * @param event
   *    The event emitted
   */
-  public onChange(event: DynamicFormControlEvent) {
+  onChange(event: DynamicFormControlEvent) {
    if (event.model.id === 'name') {
      this.setOptions(event.model, event.control);
    }
  }

+  onModalClose() {
+    this.activeModal.dismiss();
+  }
+
+  onSubmit() {
+    this.isSaving = true;
+    this.saveBitstreamData();
+  }
+
  /**
   * Update `startDate`, 'groupUUID' and 'endDate' model
   *
@@ -323,4 +281,191 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
    }
  }

+  /**
+   * Dispatch form model init
+   */
+  ngOnInit() {
+    if (this.fileData && this.formId) {
+      this.formModel = this.buildFileEditForm();
+      this.cdr.detectChanges();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  /**
+   * Initialize form model
+   */
+  protected buildFileEditForm() {
+    const configDescr: FormFieldModel = Object.assign({}, this.configMetadataForm.rows[0].fields[0]);
+    configDescr.repeatable = false;
+    const configForm = Object.assign({}, this.configMetadataForm, {
+      fields: Object.assign([], this.configMetadataForm.rows[0].fields[0], [
+        this.configMetadataForm.rows[0].fields[0],
+        configDescr
+      ])
+    });
+    const formModel: DynamicFormControlModel[] = [];
+    const metadataGroupModelConfig = Object.assign({}, BITSTREAM_METADATA_FORM_GROUP_CONFIG);
+    metadataGroupModelConfig.group = this.formBuilderService.modelFromConfiguration(
+      this.submissionId,
+      configForm,
+      this.collectionId,
+      this.fileData.metadata,
+      this.submissionService.getSubmissionScope()
+    );
+    formModel.push(new DynamicFormGroupModel(metadataGroupModelConfig, BITSTREAM_METADATA_FORM_GROUP_LAYOUT));
+    const accessConditionTypeModelConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_CONFIG);
+    const accessConditionsArrayConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG);
+    const accessConditionTypeOptions = [];
+
+    if (this.collectionPolicyType === POLICY_DEFAULT_WITH_LIST) {
+      for (const accessCondition of this.availableAccessConditionOptions) {
+        accessConditionTypeOptions.push(
+          {
+            label: accessCondition.name,
+            value: accessCondition.name
+          }
+        );
+      }
+      accessConditionTypeModelConfig.options = accessConditionTypeOptions;
+
+      // Dynamically assign of relation in config. For startdate, endDate, groups.
+      const hasStart = [];
+      const hasEnd = [];
+      const hasGroups = [];
+      this.availableAccessConditionOptions.forEach((condition) => {
+        const showStart: boolean = condition.hasStartDate === true;
+        const showEnd: boolean = condition.hasEndDate === true;
+        const showGroups: boolean = showStart || showEnd;
+        if (showStart) {
+          hasStart.push({id: 'name', value: condition.name});
+        }
+        if (showEnd) {
+          hasEnd.push({id: 'name', value: condition.name});
+        }
+        if (showGroups) {
+          hasGroups.push({id: 'name', value: condition.name});
+        }
+      });
+      const confStart = {relations: [{match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasStart}]};
+      const confEnd = {relations: [{match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasEnd}]};
+
+      accessConditionsArrayConfig.groupFactory = () => {
+        const type = new DynamicSelectModel(accessConditionTypeModelConfig, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_LAYOUT);
+        const startDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_CONFIG, confStart);
+        const endDateConfig = Object.assign({}, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_CONFIG, confEnd);
+
+        const startDate = new DynamicDatePickerModel(startDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT);
+        const endDate = new DynamicDatePickerModel(endDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT);
+        const accessConditionGroupConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITION_GROUP_CONFIG);
+        accessConditionGroupConfig.group = [type, startDate, endDate];
+        return [new DynamicFormGroupModel(accessConditionGroupConfig, BITSTREAM_ACCESS_CONDITION_GROUP_LAYOUT)];
+      };
+
+      // Number of access conditions blocks in form
+      accessConditionsArrayConfig.initialCount = isNotEmpty(this.fileData.accessConditions) ? this.fileData.accessConditions.length : 1;
+      formModel.push(
+        new DynamicFormArrayModel(accessConditionsArrayConfig, BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT)
+      );
+
+    }
+    this.initModelData(formModel);
+    return formModel;
+  }
+
+  /**
+   * Save bitstream metadata
+   */
+  protected saveBitstreamData() {
+    // validate form
+    this.formService.validateAllFormFields(this.formRef.formGroup);
+    const saveBitstreamDataSubscription = this.formService.isValid(this.formId).pipe(
+      take(1),
+      filter((isValid) => isValid),
+      mergeMap(() => this.formService.getFormData(this.formId)),
+      take(1),
+      mergeMap((formData: any) => {
+        // collect bitstream metadata
+        Object.keys((formData.metadata))
+          .filter((key) => isNotEmpty(formData.metadata[key]))
+          .forEach((key) => {
+            const metadataKey = key.replace(/_/g, '.');
+            const path = `metadata/${metadataKey}`;
+            this.operationsBuilder.add(this.pathCombiner.getPath(path), formData.metadata[key], true);
+          });
+        Object.keys((this.fileData.metadata))
+          .filter((key) => isNotEmpty(this.fileData.metadata[key]))
+          .filter((key) => hasNoValue(formData.metadata[key]))
+          .filter((key) => this.formMetadata.includes(key))
+          .forEach((key) => {
+            const metadataKey = key.replace(/_/g, '.');
+            const path = `metadata/${metadataKey}`;
+            this.operationsBuilder.remove(this.pathCombiner.getPath(path));
+          });
+        const accessConditionsToSave = [];
+        formData.accessConditions
+          .map((accessConditions) => accessConditions.accessConditionGroup)
+          .filter((accessCondition) => isNotEmpty(accessCondition))
+          .forEach((accessCondition) => {
+            let accessConditionOpt;
+
+            this.availableAccessConditionOptions
+              .filter((element) => isNotNull(accessCondition.name) && element.name === accessCondition.name[0].value)
+              .forEach((element) => accessConditionOpt = element);
+
+            if (accessConditionOpt) {
+              const currentAccessCondition = Object.assign({}, accessCondition);
+              currentAccessCondition.name = SubmissionSectionUploadFileEditComponent.retrieveValueFromField(accessCondition.name);
+
+              /* When start and end date fields are deactivated, their values may be still present in formData,
+              therefore it is necessary to delete them if they're not allowed by the current access condition option. */
+              if (!accessConditionOpt.hasStartDate) {
+                delete currentAccessCondition.startDate;
+              } else if (accessCondition.startDate) {
+                const startDate = SubmissionSectionUploadFileEditComponent.retrieveValueFromField(accessCondition.startDate);
+                currentAccessCondition.startDate = dateToISOFormat(startDate);
+              }
+              if (!accessConditionOpt.hasEndDate) {
+                delete currentAccessCondition.endDate;
+              } else if (accessCondition.endDate) {
+                const endDate = SubmissionSectionUploadFileEditComponent.retrieveValueFromField(accessCondition.endDate);
+                currentAccessCondition.endDate = dateToISOFormat(endDate);
+              }
+              accessConditionsToSave.push(currentAccessCondition);
+            }
+          });
+
+        if (isNotEmpty(accessConditionsToSave)) {
+          this.operationsBuilder.add(this.pathCombiner.getPath('accessConditions'), accessConditionsToSave, true);
+        }
+
+        // dispatch a PATCH request to save metadata
+        return this.operationsService.jsonPatchByResourceID(
+          this.submissionService.getSubmissionObjectLinkName(),
+          this.submissionId,
+          this.pathCombiner.rootElement,
+          this.pathCombiner.subRootElement);
+      })
+    ).subscribe((result: SubmissionObject[]) => {
+      if (result[0].sections[this.sectionId]) {
+        const uploadSection = (result[0].sections[this.sectionId] as WorkspaceitemSectionUploadObject);
+        Object.keys(uploadSection.files)
+          .filter((key) => uploadSection.files[key].uuid === this.fileId)
+          .forEach((key) => this.uploadService.updateFileData(
+            this.submissionId, this.sectionId, this.fileId, uploadSection.files[key])
+          );
+      }
+      this.isSaving = false;
+      this.activeModal.close();
+    });
+    this.subscriptions.push(saveBitstreamDataSubscription);
+  }
+
+  private unsubscribeAll() {
+    this.subscriptions.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
+  }
+
 }
--- a/src/app/submission/sections/upload/file/section-upload-file.component.html
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.html
@@ -9,14 +9,14 @@
        <h3>{{fileName}} <span class="text-muted">({{fileData?.sizeBytes | dsFileSize}})</span></h3>
      </div>
      <div class="float-right w-15" [class.sticky-buttons]="!readMode">
-        <ng-container *ngIf="readMode">
+        <ng-container>
          <ds-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true" [bitstream]="getBitstream()" [enableRequestACopy]="false">
            <i class="fa fa-download fa-2x text-normal" aria-hidden="true"></i>
          </ds-file-download-link>
          <button class="btn btn-link-focus"
                  [attr.aria-label]="'submission.sections.upload.edit.title' | translate"
                  title="{{ 'submission.sections.upload.edit.title' | translate }}"
-                  (click)="$event.preventDefault();switchMode();">
+                  (click)="$event.preventDefault();editBitstreamData();">
            <i class="fa fa-edit fa-2x text-normal"></i>
          </button>
          <button class="btn btn-link-focus"
@@ -28,40 +28,9 @@
            <i *ngIf="!(processingDelete$ | async)" class="fa fa-trash fa-2x text-danger"></i>
          </button>
        </ng-container>
-        <ng-container *ngIf="!readMode">
-          <button class="btn btn-link-focus"
-                  [attr.aria-label]="'submission.sections.upload.save-metadata' | translate"
-                  title="{{ 'submission.sections.upload.save-metadata' | translate }}"
-                  (click)="saveBitstreamData($event);">
-            <i class="fa fa-save fa-2x text-success"></i>
-          </button>
-          <button class="btn btn-link-focus"
-                  [attr.aria-label]="'submission.sections.upload.undo' | translate"
-                  title="{{ 'submission.sections.upload.undo' | translate }}"
-                  (click)="$event.preventDefault();switchMode();"><i class="fa fa-ban fa-2x text-warning"></i></button>
-          <button class="btn btn-link-focus"
-                  [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
-                  title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
-                  [disabled]="(processingDelete$ | async)"
-                  (click)="$event.preventDefault();confirmDelete(content);">
-            <i *ngIf="(processingDelete$ | async)" class="fas fa-circle-notch fa-spin fa-2x text-danger"></i>
-            <i *ngIf="!(processingDelete$ | async)" class="fa fa-trash fa-2x text-danger"></i>
-          </button>
-        </ng-container>
      </div>
      <div class="clearfix"></div>
-      <ds-submission-section-upload-file-view *ngIf="readMode"
-                                              [fileData]="fileData"></ds-submission-section-upload-file-view>
-      <ds-submission-section-upload-file-edit *ngIf="!readMode"
-                                              [availableAccessConditionOptions]="availableAccessConditionOptions"
-                                              [collectionId]="collectionId"
-                                              [collectionPolicyType]="collectionPolicyType"
-                                              [configMetadataForm]="configMetadataForm"
-                                              [fileData]="fileData"
-                                              [fileId]="fileId"
-                                              [fileIndex]="fileIndex"
-                                              [formId]="formId"
-                                              [sectionId]="sectionId"></ds-submission-section-upload-file-edit>
+      <ds-submission-section-upload-file-view [fileData]="fileData"></ds-submission-section-upload-file-view>
    </div>
  </div>
 </ng-container>
--- a/src/app/submission/sections/upload/file/section-upload-file.component.ts
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.ts
@@ -1,25 +1,23 @@
 import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';

 import { BehaviorSubject, Subscription } from 'rxjs';
-import { filter, mergeMap, take } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
 import { DynamicFormControlModel, } from '@ng-dynamic-forms/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

 import { SectionUploadService } from '../section-upload.service';
-import { hasNoValue, isNotEmpty, isNotNull, isNotUndefined } from '../../../../shared/empty.util';
+import { hasValue, isNotUndefined } from '../../../../shared/empty.util';
 import { FormService } from '../../../../shared/form/form.service';
 import { JsonPatchOperationsBuilder } from '../../../../core/json-patch/builder/json-patch-operations-builder';
 import { JsonPatchOperationPathCombiner } from '../../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { WorkspaceitemSectionUploadFileObject } from '../../../../core/submission/models/workspaceitem-section-upload-file.model';
 import { SubmissionFormsModel } from '../../../../core/config/models/config-submission-forms.model';
-import { dateToISOFormat } from '../../../../shared/date.util';
 import { SubmissionService } from '../../../submission.service';
 import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
 import { SubmissionJsonPatchOperationsService } from '../../../../core/submission/submission-json-patch-operations.service';
-import { SubmissionObject } from '../../../../core/submission/models/submission-object.model';
-import { WorkspaceitemSectionUploadObject } from '../../../../core/submission/models/workspaceitem-section-upload.model';
 import { SubmissionSectionUploadFileEditComponent } from './edit/section-upload-file-edit.component';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
+import { NgbModalOptions } from '@ng-bootstrap/ng-bootstrap/modal/modal-config';

 /**
 * This component represents a single bitstream contained in the submission
@@ -87,6 +85,13 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
   */
  @Input() submissionId: string;

+  /**
+   * The [[SubmissionSectionUploadFileEditComponent]] reference
+   * @type {SubmissionSectionUploadFileEditComponent}
+   */
+  @ViewChild(SubmissionSectionUploadFileEditComponent) fileEditComp: SubmissionSectionUploadFileEditComponent;
+
+
  /**
   * The bitstream's metadata data
   * @type {WorkspaceitemSectionUploadFileObject}
@@ -135,12 +140,6 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
   */
  protected formMetadata: string[] = [];

-  /**
-   * The [[SubmissionSectionUploadFileEditComponent]] reference
-   * @type {SubmissionSectionUploadFileEditComponent}
-   */
-  @ViewChild(SubmissionSectionUploadFileEditComponent) fileEditComp: SubmissionSectionUploadFileEditComponent;
-
  /**
   * Initialize instance variables
   *
@@ -153,28 +152,19 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
   * @param {SubmissionService} submissionService
   * @param {SectionUploadService} uploadService
   */
-  constructor(private cdr: ChangeDetectorRef,
+  constructor(
+    private cdr: ChangeDetectorRef,
    private formService: FormService,
    private halService: HALEndpointService,
    private modalService: NgbModal,
    private operationsBuilder: JsonPatchOperationsBuilder,
    private operationsService: SubmissionJsonPatchOperationsService,
    private submissionService: SubmissionService,
-              private uploadService: SectionUploadService) {
+    private uploadService: SectionUploadService,
+  ) {
    this.readMode = true;
  }

-  protected loadFormMetadata() {
-    this.configMetadataForm.rows.forEach((row) => {
-        row.fields.forEach((field) => {
-          field.selectableMetadata.forEach((metadatum) => {
-            this.formMetadata.push(metadatum.metadata);
-          });
-        });
-      }
-    );
-  }
-
  /**
   * Retrieve bitstream's metadata
   */
@@ -202,22 +192,6 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
    this.loadFormMetadata();
  }

-  /**
-   * Delete bitstream from submission
-   */
-  protected deleteFile() {
-    this.operationsBuilder.remove(this.pathCombiner.getPath());
-    this.subscriptions.push(this.operationsService.jsonPatchByResourceID(
-      this.submissionService.getSubmissionObjectLinkName(),
-      this.submissionId,
-      this.pathCombiner.rootElement,
-      this.pathCombiner.subRootElement)
-      .subscribe(() => {
-        this.uploadService.removeUploadedFile(this.submissionId, this.sectionId, this.fileId);
-        this.processingDelete$.next(false);
-      }));
-  }
-
  /**
   * Show confirmation dialog for delete
   */
@@ -243,108 +217,6 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
    });
  }

-  /**
-   * Save bitstream metadata
-   *
-   * @param event
-   *    the click event emitted
-   */
-  public saveBitstreamData(event) {
-    event.preventDefault();
-
-    // validate form
-    this.formService.validateAllFormFields(this.fileEditComp.formRef.formGroup);
-    this.subscriptions.push(this.formService.isValid(this.formId).pipe(
-      take(1),
-      filter((isValid) => isValid),
-      mergeMap(() => this.formService.getFormData(this.formId)),
-      take(1),
-      mergeMap((formData: any) => {
-        // collect bitstream metadata
-        Object.keys((formData.metadata))
-          .filter((key) => isNotEmpty(formData.metadata[key]))
-          .forEach((key) => {
-            const metadataKey = key.replace(/_/g, '.');
-            const path = `metadata/${metadataKey}`;
-            this.operationsBuilder.add(this.pathCombiner.getPath(path), formData.metadata[key], true);
-          });
-        Object.keys((this.fileData.metadata))
-          .filter((key) => isNotEmpty(this.fileData.metadata[key]))
-          .filter((key) => hasNoValue(formData.metadata[key]))
-          .filter((key) => this.formMetadata.includes(key))
-          .forEach((key) => {
-            const metadataKey = key.replace(/_/g, '.');
-            const path = `metadata/${metadataKey}`;
-            this.operationsBuilder.remove(this.pathCombiner.getPath(path));
-          });
-        const accessConditionsToSave = [];
-        formData.accessConditions
-          .map((accessConditions) => accessConditions.accessConditionGroup)
-          .filter((accessCondition) => isNotEmpty(accessCondition))
-          .forEach((accessCondition) => {
-            let accessConditionOpt;
-
-            this.availableAccessConditionOptions
-              .filter((element) => isNotNull(accessCondition.name) && element.name === accessCondition.name[0].value)
-              .forEach((element) => accessConditionOpt = element);
-
-            if (accessConditionOpt) {
-              const currentAccessCondition = Object.assign({}, accessCondition);
-              currentAccessCondition.name = this.retrieveValueFromField(accessCondition.name);
-
-              /* When start and end date fields are deactivated, their values may be still present in formData,
-              therefore it is necessary to delete them if they're not allowed by the current access condition option. */
-              if (!accessConditionOpt.hasStartDate) {
-                delete currentAccessCondition.startDate;
-              } else if (accessCondition.startDate) {
-                const startDate = this.retrieveValueFromField(accessCondition.startDate);
-                currentAccessCondition.startDate = dateToISOFormat(startDate);
-              }
-              if (!accessConditionOpt.hasEndDate) {
-                delete currentAccessCondition.endDate;
-              } else if (accessCondition.endDate) {
-                const endDate = this.retrieveValueFromField(accessCondition.endDate);
-                currentAccessCondition.endDate = dateToISOFormat(endDate);
-              }
-              accessConditionsToSave.push(currentAccessCondition);
-            }
-          });
-
-        if (isNotEmpty(accessConditionsToSave)) {
-          this.operationsBuilder.add(this.pathCombiner.getPath('accessConditions'), accessConditionsToSave, true);
-        }
-
-        // dispatch a PATCH request to save metadata
-        return this.operationsService.jsonPatchByResourceID(
-          this.submissionService.getSubmissionObjectLinkName(),
-          this.submissionId,
-          this.pathCombiner.rootElement,
-          this.pathCombiner.subRootElement);
-      })
-    ).subscribe((result: SubmissionObject[]) => {
-      if (result[0].sections[this.sectionId]) {
-        const uploadSection = (result[0].sections[this.sectionId] as WorkspaceitemSectionUploadObject);
-        Object.keys(uploadSection.files)
-          .filter((key) => uploadSection.files[key].uuid === this.fileId)
-          .forEach((key) => this.uploadService.updateFileData(
-            this.submissionId, this.sectionId, this.fileId, uploadSection.files[key])
-          );
-      }
-      this.switchMode();
-    }));
-  }
-
-  /**
-   * Retrieve field value
-   *
-   * @param field
-   *    the specified field object
-   */
-  private retrieveValueFromField(field: any) {
-    const temp = Array.isArray(field) ? field[0] : field;
-    return (temp) ? temp.value : undefined;
-  }
-
  /**
   * Switch from edit form to metadata view
   */
@@ -353,4 +225,67 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
    this.cdr.detectChanges();
  }

+  editBitstreamData() {
+
+    const options: NgbModalOptions = {
+      size: 'xl',
+      backdrop: 'static',
+    };
+
+    const activeModal = this.modalService.open(SubmissionSectionUploadFileEditComponent, options);
+
+    activeModal.componentInstance.availableAccessConditionOptions = this.availableAccessConditionOptions;
+    activeModal.componentInstance.collectionId = this.collectionId;
+    activeModal.componentInstance.collectionPolicyType = this.collectionPolicyType;
+    activeModal.componentInstance.configMetadataForm = this.configMetadataForm;
+    activeModal.componentInstance.fileData = this.fileData;
+    activeModal.componentInstance.fileId = this.fileId;
+    activeModal.componentInstance.fileIndex = this.fileIndex;
+    activeModal.componentInstance.formId = this.formId;
+    activeModal.componentInstance.sectionId = this.sectionId;
+    activeModal.componentInstance.formMetadata = this.formMetadata;
+    activeModal.componentInstance.pathCombiner = this.pathCombiner;
+    activeModal.componentInstance.submissionId = this.submissionId;
+
+    /*activeModal.componentInstance.saveBitstreamDataEvent.subscribe((res) => {
+      console.log(JSON.stringify(res));
+    });*/
+
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  unsubscribeAll() {
+    this.subscriptions.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
+  }
+
+  protected loadFormMetadata() {
+    this.configMetadataForm.rows.forEach((row) => {
+        row.fields.forEach((field) => {
+          field.selectableMetadata.forEach((metadatum) => {
+            this.formMetadata.push(metadatum.metadata);
+          });
+        });
+      }
+    );
+  }
+
+  /**
+   * Delete bitstream from submission
+   */
+  protected deleteFile() {
+    this.operationsBuilder.remove(this.pathCombiner.getPath());
+    this.subscriptions.push(this.operationsService.jsonPatchByResourceID(
+      this.submissionService.getSubmissionObjectLinkName(),
+      this.submissionId,
+      this.pathCombiner.rootElement,
+      this.pathCombiner.subRootElement)
+      .subscribe(() => {
+        this.uploadService.removeUploadedFile(this.submissionId, this.sectionId, this.fileId);
+        this.processingDelete$.next(false);
+      }));
+  }
+
 }