Merge pull request #179 from CenterForOpenScience/fix/my-reviewing

Fix/my reviewing

Author: nsemets

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

@@ -60,6 +60,11 @@ export const MENU_ITEMS: MenuItem[] = [
         label: 'navigation.preprintsSubRoutes.myPreprints',
         routerLinkActiveOptions: { exact: false },
       },
+      {
+        routerLink: '/preprints/my-reviewing',
+        label: 'navigation.preprintsSubRoutes.myReviewing',
+        routerLinkActiveOptions: { exact: true },
+      },
     ],
   },
   {

src/app/features/collections/collections.routes.ts

@@ -7,8 +7,6 @@ import { CollectionsState } from '@osf/features/collections/store/collections';
 import { ConfirmLeavingGuard } from '@shared/guards';
 import { ContributorsState, ProjectsState } from '@shared/stores';
 
-import { ModeratorsState } from '../moderation/store/moderation';
-
 export const collectionsRoutes: Routes = [
   {
     path: '',
@@ -45,11 +43,8 @@ export const collectionsRoutes: Routes = [
       },
       {
         path: ':id/moderation',
-        loadComponent: () =>
-          import('@osf/features/moderation/pages/collection-moderation/collection-moderation.component').then(
-            (m) => m.CollectionModerationComponent
-          ),
-        providers: [provideStates([ModeratorsState])],
+        loadChildren: () =>
+          import('@osf/features/moderation/collection-moderation.routes').then((m) => m.collectionModerationRoutes),
       },
     ],
   },

src/app/features/moderation/collection-moderation.routes.ts

@@ -0,0 +1,48 @@
+import { provideStates } from '@ngxs/store';
+
+import { Routes } from '@angular/router';
+
+import { ResourceType } from '@osf/shared/enums';
+
+import { ModeratorsState } from './store/moderation';
+import { CollectionModerationTab } from './enums';
+
+export const collectionModerationRoutes: Routes = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('@osf/features/moderation/pages/collection-moderation/collection-moderation.component').then(
+        (m) => m.CollectionModerationComponent
+      ),
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'all-items',
+      },
+      {
+        path: 'all-items',
+        loadComponent: () =>
+          import('./components/collection-moderation-submissions/collection-moderation-submissions.component').then(
+            (m) => m.CollectionModerationSubmissionsComponent
+          ),
+        data: { tab: CollectionModerationTab.AllItems },
+      },
+      {
+        path: 'moderators',
+        loadComponent: () =>
+          import('./components/moderators-list/moderators-list.component').then((m) => m.ModeratorsListComponent),
+        data: { resourceType: ResourceType.Collection, tab: CollectionModerationTab.Moderators },
+        providers: [provideStates([ModeratorsState])],
+      },
+      {
+        path: 'settings',
+        loadComponent: () =>
+          import('./components/notification-settings/notification-settings.component').then(
+            (m) => m.NotificationSettingsComponent
+          ),
+        data: { tab: CollectionModerationTab.Settings },
+      },
+    ],
+  },
+];

src/app/features/moderation/components/moderators-list/moderators-list.component.ts

@@ -7,7 +7,7 @@ import { DialogService } from 'primeng/dynamicdialog';
 
 import { debounceTime, distinctUntilChanged, filter, forkJoin, map, of, skip } from 'rxjs';
 
