Fix/institutions (#265)

* fix(menu): added new items

* fix(institutions): updated download logic

* fix(institutions): updates

* fix(institutions): updated resource pages

Author: nsemets

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

@@ -8,10 +8,12 @@ import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 
-import { resourceTabOptions } from '@osf/features/admin-institutions/constants/resource-tab-option.constant';
 import { Primitive } from '@osf/shared/helpers';
+import { FetchInstitutionById, InstitutionsSearchSelectors } from '@osf/shared/stores';
 import { LoadingSpinnerComponent, SelectComponent } from '@shared/components';
-import { FetchInstitutionById, InstitutionsSearchSelectors } from '@shared/stores';
+
+import { resourceTabOptions } from './constants';
+import { AdminInstitutionResourceTab } from './enums';
 
 @Component({
   selector: 'osf-admin-institutions',
@@ -31,9 +33,8 @@ export class AdminInstitutionsComponent implements OnInit {
     fetchInstitution: FetchInstitutionById,
   });
 
-  selectedTab = 'summary';
-
   resourceTabOptions = resourceTabOptions;
+  selectedTab = AdminInstitutionResourceTab.Summary;
 
   ngOnInit() {
     const institutionId = this.route.snapshot.params['institution-id'];
@@ -42,16 +43,17 @@ export class AdminInstitutionsComponent implements OnInit {
       this.actions.fetchInstitution(institutionId);
     }
 
-    this.selectedTab = this.route.snapshot.firstChild?.routeConfig?.path || 'summary';
+    this.selectedTab =
+      (this.route.snapshot.firstChild?.routeConfig?.path as AdminInstitutionResourceTab) ||
+      AdminInstitutionResourceTab.Summary;
   }
 
   onTabChange(selectedValue: Primitive) {
-    const value = String(selectedValue);
+    const value = selectedValue as AdminInstitutionResourceTab;
     this.selectedTab = value;
-    const selectedTab = this.resourceTabOptions.find((tab) => tab.value === value);
 
-    if (selectedTab) {
-      this.router.navigate([selectedTab.value], { relativeTo: this.route });
+    if (this.selectedTab) {
+      this.router.navigate([this.selectedTab], { relativeTo: this.route });
     }
   }
 }

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

@@ -3,9 +3,15 @@
     <ng-content select="[slot=amount]"></ng-content>
   </div>
 
-  <p-menu #downloadMenu [model]="downloadMenuItems()" appendTo="body" popup>
+  <p-menu #downloadMenu [model]="downloadMenuItems" appendTo="body" popup>
     <ng-template #item let-item>
-      <a class="p-menu-item-link ml-1" osfStopPropagation target="_blank" [href]="item.link">
+      <a
+        class="p-menu-item-link ml-1"
+        osfStopPropagation
+        (click)="downloadClicked.emit(item.value)"
+        (keydown.enter)="downloadClicked.emit(item.value)"
+        tabindex="0"
+      >
         <i [class]="item.icon"></i>
 
         {{ item.label }}
@@ -39,15 +45,13 @@
         </ng-template>
       </p-multiselect>
 
-      @if (downloadLink()) {
-        <p-button
-          icon="fa fa-download text-primary text-xl"
-          outlined
-          class="grey-border-color download-button"
-          severity="info"
-          (click)="downloadMenu.toggle($event)"
-        />
-      }
+      <p-button
+        icon="fa fa-download text-primary text-xl"
+        outlined
+        class="grey-border-color download-button"
+        severity="info"
+        (click)="downloadMenu.toggle($event)"
+      />
 
       @if (reportsLink()) {
         <a
@@ -131,6 +135,12 @@
       }
     </tr>
   </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="15" class="text-center">{{ 'adminInstitutions.institutionUsers.noData' | translate }}</td>
+    </tr>
+  </ng-template>
 </p-table>
 
 @if (isNextPreviousPagination()) {

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

@@ -20,9 +20,11 @@ import {
 } from '@osf/features/admin-institutions/models';
 import { CustomPaginatorComponent } from '@osf/shared/components';
 import { StopPropagationDirective } from '@shared/directives';
-import { SortOrder } from '@shared/enums';
 import { QueryParams } from '@shared/models';
 
+import { DOWNLOAD_OPTIONS } from '../../constants';
+import { DownloadType } from '../../enums';
+
 @Component({
   selector: 'osf-admin-table',
   imports: [
@@ -75,34 +77,13 @@ export class AdminTableComponent {
   sortChanged = output<QueryParams>();
   iconClicked = output<TableIconClickEvent>();
   linkPageChanged = output<string>();
+  downloadClicked = output<DownloadType>();
 
-  downloadLink = input<string>('');
-  reportsLink = input<string>('');
+  reportsLink = input<string | undefined>('');
 
   selectedColumns = signal<TableColumn[]>([]);
 
-  downloadMenuItems = computed(() => {
-    const baseUrl = this.downloadLink();
-    if (!baseUrl) return [];
-
-    return [
-      {
-        label: 'CSV',
-        icon: 'fa fa-file-csv',
-        link: this.createUrl(baseUrl, 'text/csv'),
-      },
-      {
-        label: 'TSV',
-        icon: 'fa fa-file-alt',
-        link: this.createUrl(baseUrl, 'text/tab-separated-values'),
-      },
-      {
-        label: 'JSON',
-        icon: 'fa fa-file-code',
-        link: this.createUrl(baseUrl, 'application/json'),
-      },
-    ];
-  });
+  downloadMenuItems = DOWNLOAD_OPTIONS;
 
   selectedColumnsComputed = computed(() => {
     const selected = this.selectedColumns();
@@ -149,9 +130,10 @@ export class AdminTableComponent {
     if (event.field && this.userInitiatedSort) {
       this.sortChanged.emit({
         sortColumn: event.field,
-        sortOrder: event.order === -1 ? SortOrder.Desc : SortOrder.Asc,
+        sortOrder: event.order,
       } as QueryParams);
     }
+
     this.userInitiatedSort = false;
   }
 
@@ -180,10 +162,6 @@ export class AdminTableComponent {
     this.linkPageChanged.emit(link);
   }
 
-  private createUrl(baseUrl: string, mediaType: string): string {
-    return `${baseUrl}&acceptMediatype=${encodeURIComponent(mediaType)}`;
-  }
-
   getLinkUrl(value: string | number | TableCellLink | undefined): string {
     if (this.isLink(value)) {
       return value.url;

src/app/features/admin-institutions/constants/contact-options.constant.ts

@@ -0,0 +1,8 @@
+import { SelectOption } from '@shared/models';
+
+import { ContactOption } from '../enums';
+
+export const CONTACT_OPTIONS: SelectOption[] = [
+  { label: 'adminInstitutions.contact.requestAccess', value: ContactOption.RequestAccess },
+  { label: 'adminInstitutions.contact.sendMessage', value: ContactOption.SendMessage },
+];

src/app/features/admin-institutions/constants/download-formats.constant.ts

@@ -0,0 +1,7 @@
+import { DownloadType } from '../enums';
+
+export const DOWNLOAD_FORMATS: Record<DownloadType, string> = {
+  [DownloadType.CSV]: 'text/csv',
+  [DownloadType.TSV]: 'text/tab-separated-values',
+  [DownloadType.JSON]: 'application/json',
+};

src/app/features/admin-institutions/constants/download-options.constant.ts

@@ -0,0 +1,19 @@
+import { DownloadType } from '../enums';
+
+export const DOWNLOAD_OPTIONS = [
+  {
+    value: DownloadType.CSV,
+    label: 'CSV',
+    icon: 'fa fa-file-csv',
+  },
+  {
+    value: DownloadType.TSV,
+    label: 'TSV',
+    icon: 'fa fa-file-alt',
+  },
+  {
+    value: DownloadType.JSON,
+    label: 'JSON',
+    icon: 'fa fa-file-code',
+  },
+];

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

@@ -1,6 +1,9 @@
-export * from './admin-table-columns.constant';
+export * from './contact-options.constant';
 export * from './department-options.constant';
+export * from './download-formats.constant';
+export * from './download-options.constant';
 export * from './preprints-table-columns.constant';
 export * from './project-table-columns.constant';
 export * from './registration-table-columns.constant';
 export * from './resource-tab-option.constant';
+export * from './user-table-columns.constant';

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

@@ -48,6 +48,10 @@ export const projectTableColumns: TableColumn[] = [
     sortable: true,
     isLink: true,
     linkTarget: '_blank',
+    showIcon: true,
+    iconClass: 'fa-solid fa-comment text-primary',
+    iconTooltip: 'adminInstitutions.institutionUsers.sendMessage',
+    iconAction: 'sendMessage',
   },
   {
     field: 'views',

src/app/features/admin-institutions/constants/resource-tab-option.constant.ts

@@ -1,9 +1,11 @@
 import { CustomOption } from '@shared/models';
 
-export const resourceTabOptions: CustomOption<string>[] = [
-  { label: 'adminInstitutions.summary.title', value: 'summary' },
-  { label: 'common.search.tabs.users', value: 'users' },
-  { label: 'common.search.tabs.projects', value: 'projects' },
-  { label: 'common.search.tabs.registrations', value: 'registrations' },
-  { label: 'common.search.tabs.preprints', value: 'preprints' },
+import { AdminInstitutionResourceTab } from '../enums';
+
+export const resourceTabOptions: CustomOption<AdminInstitutionResourceTab>[] = [
+  { label: 'adminInstitutions.summary.title', value: AdminInstitutionResourceTab.Summary },
+  { label: 'common.search.tabs.users', value: AdminInstitutionResourceTab.Users },
+  { label: 'common.search.tabs.projects', value: AdminInstitutionResourceTab.Projects },
+  { label: 'common.search.tabs.registrations', value: AdminInstitutionResourceTab.Registrations },
+  { label: 'common.search.tabs.preprints', value: AdminInstitutionResourceTab.Preprints },
 ];