Feat/173 - Project overview citations

src/app/features/collections/components/add-to-collection/add-to-collection-confirmation-dialog/add-to-collection-confirmation-dialog.component.ts

@@ -33,14 +33,16 @@ export class AddToCollectionConfirmationDialogComponent {
   });
 
   protected handleAddToCollectionConfirm(): void {
-    const project = this.config.data;
-    if (!project) return;
+    const payload = this.config.data.payload;
+    const project = this.config.data.project;
+
+    if (!payload || !project) return;
 
     this.isSubmitting.set(true);
 
     const updatePublicStatus$ = project.isPublic ? of(null) : this.actions.updateProjectPublicStatus(project.id, true);
 
-    const createSubmission$ = this.actions.createCollectionSubmission(project);
+    const createSubmission$ = this.actions.createCollectionSubmission(payload);
 
     forkJoin({
       publicStatusUpdate: updatePublicStatus$,

src/app/features/collections/components/add-to-collection/add-to-collection.component.ts

@@ -73,7 +73,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
   protected selectedProject = select(ProjectsSelectors.getSelectedProject);
   protected currentUser = select(UserSelectors.getCurrentUser);
   protected providerId = signal<string>('');
-  protected isSubmitted = signal<boolean>(false);
+  protected allowNavigation = signal<boolean>(false);
   protected projectMetadataSaved = signal<boolean>(false);
   protected projectContributorsSaved = signal<boolean>(false);
   protected collectionMetadataSaved = signal<boolean>(false);
@@ -99,6 +99,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
   handleProjectSelected(): void {
     this.projectContributorsSaved.set(false);
     this.projectMetadataSaved.set(false);
+    this.allowNavigation.set(false);
   }
 
   handleChangeStep(step: number): void {
@@ -127,7 +128,6 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
       collectionMetadata: this.collectionMetadataForm.value || {},
       userId: this.currentUser()?.id || '',
     };
-    this.isSubmitted.set(true);
 
     const dialogRef = this.dialogService.open(AddToCollectionConfirmationDialogComponent, {
       width: '500px',
@@ -136,12 +136,12 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
       closeOnEscape: true,
       modal: true,
       closable: true,
-      data: payload,
+      data: { payload, project: this.selectedProject() },
     });
 
     dialogRef.onClose.subscribe((result) => {
       if (result) {
-        this.isSubmitted.set(false);
+        this.allowNavigation.set(true);
         this.router.navigate(['/my-projects', this.selectedProject()?.id, 'overview']);
       }
     });
@@ -162,6 +162,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
     effect(() => {
       this.destroyRef.onDestroy(() => {
         this.actions.clearAddToCollectionState();
+        this.allowNavigation.set(false);
       });
     });
   }
@@ -173,6 +174,19 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
   }
 
   canDeactivate(): Observable<boolean> | boolean {
-    return this.isSubmitted();
+    if (this.allowNavigation()) {
+      return true;
+    }
+
+    return !this.hasUnsavedChanges();
+  }
+
+  private hasUnsavedChanges(): boolean {
+    return (
+      !!this.selectedProject() ||
+      this.projectMetadataSaved() ||
+      this.projectContributorsSaved() ||
+      this.collectionMetadataSaved()
+    );
   }
 }

src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html

@@ -16,13 +16,13 @@ <h3>{{ 'collections.addToCollection.projectMetadata' | translate }}</h3>
           <div>
             <p class="font-bold">{{ 'collections.addToCollection.form.description' | translate }}</p>
             <p class="mt-2">
-              {{ selectedProject()?.description ?? 'collections.addToCollection.noDescription' | translate }}
+              {{ selectedProject()?.description || 'collections.addToCollection.noDescription' | translate }}
             </p>
           </div>
           <div>
             <p class="font-bold">{{ 'collections.addToCollection.form.license' | translate }}</p>
             <p class="mt-2">
-              {{ projectLicense()?.name ?? 'collections.addToCollection.noLicense' | translate }}
+              {{ projectLicense()?.name || 'collections.addToCollection.noLicense' | translate }}
             </p>
           </div>
           <div>

src/app/features/project/overview/mappers/project-overview.mapper.ts

