hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 18:14:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

65240: Add community/collection logo on create/edit pages

Browse Source
This commit is contained in:
Kristof De Langhe
2019-10-01 14:42:25 +02:00
parent 2789996000
commit a2695edbac
18 changed files with 300 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/i18n/en.json5
View File

@@ -130,6 +130,10 @@
"collection.delete.text": "Are you sure you want to delete collection \"{{ dso }}\"",
"collection.edit.delete": "Delete this collection",
"collection.edit.head": "Edit Collection",
"collection.edit.logo.label": "Collection logo",
"collection.edit.logo.notifications.error": "Uploading Collection logo failed. Please verify the content before retrying.",
"collection.edit.logo.notifications.success": "Upload Collection logo successful.",
"collection.edit.logo.upload": "Drop a Collection Logo to upload",
"collection.form.abstract": "Short Description",
"collection.form.description": "Introductory text (HTML)",
"collection.form.errors.title.required": "Please enter a collection name",
@@ -153,6 +157,10 @@
"community.delete.text": "Are you sure you want to delete community \"{{ dso }}\"",
"community.edit.delete": "Delete this community",
"community.edit.head": "Edit Community",
"community.edit.logo.label": "Community logo",
"community.edit.logo.notifications.error": "Uploading Community logo failed. Please verify the content before retrying.",
"community.edit.logo.notifications.success": "Upload Community logo successful.",
"community.edit.logo.upload": "Drop a Community Logo to upload",
"community.form.abstract": "Short Description",
"community.form.description": "Introductory text (HTML)",
"community.form.errors.title.required": "Please enter a community name",

36
src/app/+collection-page/collection-form/collection-form.component.ts
View File

@@ -1,9 +1,14 @@
import { Component, Input } from '@angular/core';
import { DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
import { DynamicFormService, DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
import { Collection } from '../../core/shared/collection.model';
import { ComColFormComponent } from '../../shared/comcol-forms/comcol-form/comcol-form.component';
import { NormalizedCollection } from '../../core/cache/models/normalized-collection.model';
import { Location } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { NotificationsService } from '../../shared/notifications/notifications.service';
import { CommunityDataService } from '../../core/data/community-data.service';
import { AuthService } from '../../core/auth/auth.service';
/**
* Form used for creating and editing collections
@@ -19,6 +24,26 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> {
*/
@Input() dso: Collection = new Collection();
/**
* i18n key for the logo's label
*/
protected logoLabelMsg = 'collection.edit.logo.label';
/**
* i18n key for the logo's drop message
*/
protected logoDropMsg = 'collection.edit.logo.upload';
/**
* i18n key for the logo's upload success message
*/
protected logoSuccessMsg = 'collection.edit.logo.notifications.success';
/**
* i18n key for the logo's upload error message
*/
protected logoErrorMsg = 'collection.edit.logo.notifications.error';
/**
* @type {Collection.type} This is a collection-type form
*/
@@ -65,4 +90,13 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> {
name: 'dc.description.provenance',
}),
];
public constructor(protected location: Location,
protected formService: DynamicFormService,
protected translate: TranslateService,
protected notificationsService: NotificationsService,
protected authService: AuthService,
protected dsoService: CommunityDataService) {
super(location, formService, translate, notificationsService, authService);
}
}

2
src/app/+collection-page/create-collection-page/create-collection-page.component.html
View File

@@ -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)"></ds-collection-form>
<ds-collection-form (submitForm)="onSubmit($event)" (finishUpload)="navigateToNewPage()"></ds-collection-form>
</div>

4
src/app/+collection-page/edit-collection-page/edit-collection-page.component.html
View File

@@ -2,7 +2,9 @@
<div class="row">
<div class="col-12 pb-4">
<h2 id="header" class="border-bottom pb-2">{{ 'collection.edit.head' | translate }}</h2>
<ds-collection-form (submitForm)="onSubmit($event)" [dso]="(dsoRD$ | async)?.payload"></ds-collection-form>
<ds-collection-form (submitForm)="onSubmit($event)"
[dso]="(dsoRD$ | async)?.payload"
(finishUpload)="navigateToHomePage()"></ds-collection-form>
<a class="btn btn-danger"
[routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'collection.edit.delete'
| translate}}</a>

36
src/app/+community-page/community-form/community-form.component.ts
View File

