Skip to content

Commit 193a0b5

Browse files
nsemetsnsemets
committed
fix(table): updated sorting
1 parent 516655f commit 193a0b5

32 files changed

Lines changed: 381 additions & 451 deletions

‎src/app/core/constants/nav-items.constant.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export const MENU_ITEMS: MenuItem[] = [
181181
},
182182
{
183183
id: 'my-resources',
184-
label: 'navigation.myResources',
184+
label: 'navigation.myOsf',
185185
icon: 'custom-icon-projects',
186186
routerLinkActiveOptions: { exact: true },
187187
visible: false,

‎src/app/features/admin-institutions/components/admin-table/admin-table.component.html‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
outlined
5151
class="grey-border-color download-button"
5252
severity="info"
53-
(click)="downloadMenu.toggle($event)"
53+
(onClick)="downloadMenu.toggle($event)"
5454
/>
5555

5656
@if (reportsLink()) {
@@ -69,7 +69,7 @@
6969

7070
<p-table
7171
[columns]="selectedColumnsComputed()"
72-
[value]="tableData()"
72+
[value]="isLoading() ? skeletonData : tableData()"
7373
[autoLayout]="true"
7474
[scrollable]="true"
7575
[sortMode]="'single'"
@@ -96,44 +96,52 @@
9696
</ng-template>
9797

9898
<ng-template #body let-rowData let-columns="columns">
99-
<tr>
100-
@for (col of columns; track col.field) {
101-
<td class="relative">
102-
<div class="flex align-items-center hover-group">
103-
@if (col.isLink && isLink(rowData[col.field])) {
104-
<a
105-
[href]="getLinkUrl(rowData[col.field])"
106-
[target]="getLinkTarget(rowData[col.field], col)"
107-
class="text-primary no-underline hover:underline"
108-
>
99+
@if (isLoading()) {
100+
<tr class="loading-row">
101+
<td colspan="15">
102+
<p-skeleton width="100%" height="3.3rem" borderRadius="0" />
103+
</td>
104+
</tr>
105+
} @else {
106+
<tr>
107+
@for (col of columns; track col.field) {
108+
<td class="relative">
109+
<div class="flex align-items-center hover-group">
110+
@if (col.isLink && isLink(rowData[col.field])) {
111+
<a
112+
[href]="getLinkUrl(rowData[col.field])"
113+
[target]="getLinkTarget(rowData[col.field], col)"
114+
class="text-primary no-underline hover:underline"
115+
>
116+
@if (col.dateFormat) {
117+
{{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
118+
} @else {
119+
{{ getCellValue(rowData[col.field]) }}
120+
}
121+
</a>
122+
} @else {
109123
@if (col.dateFormat) {
110124
{{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
111125
} @else {
112126
{{ getCellValue(rowData[col.field]) }}
113127
}
114-
</a>
115-
} @else {
116-
@if (col.dateFormat) {
117-
{{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
118-
} @else {
119-
{{ getCellValue(rowData[col.field]) }}
120128
}
121-
}
122129

123-
@if (col.showIcon) {
124-
<p-button
125-
[pTooltip]="col.iconTooltip | translate"
126-
class="icon-button pl-3"
127-
[icon]="col.iconClass"
128-
variant="text"
129-
severity="info"
130-
(click)="onIconClick(rowData, col)"
131-
/>
132-
}
133-
</div>
134-
</td>
135-
}
136-
</tr>
130+
@if (col.showIcon) {
131+
<p-button
132+
[pTooltip]="col.iconTooltip | translate"
133+
class="icon-button pl-3"
134+
[icon]="col.iconClass"
135+
variant="text"
136+
severity="info"
137+
(onClick)="onIconClick(rowData, col)"
138+
/>
139+
}
140+
</div>
141+
</td>
142+
}
143+
</tr>
144+
}
137145
</ng-template>
138146

139147
<ng-template pTemplate="emptymessage">
@@ -154,7 +162,7 @@
154162
severity="contrast"
155163
text
156164
[disabled]="!prevLink()"
157-
(click)="switchPage(prevLink())"
165+
(onClick)="switchPage(prevLink())"
158166
>
159167
</p-button>
160168

@@ -163,7 +171,7 @@
163171
severity="contrast"
164172
text
165173
[disabled]="!nextLink()"
166-
(click)="switchPage(nextLink())"
174+
(onClick)="switchPage(nextLink())"
167175
>
168176
</p-button>
169177
</div>

‎src/app/features/admin-institutions/components/admin-table/admin-table.component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Button, ButtonDirective } from 'primeng/button';
55
import { Menu } from 'primeng/menu';
66
import { MultiSelect } from 'primeng/multiselect';
77
import { PaginatorState } from 'primeng/paginator';
8+
import { Skeleton } from 'primeng/skeleton';
89
import { TableModule } from 'primeng/table';
910
import { Tooltip } from 'primeng/tooltip';
1011

@@ -37,6 +38,7 @@ import { DownloadType } from '../../enums';
3738
TranslatePipe,
3839
Button,
3940
Menu,
41+
Skeleton,
4042
StopPropagationDirective,
4143
DatePipe,
4244
],
@@ -52,6 +54,7 @@ export class AdminTableComponent {
5254
tableColumns = input.required<TableColumn[]>();
5355
tableData = input.required<TableCellData[]>();
5456

57+
isLoading = input(false);
5558
enablePagination = input<boolean>(false);
5659
totalCount = input<number>(0);
5760
currentPage = input<number>(1);
@@ -60,6 +63,7 @@ export class AdminTableComponent {
6063

6164
sortField = input<string>('');
6265
sortOrder = input<number>(1);
66+
reportsLink = input<string | undefined>('');
6367

6468
isNextPreviousPagination = input<boolean>(false);
6569

@@ -79,8 +83,7 @@ export class AdminTableComponent {
7983
linkPageChanged = output<string>();
8084
downloadClicked = output<DownloadType>();
8185

82-
reportsLink = input<string | undefined>('');
83-
86+
skeletonData: TableCellData[] = Array.from({ length: 10 }, () => ({}) as TableCellData);
8487
selectedColumns = signal<TableColumn[]>([]);
8588

8689
downloadMenuItems = DOWNLOAD_OPTIONS;

‎src/app/features/admin-institutions/helpers/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export * from './camel-to-snake.helper';
12
export * from './download-url.helper';
23
export * from './extract-path-after-domain.helper';

‎src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.html‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
1-
@if (isLoading()) {
2-
<div class="flex justify-content-center align-items-center p-6">
3-
<osf-loading-spinner />
1+
<osf-admin-table
2+
[tableColumns]="tableColumns()"
3+
[tableData]="tableData()"
4+
[isLoading]="isLoading()"
5+
[isNextPreviousPagination]="true"
6+
[paginationLinks]="preprintsLinks()"
7+
[reportsLink]="institution().linkToExternalReportsArchive"
8+
(sortChanged)="onSortChange($event)"
9+
(linkPageChanged)="onLinkPageChange($event)"
10+
(downloadClicked)="download($event)"
11+
>
12+
<div slot="amount">
13+
<h3 class="title">{{ totalCount() }} {{ 'adminInstitutions.preprints.totalPreprints' | translate | lowercase }}</h3>
414
</div>
5-
} @else {
6-
<osf-admin-table
7-
[tableColumns]="tableColumns()"
8-
[tableData]="tableData()"
9-
[isNextPreviousPagination]="true"
10-
[paginationLinks]="preprintsLinks()"
11-
[reportsLink]="institution().linkToExternalReportsArchive"
12-
(sortChanged)="onSortChange($event)"
13-
(linkPageChanged)="onLinkPageChange($event)"
14-
(downloadClicked)="download($event)"
15-
>
16-
<div slot="amount">
17-
<h3 class="title">
18-
{{ totalCount() }} {{ 'adminInstitutions.preprints.totalPreprints' | translate | lowercase }}
19-
</h3>
20-
</div>
21-
</osf-admin-table>
22-
}
15+
</osf-admin-table>

‎src/app/features/admin-institutions/pages/institutions-preprints/institutions-preprints.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { CommonModule } from '@angular/common';
66
import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal } from '@angular/core';
77
import { ActivatedRoute, Router } from '@angular/router';
88

9-
import { LoadingSpinnerComponent } from '@osf/shared/components';
109
import { TABLE_PARAMS } from '@osf/shared/constants';
1110
import { SortOrder } from '@osf/shared/enums';
1211
import { Institution, QueryParams } from '@osf/shared/models';
@@ -22,7 +21,7 @@ import { FetchPreprints, InstitutionsAdminSelectors } from '../../store';
2221

2322
@Component({
2423
selector: 'osf-institutions-preprints',
25-
imports: [CommonModule, AdminTableComponent, TranslatePipe, LoadingSpinnerComponent],
24+
imports: [CommonModule, AdminTableComponent, TranslatePipe],
2625
templateUrl: './institutions-preprints.component.html',
2726
styleUrl: './institutions-preprints.component.scss',
2827
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -77,7 +76,7 @@ export class InstitutionsPreprintsComponent implements OnInit {
7776

7877
const sortField = this.sortField();
7978
const sortOrder = this.sortOrder();
80-
const sortParam = sortOrder === -1 ? `-${sortField}` : sortField;
79+
const sortParam = sortOrder === SortOrder.Desc ? `-${sortField}` : sortField;
8180

8281
const institution = this.institution() as Institution;
8382
const institutionIris = institution.iris || [];

‎src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.html‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,22 @@
1-
@if (isLoading()) {
2-
<div class="flex justify-content-center align-items-center p-6">
3-
<osf-loading-spinner />
1+
<osf-admin-table
2+
[tableColumns]="tableColumns"
3+
[tableData]="tableData()"
4+
[isLoading]="isLoading()"
5+
[enablePagination]="false"
6+
[isNextPreviousPagination]="true"
7+
[paginationLinks]="projectsLinks()"
8+
[totalCount]="totalCount()"
9+
[pageSize]="currentPageSize()"
10+
[first]="first()"
11+
[sortField]="sortField()"
12+
[sortOrder]="sortOrder()"
13+
(sortChanged)="onSortChange($event)"
14+
(linkPageChanged)="onLinkPageChange($event)"
15+
(downloadClicked)="download($event)"
16+
(iconClicked)="onIconClick($event)"
17+
[reportsLink]="institution().linkToExternalReportsArchive"
18+
>
19+
<div slot="amount" class="flex items-center">
20+
<h3 class="title">{{ totalCount() }} {{ 'adminInstitutions.projects.totalProjects' | translate }}</h3>
421
</div>
5-
} @else {
6-
<osf-admin-table
7-
[tableColumns]="tableColumns"
8-
[tableData]="tableData()"
9-
[enablePagination]="false"
10-
[isNextPreviousPagination]="true"
11-
[paginationLinks]="projectsLinks()"
12-
[totalCount]="totalCount()"
13-
[pageSize]="currentPageSize()"
14-
[first]="first()"
15-
[sortField]="sortField()"
16-
[sortOrder]="sortOrder()"
17-
(sortChanged)="onSortChange($event)"
18-
(linkPageChanged)="onLinkPageChange($event)"
19-
(downloadClicked)="download($event)"
20-
(iconClicked)="onIconClick($event)"
21-
[reportsLink]="institution().linkToExternalReportsArchive"
22-
>
23-
<div slot="amount" class="flex items-center">
24-
<h3 class="title">{{ totalCount() }} {{ 'adminInstitutions.projects.totalProjects' | translate }}</h3>
25-
</div>
26-
</osf-admin-table>
27-
}
22+
</osf-admin-table>

‎src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
1111
import { ActivatedRoute } from '@angular/router';
1212

1313
import { UserSelectors } from '@osf/core/store/user';
14-
import { LoadingSpinnerComponent } from '@osf/shared/components';
1514
import { TABLE_PARAMS } from '@osf/shared/constants';
1615
import { SortOrder } from '@osf/shared/enums';
1716
import { Institution, QueryParams } from '@osf/shared/models';
@@ -29,7 +28,7 @@ import { FetchProjects, InstitutionsAdminSelectors, RequestProjectAccess, SendUs
2928

3029
@Component({
3130
selector: 'osf-institutions-projects',
32-
imports: [AdminTableComponent, TranslatePipe, LoadingSpinnerComponent],
31+
imports: [AdminTableComponent, TranslatePipe],
3332
templateUrl: './institutions-projects.component.html',
3433
styleUrl: './institutions-projects.component.scss',
3534
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -95,7 +94,7 @@ export class InstitutionsProjectsComponent implements OnInit {
9594

9695
const sortField = this.sortField();
9796
const sortOrder = this.sortOrder();
98-
const sortParam = sortOrder === -1 ? `-${sortField}` : sortField;
97+
const sortParam = sortOrder === SortOrder.Desc ? `-${sortField}` : sortField;
9998

10099
const institution = this.institution() as Institution;
101100
const institutionIris = institution.iris || [];

‎src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.component.html‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
1-
@if (isLoading()) {
2-
<div class="flex justify-content-center align-items-center p-6">
3-
<osf-loading-spinner />
1+
<osf-admin-table
2+
[tableColumns]="tableColumns()"
3+
[tableData]="tableData()"
4+
[isLoading]="isLoading()"
5+
[isNextPreviousPagination]="true"
6+
[paginationLinks]="registrationsLinks()"
7+
[reportsLink]="institution().linkToExternalReportsArchive"
8+
(sortChanged)="onSortChange($event)"
9+
(linkPageChanged)="onLinkPageChange($event)"
10+
(downloadClicked)="download($event)"
11+
>
12+
<div slot="amount">
13+
<h3 class="title">
14+
{{ totalCount() }} {{ 'adminInstitutions.registrations.totalRegistrations' | translate | lowercase }}
15+
</h3>
416
</div>
5-
} @else {
6-
<osf-admin-table
7-
[tableColumns]="tableColumns()"
8-
[tableData]="tableData()"
9-
[isNextPreviousPagination]="true"
10-
[paginationLinks]="registrationsLinks()"
11-
[reportsLink]="institution().linkToExternalReportsArchive"
12-
(sortChanged)="onSortChange($event)"
13-
(linkPageChanged)="onLinkPageChange($event)"
14-
(downloadClicked)="download($event)"
15-
>
16-
<div slot="amount">
17-
<h3 class="title">
18-
{{ totalCount() }} {{ 'adminInstitutions.registrations.totalRegistrations' | translate | lowercase }}
19-
</h3>
20-
</div>
21-
</osf-admin-table>
22-
}
17+
</osf-admin-table>

‎src/app/features/admin-institutions/pages/institutions-registrations/institutions-registrations.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { CommonModule } from '@angular/common';
66
import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal } from '@angular/core';
77
import { ActivatedRoute, Router } from '@angular/router';
88

9-
import { LoadingSpinnerComponent } from '@osf/shared/components';
109
import { TABLE_PARAMS } from '@osf/shared/constants';
1110
import { SortOrder } from '@osf/shared/enums';
1211
import { Institution, QueryParams } from '@osf/shared/models';
@@ -22,7 +21,7 @@ import { FetchRegistrations, InstitutionsAdminSelectors } from '../../store';
2221

2322
@Component({
2423
selector: 'osf-institutions-registrations',
25-
imports: [CommonModule, AdminTableComponent, TranslatePipe, LoadingSpinnerComponent],
24+
imports: [CommonModule, AdminTableComponent, TranslatePipe],
2625
templateUrl: './institutions-registrations.component.html',
2726
styleUrl: './institutions-registrations.component.scss',
2827
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -75,7 +74,7 @@ export class InstitutionsRegistrationsComponent implements OnInit {
7574

7675
const sortField = this.sortField();
7776
const sortOrder = this.sortOrder();
78-
const sortParam = sortOrder === -1 ? `-${sortField}` : sortField;
77+
const sortParam = sortOrder === SortOrder.Desc ? `-${sortField}` : sortField;
7978

8079
const institution = this.institution() as Institution;
8180
const institutionIris = institution.iris || [];

0 commit comments

Comments
 (0)