65240: Marking logo for deletion and request on form submit

src/app/+collection-page/create-collection-page/create-collection-page.component.html

@@ -4,5 +4,5 @@
             <h2 id="sub-header" class="border-bottom pb-2">{{'collection.create.sub-head' | translate:{ parent: (parentRD$| async)?.payload.name } }}</h2>
         </div>
     </div>
-    <ds-collection-form (submitForm)="onSubmit($event)" (finishUpload)="navigateToNewPage()"></ds-collection-form>
+    <ds-collection-form (submitForm)="onSubmit($event)" (finish)="navigateToNewPage()"></ds-collection-form>
 </div>

src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html

@@ -1,6 +1,6 @@
 <ds-collection-form (submitForm)="onSubmit($event)"
                     [dso]="(dsoRD$ | async)?.payload"
-                    (finishUpload)="navigateToHomePage()"></ds-collection-form>
+                    (finish)="navigateToHomePage()"></ds-collection-form>
 <a class="btn btn-danger"
    [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'collection.edit.delete'
   | translate}}</a>

src/app/+community-page/create-community-page/create-community-page.component.html

@@ -7,5 +7,5 @@
       </ng-container>
     </div>
   </div>
-  <ds-community-form (submitForm)="onSubmit($event)" (finishUpload)="navigateToNewPage()"></ds-community-form>
+  <ds-community-form (submitForm)="onSubmit($event)" (finish)="navigateToNewPage()"></ds-community-form>
 </div>

src/app/+community-page/edit-community-page/community-metadata/community-metadata.component.html

@@ -1,6 +1,6 @@
 <ds-community-form (submitForm)="onSubmit($event)"
                    [dso]="(dsoRD$ | async)?.payload"
-                   (finishUpload)="navigateToHomePage()"></ds-community-form>
+                   (finish)="navigateToHomePage()"></ds-community-form>
 <a class="btn btn-danger"
    [routerLink]="'/communities/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'community.edit.delete'
   | translate}}</a>

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

@@ -4,14 +4,21 @@
       <label>{{type.value + '.edit.logo.label' | translate}}</label>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
-      <div class="col-8 d-inline-block">
+      <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section">
-        <ds-comcol-page-logo [logo]="logo"></ds-comcol-page-logo>
+        <div class="row">
-      </div>
+          <div class="col-8 d-inline-block">
-      <div class="col-4 d-inline-block">
+            <ds-comcol-page-logo [logo]="logo"></ds-comcol-page-logo>
-        <div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
+          </div>
-          <button type="button" class="btn btn-danger" (click)="deleteLogo()">
+          <div class="col-4 d-inline-block">
-            <i class="fas fa-trash" aria-hidden="true"></i>
+            <div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
-          </button>
+              <button *ngIf="!markLogoForDeletion" type="button" class="btn btn-danger" (click)="deleteLogo()">
+                <i class="fas fa-trash" aria-hidden="true"></i>
+              </button>
+              <button *ngIf="markLogoForDeletion" type="button" class="btn btn-warning" (click)="undoDeleteLogo()">
+                <i class="fas fa-undo" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
       <div *ngIf="!logo" class="col-12 d-inline-block">

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

@@ -22,8 +22,9 @@ import { ErrorResponse, RestResponse } from '../../../core/cache/response.models
 import { RequestError } from '../../../core/data/request.models';
 import { RequestService } from '../../../core/data/request.service';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { By } from '@angular/platform-browser';
 
-describe('ComColFormComponent', () => {
+fdescribe('ComColFormComponent', () => {
   let comp: ComColFormComponent<DSpaceObject>;
   let fixture: ComponentFixture<ComColFormComponent<DSpaceObject>>;
   let location: Location;
@@ -136,7 +137,8 @@ describe('ComColFormComponent', () => {
                 type: Community.type
               },
             ),
-            uploader: {}
+            uploader: {},
+            deleteLogo: false
           }
         );
       })
