[ENG-9788] Subjects Metadata Not Displaying on Registration Overview Page #797

- Ticket: [ENG-9788]
- Feature flag: n/a

## Summary of Changes
1. Fixed subjects on the registry overview page.

Author: nsemets

src/app/features/registry/components/registry-overview-metadata/registry-overview-metadata.component.ts

@@ -63,8 +63,8 @@ export class RegistryOverviewMetadataComponent {
   isIdentifiersLoading = select(RegistrySelectors.isIdentifiersLoading);
   institutions = select(RegistrySelectors.getInstitutions);
   isInstitutionsLoading = select(RegistrySelectors.isInstitutionsLoading);
-  subjects = select(SubjectsSelectors.getSubjects);
-  isSubjectsLoading = select(SubjectsSelectors.getSubjectsLoading);
+  subjects = select(SubjectsSelectors.getSelectedSubjects);
+  isSubjectsLoading = select(SubjectsSelectors.areSelectedSubjectsLoading);
 
   bibliographicContributors = select(ContributorsSelectors.getBibliographicContributors);
   isBibliographicContributorsLoading = select(ContributorsSelectors.isBibliographicContributorsLoading);

src/app/shared/components/subjects/subjects.component.html

@@ -1,8 +1,8 @@
 <h2 class="mb-2">{{ 'shared.subjects.title' | translate }}</h2>
 
-<p class="mb-1">{{ 'shared.subjects.description' | translate }}</p>
+<p class="mb-2">{{ 'shared.subjects.description' | translate }}</p>
 
-<p-card class="block text-base mb-3">
+<p-card class="card block text-sm mb-3">
   @if (!selected().length) {
     <p class="text-500">{{ 'shared.subjects.noSelected' | translate }}</p>
   } @else {

src/app/shared/components/subjects/subjects.component.scss

@@ -0,0 +1,3 @@
+.card {
+  --p-card-body-padding: 0.75rem;
+}

src/app/shared/components/tags-list/tags-list.component.html

@@ -3,7 +3,7 @@
     <p-skeleton height="1.5rem" />
   } @else {
     @for (tag of tags(); track tag) {
-      <p-tag class="cursor-pointer hover:bg-black-alpha-10" [value]="tag" severity="info" (click)="onTagClick(tag)" />
+      <p-tag class="cursor-pointer hover:bg-primary-100" [value]="tag" severity="info" (click)="onTagClick(tag)" />
     } @empty {
       <p>{{ 'project.overview.metadata.noTags' | translate }}</p>
     }

src/app/shared/stores/subjects/subjects.actions.ts

@@ -27,7 +27,7 @@ export class FetchChildrenSubjects {
 }
 
 export class UpdateResourceSubjects {
-  static readonly type = '[Subjects] Update Resource Project';
+  static readonly type = '[Subjects] Update Resource Subjects';
 
   constructor(
     public resourceId: string,

src/app/shared/stores/subjects/subjects.state.ts

@@ -1,9 +1,10 @@
 import { Action, State, StateContext } from '@ngxs/store';
 
-import { catchError, tap, throwError } from 'rxjs';
+import { catchError, tap } from 'rxjs';
 
 import { inject, Injectable } from '@angular/core';
 
+import { handleSectionError } from '@osf/shared/helpers/state-error.handler';
 import { SubjectModel } from '@osf/shared/models/subject/subject.model';
 import { SubjectsService } from '@osf/shared/services/subjects.service';
 
@@ -29,40 +30,27 @@ export class SubjectsState {
       return;
     }
 
+    const targetSection = search ? 'searchedSubjects' : 'subjects';
+
     ctx.patchState({
-      subjects: {
-        ...ctx.getState().subjects,
+      [targetSection]: {
+        ...ctx.getState()[targetSection],
         isLoading: true,
         error: null,
       },
-      searchedSubjects: {
-        ...ctx.getState().searchedSubjects,
-        isLoading: search ? true : false,
-        error: null,
-      },
     });
 
     return this.subjectsService.getSubjects(resourceType, providerId, search).pipe(
       tap((subjects) => {
-        if (search) {
-          ctx.patchState({
-            searchedSubjects: {
-              data: subjects,
-              isLoading: false,
-              error: null,
-            },
-          });
-        } else {
-          ctx.patchState({
-            subjects: {
-              data: subjects,
-              isLoading: false,
-              error: null,
-            },
-          });
-        }
+        ctx.patchState({
+          [targetSection]: {
+            data: subjects,
+            isLoading: false,
+            error: null,
+          },
+        });
       }),
-      catchError((error) => this.handleError(ctx, 'subjects', error))
+      catchError((error) => handleSectionError(ctx, targetSection, error))
     );
   }
 
@@ -88,7 +76,7 @@ export class SubjectsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, 'subjects', error))
+      catchError((error) => handleSectionError(ctx, 'subjects', error))
     );
   }
 
@@ -116,7 +104,7 @@ export class SubjectsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, 'selectedSubjects', error))
+      catchError((error) => handleSectionError(ctx, 'selectedSubjects', error))
     );
   }
 
@@ -147,7 +135,7 @@ export class SubjectsState {
           },
         });
       }),
-      catchError((error) => this.handleError(ctx, 'selectedSubjects', error))
+      catchError((error) => handleSectionError(ctx, 'selectedSubjects', error))
     );
   }
 
@@ -171,15 +159,4 @@ export class SubjectsState {
       return subject;
     });
   }
-
-  private handleError(ctx: StateContext<SubjectsModel>, section: keyof SubjectsModel, error: Error) {
-    ctx.patchState({
-      [section]: {
-        ...ctx.getState()[section],
-        isLoading: false,
-        error: error.message,
-      },
-    });
-    return throwError(() => error);
-  }
 }

src/styles/overrides/chip.scss

@@ -1,5 +1,5 @@
 .p-chip {
-  --p-chip-background: var(--bg-blue-3);
+  --p-chip-background: var(--bg-blue-2);
   --p-chip-border-radius: 0.25rem;
   --p-chip-color: var(--dark-blue-1);
   --p-chip-padding-y: 0.25rem;
@@ -13,7 +13,7 @@
   }
 
   &:hover {
-    --p-chip-background: var(--bg-blue-2);
+    --p-chip-background: var(--bg-blue-3);
     --p-chip-color: var(--pr-blue-3);
 
     .p-chip-remove-icon {

src/styles/overrides/tag.scss

@@ -8,7 +8,7 @@
   --p-tag-secondary-background: var(--grey-1);
   --p-tag-secondary-color: var(--white);
 
-  --p-tag-info-background: var(--bg-blue-3);
+  --p-tag-info-background: var(--bg-blue-2);
   --p-tag-info-color: var(--dark-blue-1);
 }