feat(institution-users): added reusable table and users page

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

@@ -0,0 +1,133 @@
+<div class="flex justify-content-between align-items-center p-3">
+  <div>
+    <ng-content select="[slot=amount]"></ng-content>
+  </div>
+
+  <p-menu #downloadMenu [model]="downloadMenuItems()" appendTo="body" popup>
+    <ng-template #item let-item>
+      <a class="p-menu-item-link ml-1" target="_blank" [href]="item.link">
+        <i [class]="item.icon"></i>
+
+        {{ item.label }}
+      </a>
+    </ng-template>
+  </p-menu>
+
+  <div class="filters-section flex align-items-center gap-2">
+    <ng-content select="[slot=otherFilters]"></ng-content>
+
+    <p-multiselect
+      [options]="tableColumns()"
+      [(ngModel)]="selectedColumns"
+      (onChange)="onColumnSelectionChange($event.value)"
+      optionLabel="header"
+      [showToggleAll]="false"
+      [showClear]="false"
+      [dropdownIcon]="'hidden'"
+    >
+      <ng-template let-values pTemplate="selectedItems">
+        <div class="flex align-items-center gap-2">
+          <i class="fa fa-table-columns text-primary font-bold"></i>
+          <span>{{ 'adminInstitutions.institutionUsers.customize' | translate }}</span>
+        </div>
+      </ng-template>
+
+      <ng-template #item let-item>
+        {{ item.header | translate }}
+      </ng-template>
+    </p-multiselect>
+
+    @if (downloadLink()) {
+      <p-button
+        icon="fa fa-download text-primary text-xl"
+        class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
+        severity="info"
+        (click)="downloadMenu.toggle($event)"
+      />
+    }
+
+    @if (reportsLink()) {
+      <a
+        pButton
+        [href]="reportsLink()"
+        class="p-button p-button-outlined p-button-sm p-06 font-bold grey-border-color child-button-0-padding"
+        target="_blank"
+      >
+        <i class="fa fa-chart-pie text-primary border-1 border-transparent text-xl"></i>
+      </a>
+    }
+  </div>
+</div>
+
+<p-table
+  [columns]="selectedColumnsComputed()"
+  [value]="tableData()"
+  [autoLayout]="true"
+  [scrollable]="true"
+  [sortMode]="'single'"
+  (onSort)="onSort($event)"
+  [sortField]="sortColumn()"
+  [sortOrder]="currentSortOrder()"
+  [customSort]="true"
+  [resetPageOnSort]="false"
+  [tableStyle]="{ 'min-width': '50rem' }"
+>
+  <ng-template #header let-columns>
+    <tr>
+      @for (col of columns; track col.field) {
+        <th [pSortableColumn]="col.sortable ? 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>
+            }
+          </div>
+        </th>
+      }
+    </tr>
+  </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"
+              >
+                {{ getCellValueWithFormatting(rowData[col.field], col) }}
+              </a>
+            } @else {
+              {{ getCellValueWithFormatting(rowData[col.field], col) }}
+            }
+
+            @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>
+  </ng-template>
+</p-table>
+
+@if (enablePagination() && totalCount() > pageSize()) {
+  <div class="p-3">
+    <osf-custom-paginator
+      [first]="first()"
+      [totalCount]="totalCount()"
+      [rows]="pageSize()"
+      (pageChanged)="onPageChange($event)"
+    ></osf-custom-paginator>
+  </div>
+}

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

