Skip to content

Commit d09f529

Browse files
alexandrevryghemalexandrevryghem
committed
117287: Removed method calls returning observables from the item versions overview
1 parent 404ccd9 commit d09f529

2 files changed

Lines changed: 158 additions & 143 deletions

File tree

‎src/app/item-page/versions/item-versions.component.html‎

Lines changed: 130 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,148 @@
1-
<div *ngVar="(versionsRD$ | async)?.payload as versions">
2-
<div *ngVar="(versionRD$ | async)?.payload as itemVersion">
3-
<div class="mb-2" *ngIf="versions?.page?.length > 0 || displayWhenEmpty">
4-
<h2 *ngIf="displayTitle">{{"item.version.history.head" | translate}}</h2>
5-
<ds-alert [type]="AlertTypeEnum.Info" *ngIf="itemVersion">
6-
{{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
7-
</ds-alert>
8-
<ds-pagination *ngIf="versions?.page?.length > 0"
9-
(paginationChange)="onPageChange()"
10-
[hideGear]="true"
11-
[hidePagerWhenSinglePage]="true"
12-
[paginationOptions]="options"
13-
[pageInfoState]="versions"
14-
[collectionSize]="versions?.totalElements"
15-
[retainScrollPosition]="true">
16-
<table class="table table-striped table-bordered align-middle my-2">
17-
<thead>
18-
<tr>
19-
<th scope="col">{{"item.version.history.table.version" | translate}}</th>
20-
<th scope="col" *ngIf="(showSubmitter() | async)">{{"item.version.history.table.editor" | translate}}</th>
21-
<th scope="col">{{"item.version.history.table.date" | translate}}</th>
22-
<th scope="col">{{"item.version.history.table.summary" | translate}}</th>
23-
</tr>
24-
</thead>
25-
<tbody>
26-
<tr *ngFor="let version of versions?.page" [id]="'version-row-' + version.id">
27-
<td class="version-row-element-version">
28-
<!-- Get the ID of the workspace/workflow item (`undefined` if they don't exist).
29-
Conditionals inside *ngVar are needed in order to avoid useless calls. -->
30-
<ng-container *ngVar="((hasDraftVersion$ | async) ? getWorkspaceId(version?.item) : undefined) as workspaceId$">
31-
<ng-container *ngVar=" ((workspaceId$ | async) ? undefined : getWorkflowId(version?.item)) as workflowId$">
1+
<div *ngIf="(versionsDTO$ | async) as versionsDTO; else noItemVersion" class="mb-2">
2+
<div *ngIf="(versionRD$ | async)?.payload as itemVersion">
3+
<h2 *ngIf="displayTitle">{{ "item.version.history.head" | translate }}</h2>
4+
<ds-alert [type]="AlertTypeEnum.Info">
5+
{{ "item.version.history.selected.alert" | translate : { version: itemVersion.version } }}
6+
</ds-alert>
7+
<ds-pagination *ngIf="versionsDTO.versionDTOs.length > 0"
8+
(paginationChange)="onPageChange()"
9+
[hideGear]="true"
10+
[hidePagerWhenSinglePage]="true"
11+
[paginationOptions]="options"
12+
[collectionSize]="versionsDTO.totalElements"
13+
[retainScrollPosition]="true">
14+
<table class="table table-striped table-bordered align-middle my-2">
15+
<thead>
16+
<tr>
17+
<th scope="col">{{ "item.version.history.table.version" | translate }}</th>
18+
<th scope="col" *ngIf="(showSubmitter() | async)">{{ "item.version.history.table.editor" | translate }}</th>
19+
<th scope="col">{{ "item.version.history.table.date" | translate }}</th>
20+
<th scope="col">{{ "item.version.history.table.summary" | translate }}</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr *ngFor="let versionDTO of versionsDTO.versionDTOs" [id]="'version-row-' + versionDTO.version.id">
25+
<td class="version-row-element-version">
26+
<!-- Get the ID of the workspace/workflow item (`undefined` if they don't exist).
27+
Conditionals inside *ngVar are needed in order to avoid useless calls. -->
28+
<ng-container
29+
*ngVar="((hasDraftVersion$ | async) ? getWorkspaceId(versionDTO.version.item) : undefined) as workspaceId$">
30+
<ng-container
31+
*ngVar=" ((workspaceId$ | async) ? undefined : getWorkflowId(versionDTO.version.item)) as workflowId$">
3232

33-
<div class="left-column">
33+
<div class="left-column">
3434

35-
<span *ngIf="(workspaceId$ | async) || (workflowId$ | async); then versionNumberWithoutLink else versionNumberWithLink"></span>
36-
<ng-template #versionNumberWithLink>
37-
<a [routerLink]="getVersionRoute(version.id)">{{version.version}}</a>
38-
</ng-template>
39-
<ng-template #versionNumberWithoutLink>
40-
{{version.version}}
41-
</ng-template>
42-
<span *ngIf="version?.id === itemVersion?.id">*</span>
35+
<span
36+
*ngIf="(workspaceId$ | async) || (workflowId$ | async); then versionNumberWithoutLink else versionNumberWithLink"></span>
37+
<ng-template #versionNumberWithLink>
38+
<a [routerLink]="getVersionRoute(versionDTO.version.id)">{{ versionDTO.version.version }}</a>
39+
</ng-template>
40+
<ng-template #versionNumberWithoutLink>
41+
{{ versionDTO.version.version }}
42+
</ng-template>
43+
<span *ngIf="versionDTO.version.id === itemVersion?.id">*</span>
4344

44-
<span *ngIf="workspaceId$ | async" class="text-light badge badge-primary ml-3">
45+
<span *ngIf="workspaceId$ | async" class="text-light badge badge-primary ml-3">
4546
{{ "item.version.history.table.workspaceItem" | translate }}
4647
</span>
4748

48-
<span *ngIf="workflowId$ | async" class="text-light badge badge-info ml-3">
49+
<span *ngIf="workflowId$ | async" class="text-light badge badge-info ml-3">
4950
{{ "item.version.history.table.workflowItem" | translate }}
5051
</span>
5152

52-
</div>
53+
</div>
5354

54-
<div class="right-column">
55+
<div class="right-column">
5556

56-
<div class="btn-group edit-field space-children-mr" *ngIf="displayActions">
57-
<!--EDIT WORKSPACE ITEM-->
58-
<button class="btn btn-outline-primary btn-sm version-row-element-edit"
59-
*ngIf="workspaceId$ | async"
60-
(click)="editWorkspaceItem(workspaceId$)"
61-
title="{{'item.version.history.table.action.editWorkspaceItem' | translate }}">
62-
<i class="fas fa-pencil-alt fa-fw"></i>
57+
<div class="btn-group edit-field space-children-mr" *ngIf="displayActions">
58+
<!--EDIT WORKSPACE ITEM-->
59+
<button class="btn btn-outline-primary btn-sm version-row-element-edit"
60+
*ngIf="workspaceId$ | async"
61+
(click)="editWorkspaceItem(workspaceId$)"
62+
title="{{'item.version.history.table.action.editWorkspaceItem' | translate }}">
63+
<i class="fas fa-pencil-alt fa-fw"></i>
64+
</button>
65+
<!--CREATE-->
66+
<ng-container *ngIf="canCreateVersion$ | async">
67+
<button class="btn btn-outline-primary btn-sm version-row-element-create"
68+
[disabled]="isAnyBeingEdited() || (hasDraftVersion$ | async)"
69+
(click)="createNewVersion(versionDTO.version)"
70+
title="{{createVersionTitle$ | async | translate }}">
71+
<i class="fas fa-code-branch fa-fw"></i>
6372
</button>
64-
<!--CREATE-->
65-
<ng-container *ngIf="canCreateVersion$ | async">
66-
<button class="btn btn-outline-primary btn-sm version-row-element-create"
67-
[disabled]="isAnyBeingEdited() || (hasDraftVersion$ | async)"
68-
(click)="createNewVersion(version)"
69-
title="{{createVersionTitle$ | async | translate }}">
70-
<i class="fas fa-code-branch fa-fw"></i>
71-
</button>
72-
</ng-container>
73-
<!--DELETE-->
74-
<ng-container *ngIf="canDeleteVersion$(version) | async">
75-
<button class="btn btn-sm version-row-element-delete"
76-
[ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
77-
[disabled]="isAnyBeingEdited()"
78-
(click)="deleteVersion(version, version.id==itemVersion.id)"
79-
title="{{'item.version.history.table.action.deleteVersion' | translate}}">
80-
<i class="fas fa-trash fa-fw"></i>
81-
</button>
82-
</ng-container>
83-
</div>
84-
73+
</ng-container>
74+
<!--DELETE-->
75+
<ng-container *ngIf="versionDTO.canDeleteVersion">
76+
<button class="btn btn-sm version-row-element-delete"
77+
[ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
78+
[disabled]="isAnyBeingEdited()"
79+
(click)="deleteVersion(versionDTO.version, versionDTO.version.id==itemVersion.id)"
80+
title="{{'item.version.history.table.action.deleteVersion' | translate}}">
81+
<i class="fas fa-trash fa-fw"></i>
82+
</button>
83+
</ng-container>
8584
</div>
8685

87-
</ng-container>
88-
</ng-container>
89-
</td>
90-
<td class="version-row-element-editor" *ngIf="(showSubmitter() | async)">
91-
{{version?.submitterName}}
92-
</td>
93-
<td class="version-row-element-date">
94-
{{version?.created | date : 'yyyy-MM-dd HH:mm:ss'}}
95-
</td>
96-
<td class="version-row-element-summary">
97-
<div class="float-left">
98-
<ng-container *ngIf="isThisBeingEdited(version); then editSummary else showSummary"></ng-container>
99-
<ng-template #showSummary>{{version?.summary}}</ng-template>
100-
<ng-template #editSummary>
101-
<input class="form-control" type="text" [(ngModel)]="versionBeingEditedSummary"
102-
(keyup.enter)="onSummarySubmit()"/>
103-
</ng-template>
104-
</div>
105-
106-
<div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions">
107-
<!--DISCARD EDIT -->
108-
<ng-container *ngIf="(canEditVersion$(version) | async) && isThisBeingEdited(version)">
109-
<button class="btn btn-sm"
110-
[ngClass]="isThisBeingEdited(version) ? 'btn-outline-warning' : 'btn-outline-primary'"
111-
(click)="disableVersionEditing()"
112-
title="{{'item.version.history.table.action.discardSummary' | translate}}">
113-
<i class="fas fa-undo-alt fa-fw"></i>
114-
</button>
115-
</ng-container>
116-
<!--EDIT / SAVE-->
117-
<ng-container *ngIf="canEditVersion$(version) | async">
118-
<button class="btn btn-outline-primary btn-sm version-row-element-edit"
119-
*ngIf="!isThisBeingEdited(version)"
120-
[disabled]="isAnyBeingEdited()"
121-
(click)="enableVersionEditing(version)"
122-
title="{{'item.version.history.table.action.editSummary' | translate}}">
123-
<i class="fas fa-edit fa-fw"></i>
124-
</button>
125-
<button class="btn btn-outline-success btn-sm"
126-
*ngIf="isThisBeingEdited(version)"
127-
(click)="onSummarySubmit()"
128-
title="{{'item.version.history.table.action.saveSummary' | translate}}">
129-
<i class="fas fa-check fa-fw"></i>
130-
</button>
131-
</ng-container>
132-
</div>
86+
</div>
13387

88+
</ng-container>
89+
</ng-container>
90+
</td>
91+
<td class="version-row-element-editor" *ngIf="(showSubmitter() | async)">
92+
{{ versionDTO.version.submitterName }}
93+
</td>
94+
<td class="version-row-element-date">
95+
{{ versionDTO.version.created | date : 'yyyy-MM-dd HH:mm:ss' }}
96+
</td>
97+
<td class="version-row-element-summary">
98+
<div class="float-left">
99+
<ng-container
100+
*ngIf="isThisBeingEdited(versionDTO.version); then editSummary else showSummary"></ng-container>
101+
<ng-template #showSummary>{{ versionDTO.version.summary }}</ng-template>
102+
<ng-template #editSummary>
103+
<input class="form-control" type="text" [(ngModel)]="versionBeingEditedSummary"
104+
(keyup.enter)="onSummarySubmit()"/>
105+
</ng-template>
106+
</div>
134107

135-
</td>
136-
</tr>
137-
</tbody>
138-
</table>
139-
<div>*&nbsp;{{"item.version.history.selected" | translate}}</div>
140-
</ds-pagination>
141-
<ds-alert *ngIf="!itemVersion || versions?.page?.length === 0" [content]="'item.version.history.empty'"
142-
[type]="AlertTypeEnum.Info"></ds-alert>
143-
</div>
108+
<div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions">
109+
<!--DISCARD EDIT -->
110+
<ng-container *ngIf="(versionDTO.canEditVersion | async) && isThisBeingEdited(versionDTO.version)">
111+
<button class="btn btn-sm"
112+
[ngClass]="isThisBeingEdited(versionDTO.version) ? 'btn-outline-warning' : 'btn-outline-primary'"
113+
(click)="disableVersionEditing()"
114+
title="{{'item.version.history.table.action.discardSummary' | translate}}">
115+
<i class="fas fa-undo-alt fa-fw"></i>
116+
</button>
117+
</ng-container>
118+
<!--EDIT / SAVE-->
119+
<ng-container *ngIf="versionDTO.canEditVersion | async">
120+
<button class="btn btn-outline-primary btn-sm version-row-element-edit"
121+
*ngIf="!isThisBeingEdited(versionDTO.version)"
122+
[disabled]="isAnyBeingEdited()"
123+
(click)="enableVersionEditing(versionDTO.version)"
124+
title="{{'item.version.history.table.action.editSummary' | translate}}">
125+
<i class="fas fa-edit fa-fw"></i>
126+
</button>
127+
<button class="btn btn-outline-success btn-sm"
128+
*ngIf="isThisBeingEdited(versionDTO.version)"
129+
(click)="onSummarySubmit()"
130+
title="{{'item.version.history.table.action.saveSummary' | translate}}">
131+
<i class="fas fa-check fa-fw"></i>
132+
</button>
133+
</ng-container>
134+
</div>
135+
</td>
136+
</tr>
137+
</tbody>
138+
</table>
139+
<div>*&nbsp;{{ "item.version.history.selected" | translate }}</div>
140+
</ds-pagination>
144141
</div>
145142
</div>
143+
<ng-template #noItemVersion>
144+
<ds-alert *ngIf="displayWhenEmpty"
145+
[content]="'item.version.history.empty'"
146+
[type]="AlertTypeEnum.Info">
147+
</ds-alert>
148+
</ng-template>

‎src/app/item-page/versions/item-versions.component.ts‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Item } from '../../core/shared/item.model';
33
import { Version } from '../../core/shared/version.model';
44
import { RemoteData } from '../../core/data/remote-data';
55
import {
6-
BehaviorSubject,
76
combineLatest,
87
Observable,
98
of,
@@ -49,6 +48,17 @@ import { WorkspaceitemDataService } from '../../core/submission/workspaceitem-da
4948
import { WorkflowItemDataService } from '../../core/submission/workflowitem-data.service';
5049
import { ConfigurationDataService } from '../../core/data/configuration-data.service';
5150

51+
interface VersionsDTO {
52+
totalElements: number;
53+
versionDTOs: VersionDTO[];
54+
}
55+
56+
interface VersionDTO {
57+
version: Version;
58+
canEditVersion: Observable<boolean>;
59+
canDeleteVersion: Observable<boolean>;
60+
}
61+
5262
@Component({
5363
selector: 'ds-item-versions',
5464
templateUrl: './item-versions.component.html',
@@ -109,16 +119,15 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
109119
versionHistory$: Observable<VersionHistory>;
110120

111121
/**
112-
* The version history's list of versions
122+
* The version history information that is used to render the HTML
113123
*/
114-
versionsRD$: BehaviorSubject<RemoteData<PaginatedList<Version>>> = new BehaviorSubject<RemoteData<PaginatedList<Version>>>(null);
124+
versionsDTO$: Observable<VersionsDTO>;
115125

116126
/**
117127
* Verify if the list of versions has at least one e-person to display
118128
* Used to hide the "Editor" column when no e-persons are present to display
119129
*/
120130
hasEpersons$: Observable<boolean>;
121-
122131
/**
123132
* Verify if there is an inprogress submission in the version history
124133
* Used to disable the "Create version" button
@@ -421,16 +430,23 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
421430
*/
422431
getAllVersions(versionHistory$: Observable<VersionHistory>): void {
423432
const currentPagination = this.paginationService.getCurrentPagination(this.options.id, this.options);
424-
combineLatest([versionHistory$, currentPagination]).pipe(
433+
this.versionsDTO$ = combineLatest([versionHistory$, currentPagination]).pipe(
425434
switchMap(([versionHistory, options]: [VersionHistory, PaginationComponentOptions]) => {
426435
return this.versionHistoryService.getVersions(versionHistory.id,
427436
new PaginatedSearchOptions({pagination: Object.assign({}, options, {currentPage: options.currentPage})}),
428437
false, true, followLink('item'), followLink('eperson'));
429438
}),
430439
getFirstCompletedRemoteData(),
431-
).subscribe((res: RemoteData<PaginatedList<Version>>) => {
432-
this.versionsRD$.next(res);
433-
});
440+
getRemoteDataPayload(),
441+
map((versions: PaginatedList<Version>) => ({
442+
totalElements: versions.totalElements,
443+
versionDTOs: (versions?.page ?? []).map((version: Version) => ({
444+
version: version,
445+
canEditVersion: this.canEditVersion$(version),
446+
canDeleteVersion: this.canDeleteVersion$(version),
447+
})),
448+
})),
449+
);
434450
}
435451

436452
/**
@@ -509,16 +525,12 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
509525
);
510526

511527
this.getAllVersions(this.versionHistory$);
512-
this.hasEpersons$ = this.versionsRD$.pipe(
513-
getAllSucceededRemoteData(),
514-
getRemoteDataPayload(),
515-
hasValueOperator(),
516-
map((versions: PaginatedList<Version>) => versions.page.filter((version: Version) => version.eperson !== undefined).length > 0),
528+
this.hasEpersons$ = this.versionsDTO$.pipe(
529+
map((versionsDTO: VersionsDTO) => versionsDTO.versionDTOs.filter((versionDTO: VersionDTO) => versionDTO.version.eperson !== undefined).length > 0),
517530
startWith(false)
518531
);
519-
this.itemPageRoutes$ = this.versionsRD$.pipe(
520-
getAllSucceededRemoteDataPayload(),
521-
switchMap((versions) => combineLatest(versions.page.map((version) => version.item.pipe(getAllSucceededRemoteDataPayload())))),
532+
this.itemPageRoutes$ = this.versionsDTO$.pipe(
533+
switchMap((versionsDTO: VersionsDTO) => combineLatest(versionsDTO.versionDTOs.map((versionDTO: VersionDTO) => versionDTO.version.item.pipe(getAllSucceededRemoteDataPayload())))),
522534
map((versions) => {
523535
const itemPageRoutes = {};
524536
versions.forEach((item) => itemPageRoutes[item.uuid] = getItemPageRoute(item));

0 commit comments

Comments
 (0)