@@ -1,9 +1,14 @@
import { Component, Input } from '@angular/core';
import { DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
import { DynamicFormService, DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
import { Community } from '../../core/shared/community.model';
import { ResourceType } from '../../core/shared/resource-type';
import { ComColFormComponent } from '../../shared/comcol-forms/comcol-form/comcol-form.component';
import { Location } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { NotificationsService } from '../../shared/notifications/notifications.service';
import { CommunityDataService } from '../../core/data/community-data.service';
import { AuthService } from '../../core/auth/auth.service';
/**
* Form used for creating and editing communities
@@ -19,6 +24,26 @@ export class CommunityFormComponent extends ComColFormComponent<Community> {
*/
@Input() dso: Community = new Community();
/**
* i18n key for the logo's label
*/
protected logoLabelMsg = 'community.edit.logo.label';
/**
* i18n key for the logo's drop message
*/
protected logoDropMsg = 'community.edit.logo.upload';
/**
* i18n key for the logo's upload success message
*/
protected logoSuccessMsg = 'community.edit.logo.notifications.success';
/**
* i18n key for the logo's upload error message
*/
protected logoErrorMsg = 'community.edit.logo.notifications.error';
/**
* @type {Community.type} This is a community-type form
*/
@@ -57,4 +82,13 @@ export class CommunityFormComponent extends ComColFormComponent<Community> {
name: 'dc.description.tableofcontents',
}),
];
public constructor(protected location: Location,
protected formService: DynamicFormService,
protected translate: TranslateService,
protected notificationsService: NotificationsService,
protected authService: AuthService,
protected dsoService: CommunityDataService) {
super(location, formService, translate, notificationsService, authService);
}
}

2
src/app/+community-page/create-community-page/create-community-page.component.html
View File

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

3
src/app/+community-page/edit-community-page/edit-community-page.component.html
View File

@@ -3,7 +3,8 @@
<div class="col-12 pb-4">
<h2 id="header" class="border-bottom pb-2">{{ 'community.edit.head' | translate }}</h2>
<ds-community-form (submitForm)="onSubmit($event)"
[dso]="(dsoRD$ | async)?.payload"></ds-community-form>
[dso]="(dsoRD$ | async)?.payload"
(finishUpload)="navigateToHomePage()"></ds-community-form>
<a class="btn btn-danger"
[routerLink]="'/communities/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'community.edit.delete'
| translate}}</a>

3
src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts
View File

@@ -34,7 +34,8 @@ export class MyDSpaceNewSubmissionComponent implements OnDestroy, OnInit {
url: '',
authToken: null,
disableMultipart: false,
itemAlias: null
itemAlias: null,
autoUpload: true
};
/**

12
src/app/core/data/comcol-data.service.ts
View File

@@ -1,4 +1,4 @@
import { distinctUntilChanged, filter, map, mergeMap, share, take, tap } from 'rxjs/operators';
import { distinctUntilChanged, filter, map, mergeMap, share, switchMap, take, tap } from 'rxjs/operators';
import { merge as observableMerge, Observable, throwError as observableThrowError } from 'rxjs';
import { isEmpty, isNotEmpty } from '../../shared/empty.util';
import { NormalizedCommunity } from '../cache/models/normalized-community.model';
@@ -57,4 +57,14 @@ export abstract class ComColDataService<T extends CacheableObject> extends DataS
return observableMerge(errorResponses, successResponses).pipe(distinctUntilChanged(), share());
}
}
/**
* Get the endpoint for the community or collection's logo
* @param id The community or collection's ID
*/
public getLogoEndpoint(id: string): Observable<string> {
return this.halService.getEndpoint(this.linkPath).pipe(
switchMap((href: string) => this.halService.getEndpoint('logo', `${href}/${id}`))
)
}
}

4
src/app/core/shared/hal-endpoint.service.ts
View File