-import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, input, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit, Signal, signal } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
@@ -39,8 +39,6 @@ import { ModeratorsTableComponent } from '../moderators-table/moderators-table.c
   providers: [DialogService],
 })
 export class ModeratorsListComponent implements OnInit {
-  resourceType = input.required<ResourceType>();
-
   protected searchControl = new FormControl<string>('');
 
   private readonly route = inject(ActivatedRoute);
@@ -50,7 +48,10 @@ export class ModeratorsListComponent implements OnInit {
   private readonly dialogService = inject(DialogService);
   private readonly toastService = inject(ToastService);
 
-  providerId = toSignal(this.route.params.pipe(map((params) => params['id'])) ?? of(undefined));
+  readonly providerId = toSignal(this.route.parent?.params.pipe(map((params) => params['id'])) ?? of(undefined));
+  readonly resourceType: Signal<ResourceType | undefined> = toSignal(
+    this.route.data.pipe(map((params) => params['resourceType'])) ?? of(undefined)
+  );
 
   moderators = signal([]);
   initialModerators = select(ModeratorsSelectors.getModerators);

src/app/features/moderation/components/my-reviewing-navigation/my-reviewing-navigation.component.html

@@ -2,14 +2,14 @@ <h4>{{ provider().name }}</h4>
 
 <div class="flex flex-column gap-2 mt-2">
   @for (tab of tabOptions; track $index) {
-    @let badge = tab.value === tabOption.Submissions ? submissionsCount : undefined;
+    @let badge = tab.value === tabOption.Submissions ? `${provider().submissionCount}` : undefined;
 
     <p-button
       class="link-btn"
       [link]="true"
       [label]="tab.label | translate"
       [badge]="badge"
-      [routerLink]="['/preprints', provider().id, 'moderation']"
+      [routerLink]="['/preprints', provider().id, 'moderation', tab.value]"
     ></p-button>
   }
 </div>

src/app/features/moderation/components/my-reviewing-navigation/my-reviewing-navigation.component.ts

@@ -19,7 +19,6 @@ import { PreprintModerationTab } from '../../enums';
 })
 export class MyReviewingNavigationComponent {
   provider = input.required<PreprintProviderShortInfo>();
-  submissionsCount = '2';
 
   readonly tabOptions = PREPRINT_REVIEWING_TABS;
   readonly tabOption = PreprintModerationTab;

src/app/features/moderation/components/recent-activity-list/recent-activity-list.component.html

@@ -6,26 +6,27 @@
     <p-skeleton height="2.5rem"></p-skeleton>
   </div>
 } @else {
-  @for (item of reviews(); track $index) {
-    <div class="recent-activity-item flex justify-content-between py-2">
-      <div class="flex align-items-center">
-        <osf-icon
-          [class]="reviewStatusIcon[item.toState].value"
-          [iconClass]="reviewStatusIcon[item.toState].icon"
-        ></osf-icon>
-        <span class="ml-2">{{ item.fromState }}</span>
-        <span class="capitalize">{{ 'moderation.submissionReview.submitted' | translate }}</span>
-        <span>{{ 'moderation.submissionReview.by' | translate }}</span>
-        <span>{{ item.trigger }}</span>
-      </div>
+  <div class="overflow-auto">
+    @for (item of reviews(); track $index) {
+      <div class="recent-activity-item flex align-items-center justify-content-between py-2 white-space-nowrap">
+        <div class="flex align-items-center gap-1">
+          <osf-icon
+            [class]="reviewStatusIcon[item.toState].value"
+            [iconClass]="reviewStatusIcon[item.toState].icon"
+          ></osf-icon>
+          <span class="ml-2">{{ item.creator.name }}</span>
+          <span>{{ preprintReviewStatus[item.toState].label | translate: { name: item.preprint.name } }}</span>
+          <span>{{ item.provider.name }}</span>
+        </div>
 
-      <p class="flex flex-wrap gap-1 mt-2">
-        {{ item.dateModified | date: 'MMM d, y h:mm a' }}
-      </p>
-    </div>
-  }
+        <p class="flex flex-wrap gap-1 ml-3">
+          {{ item.dateModified | date: 'MMM d, y h:mm a' }}
+        </p>
+      </div>
+    }
+  </div>
 
-  @if (totalCount()) {
+  @if (totalCount() > 10) {
     <osf-custom-paginator
       class="block mt-4"
       [first]="first()"

src/app/features/moderation/components/recent-activity-list/recent-activity-list.component.scss

@@ -9,16 +9,24 @@
 
 .pending {
   color: var(--yellow-1);
+  width: 16px;
+  height: 16px;
 }
 
 .accepted {
   color: var(--green-1);
+  width: 16px;
+  height: 16px;
 }
 
 .rejected {
   color: var(--red-1);
+  width: 16px;
+  height: 16px;
 }
 
 .withdrawn {
   color: var(--dark-blue-1);
+  width: 16px;
+  height: 16px;
 }

src/app/features/moderation/components/recent-activity-list/recent-activity-list.component.ts

@@ -7,7 +7,7 @@ import { TableModule } from 'primeng/table';
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';
 
-import { ReviewStatusIcon } from '@osf/features/moderation/constants';
+import { PreprintReviewStatus, ReviewStatusIcon } from '@osf/features/moderation/constants';
 import { CustomPaginatorComponent, IconComponent } from '@osf/shared/components';
 
 import { PreprintReviewActionModel } from '../../models';
@@ -28,6 +28,7 @@ export class RecentActivityListComponent {
 
   protected first = signal(0);
   readonly reviewStatusIcon = ReviewStatusIcon;
+  readonly preprintReviewStatus = PreprintReviewStatus;
 
   onPageChange(event: PaginatorState) {
     this.pageChanged.emit(event.page ?? 1);

src/app/features/moderation/constants/collection-moderation-tabs.const.ts

@@ -1,8 +1,8 @@
-import { SelectOption, TabOption } from '@osf/shared/models';
+import { CustomOption, SelectOption } from '@osf/shared/models';
 
 import { CollectionModerationTab, ModeratorPermission } from '../enums';
 
-export const COLLECTION_MODERATION_TABS: TabOption[] = [
+export const COLLECTION_MODERATION_TABS: CustomOption<string>[] = [
   { label: 'moderation.allItems', value: CollectionModerationTab.AllItems },
   { label: 'moderation.moderators', value: CollectionModerationTab.Moderators },
   { label: 'moderation.settings', value: CollectionModerationTab.Settings },