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

This commit is contained in:
Mattia Vianelli
2024-02-13 15:49:52 +00:00
parent 6d98bf9d3a
commit 8165b5feee
2 changed files with 37 additions and 76 deletions

View File

@@ -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">
<button (click)="confirmLogoDelete(removeLogo)" *ngIf="!markLogoForDeletion" class="btn btn-danger"
<div *ngIf="logo" class="float-right">
<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"/>

View File

@@ -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
* Send out a delete request to remove the logo from the community/collection and display notifications
* Helper method that provides a modal
*/
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) => {
if (result === 'delete') {
this.deleteLogo();
this.onSubmit();
} else if (result === 'cancel') {
return;
}
});
}
//this.refreshCache()
this.modalService.open(removeLogo).result.then((result) => {
if (result === 'delete') {
if (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();
});
handleLogoReplace(event: Event) {
const fileInput = event.target as HTMLInputElement;
if (fileInput.files && fileInput.files.length > 0) {
this.markLogoForDeletion = true;
this.onSubmit();
this.uploader.uploadAll();
}
} else if (result === 'cancel') {
return;
}
}
}
);
}
/**