@@ -34,6 +34,7 @@ export class ProjectOverviewMapper {
       currentUserIsContributor: response.attributes.current_user_is_contributor,
       currentUserIsContributorOrGroupMember: response.attributes.current_user_is_contributor_or_group_member,
       wikiEnabled: response.attributes.wiki_enabled,
+      customCitation: response.attributes.custom_citation,
       subjects: response.attributes.subjects.map((subjectArray) => subjectArray[0]),
       contributors: response.embeds.bibliographic_contributors.data.map((contributor) => ({
         id: contributor.embeds.users.data.id,

src/app/features/project/overview/models/project-overview.models.ts

@@ -48,6 +48,7 @@ export interface ProjectOverview {
   wikiEnabled: boolean;
   subjects: ProjectOverviewSubject[];
   contributors: ProjectOverviewContributor[];
+  customCitation: string | null;
   region?: {
     id: string;
     type: string;
@@ -95,6 +96,7 @@ export interface ProjectOverviewGetResponseJsoApi {
     current_user_is_contributor_or_group_member: boolean;
     wiki_enabled: boolean;
     subjects: ProjectOverviewSubject[][];
+    custom_citation: string | null;
   };
   embeds: {
     affiliated_institutions: {

src/app/features/project/overview/project-overview.component.html

@@ -18,7 +18,10 @@
     </div>
 
     <div class="flex flex-column right-section p-4">
-      <osf-resource-metadata [currentResource]="resourceOverview()" />
+      <osf-resource-metadata
+        [currentResource]="resourceOverview()"
+        (customCitationUpdated)="onCustomCitationUpdated($event)"
+      />
     </div>
   </div>
 } @else {

src/app/features/project/overview/project-overview.component.scss

@@ -5,7 +5,7 @@
 }
 
 .right-section {
-  flex: 1;
+  width: 23rem;
   border: 1px solid var.$grey-2;
   border-radius: 12px;
 }

src/app/features/project/overview/project-overview.component.ts

@@ -24,7 +24,13 @@ import {
   OverviewWikiComponent,
   RecentActivityComponent,
 } from './components';
-import { ClearProjectOverview, GetComponents, GetProjectById, ProjectOverviewSelectors } from './store';
+import {
+  ClearProjectOverview,
+  GetComponents,
+  GetProjectById,
+  ProjectOverviewSelectors,
+  SetProjectCustomCitation,
+} from './store';
 
 @Component({
   selector: 'osf-project-overview',
@@ -60,6 +66,7 @@ export class ProjectOverviewComponent implements OnInit {
     getComponents: GetComponents,
     getLinkedProjects: GetLinkedResources,
     getNodeLinks: GetAllNodeLinks,
+    setProjectCustomCitation: SetProjectCustomCitation,
     clearProjectOverview: ClearProjectOverview,
     clearWiki: ClearWiki,
     clearCollections: ClearCollections,
@@ -92,6 +99,10 @@ export class ProjectOverviewComponent implements OnInit {
     this.setupCleanup();
   }
 
+  onCustomCitationUpdated(citation: string): void {
+    this.actions.setProjectCustomCitation(citation);
+  }
+
   ngOnInit(): void {
     const projectId = this.route.parent?.snapshot.params['id'];
     if (projectId) {

src/app/features/project/overview/store/project-overview.actions.ts

@@ -15,6 +15,12 @@ export class UpdateProjectPublicStatus {
   ) {}
 }
 
+export class SetProjectCustomCitation {
+  static readonly type = '[Project Overview] Set Project Custom Citation';
+
+  constructor(public citation: string) {}
+}
+
 export class ForkResource {
   static readonly type = '[Project Overview] Fork Resource';
 

src/app/features/project/overview/store/project-overview.state.ts

@@ -16,6 +16,7 @@ import {
   ForkResource,
   GetComponents,
   GetProjectById,
+  SetProjectCustomCitation,
   UpdateProjectPublicStatus,
 } from './project-overview.actions';
 import { ProjectOverviewStateModel } from './project-overview.model';
@@ -82,9 +83,10 @@ export class ProjectOverviewState {
           isSubmitting: true,
         },
       });
-
-      return this.projectOverviewService.updateProjectPublicStatus(action.projectId, action.isPublic).pipe(
-        tap(() => {
+    }
+    return this.projectOverviewService.updateProjectPublicStatus(action.projectId, action.isPublic).pipe(
+      tap(() => {
+        if (state.project.data) {
           ctx.patchState({
             project: {
               ...state.project,
@@ -95,11 +97,24 @@ export class ProjectOverviewState {
               isSubmitting: false,
             },
           });
-        }),
-        catchError((error) => this.handleError(ctx, 'project', error))
-      );
-    }
-    return;
+        }
+      }),
+      catchError((error) => this.handleError(ctx, 'project', error))
+    );
+  }
+
+  @Action(SetProjectCustomCitation)
+  setProjectCustomCitation(ctx: StateContext<ProjectOverviewStateModel>, action: SetProjectCustomCitation) {
+    const state = ctx.getState();
+    ctx.patchState({
+      project: {
+        ...state.project,
+        data: {
+          ...state.project.data!,
+          customCitation: action.citation,
+        },
+      },
+    });
   }
 
   @Action(ForkResource)

src/app/features/project/project.routes.ts

@@ -3,7 +3,13 @@ import { provideStates } from '@ngxs/store';
 import { Routes } from '@angular/router';
 
 import { ResourceType } from '@osf/shared/enums';
-import { ContributorsState, NodeLinksState, SubjectsState, ViewOnlyLinkState } from '@osf/shared/stores';
+import {
+  CitationsState,
+  ContributorsState,
+  NodeLinksState,
+  SubjectsState,
+  ViewOnlyLinkState,
+} from '@osf/shared/stores';
 
 import { AnalyticsState } from './analytics/store';
 import { ProjectFilesState } from './files/store';
@@ -23,7 +29,7 @@ export const projectRoutes: Routes = [
         path: 'overview',
         loadComponent: () =>
           import('../project/overview/project-overview.component').then((mod) => mod.ProjectOverviewComponent),
-        providers: [provideStates([NodeLinksState])],
+        providers: [provideStates([CitationsState, NodeLinksState])],
       },
       {
         path: 'metadata',

src/app/features/registry/mappers/registry-metadata.mapper.ts

@@ -85,6 +85,7 @@ export class RegistryMetadataMapper {
       doi: (attributes['doi'] as string) || '',
       isPublic: attributes['public'] as boolean,
       isFork: attributes['fork'] as boolean,
+      customCitation: (attributes['custom_citation'] as string) || '',
       accessRequestsEnabled: attributes['access_requests_enabled'] as boolean,
       wikiEnabled: attributes['wiki_enabled'] as boolean,
       currentUserCanComment: attributes['current_user_can_comment'] as boolean,

src/app/features/registry/models/registry-overview.models.ts

@@ -44,6 +44,7 @@ export interface RegistryOverview {
     type: string;
   };
   subjects?: RegistrySubject[];
+  customCitation: string;
   hasData: boolean;
   hasAnalyticCode: boolean;
   hasMaterials: boolean;

src/app/features/registry/pages/registry-overview/registry-overview.component.html

@@ -62,7 +62,10 @@ <h3 class="pb-4 text-no-transform">{{ block.value }}</h3>
         </div>
       </div>
       <div class="flex flex-column right-section p-4">
-        <osf-resource-metadata [currentResource]="resourceOverview()" />
+        <osf-resource-metadata
+          [currentResource]="resourceOverview()"
+          (customCitationUpdated)="onCustomCitationUpdated($event)"
+        />
       </div>
     </div>
   </div>

src/app/features/registry/pages/registry-overview/registry-overview.component.ts

@@ -25,6 +25,7 @@ import {
   GetRegistryInstitutions,
   GetRegistrySubjects,
   RegistryOverviewSelectors,
+  SetRegistryCustomCitation,
 } from '../../store/registry-overview';
 
 @Component({
@@ -104,6 +105,7 @@ export class RegistryOverviewComponent {
     getBookmarksId: GetBookmarksCollectionId,
     getSubjects: GetRegistrySubjects,
     getInstitutions: GetRegistryInstitutions,
+    setCustomCitation: SetRegistryCustomCitation,
   });
 
   constructor() {
@@ -125,4 +127,8 @@ export class RegistryOverviewComponent {
   openRevision(revisionIndex: number): void {
     this.selectedRevisionIndex.set(revisionIndex);
   }
+
+  onCustomCitationUpdated(citation: string): void {
+    this.actions.setCustomCitation(citation);
+  }
 }

src/app/features/registry/store/registry-overview/registry-overview.actions.ts

@@ -41,3 +41,9 @@ export class MakePublic {
 
   constructor(public registryId: string) {}
 }
+
+export class SetRegistryCustomCitation {
+  static readonly type = '[Registry Overview] Set Registry Custom Citation';
+
+  constructor(public citation: string) {}
+}

src/app/features/registry/store/registry-overview/registry-overview.state.ts

@@ -13,6 +13,7 @@ import {
   GetRegistrySubjects,
   GetSchemaBlocks,
   MakePublic,
+  SetRegistryCustomCitation,
   WithdrawRegistration,
 } from './registry-overview.actions';
 import { RegistryOverviewStateModel } from './registry-overview.model';
@@ -211,6 +212,20 @@ export class RegistryOverviewState {
     );
   }
 
+  @Action(SetRegistryCustomCitation)
+  setRegistryCustomCitation(ctx: StateContext<RegistryOverviewStateModel>, action: SetRegistryCustomCitation) {
+    const state = ctx.getState();
+    ctx.patchState({
+      registry: {
+        ...state.registry,
+        data: {
+          ...state.registry.data!,
+          customCitation: action.citation,
+        },
+      },
+    });
+  }
+
   private handleError(
     ctx: StateContext<RegistryOverviewStateModel>,
     section: 'registry' | 'subjects' | 'institutions' | 'schemaBlocks',