@@ -151,7 +153,7 @@ describe('ComColFormComponent', () => {
 
     describe('onCompleteItem', () => {
       beforeEach(() => {
-        spyOn(comp.finishUpload, 'emit');
+        spyOn(comp.finish, 'emit');
         comp.onCompleteItem();
       });
 
@@ -159,8 +161,8 @@ describe('ComColFormComponent', () => {
         expect(notificationsService.success).toHaveBeenCalled();
       });
 
-      it('should emit finishUpload', () => {
+      it('should emit finish', () => {
-        expect(comp.finishUpload.emit).toHaveBeenCalled();
+        expect(comp.finish.emit).toHaveBeenCalled();
       });
 
       it('should remove the object\'s cache', () => {
@@ -171,7 +173,7 @@ describe('ComColFormComponent', () => {
 
     describe('onUploadError', () => {
       beforeEach(() => {
-        spyOn(comp.finishUpload, 'emit');
+        spyOn(comp.finish, 'emit');
         comp.onUploadError();
       });
 
@@ -179,8 +181,8 @@ describe('ComColFormComponent', () => {
         expect(notificationsService.error).toHaveBeenCalled();
       });
 
-      it('should emit finishUpload', () => {
+      it('should emit finish', () => {
-        expect(comp.finishUpload.emit).toHaveBeenCalled();
+        expect(comp.finish.emit).toHaveBeenCalled();
       });
     });
   });
@@ -219,13 +221,17 @@ describe('ComColFormComponent', () => {
         expect(comp.uploadFilesOptions.method).toEqual(RestRequestMethod.PUT);
       });
 
-      describe('deleteLogo', () => {
+      describe('submit with logo marked for deletion', () => {
+        beforeEach(() => {
+          comp.markLogoForDeletion = true;
+        });
+
         describe('when dsoService.deleteLogo returns a successful response', () => {
           const response = new RestResponse(true, 200, 'OK');
 
           beforeEach(() => {
             spyOn(dsoService, 'deleteLogo').and.returnValue(observableOf(response));
-            comp.deleteLogo();
+            comp.onSubmit();
           });
 
           it('should display a success notification', () => {
@@ -238,7 +244,7 @@ describe('ComColFormComponent', () => {
 
           beforeEach(() => {
             spyOn(dsoService, 'deleteLogo').and.returnValue(observableOf(response));
-            comp.deleteLogo();
+            comp.onSubmit();
           });
 
           it('should display an error notification', () => {
@@ -246,6 +252,59 @@ describe('ComColFormComponent', () => {
           });
         });
       });
+
+      describe('deleteLogo', () => {
+        beforeEach(() => {
+          comp.deleteLogo();
+          fixture.detectChanges();
+        });
+
+        it('should set markLogoForDeletion to true', () => {
+          expect(comp.markLogoForDeletion).toEqual(true);
+        });
+
+        it('should mark the logo section with a danger alert', () => {
+          const logoSection = fixture.debugElement.query(By.css('#logo-section.alert-danger'));
+          expect(logoSection).toBeTruthy();
+        });
+
+        it('should hide the delete button', () => {
+          const button = fixture.debugElement.query(By.css('#logo-section .btn-danger'));
+          expect(button).not.toBeTruthy();
+        });
+
+        it('should show the undo button', () => {
+          const button = fixture.debugElement.query(By.css('#logo-section .btn-warning'));
+          expect(button).toBeTruthy();
+        });
+      });
+
+      describe('undoDeleteLogo', () => {
+        beforeEach(() => {
+          comp.markLogoForDeletion = true;
+          comp.undoDeleteLogo();
+          fixture.detectChanges();
+        });
+
+        it('should set markLogoForDeletion to false', () => {
+          expect(comp.markLogoForDeletion).toEqual(false);
+        });
+
+        it('should disable the danger alert on the logo section', () => {
+          const logoSection = fixture.debugElement.query(By.css('#logo-section.alert-danger'));
+          expect(logoSection).not.toBeTruthy();
+        });
+
+        it('should show the delete button', () => {
+          const button = fixture.debugElement.query(By.css('#logo-section .btn-danger'));
+          expect(button).toBeTruthy();
+        });
+
+        it('should hide the undo button', () => {
+          const button = fixture.debugElement.query(By.css('#logo-section .btn-warning'));
+          expect(button).not.toBeTruthy();
+        });
+      });
     });
   });
 

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

@@ -25,7 +25,6 @@ import { combineLatest as observableCombineLatest } from 'rxjs';
 import { RestRequestMethod } from '../../../core/data/rest-request-method';
 import { RequestService } from '../../../core/data/request.service';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
-import { take } from 'rxjs/operators';
 
 /**
  * A form for creating and editing Communities or Collections
@@ -85,13 +84,14 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
    */
   @Output() submitForm: EventEmitter<{
     dso: T,
-    uploader: FileUploader
+    uploader: FileUploader,
+    deleteLogo: boolean
   }> = new EventEmitter();
 
   /**
-   * Fires an event when the logo has finished uploading (with or without errors)
+   * Fires an event when the logo has finished uploading (with or without errors) or was removed
    */
-  @Output() finishUpload: EventEmitter<any> = new EventEmitter();
+  @Output() finish: EventEmitter<any> = new EventEmitter();
 
   /**
    * Observable keeping track whether or not the uploader has finished initializing
@@ -99,6 +99,11 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
    */
   initializedUploaderOptions = new BehaviorSubject(false);
 
+  /**
+   * Is the logo marked to be deleted?
+   */
+  markLogoForDeletion = false;
+
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
@@ -160,6 +165,26 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
    * 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)) {
+      this.dsoService.deleteLogo(this.dso).subscribe((response: RestResponse) => {
+        if (response.isSuccessful) {
+          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 {
+          const errorResponse = response as ErrorResponse;
+          this.notificationsService.error(
+            this.translate.get(this.type.value + '.edit.logo.notifications.delete.error.title'),
+            errorResponse.errorMessage
+          );
+        }
+        (this.dso as any).logo = undefined;
+        this.uploadFilesOptions.method = RestRequestMethod.POST;
+        this.finish.emit();
+      });
+    }
+
     const formMetadata = new Object() as MetadataMap;
     this.formModel.forEach((fieldModel: DynamicInputModel) => {
       const value: MetadataValue = {
@@ -182,7 +207,8 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
     });
     this.submitForm.emit({
       dso: updatedDSO,
-      uploader: hasValue(this.uploaderComponent) ? this.uploaderComponent.uploader : undefined
+      uploader: hasValue(this.uploaderComponent) ? this.uploaderComponent.uploader : undefined,
+      deleteLogo: this.markLogoForDeletion
     });
   }
 
@@ -204,27 +230,18 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
   }
 
   /**
+   * Mark the logo to be deleted
    * Send out a delete request to remove the logo from the community/collection and display notifications
    */
   deleteLogo() {
-    if (hasValue(this.dso.id)) {
+    this.markLogoForDeletion = true;
-      this.dsoService.deleteLogo(this.dso).subscribe((response: RestResponse) => {
+  }
-        if (response.isSuccessful) {
+
-          this.notificationsService.success(
+  /**
-            this.translate.get(this.type.value + '.edit.logo.notifications.delete.success.title'),
+   * Undo marking the logo to be deleted
-            this.translate.get(this.type.value + '.edit.logo.notifications.delete.success.content')
+   */
-          );
+  undoDeleteLogo() {
-        } else {
+    this.markLogoForDeletion = false;
-          const errorResponse = response as ErrorResponse;
-          this.notificationsService.error(
-            this.translate.get(this.type.value + '.edit.logo.notifications.delete.error.title'),
-            errorResponse.errorMessage
-          );
-        }
-        (this.dso as any).logo = undefined;
-        this.uploadFilesOptions.method = RestRequestMethod.POST;
-      });
-    }
   }
 
   /**
@@ -241,7 +258,7 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
   public onCompleteItem() {
     this.refreshCache();
     this.notificationsService.success(null, this.translate.get(this.type.value + '.edit.logo.notifications.add.success'));
-    this.finishUpload.emit();
+    this.finish.emit();
   }
 
   /**
@@ -249,7 +266,7 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDe
    */
   public onUploadError() {
     this.notificationsService.error(null, this.translate.get(this.type.value + '.edit.logo.notifications.add.error'));
-    this.finishUpload.emit();
+    this.finish.emit();
   }
 
   /**

src/app/shared/comcol-forms/edit-comcol-page/comcol-metadata/comcol-metadata.component.ts

@@ -51,6 +51,7 @@ export class ComcolMetadataComponent<TDomain extends DSpaceObject> implements On
   onSubmit(event) {
     const dso = event.dso;
     const uploader = event.uploader;
+    const deleteLogo = event.deleteLogo;
 
     this.dsoDataService.update(dso)
       .pipe(getSucceededRemoteData())
@@ -62,7 +63,7 @@ export class ComcolMetadataComponent<TDomain extends DSpaceObject> implements On
               uploader.options.url = href;
               uploader.uploadAll();
             });
-          } else {
+          } else if (!deleteLogo) {
             this.router.navigate([this.frontendURL + newUUID]);
           }
           this.notificationsService.success(null, this.translate.get(this.type.value + '.edit.notifications.success'));