@@ -43,8 +43,8 @@ export class HALEndpointService {
);
}
public getEndpoint(linkPath: string): Observable<string> {
return this.getEndpointAt(this.getRootHref(), ...linkPath.split('/'));
public getEndpoint(linkPath: string, startHref?: string): Observable<string> {
return this.getEndpointAt(startHref || this.getRootHref(), ...linkPath.split('/'));
}
/**

11
src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
View File

@@ -1,3 +1,14 @@
<div class="container-fluid">
<label>{{logoLabelMsg | translate}}</label>
<ds-comcol-page-logo [logo]="(dso?.logo | async)?.payload"></ds-comcol-page-logo>
<ds-uploader *ngIf="uploadFilesOptions.url"
[dropMsg]="logoDropMsg"
[dropOverDocumentMsg]="logoDropMsg"
[enableDragOverDocument]="true"
[uploadFilesOptions]="uploadFilesOptions"
(onCompleteItem)="onCompleteItem()"
(onUploadError)="onUploadError()"></ds-uploader>
</div>
<ds-form *ngIf="formModel"
[formId]="'comcol-form-id'"
[formModel]="formModel" (submitForm)="onSubmit()" (cancel)="onCancel()"></ds-form>

127
src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import {
DynamicFormService,
@@ -10,8 +10,16 @@ import { TranslateService } from '@ngx-translate/core';
import { DSpaceObject } from '../../../core/shared/dspace-object.model';
import { MetadataMap, MetadataValue } from '../../../core/shared/metadata.models';
import { ResourceType } from '../../../core/shared/resource-type';
import { isNotEmpty } from '../../empty.util';
import { hasValue, isNotEmpty, isUndefined } from '../../empty.util';
import { UploaderOptions } from '../../uploader/uploader-options.model';
import { NotificationsService } from '../../notifications/notifications.service';
import { ComColDataService } from '../../../core/data/comcol-data.service';
import { Subscription } from 'rxjs/internal/Subscription';
import { AuthService } from '../../../core/auth/auth.service';
import { Community } from '../../../core/shared/community.model';
import { Collection } from '../../../core/shared/collection.model';
import { UploaderComponent } from '../../uploader/uploader.component';
import { FileUploader } from 'ng2-file-upload';
/**
* A form for creating and editing Communities or Collections
@@ -21,12 +29,38 @@ import { Community } from '../../../core/shared/community.model';
styleUrls: ['./comcol-form.component.scss'],
templateUrl: './comcol-form.component.html'
})
export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDestroy {
/**
* The logo uploader component
*/
@ViewChild(UploaderComponent) uploaderComponent: UploaderComponent;
/**
* DSpaceObject that the form represents
*/
@Input() dso: T;
/**
* i18n key for the logo's label
*/
protected logoLabelMsg: string;
/**
* i18n key for the logo's drop message
*/
protected logoDropMsg: string;
/**
* i18n key for the logo's upload success message
*/
protected logoSuccessMsg: string;
/**
* i18n key for the logo's upload error message
*/
protected logoErrorMsg: string;
/**
* Type of DSpaceObject that the form represents
*/
@@ -53,14 +87,46 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
formGroup: FormGroup;
/**
* Emits DSO when the form is submitted
* @type {EventEmitter<any>}
* The uploader configuration options
* @type {UploaderOptions}
*/
@Output() submitForm: EventEmitter<any> = new EventEmitter();
uploadFilesOptions: UploaderOptions = {
url: '',
authToken: null,
disableMultipart: true,
itemAlias: null,
autoUpload: false
};
public constructor(private location: Location,
private formService: DynamicFormService,
private translate: TranslateService) {
/**
* Emits DSO and Uploader when the form is submitted
*/
@Output() submitForm: EventEmitter<{
dso: T,
uploader: FileUploader
}> = new EventEmitter();
/**
* Fires an event when the logo has finished uploading (with or without errors)
*/
@Output() finishUpload: EventEmitter<any> = new EventEmitter();
/**
* Array to track all subscriptions and unsubscribe them onDestroy
* @type {Array}
*/
protected subs: Subscription[] = [];
/**
* The service used to fetch from or send data to
*/
protected dsoService: ComColDataService<Community | Collection>;
public constructor(protected location: Location,
protected formService: DynamicFormService,
protected translate: TranslateService,
protected notificationsService: NotificationsService,
protected authService: AuthService) {
}
ngOnInit(): void {
@@ -76,6 +142,19 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
.subscribe(() => {
this.updateFieldTranslations();
});
if (hasValue(this.dso.id)) {
this.subs.push(
this.dsoService.getLogoEndpoint(this.dso.id).subscribe((href: string) => {
this.uploadFilesOptions.url = href;
this.uploadFilesOptions.authToken = this.authService.buildAuthHeader();
})
);
} else {
// Set a placeholder URL to not break the uploader component. This will be replaced once the object is created.
this.uploadFilesOptions.url = 'placeholder';
this.uploadFilesOptions.authToken = this.authService.buildAuthHeader();
}
}
/**
@@ -102,7 +181,10 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
},
type: Community.type
});
this.submitForm.emit(updatedDSO);
this.submitForm.emit({
dso: updatedDSO,
uploader: this.uploaderComponent.uploader
});
}
/**
@@ -122,7 +204,32 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
);
}
/**
* The request was successful, display a success notification
*/
public onCompleteItem() {
this.notificationsService.success(null, this.translate.get(this.logoSuccessMsg));
this.finishUpload.emit();
}
/**
* The request was unsuccessful, display an error notification
*/
public onUploadError() {
this.notificationsService.error(null, this.translate.get(this.logoErrorMsg));
this.finishUpload.emit();
}
onCancel() {
this.location.back();
}
/**
* Unsubscribe from open subscriptions
*/
ngOnDestroy(): void {
this.subs
.filter((subscription) => hasValue(subscription))
.forEach((subscription) => subscription.unsubscribe());
}
}

37
src/app/shared/comcol-forms/create-comcol-page/create-comcol-page.component.ts
View File

@@ -5,11 +5,12 @@ import { Observable } from 'rxjs';
import { RouteService } from '../../../core/services/route.service';
import { Router } from '@angular/router';
import { RemoteData } from '../../../core/data/remote-data';
import { isNotEmpty, isNotUndefined } from '../../empty.util';
import { hasValue, isNotEmpty, isNotUndefined } from '../../empty.util';
import { take } from 'rxjs/operators';
import { getSucceededRemoteData } from '../../../core/shared/operators';
import { DSpaceObject } from '../../../core/shared/dspace-object.model';
import { DataService } from '../../../core/data/data.service';
import { ComColDataService } from '../../../core/data/comcol-data.service';
/**
* Component representing the create page for communities and collections
@@ -34,8 +35,13 @@ export class CreateComColPageComponent<TDomain extends DSpaceObject> implements
*/
public parentRD$: Observable<RemoteData<Community>>;
/**
* The UUID of the newly created object
*/
private newUUID: string;
public constructor(
protected dsoDataService: DataService<TDomain>,
protected dsoDataService: ComColDataService<TDomain>,
protected parentDataService: CommunityDataService,
protected routeService: RouteService,
protected router: Router
@@ -53,20 +59,39 @@ export class CreateComColPageComponent<TDomain extends DSpaceObject> implements
}
/**
* @param {TDomain} dso The updated version of the DSO
* Creates a new DSO based on the submitted user data and navigates to the new object's home page
* @param event The event returned by the community/collection form. Contains the new dso and logo uploader
*/
onSubmit(dso: TDomain) {
onSubmit(event) {
const dso = event.dso;
const uploader = event.uploader;
this.parentUUID$.pipe(take(1)).subscribe((uuid: string) => {
this.dsoDataService.create(dso, uuid)
.pipe(getSucceededRemoteData())
.subscribe((dsoRD: RemoteData<TDomain>) => {
if (isNotUndefined(dsoRD)) {
const newUUID = dsoRD.payload.uuid;
this.router.navigate([this.frontendURL + newUUID]);
this.newUUID = dsoRD.payload.uuid;
if (uploader.queue.length > 0) {
this.dsoDataService.getLogoEndpoint(this.newUUID).pipe(take(1)).subscribe((href: string) => {
uploader.options.url = href;
uploader.uploadAll();
});
} else {
this.navigateToNewPage();
}
}
});
});
}
/**
* Navigate to the page of the newly created object
*/
navigateToNewPage() {
if (hasValue(this.newUUID)) {
this.router.navigate([this.frontendURL + this.newUUID]);
}
}
}

31
src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.ts
View File

@@ -3,10 +3,11 @@ import { Observable } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { RemoteData } from '../../../core/data/remote-data';
import { isNotUndefined } from '../../empty.util';
import { first, map } from 'rxjs/operators';
import { first, map, take } from 'rxjs/operators';
import { getSucceededRemoteData } from '../../../core/shared/operators';
import { DataService } from '../../../core/data/data.service';
import { DSpaceObject } from '../../../core/shared/dspace-object.model';
import { ComColDataService } from '../../../core/data/comcol-data.service';
/**
* Component representing the edit page for communities and collections
@@ -26,7 +27,7 @@ export class EditComColPageComponent<TDomain extends DSpaceObject> implements On
public dsoRD$: Observable<RemoteData<TDomain>>;
public constructor(
protected dsoDataService: DataService<TDomain>,
protected dsoDataService: ComColDataService<TDomain>,
protected router: Router,
protected route: ActivatedRoute
) {
@@ -37,17 +38,39 @@ export class EditComColPageComponent<TDomain extends DSpaceObject> implements On
}
/**
* @param {TDomain} dso The updated version of the DSO
* Updates an existing DSO based on the submitted user data and navigates to the edited object's home page
* @param event The event returned by the community/collection form. Contains the new dso and logo uploader
*/
onSubmit(dso: TDomain) {
onSubmit(event) {
const dso = event.dso;
const uploader = event.uploader;
this.dsoDataService.update(dso)
.pipe(getSucceededRemoteData())
.subscribe((dsoRD: RemoteData<TDomain>) => {
if (isNotUndefined(dsoRD)) {
const newUUID = dsoRD.payload.uuid;
if (uploader.queue.length > 0) {
this.dsoDataService.getLogoEndpoint(newUUID).pipe(take(1)).subscribe((href: string) => {
uploader.options.url = href;
uploader.uploadAll();
});
} else {
this.router.navigate([this.frontendURL + newUUID]);
}
}
});
}
/**
* Navigate to the home page of the object
*/
navigateToHomePage() {
this.dsoRD$.pipe(
getSucceededRemoteData(),
take(1)
).subscribe((dsoRD: RemoteData<TDomain>) => {
this.router.navigate([this.frontendURL + dsoRD.payload.id]);
});
}
}

2
src/app/shared/uploader/uploader-options.model.ts
View File

@@ -10,4 +10,6 @@ export class UploaderOptions {
disableMultipart = false;
itemAlias: string;
autoUpload = true;
}

6
src/app/shared/uploader/uploader.component.html
View File

@@ -29,13 +29,15 @@
<div *ngIf="(isOverBaseDropZone | async) || uploader?.queue?.length !== 0">
<div class="m-1">
<div class="upload-item-top">
<span class="filename">{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | {{ uploader?.queue[0]?.file.name }}</span>
<span class="filename">
<span *ngIf="!uploader.options.disableMultipart">{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | </span>{{ uploader?.queue[0]?.file.name }}
</span>
<div class="btn-group btn-group-sm float-right" role="group">
<button type="button" class="btn btn-danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>
</div>
<span *ngIf="uploader.progress < 100" class="float-right mr-3">{{ uploader.progress }}%</span>
<span *ngIf="uploader.progress < 100 && !(uploader.progress === 0 && !uploader.options.autoUpload)" class="float-right mr-3">{{ uploader.progress }}%</span>
<span *ngIf="uploader.progress === 100" class="float-right mr-3">{{'uploader.processing' | translate}}...</span>
</div>
<div class="ds-base-drop-zone-progress clearfix mt-2">

7
src/app/shared/uploader/uploader.component.ts
View File

@@ -95,7 +95,7 @@ export class UploaderComponent {
disableMultipart: this.uploadFilesOptions.disableMultipart,
itemAlias: this.uploadFilesOptions.itemAlias,
removeAfterUpload: true,
autoUpload: true
autoUpload: this.uploadFilesOptions.autoUpload
});
if (isUndefined(this.enableDragOverDocument)) {
@@ -117,7 +117,10 @@ export class UploaderComponent {
if (isUndefined(this.onBeforeUpload)) {
this.onBeforeUpload = () => {return};
}
this.uploader.onBeforeUploadItem = () => {
this.uploader.onBeforeUploadItem = (item) => {
if (item.url !== this.uploader.options.url) {
item.url = this.uploader.options.url;
}
this.onBeforeUpload();
this.isOverDocumentDropZone = observableOf(false);

3
src/app/submission/form/submission-form.component.ts
View File

@@ -81,7 +81,8 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
url: '',
authToken: null,
disableMultipart: false,
itemAlias: null
itemAlias: null,
autoUpload: true
};
/**