fix(primeng): updated tables and tabs

Author: nsemets

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

@@ -72,7 +72,6 @@
   <p-table
     [columns]="selectedColumnsComputed()"
     [value]="isLoading() ? skeletonData : tableData()"
-    [autoLayout]="true"
     [scrollable]="true"
     [sortMode]="'single'"
     (onSort)="onSort($event)"

src/app/features/files/pages/file-detail/file-detail.component.html

@@ -5,7 +5,7 @@
   }}"
 />
 
-<p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="ml-auto mr-4">
+<p-tabs [value]="selectedTab" (valueChange)="onTabChange($event)" class="ml-auto mr-4">
   <p-tablist>
     <p-tab [value]="FileDetailTab.Details">{{ 'files.detail.tabs.details' | translate }}</p-tab>
     <p-tab [value]="FileDetailTab.Revisions">{{ 'files.detail.tabs.revisions' | translate }}</p-tab>

src/app/features/files/pages/file-detail/file-detail.component.ts

@@ -345,8 +345,12 @@ export class FileDetailComponent implements OnInit, OnDestroy {
     });
   }
 
-  onTabChange(index: FileDetailTab): void {
-    this.selectedTab = index;
+  onTabChange(event: string | number | undefined): void {
+    const value = Number(event);
+
+    if (!isNaN(value)) {
+      this.selectedTab = value;
+    }
   }
 
   handleEmailShare(): void {

src/app/features/meetings/pages/meeting-details/meeting-details.component.html

@@ -19,7 +19,6 @@
     [totalRecords]="tableParams().totalRecords"
     paginatorDropdownAppendTo="body"
     [resizableColumns]="true"
-    [autoLayout]="true"
     [scrollable]="true"
     [sortMode]="'single'"
     [lazy]="true"

src/app/features/my-projects/my-projects.component.html

@@ -8,7 +8,7 @@
   />
 
   <div class="flex-column flex flex-1 w-full">
-    <p-tabs [value]="selectedTab()" (valueChange)="onTabChange(+$event)" class="flex-1">
+    <p-tabs [value]="selectedTab()" (valueChange)="onTabChange($event)" class="flex-1">
       @if (isMedium()) {
         <p-tablist class="pr-5 pl-5">
           @for (tab of tabOptions; track $index) {

src/app/features/my-projects/my-projects.component.ts

@@ -147,12 +147,16 @@ export class MyProjectsComponent implements OnInit {
     }
   }
 
-  onTabChange(tabIndex: number): void {
-    this.actions.clearMyProjects();
-    this.selectedTab.set(tabIndex);
-    this.selectedProjectFilterOption.set(PROJECT_FILTER_OPTIONS[0].value);
-    const current = this.queryService.getRawParams();
-    this.queryService.handleTabSwitch(current, this.selectedTab());
+  onTabChange(event: string | number | undefined): void {
+    const value = Number(event);
+
+    if (!isNaN(value)) {
+      this.actions.clearMyProjects();
+      this.selectedTab.set(value);
+      this.selectedProjectFilterOption.set(PROJECT_FILTER_OPTIONS[0].value);
+      const current = this.queryService.getRawParams();
+      this.queryService.handleTabSwitch(current, this.selectedTab());
+    }
   }
 
   onProjectFilterChange(): void {

src/app/features/preprints/pages/my-preprints/my-preprints.component.html

@@ -24,7 +24,6 @@
       [totalRecords]="tableParams().totalRecords"
       paginatorDropdownAppendTo="body"
       [resizableColumns]="true"
-      [autoLayout]="true"
       [scrollable]="true"
       [sortMode]="'single'"
       [lazy]="true"

src/app/features/project/overview/components/link-resource-dialog/link-resource-dialog.component.html

@@ -45,7 +45,6 @@
     [totalRecords]="tableParams().totalRecords"
     paginatorDropdownAppendTo="body"
     [resizableColumns]="true"
-    [autoLayout]="true"
     [scrollable]="tableParams().scrollable"
     [lazy]="true"
     [lazyLoadOnInit]="true"

src/app/features/settings/profile-settings/profile-settings.component.html

@@ -1,7 +1,7 @@
 <osf-sub-header [title]="'settings.profileSettings.title' | translate" [icon]="'fas fa-gear'" />
 
 <div class="flex-column flex flex-1 w-full">
-  <p-tabs [value]="selectedTab" (valueChange)="onTabChange(+$event)" class="flex-1">
+  <p-tabs [value]="selectedTab" (valueChange)="onTabChange($event)" class="flex-1">
     @if (isMedium()) {
       <p-tablist class="pr-5 pl-5">
         @for (item of tabOptions; track $index) {

src/app/features/settings/profile-settings/profile-settings.component.ts

@@ -43,7 +43,11 @@ export class ProfileSettingsComponent {
 
   selectedTab = this.tabOption.Name;
 
-  onTabChange(index: number): void {
-    this.selectedTab = index;
+  onTabChange(event: string | number | undefined): void {
+    const value = Number(event);
+
+    if (!isNaN(value)) {
+      this.selectedTab = value;
+    }
   }
 }