65240: Marking logo for deletion and request on form submit

This commit is contained in:
Kristof De Langhe
2019-11-18 16:28:51 +01:00
parent 4887353450
commit 64978f2cfe
8 changed files with 133 additions and 49 deletions

View File

@@ -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">
<ds-comcol-page-logo [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">
<button type="button" class="btn btn-danger" (click)="deleteLogo()">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>
<div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section">
<div class="row">
<div class="col-8 d-inline-block">
<ds-comcol-page-logo [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">
<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">

View File

@@ -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', () => {
expect(comp.finishUpload.emit).toHaveBeenCalled();
it('should emit finish', () => {
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', () => {
expect(comp.finishUpload.emit).toHaveBeenCalled();
it('should emit finish', () => {
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();
});
});
});
});

View File

@@ -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.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.markLogoForDeletion = true;
}
/**
* Undo marking the logo to be deleted
*/
undoDeleteLogo() {
this.markLogoForDeletion = false;
}
/**
@@ -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();
}
/**