@@ -0,0 +1,21 @@
+.p-06 {
+  padding: 0.6rem;
+}
+
+.hover-group {
+  .icon-button {
+    opacity: 0;
+    transition: opacity;
+  }
+
+  &:hover {
+    .icon-button {
+      opacity: 100;
+    }
+  }
+}
+
+.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.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminTableComponent } from './admin-table.component';
+
+describe('AdminTableComponent', () => {
+  let component: AdminTableComponent;
+  let fixture: ComponentFixture<AdminTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminTableComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AdminTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,194 @@
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { SortEvent } from 'primeng/api';
+import { Button, ButtonDirective } from 'primeng/button';
+import { Menu } from 'primeng/menu';
+import { MultiSelect } from 'primeng/multiselect';
+import { PaginatorState } from 'primeng/paginator';
+import { TableModule } from 'primeng/table';
+import { Tooltip } from 'primeng/tooltip';
+
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import {
+  TableCellData,
+  TableCellLink,
+  TableColumn,
+  TableIconClickEvent,
+} from '@osf/features/admin-institutions/models';
+import { CustomPaginatorComponent } from '@osf/shared/components';
+import { SortOrder } from '@shared/enums';
+import { QueryParams } from '@shared/models';
+
+@Component({
+  selector: 'osf-admin-table',
+  imports: [
+    MultiSelect,
+    TableModule,
+    FormsModule,
+    ButtonDirective,
+    CustomPaginatorComponent,
+    Tooltip,
+    TranslatePipe,
+    Button,
+    Menu,
+  ],
+  templateUrl: './admin-table.component.html',
+  styleUrl: './admin-table.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdminTableComponent {
+  private readonly translateService = inject(TranslateService);
+
+  tableColumns = input.required<TableColumn[]>();
+  tableData = input.required<TableCellData[]>();
+
+  enablePagination = input<boolean>(false);
+  totalCount = input<number>(0);
+  currentPage = input<number>(1);
+  pageSize = input<number>(10);
+  first = input<number>(0);
+
+  sortField = input<string>('');
+  sortOrder = input<number>(1);
+
+  pageChanged = output<PaginatorState>();
+  sortChanged = output<QueryParams>();
+  iconClicked = output<TableIconClickEvent>();
+
+  downloadLink = input<string>('');
+  reportsLink = input<string>('');
+
+  selectedColumns = signal<TableColumn[]>([]);
+
+  downloadMenuItems = computed(() => {
+    const baseUrl = this.downloadLink();
+    if (!baseUrl) return [];
+
+    return [
+      {
+        label: 'CSV',
+        icon: 'fa fa-file-csv',
+        link: this.createUrl(baseUrl, 'csv'),
+      },
+      {
+        label: 'TSV',
+        icon: 'fa fa-file-alt',
+        link: this.createUrl(baseUrl, 'tsv'),
+      },
+      {
+        label: 'JSON',
+        icon: 'fa fa-file-code',
+        link: this.createUrl(baseUrl, 'json'),
+      },
+    ];
+  });
+
+  selectedColumnsComputed = computed(() => {
+    const selected = this.selectedColumns();
+    const allColumns = this.tableColumns();
+
+    if (selected.length === 0) {
+      return allColumns;
+    }
+
+    return selected;
+  });
+
+  sortColumn = computed(() => this.sortField());
+  currentSortOrder = computed(() => this.sortOrder());
+
+  constructor() {
+    effect(() => {
+      const columns = this.tableColumns();
+      if (columns.length > 0 && this.selectedColumns().length === 0) {
+        this.selectedColumns.set(columns);
+      }
+    });
+  }
+
+  onColumnSelectionChange(selectedCols: TableColumn[]): void {
+    this.selectedColumns.set(selectedCols);
+  }
+
+  onPageChange(event: PaginatorState): void {
+    this.pageChanged.emit(event);
+  }
+
+  onSort(event: SortEvent): void {
+    if (event.field) {
+      this.sortChanged.emit({
+        sortColumn: event.field,
+        sortOrder: event.order === -1 ? SortOrder.Desc : SortOrder.Asc,
+      } as QueryParams);
+    }
+  }
+
+  onIconClick(rowData: TableCellData, column: TableColumn): void {
+    if (column.iconAction) {
+      this.iconClicked.emit({
+        rowData,
+        column,
+        action: column.iconAction,
+      });
+    }
+  }
+
+  isLink(value: string | number | TableCellLink | undefined): value is TableCellLink {
+    return value !== null && value !== undefined && typeof value === 'object' && 'text' in value && 'url' in value;
+  }
+
+  getCellValue(value: string | number | TableCellLink | undefined): string {
+    if (this.isLink(value)) {
+      return this.translateService.instant(value.text);
+    }
+    return this.translateService.instant(String(value)) || '';
+  }
+
+  getCellValueWithFormatting(value: string | number | TableCellLink | undefined, column: TableColumn): string {
+    if (this.isLink(value)) {
+      return this.translateService.instant(value.text);
+    }
+
+    const stringValue = String(value);
+
+    if (column.dateFormat && stringValue) {
+      return this.formatDate(stringValue, column.dateFormat);
+    }
+
+    return this.translateService.instant(stringValue) || '';
+  }
+
+  private formatDate(value: string, format: string): string {
+    if (format === 'yyyy-mm-to-mm/yyyy') {
+      const yearMonthRegex = /^(\d{4})-(\d{2})$/;
+      const match = value.match(yearMonthRegex);
+
+      if (match) {
+        const [, year, month] = match;
+        return `${month}/${year}`;
+      }
+    }
+
+    return value;
+  }
+
+  private createUrl(baseUrl: string, format: string): string {
+    return `${baseUrl}?format=${format}`;
+  }
+
+  getLinkUrl(value: string | number | TableCellLink | undefined): string {
+    if (this.isLink(value)) {
+      return value.url;
+    }
+    return '';
+  }
+
+  getLinkTarget(value: string | number | TableCellLink | undefined, column: TableColumn): string {
+    if (this.isLink(value)) {
+      return value.target || column.linkTarget || '_self';
+    }
+    return column.linkTarget || '_self';
+  }
+}

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

@@ -0,0 +1 @@
+export { AdminTableComponent } from './admin-table/admin-table.component';