Skip to content

Commit f6b1896

Browse files
jr-rkjr-rk
committed
Changed method of rendering table with versions to toggle dropdown
1 parent d612f86 commit f6b1896

2 files changed

Lines changed: 104 additions & 128 deletions

File tree

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

Lines changed: 91 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,108 @@
11
<div *ngIf="(versionsDTO$ | async) as versionsDTO; else noItemVersion" class="mb-2">
22
<div *ngIf="(versionRD$ | async)?.payload as itemVersion">
3-
<h2 *ngIf="displayTitle" class="h4">{{ "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$">
3+
4+
<!-- Toggle Header -->
5+
<div class="d-flex align-items-center mb-2" style="cursor: pointer;" (click)="toggleVersionHistory()">
6+
<h4 class="mb-0 me-2">{{ "item.version.history.head" | translate }}</h4>
7+
<i class="fas" [ngClass]="showVersionHistory ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
8+
</div>
9+
10+
<!-- Collapsible Content -->
11+
<div class="collapse" [ngClass]="{'show': showVersionHistory}">
12+
<ds-pagination *ngIf="versionsDTO.versionDTOs.length > 0"
13+
(paginationChange)="onPageChange()"
14+
[hideGear]="true"
15+
[hidePagerWhenSinglePage]="true"
16+
[paginationOptions]="options"
17+
[collectionSize]="versionsDTO.totalElements"
18+
[retainScrollPosition]="true">
19+
<table class="table table-striped table-bordered align-middle my-2">
20+
<thead>
21+
<tr>
22+
<th scope="col">{{ "item.version.history.table.version" | translate }}</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
<tr *ngFor="let versionDTO of versionsDTO.versionDTOs" [id]="'version-row-' + versionDTO.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. -->
3030
<ng-container
31-
*ngVar=" ((workspaceId$ | async) ? undefined : getWorkflowId(versionDTO.version.item)) as workflowId$">
31+
*ngVar="((hasDraftVersion$ | async) ? getWorkspaceId(versionDTO.version.item) : undefined) as workspaceId$">
32+
<ng-container
33+
*ngVar=" ((workspaceId$ | async) ? undefined : getWorkflowId(versionDTO.version.item)) as workflowId$">
3234

33-
<div class="left-column">
35+
<div class="left-column">
3436

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>
37+
<span
38+
*ngIf="(workspaceId$ | async) || (workflowId$ | async); then itemNameWithoutLink else itemNameWithLink"></span>
39+
<ng-template #itemNameWithLink>
40+
<ng-container *ngIf="(versionDTO.version.item | async)?.payload as versionItem">
41+
<a [routerLink]="getVersionRoute(versionDTO.version.id)">
42+
{{ versionItem.firstMetadataValue('dc.title') || versionItem.name || 'Untitled' }}
43+
</a>
44+
</ng-container>
45+
</ng-template>
46+
<ng-template #itemNameWithoutLink>
47+
<ng-container *ngIf="(versionDTO.version.item | async)?.payload as versionItem">
48+
{{ versionItem.firstMetadataValue('dc.title') || versionItem.name || 'Untitled' }}
49+
</ng-container>
50+
</ng-template>
51+
<span *ngIf="versionDTO.version.id === itemVersion?.id">*</span>
4452

45-
<span *ngIf="workspaceId$ | async" class="text-light badge badge-primary ml-3">
46-
{{ "item.version.history.table.workspaceItem" | translate }}
47-
</span>
53+
<span *ngIf="workspaceId$ | async" class="text-light badge badge-primary ml-3">
54+
{{ "item.version.history.table.workspaceItem" | translate }}
55+
</span>
4856

49-
<span *ngIf="workflowId$ | async" class="text-light badge badge-info ml-3">
50-
{{ "item.version.history.table.workflowItem" | translate }}
51-
</span>
57+
<span *ngIf="workflowId$ | async" class="text-light badge badge-info ml-3">
58+
{{ "item.version.history.table.workflowItem" | translate }}
59+
</span>
5260

53-
</div>
61+
</div>
5462

55-
<div class="right-column">
63+
<div class="right-column">
5664

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-
[dsBtnDisabled]="isAnyBeingEdited() || (hasDraftVersion$ | async)"
69-
(click)="createNewVersion(versionDTO.version)"
70-
title="{{createVersionTitle$ | async | translate }}">
71-
<i class="fas fa-code-branch fa-fw"></i>
72-
</button>
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-
[dsBtnDisabled]="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>
65+
<div class="btn-group edit-field space-children-mr" *ngIf="displayActions">
66+
<!--EDIT WORKSPACE ITEM-->
67+
<button class="btn btn-outline-primary btn-sm version-row-element-edit"
68+
*ngIf="workspaceId$ | async"
69+
(click)="editWorkspaceItem(workspaceId$)"
70+
title="{{'item.version.history.table.action.editWorkspaceItem' | translate }}">
71+
<i class="fas fa-pencil-alt fa-fw"></i>
8272
</button>
83-
</ng-container>
84-
</div>
85-
86-
</div>
73+
<!--CREATE-->
74+
<ng-container *ngIf="canCreateVersion$ | async">
75+
<button class="btn btn-outline-primary btn-sm version-row-element-create"
76+
[dsBtnDisabled]="isAnyBeingEdited() || (hasDraftVersion$ | async)"
77+
(click)="createNewVersion(versionDTO.version)"
78+
title="{{createVersionTitle$ | async | translate }}">
79+
<i class="fas fa-code-branch fa-fw"></i>
80+
</button>
81+
</ng-container>
82+
<!--DELETE-->
83+
<ng-container *ngIf="versionDTO.canDeleteVersion">
84+
<button class="btn btn-sm version-row-element-delete"
85+
[ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
86+
[dsBtnDisabled]="isAnyBeingEdited()"
87+
(click)="deleteVersion(versionDTO.version, versionDTO.version.id==itemVersion.id)"
88+
title="{{'item.version.history.table.action.deleteVersion' | translate}}">
89+
<i class="fas fa-trash fa-fw"></i>
90+
</button>
91+
</ng-container>
92+
</div>
8793

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 [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
104-
[(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
105-
class="form-control" type="text"/>
106-
</ng-template>
107-
</div>
94+
</div>
10895

109-
<div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions">
110-
<!--DISCARD EDIT -->
111-
<ng-container *ngIf="(versionDTO.canEditVersion | async) && isThisBeingEdited(versionDTO.version)">
112-
<button class="btn btn-sm"
113-
[ngClass]="isThisBeingEdited(versionDTO.version) ? 'btn-outline-warning' : 'btn-outline-primary'"
114-
(click)="disableVersionEditing()"
115-
title="{{'item.version.history.table.action.discardSummary' | translate}}">
116-
<i class="fas fa-undo-alt fa-fw"></i>
117-
</button>
118-
</ng-container>
119-
<!--EDIT / SAVE-->
120-
<ng-container *ngIf="versionDTO.canEditVersion | async">
121-
<button class="btn btn-outline-primary btn-sm version-row-element-edit"
122-
*ngIf="!isThisBeingEdited(versionDTO.version)"
123-
[dsBtnDisabled]="isAnyBeingEdited()"
124-
(click)="enableVersionEditing(versionDTO.version)"
125-
title="{{'item.version.history.table.action.editSummary' | translate}}">
126-
<i class="fas fa-edit fa-fw"></i>
127-
</button>
128-
<button class="btn btn-outline-success btn-sm"
129-
*ngIf="isThisBeingEdited(versionDTO.version)"
130-
(click)="onSummarySubmit()"
131-
title="{{'item.version.history.table.action.saveSummary' | translate}}">
132-
<i class="fas fa-check fa-fw"></i>
133-
</button>
96+
</ng-container>
13497
</ng-container>
135-
</div>
136-
</td>
137-
</tr>
138-
</tbody>
139-
</table>
140-
<div>*&nbsp;{{ "item.version.history.selected" | translate }}</div>
141-
</ds-pagination>
98+
</td>
99+
</tr>
100+
</tbody>
101+
</table>
102+
<div>*&nbsp;{{ "item.version.history.selected" | translate }}</div>
103+
</ds-pagination>
104+
</div>
105+
142106
</div>
143107
</div>
144108
<ng-template #noItemVersion>

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,11 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
181181
canCreateVersion$: Observable<boolean>;
182182
createVersionTitle$: Observable<string>;
183183

184+
/**
185+
* Toggle state for version history table
186+
*/
187+
showVersionHistory = false;
188+
184189
/**
185190
* Show `Editor` column in the table.
186191
*/
@@ -226,6 +231,13 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
226231
return this.versionBeingEditedNumber != null;
227232
}
228233

234+
/**
235+
* Toggle the visibility of version history table
236+
*/
237+
toggleVersionHistory(): void {
238+
this.showVersionHistory = !this.showVersionHistory;
239+
}
240+
229241
/**
230242
* True if the specified version is being edited
231243
* (used to show input field and to change buttons for specified version)
@@ -465,7 +477,7 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
465477
getRemoteDataPayload(),
466478
map((versions: PaginatedList<Version>) => ({
467479
totalElements: versions.totalElements,
468-
versionDTOs: (versions?.page ?? []).map((version: Version) => ({
480+
versionDTOs: (versions?.page ?? []).reverse().map((version: Version) => ({
469481
version: version,
470482
canEditVersion: this.canEditVersion$(version),
471483
canDeleteVersion: this.canDeleteVersion$(version),

0 commit comments

Comments
 (0)