Fix/table sorting

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

@@ -181,7 +181,7 @@ export const MENU_ITEMS: MenuItem[] = [
   },
   {
     id: 'my-resources',
-    label: 'navigation.myResources',
+    label: 'navigation.myOsf',
     icon: 'custom-icon-projects',
     routerLinkActiveOptions: { exact: true },
     visible: false,

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

@@ -50,7 +50,7 @@
         outlined
         class="grey-border-color download-button"
         severity="info"
-        (click)="downloadMenu.toggle($event)"
+        (onClick)="downloadMenu.toggle($event)"
       />
 
       @if (reportsLink()) {
@@ -69,7 +69,7 @@
 
 <p-table
   [columns]="selectedColumnsComputed()"
-  [value]="tableData()"
+  [value]="isLoading() ? skeletonData : tableData()"
   [autoLayout]="true"
   [scrollable]="true"
   [sortMode]="'single'"
@@ -96,44 +96,52 @@
   </ng-template>
 
   <ng-template #body let-rowData let-columns="columns">
-    <tr>
-      @for (col of columns; track col.field) {
-        <td class="relative">
-          <div class="flex align-items-center hover-group">
-            @if (col.isLink && isLink(rowData[col.field])) {
-              <a
-                [href]="getLinkUrl(rowData[col.field])"
-                [target]="getLinkTarget(rowData[col.field], col)"
-                class="text-primary no-underline hover:underline"
-              >
+    @if (isLoading()) {
+      <tr class="loading-row">
+        <td colspan="15">
+          <p-skeleton width="100%" height="3.3rem" borderRadius="0" />
+        </td>
+      </tr>
+    } @else {
+      <tr>
+        @for (col of columns; track col.field) {
+          <td class="relative">
+            <div class="flex align-items-center hover-group">
+              @if (col.isLink && isLink(rowData[col.field])) {
+                <a
+                  [href]="getLinkUrl(rowData[col.field])"
+                  [target]="getLinkTarget(rowData[col.field], col)"
+                  class="text-primary no-underline hover:underline"
+                >
+                  @if (col.dateFormat) {
+                    {{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
+                  } @else {
+                    {{ getCellValue(rowData[col.field]) }}
+                  }
+                </a>
+              } @else {
                 @if (col.dateFormat) {
                   {{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
                 } @else {
                   {{ getCellValue(rowData[col.field]) }}
                 }
-              </a>
-            } @else {
-              @if (col.dateFormat) {
-                {{ getCellValue(rowData[col.field]) | date: col.dateFormat }}
-              } @else {
-                {{ getCellValue(rowData[col.field]) }}
               }
-            }
 
-            @if (col.showIcon) {
-              <p-button
-                [pTooltip]="col.iconTooltip | translate"
-                class="icon-button pl-3"
-                [icon]="col.iconClass"
-                variant="text"
-                severity="info"
-                (click)="onIconClick(rowData, col)"
-              />
-            }
-          </div>
-        </td>
-      }
-    </tr>
+              @if (col.showIcon) {
+                <p-button
+                  [pTooltip]="col.iconTooltip | translate"
+                  class="icon-button pl-3"
+                  [icon]="col.iconClass"
+                  variant="text"
+                  severity="info"
+                  (onClick)="onIconClick(rowData, col)"
+                />
+              }
+            </div>
+          </td>
+        }
+      </tr>
+    }
   </ng-template>
 
   <ng-template pTemplate="emptymessage">
@@ -154,7 +162,7 @@
       severity="contrast"
       text
       [disabled]="!prevLink()"
-      (click)="switchPage(prevLink())"
+      (onClick)="switchPage(prevLink())"
     >
     </p-button>
 
@@ -163,7 +171,7 @@
       severity="contrast"
       text
       [disabled]="!nextLink()"
-      (click)="switchPage(nextLink())"
+      (onClick)="switchPage(nextLink())"
     >
     </p-button>
   </div>

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

@@ -5,6 +5,7 @@ import { Button, ButtonDirective } from 'primeng/button';
 import { Menu } from 'primeng/menu';
 import { MultiSelect } from 'primeng/multiselect';
 import { PaginatorState } from 'primeng/paginator';
+import { Skeleton } from 'primeng/skeleton';
 import { TableModule } from 'primeng/table';
 import { Tooltip } from 'primeng/tooltip';
 
@@ -37,6 +38,7 @@ import { DownloadType } from '../../enums';
     TranslatePipe,
     Button,
     Menu,
+    Skeleton,
     StopPropagationDirective,
     DatePipe,
   ],
@@ -52,6 +54,7 @@ export class AdminTableComponent {
   tableColumns = input.required<TableColumn[]>();
   tableData = input.required<TableCellData[]>();
 
+  isLoading = input(false);
   enablePagination = input<boolean>(false);
   totalCount = input<number>(0);
   currentPage = input<number>(1);
@@ -60,6 +63,7 @@ export class AdminTableComponent {
 
   sortField = input<string>('');
   sortOrder = input<number>(1);
+  reportsLink = input<string | undefined>('');
 
   isNextPreviousPagination = input<boolean>(false);
 
@@ -79,8 +83,7 @@ export class AdminTableComponent {
   linkPageChanged = output<string>();
   downloadClicked = output<DownloadType>();
 
-  reportsLink = input<string | undefined>('');
-
+  skeletonData: TableCellData[] = Array.from({ length: 10 }, () => ({}) as TableCellData);
   selectedColumns = signal<TableColumn[]>([]);
 
   downloadMenuItems = DOWNLOAD_OPTIONS;

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

@@ -1,2 +1,3 @@
+export * from './camel-to-snake.helper';
 export * from './download-url.helper';
 export * from './extract-path-after-domain.helper';

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

@@ -1,22 +1,15 @@
-@if (isLoading()) {
-  <div class="flex justify-content-center align-items-center p-6">
-    <osf-loading-spinner />
+<osf-admin-table
+  [tableColumns]="tableColumns()"
+  [tableData]="tableData()"
+  [isLoading]="isLoading()"
+  [isNextPreviousPagination]="true"
+  [paginationLinks]="preprintsLinks()"
+  [reportsLink]="institution().linkToExternalReportsArchive"
+  (sortChanged)="onSortChange($event)"
+  (linkPageChanged)="onLinkPageChange($event)"
+  (downloadClicked)="download($event)"
+>
+  <div slot="amount">
+    <h3 class="title">{{ totalCount() }} {{ 'adminInstitutions.preprints.totalPreprints' | translate | lowercase }}</h3>
   </div>
-} @else {
-  <osf-admin-table
-    [tableColumns]="tableColumns()"
-    [tableData]="tableData()"
-    [isNextPreviousPagination]="true"
-    [paginationLinks]="preprintsLinks()"
-    [reportsLink]="institution().linkToExternalReportsArchive"
-    (sortChanged)="onSortChange($event)"
-    (linkPageChanged)="onLinkPageChange($event)"
-    (downloadClicked)="download($event)"
-  >
-    <div slot="amount">
-      <h3 class="title">
-        {{ totalCount() }} {{ 'adminInstitutions.preprints.totalPreprints' | translate | lowercase }}
-      </h3>
-    </div>
-  </osf-admin-table>
-}
+</osf-admin-table>

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

@@ -6,7 +6,6 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { LoadingSpinnerComponent } from '@osf/shared/components';
 import { TABLE_PARAMS } from '@osf/shared/constants';
 import { SortOrder } from '@osf/shared/enums';
 import { Institution, QueryParams } from '@osf/shared/models';
@@ -22,7 +21,7 @@ import { FetchPreprints, InstitutionsAdminSelectors } from '../../store';
 
 @Component({
   selector: 'osf-institutions-preprints',
-  imports: [CommonModule, AdminTableComponent, TranslatePipe, LoadingSpinnerComponent],
+  imports: [CommonModule, AdminTableComponent, TranslatePipe],
   templateUrl: './institutions-preprints.component.html',
   styleUrl: './institutions-preprints.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -77,7 +76,7 @@ export class InstitutionsPreprintsComponent implements OnInit {
 
     const sortField = this.sortField();
     const sortOrder = this.sortOrder();
-    const sortParam = sortOrder === -1 ? `-${sortField}` : sortField;
+    const sortParam = sortOrder === SortOrder.Desc ? `-${sortField}` : sortField;
 
     const institution = this.institution() as Institution;
     const institutionIris = institution.iris || [];

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

@@ -1,27 +1,22 @@
-@if (isLoading()) {
-  <div class="flex justify-content-center align-items-center p-6">
-    <osf-loading-spinner />
+<osf-admin-table
+  [tableColumns]="tableColumns"
+  [tableData]="tableData()"
+  [isLoading]="isLoading()"
+  [enablePagination]="false"
+  [isNextPreviousPagination]="true"
+  [paginationLinks]="projectsLinks()"
+  [totalCount]="totalCount()"
+  [pageSize]="currentPageSize()"
+  [first]="first()"
+  [sortField]="sortField()"
+  [sortOrder]="sortOrder()"
+  (sortChanged)="onSortChange($event)"
+  (linkPageChanged)="onLinkPageChange($event)"
+  (downloadClicked)="download($event)"
+  (iconClicked)="onIconClick($event)"
+  [reportsLink]="institution().linkToExternalReportsArchive"
+>
+  <div slot="amount" class="flex items-center">
+    <h3 class="title">{{ totalCount() }} {{ 'adminInstitutions.projects.totalProjects' | translate }}</h3>
   </div>
-} @else {
-  <osf-admin-table
-    [tableColumns]="tableColumns"
-    [tableData]="tableData()"
-    [enablePagination]="false"
-    [isNextPreviousPagination]="true"
-    [paginationLinks]="projectsLinks()"
-    [totalCount]="totalCount()"
-    [pageSize]="currentPageSize()"
-    [first]="first()"
-    [sortField]="sortField()"
-    [sortOrder]="sortOrder()"
-    (sortChanged)="onSortChange($event)"
-    (linkPageChanged)="onLinkPageChange($event)"
-    (downloadClicked)="download($event)"
-    (iconClicked)="onIconClick($event)"
-    [reportsLink]="institution().linkToExternalReportsArchive"
-  >
-    <div slot="amount" class="flex items-center">
-      <h3 class="title">{{ totalCount() }} {{ 'adminInstitutions.projects.totalProjects' | translate }}</h3>
-    </div>
-  </osf-admin-table>
-}
+</osf-admin-table>

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

@@ -11,7 +11,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 
 import { UserSelectors } from '@osf/core/store/user';
-import { LoadingSpinnerComponent } from '@osf/shared/components';
 import { TABLE_PARAMS } from '@osf/shared/constants';
 import { SortOrder } from '@osf/shared/enums';
 import { Institution, QueryParams } from '@osf/shared/models';
@@ -29,7 +28,7 @@ import { FetchProjects, InstitutionsAdminSelectors, RequestProjectAccess, SendUs
 
 @Component({
   selector: 'osf-institutions-projects',
-  imports: [AdminTableComponent, TranslatePipe, LoadingSpinnerComponent],
+  imports: [AdminTableComponent, TranslatePipe],
   templateUrl: './institutions-projects.component.html',
   styleUrl: './institutions-projects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -95,7 +94,7 @@ export class InstitutionsProjectsComponent implements OnInit {
 
     const sortField = this.sortField();
     const sortOrder = this.sortOrder();
-    const sortParam = sortOrder === -1 ? `-${sortField}` : sortField;
+    const sortParam = sortOrder === SortOrder.Desc ? `-${sortField}` : sortField;
 
     const institution = this.institution() as Institution;
     const institutionIris = institution.iris || [];

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

@@ -1,22 +1,17 @@
-@if (isLoading()) {
-  <div class="flex justify-content-center align-items-center p-6">
-    <osf-loading-spinner />
+<osf-admin-table
+  [tableColumns]="tableColumns()"
+  [tableData]="tableData()"
+  [isLoading]="isLoading()"
+  [isNextPreviousPagination]="true"
+  [paginationLinks]="registrationsLinks()"
+  [reportsLink]="institution().linkToExternalReportsArchive"
+  (sortChanged)="onSortChange($event)"
+  (linkPageChanged)="onLinkPageChange($event)"
+  (downloadClicked)="download($event)"
+>
+  <div slot="amount">
+    <h3 class="title">
+      {{ totalCount() }} {{ 'adminInstitutions.registrations.totalRegistrations' | translate | lowercase }}
+    </h3>
   </div>
-} @else {
-  <osf-admin-table
-    [tableColumns]="tableColumns()"
-    [tableData]="tableData()"
-    [isNextPreviousPagination]="true"
-    [paginationLinks]="registrationsLinks()"
-    [reportsLink]="institution().linkToExternalReportsArchive"
-    (sortChanged)="onSortChange($event)"
-    (linkPageChanged)="onLinkPageChange($event)"
-    (downloadClicked)="download($event)"
-  >
-    <div slot="amount">
-      <h3 class="title">
-        {{ totalCount() }} {{ 'adminInstitutions.registrations.totalRegistrations' | translate | lowercase }}
-      </h3>
-    </div>
-  </osf-admin-table>
-}
+</osf-admin-table>

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

@@ -6,7 +6,6 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { LoadingSpinnerComponent } from '@osf/shared/components';
 import { TABLE_PARAMS } from '@osf/shared/constants';
 import { SortOrder } from '@osf/shared/enums';
 import { Institution, QueryParams } from '@osf/shared/models';
@@ -22,7 +21,7 @@ import { FetchRegistrations, InstitutionsAdminSelectors } from '../../store';
 
 @Component({
   selector: 'osf-institutions-registrations',
-  imports: [CommonModule, AdminTableComponent, TranslatePipe, LoadingSpinnerComponent],
+  imports: [CommonModule, AdminTableComponent, TranslatePipe],
   templateUrl: './institutions-registrations.component.html',
   styleUrl: './institutions-registrations.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -75,7 +74,7 @@ export class InstitutionsRegistrationsComponent implements OnInit {
 
     const sortField = this.sortField();
     const sortOrder = this.sortOrder();
-    const sortParam = sortOrder === -1 ? `-${sortField}` : sortField;
+    const sortParam = sortOrder === SortOrder.Desc ? `-${sortField}` : sortField;
 
     const institution = this.institution() as Institution;
     const institutionIris = institution.iris || [];