DSC-1111 Moved logo update to a specific method instead of the generic onsubmit

src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html

@@ -4,28 +4,18 @@
       <span>{{type.value + '.edit.logo.label' | translate}}</span>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
-      <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section" *ngIf="logo">
+      <div class="col-12 d-inline-block alert" id="logo-section" *ngIf="logo">
         <div class="row">
           <div class="col-8 d-inline-block">
             <ds-comcol-page-logo [alternateText]="type.value + '.logo.alt'" [logo]="logo"></ds-comcol-page-logo>
           </div>
           <div class="col-4 d-inline-block">
-            <div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
+            <div *ngIf="logo" class="float-right">
-              <button (click)="confirmLogoDelete(removeLogo)" *ngIf="!markLogoForDeletion" class="btn btn-danger"
+              <button (click)="confirmLogoDelete(removeLogo)" class="btn btn-danger"
                       title="{{type.value + '.edit.logo.delete.title' | translate}}" type="button">
                 <i aria-hidden="true" class="fas fa-trash"></i>
                 {{ 'community.edit.logo.delete.title' | translate}}
               </button>
-              <button *ngIf="!markLogoForDeletion" class="btn btn-info" type="button">
-                <span>
-                  <label (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()" for="inputFileUploader">
-                    <span role="button">
-                      <i aria-hidden="true" class="fas fa-upload"></i>
-                      {{ 'collection.edit.logo.replace.title' | translate}}
-                    </span>
-                  </label>
-                </span>
-              </button>
             </div>
           </div>
         </div>
@@ -65,5 +55,4 @@
     <button (click)="c('cancel')" class="btn btn-warning" type="button">{{'form.cancel' | translate}}</button>
   </div>
 </ng-template>
-<input #fileInput (change)="handleLogoReplace($event)" [uploader]="uploader" class="d-none" id="inputFileUploader" ng2FileSelect
+
-       type="file"/>

src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.ts

@@ -83,8 +83,6 @@ export class ComColFormComponent<T extends Collection | Community> implements On
    */
   @Output() submitForm: EventEmitter<{
     dso: T,
-    uploader: FileUploader,
-    deleteLogo: boolean,
     operations: Operation[],
   }> = new EventEmitter();
 
@@ -104,11 +102,6 @@ export class ComColFormComponent<T extends Collection | Community> implements On
    */
   initializedUploaderOptions = new BehaviorSubject(false);
 
-  /**
-   * Is the logo marked to be deleted?
-   */
-  markLogoForDeletion = false;
-
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
@@ -174,27 +167,6 @@ export class ComColFormComponent<T extends Collection | Community> implements On
    * Checks which new fields were added and sends the updated version of the DSO to the parent component
    */
   onSubmit() {
-    if (this.markLogoForDeletion && hasValue(this.dso.id) && hasValue(this.dso._links.logo)) {
-      this.dsoService.deleteLogo(this.dso).pipe(
-        getFirstCompletedRemoteData()
-      ).subscribe((response: RemoteData<NoContent>) => {
-        if (response.hasSucceeded) {
-          this.notificationsService.success(
-            this.translate.get(this.type.value + '.edit.logo.notifications.delete.success.title'),
-            this.translate.get(this.type.value + '.edit.logo.notifications.delete.success.content')
-          );
-        } else {
-          this.notificationsService.error(
-            this.translate.get(this.type.value + '.edit.logo.notifications.delete.error.title'),
-            response.errorMessage
-          );
-        }
-        this.dso.logo = undefined;
-        this.uploadFilesOptions.method = RestRequestMethod.POST;
-        this.finish.emit();
-      });
-    }
-
     const formMetadata = {}  as MetadataMap;
     this.formModel.forEach((fieldModel: DynamicInputModel) => {
       const value: MetadataValue = {
@@ -232,8 +204,6 @@ export class ComColFormComponent<T extends Collection | Community> implements On
 
     this.submitForm.emit({
       dso: updatedDSO,
-      uploader: hasValue(this.uploaderComponent) ? this.uploaderComponent.uploader : undefined,
-      deleteLogo: this.markLogoForDeletion,
       operations: operations,
     });
   }
@@ -254,44 +224,46 @@ export class ComColFormComponent<T extends Collection | Community> implements On
       }
     );
   }
-
   /**
-   * Mark the logo to be deleted
+   * Helper method that provides a modal
-   * Send out a delete request to remove the logo from the community/collection and display notifications
    */
-  deleteLogo() {
-    this.markLogoForDeletion = true;
-  }
-
-  /**
-   * Undo marking the logo to be deleted
-   */
-  undoDeleteLogo() {
-    this.markLogoForDeletion = false;
-  }
-
   openModal(content: any) {
     this.modalService.open(content);
   }
-
+  /**
+   * Helper method that confirms the deletion of the logo and handles possible errors
+   */
   confirmLogoDelete(removeLogo: any) {
-    this.modalService.open(removeLogo).result.then( (result) => {
+    //this.refreshCache()
-      if (result === 'delete') {
+    this.modalService.open(removeLogo).result.then((result) => {
-        this.deleteLogo();
+        if (result === 'delete') {
-        this.onSubmit();
+          if (hasValue(this.dso.id) && hasValue(this.dso._links.logo)) {
-      } else if (result === 'cancel') {
+            this.dsoService.deleteLogo(this.dso).pipe(
-        return;
+              getFirstCompletedRemoteData()
-      }
+            ).subscribe((response: RemoteData<NoContent>) => {
-    });
+              if (response.hasSucceeded) {
-  }
+                this.notificationsService.success(
+                  this.translate.get(this.type.value + '.edit.logo.notifications.delete.success.title'),
+                  this.translate.get(this.type.value + '.edit.logo.notifications.delete.success.content')
+                );
+              } else {
+                this.notificationsService.error(
+                  this.translate.get(this.type.value + '.edit.logo.notifications.delete.error.title'),
+                  response.errorMessage
+                );
+              }
+              this.dso.logo = undefined;
+              this.uploadFilesOptions.method = RestRequestMethod.POST;
+              this.finish.emit();
+            });
 
-  handleLogoReplace(event: Event) {
+          } else if (result === 'cancel') {
-    const fileInput = event.target as HTMLInputElement;
+            return;
-    if (fileInput.files && fileInput.files.length > 0) {
+          }
-      this.markLogoForDeletion = true;
+        }
-      this.onSubmit();
+
-      this.uploader.uploadAll();
+      }
-    }
+    );
   }
 
   /**