Feat - Admin institution filters

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

@@ -8,8 +8,8 @@ import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 
+import { FetchInstitutionById, InstitutionsAdminSelectors } from '@osf/features/admin-institutions/store';
 import { Primitive } from '@osf/shared/helpers';
-import { FetchInstitutionById, InstitutionsSearchSelectors } from '@osf/shared/stores/institutions-search';
 import { LoadingSpinnerComponent, SelectComponent } from '@shared/components';
 
 import { resourceTabOptions } from './constants';
@@ -26,8 +26,8 @@ export class AdminInstitutionsComponent implements OnInit {
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
 
-  institution = select(InstitutionsSearchSelectors.getInstitution);
-  isInstitutionLoading = select(InstitutionsSearchSelectors.getInstitutionLoading);
+  institution = select(InstitutionsAdminSelectors.getInstitution);
+  isInstitutionLoading = select(InstitutionsAdminSelectors.getInstitutionLoading);
 
   private readonly actions = createDispatchMap({
     fetchInstitution: FetchInstitutionById,
@@ -49,9 +49,7 @@ export class AdminInstitutionsComponent implements OnInit {
   }
 
   onTabChange(selectedValue: Primitive) {
-    const value = selectedValue as AdminInstitutionResourceTab;
-    this.selectedTab = value;
-
+    this.selectedTab = selectedValue as AdminInstitutionResourceTab;
     if (this.selectedTab) {
       this.router.navigate([this.selectedTab], { relativeTo: this.route });
     }

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

@@ -23,7 +23,7 @@
     <ng-content select="[slot=otherFilters]"></ng-content>
 
     <div class="flex align-items-center gap-2 justify-content-between w-full md:justify-content-start md:w-fit">
-      <p-multiselect
+      <p-multi-select
         class="w-9 md:w-fit"
         [options]="tableColumns()"
         [(ngModel)]="selectedColumns"
@@ -43,13 +43,12 @@
         <ng-template #item let-item>
           {{ item.header | translate }}
         </ng-template>
-      </p-multiselect>
+      </p-multi-select>
 
       <p-button
         icon="fa fa-download text-primary text-xl"
         outlined
-        class="grey-border-color download-button"
-        severity="info"
+        styleClass="grey-border-color"
         (onClick)="downloadMenu.toggle($event)"
       />
 
@@ -74,20 +73,21 @@
   [scrollable]="true"
   [sortMode]="'single'"
   (onSort)="onSort($event)"
-  [sortField]="sortColumn()"
-  [sortOrder]="currentSortOrder()"
+  [lazy]="true"
+  [sortField]="sortField()"
+  [sortOrder]="sortOrder()"
   [customSort]="true"
   [resetPageOnSort]="false"
   class="institution-admin-table"
 >
   <ng-template #header let-columns>
     <tr>
       @for (col of columns; track col.field) {
-        <th [pSortableColumn]="col.sortable ? col.field : null" (click)="onHeaderClick(col)">
+        <th [pSortableColumn]="col.sortable ? (col.sortField ?? col.field) : null">
           <div class="flex align-items-center gap-2">
             <span>{{ col.header | translate }}</span>
             @if (col.sortable) {
-              <p-sortIcon [field]="col.field"></p-sortIcon>
+              <p-sortIcon [field]="col.sortField ?? col.field"></p-sortIcon>
             }
           </div>
         </th>
@@ -154,7 +154,7 @@
 @if (isNextPreviousPagination()) {
   <div class="flex column-gap-2 w-full justify-content-center pt-2">
     @if (firstLink() && prevLink()) {
-      <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(firstLink())"></p-button>
+      <p-button icon="fas fa-angles-left" severity="contrast" text (click)="switchPage(firstLink())" />
     }
 
     <p-button
@@ -163,17 +163,15 @@
       text
       [disabled]="!prevLink()"
       (onClick)="switchPage(prevLink())"
-    >
-    </p-button>
+    />
 
     <p-button
       icon="fas fa-angle-right"
       severity="contrast"
       text
       [disabled]="!nextLink()"
       (onClick)="switchPage(nextLink())"
-    >
-    </p-button>
+    />
   </div>
 } @else {
   @if (enablePagination() && totalCount() > pageSize()) {
@@ -183,7 +181,7 @@
         [totalCount]="totalCount()"
         [rows]="pageSize()"
         (pageChanged)="onPageChange($event)"
-      ></osf-custom-paginator>
+      />
     </div>
   }
 }

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

@@ -15,11 +15,6 @@
   }
 }
 
-.download-button {
-  --p-button-outlined-info-border-color: var(--grey-2);
-  --p-button-padding-y: 0.625rem;
-}
-
 .child-button-0-padding {
   --p-button-padding-y: 0;
   --p-button-icon-only-width: max-content;

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

@@ -21,7 +21,8 @@ import {
 } from '@osf/features/admin-institutions/models';
 import { CustomPaginatorComponent } from '@osf/shared/components';
 import { StopPropagationDirective } from '@shared/directives';
-import { QueryParams } from '@shared/models';
+import { StringOrNull } from '@shared/helpers';
+import { SearchFilters } from '@shared/models';
 
 import { DOWNLOAD_OPTIONS } from '../../constants';
 import { DownloadType } from '../../enums';
@@ -49,8 +50,6 @@ import { DownloadType } from '../../enums';
 export class AdminTableComponent {
   private readonly translateService = inject(TranslateService);
 
-  private userInitiatedSort = false;
-
   tableColumns = input.required<TableColumn[]>();
   tableData = input.required<TableCellData[]>();
 
@@ -69,18 +68,18 @@ export class AdminTableComponent {
 
   paginationLinks = input<
     | {
-        first?: { href: string };
-        next?: { href: string };
-        prev?: { href: string };
-        last?: { href: string };
+        first?: { href: StringOrNull };
+        next?: { href: StringOrNull };
+        prev?: { href: StringOrNull };
+        last?: { href: StringOrNull };
       }
     | undefined
   >();
 
   pageChanged = output<PaginatorState>();
-  sortChanged = output<QueryParams>();
+  sortChanged = output<SearchFilters>();
   iconClicked = output<TableIconClickEvent>();
-  linkPageChanged = output<string>();
+  pageSwitched = output<string>();
   downloadClicked = output<DownloadType>();
 
   skeletonData: TableCellData[] = Array.from({ length: 10 }, () => ({}) as TableCellData);
@@ -99,9 +98,6 @@ export class AdminTableComponent {
     return selected;
   });
 
-  sortColumn = computed(() => this.sortField());
-  currentSortOrder = computed(() => this.sortOrder());
-
   firstLink = computed(() => this.paginationLinks()?.first?.href || '');
   prevLink = computed(() => this.paginationLinks()?.prev?.href || '');
   nextLink = computed(() => this.paginationLinks()?.next?.href || '');
@@ -123,21 +119,13 @@ export class AdminTableComponent {
     this.pageChanged.emit(event);
   }
 
-  onHeaderClick(column: TableColumn): void {
-    if (column.sortable) {
-      this.userInitiatedSort = true;
-    }
-  }
-
   onSort(event: SortEvent): void {
-    if (event.field && this.userInitiatedSort) {
+    if (event.field) {
       this.sortChanged.emit({
         sortColumn: event.field,
         sortOrder: event.order,
-      } as QueryParams);
+      } as SearchFilters);
     }
-
-    this.userInitiatedSort = false;
   }
 
   onIconClick(rowData: TableCellData, column: TableColumn): void {
@@ -162,7 +150,7 @@ export class AdminTableComponent {
   }
 
   switchPage(link: string) {
-    this.linkPageChanged.emit(link);
+    this.pageSwitched.emit(link);
   }
 
   getLinkUrl(value: string | number | TableCellLink | undefined): string {

src/app/features/admin-institutions/constants/preprints-table-columns.constant.ts

@@ -10,7 +10,6 @@ export const preprintsTableColumns: TableColumn[] = [
   {
     field: 'link',
     header: 'adminInstitutions.projects.link',
-    sortable: false,
     isLink: true,
     linkTarget: '_blank',
   },
@@ -31,28 +30,27 @@ export const preprintsTableColumns: TableColumn[] = [
     header: 'adminInstitutions.projects.doi',
     isLink: true,
     linkTarget: '_blank',
-    sortable: false,
   },
   {
     field: 'license',
     header: 'adminInstitutions.projects.license',
-    sortable: false,
   },
   {
     field: 'contributorName',
     header: 'adminInstitutions.projects.contributorName',
-    sortable: true,
     isLink: true,
     linkTarget: '_blank',
   },
   {
     field: 'viewsLast30Days',
     header: 'adminInstitutions.projects.views',
-    sortable: false,
+    sortable: true,
+    sortField: 'usage.viewCount',
   },
   {
     field: 'downloadsLast30Days',
     header: 'adminInstitutions.preprints.downloadsLastDays',
-    sortable: false,
+    sortable: true,
+    sortField: 'usage.downloadCount',
   },
 ];

src/app/features/admin-institutions/constants/project-table-columns.constant.ts

@@ -4,14 +4,12 @@ export const projectTableColumns: TableColumn[] = [
   {
     field: 'title',
     header: 'adminInstitutions.projects.title',
-    sortable: true,
     isLink: true,
     linkTarget: '_blank',
   },
   {
     field: 'link',
     header: 'adminInstitutions.projects.link',
-    sortable: false,
     isLink: true,
     linkTarget: '_blank',
   },
@@ -30,22 +28,22 @@ export const projectTableColumns: TableColumn[] = [
   {
     field: 'doi',
     header: 'adminInstitutions.projects.doi',
-    sortable: false,
+    isLink: true,
+    linkTarget: '_blank',
   },
   {
     field: 'storageLocation',
     header: 'adminInstitutions.projects.storageLocation',
-    sortable: false,
   },
   {
     field: 'totalDataStored',
     header: 'adminInstitutions.projects.totalDataStored',
-    sortable: false,
+    sortable: true,
+    sortField: 'storageByteCount',
   },
   {
     field: 'creator',
     header: 'adminInstitutions.projects.contributorName',
-    sortable: true,
     isLink: true,
     linkTarget: '_blank',
     showIcon: true,
@@ -56,7 +54,8 @@ export const projectTableColumns: TableColumn[] = [
   {
     field: 'views',
     header: 'adminInstitutions.projects.views',
-    sortable: false,
+    sortable: true,
+    sortField: 'usage.viewCount',
   },
   {
     field: 'resourceType',

src/app/features/admin-institutions/constants/registration-table-columns.constant.ts

@@ -4,14 +4,12 @@ export const registrationTableColumns: TableColumn[] = [
   {
     field: 'title',
     header: 'adminInstitutions.projects.title',
-    sortable: false,
     isLink: true,
     linkTarget: '_blank',
   },
   {
     field: 'link',
     header: 'adminInstitutions.projects.link',
-    sortable: false,
     isLink: true,
     linkTarget: '_blank',
   },
@@ -30,50 +28,45 @@ export const registrationTableColumns: TableColumn[] = [
   {
     field: 'doi',
     header: 'adminInstitutions.projects.doi',
-    sortable: false,
     isLink: true,
     linkTarget: '_blank',
   },
   {
     field: 'storageLocation',
     header: 'adminInstitutions.projects.storageLocation',
-    sortable: false,
   },
   {
     field: 'totalDataStored',
     header: 'adminInstitutions.projects.totalDataStored',
-    sortable: false,
+    sortable: true,
+    sortField: 'storageByteCount',
   },
   {
     field: 'contributorName',
     header: 'adminInstitutions.projects.contributorName',
-    sortable: true,
     isLink: true,
     linkTarget: '_blank',
   },
   {
     field: 'views',
     header: 'adminInstitutions.projects.views',
-    sortable: false,
+    sortable: true,
+    sortField: 'usage.viewCount',
   },
   {
     field: 'resourceType',
     header: 'adminInstitutions.projects.resourceType',
-    sortable: false,
   },
   {
     field: 'license',
     header: 'adminInstitutions.projects.license',
-    sortable: false,
   },
   {
     field: 'funderName',
     header: 'adminInstitutions.registrations.funderName',
-    sortable: false,
   },
   {
     field: 'registrationSchema',
     header: 'adminInstitutions.registrations.registrationSchema',
-    sortable: false,
   },
 ];