Fix/add to collection (#178)

* fix(add-to-collection-api): added deactivate guard and clearing store

Author: rnastyuk

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

@@ -4,6 +4,7 @@ import { Routes } from '@angular/router';
 
 import { AddToCollectionState } from '@osf/features/collections/store/add-to-collection';
 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';
@@ -40,6 +41,7 @@ export const collectionsRoutes: Routes = [
             (mod) => mod.AddToCollectionComponent
           ),
         providers: [provideStates([ProjectsState, CollectionsState, AddToCollectionState, ContributorsState])],
+        canDeactivate: [ConfirmLeavingGuard],
       },
       {
         path: ':id/moderation',

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

@@ -6,6 +6,8 @@ import { Button } from 'primeng/button';
 import { DialogService } from 'primeng/dynamicdialog';
 import { Stepper } from 'primeng/stepper';
 
+import { Observable } from 'rxjs';
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -27,6 +29,7 @@ import {
 } from '@osf/features/collections/store/add-to-collection/add-to-collection.actions';
 import { CollectionsSelectors, GetCollectionProvider } from '@osf/features/collections/store/collections';
 import { LoadingSpinnerComponent } from '@shared/components';
+import { CanDeactivateComponent } from '@shared/models';
 import { ProjectsSelectors } from '@shared/stores/projects/projects.selectors';
 
 import {
@@ -55,7 +58,7 @@ import {
   providers: [DialogService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AddToCollectionComponent {
+export class AddToCollectionComponent implements CanDeactivateComponent {
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
   private readonly destroyRef = inject(DestroyRef);
@@ -70,6 +73,7 @@ export class AddToCollectionComponent {
   protected selectedProject = select(ProjectsSelectors.getSelectedProject);
   protected currentUser = select(UserSelectors.getCurrentUser);
   protected providerId = signal<string>('');
+  protected isSubmitted = signal<boolean>(false);
   protected projectMetadataSaved = signal<boolean>(false);
   protected projectContributorsSaved = signal<boolean>(false);
   protected collectionMetadataSaved = signal<boolean>(false);
@@ -123,6 +127,7 @@ export class AddToCollectionComponent {
       collectionMetadata: this.collectionMetadataForm.value || {},
       userId: this.currentUser()?.id || '',
     };
+    this.isSubmitted.set(true);
 
     const dialogRef = this.dialogService.open(AddToCollectionConfirmationDialogComponent, {
       width: '500px',
@@ -136,6 +141,7 @@ export class AddToCollectionComponent {
 
     dialogRef.onClose.subscribe((result) => {
       if (result) {
+        this.isSubmitted.set(false);
         this.router.navigate(['/my-projects', this.selectedProject()?.id, 'overview']);
       }
     });
@@ -165,4 +171,8 @@ export class AddToCollectionComponent {
     $event.preventDefault();
     return false;
   }
+
+  canDeactivate(): Observable<boolean> | boolean {
+    return this.isSubmitted();
+  }
 }

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

@@ -40,7 +40,7 @@ import { License } from '@shared/models';
 import { Project } from '@shared/models/projects';
 import { InterpolatePipe } from '@shared/pipes';
 import { ToastService } from '@shared/services';
-import { GetAllContributors, UpdateProjectMetadata } from '@shared/stores';
+import { ClearProjects, GetAllContributors, UpdateProjectMetadata } from '@shared/stores';
 import { ProjectsSelectors } from '@shared/stores/projects/projects.selectors';
 
 @Component({
@@ -95,6 +95,7 @@ export class ProjectMetadataStepComponent {
     updateCollectionSubmissionMetadata: UpdateProjectMetadata,
     getAllContributors: GetAllContributors,
     getCollectionLicenses: GetCollectionLicenses,
+    clearProjects: ClearProjects,
   });
 
   protected readonly projectMetadataForm: FormGroup<ProjectMetadataForm> = this.formService.createForm();
@@ -231,5 +232,11 @@ export class ProjectMetadataStepComponent {
         this.initialProjectMetadataFormValues.set(JSON.stringify(formValue));
       }
     });
+
+    effect(() => {
+      this.destroyRef.onDestroy(() => {
+        this.actions.clearProjects();
+      });
+    });
   }
 }

src/app/features/collections/components/index.ts

@@ -1,3 +1,4 @@
+export { AddToCollectionComponent } from './add-to-collection/add-to-collection.component';
 export { CollectionsFilterChipsComponent } from './collections-filter-chips/collections-filter-chips.component';
 export { CollectionsFiltersComponent } from './collections-filters/collections-filters.component';
 export { CollectionsHelpDialogComponent } from './collections-help-dialog/collections-help-dialog.component';

src/app/features/preprints/guards/index.ts

@@ -1,4 +1,3 @@
-export * from './can-deactivate.interface';
 export * from './preprint.models';
 export * from './preprint-json-api.models';
 export * from './preprint-licenses-json-api.models';

src/app/features/preprints/models/index.ts

@@ -31,15 +31,14 @@ import {
 } from '@osf/features/preprints/components';
 import { submitPreprintSteps } from '@osf/features/preprints/constants';
 import { PreprintSteps } from '@osf/features/preprints/enums';
-import { CanDeactivateComponent } from '@osf/features/preprints/models';
 import { GetPreprintProviderById, PreprintProvidersSelectors } from '@osf/features/preprints/store/preprint-providers';
 import {
   DeletePreprint,
   PreprintStepperSelectors,
   ResetState,
   SetSelectedPreprintProviderId,
 } from '@osf/features/preprints/store/preprint-stepper';
-import { StepOption } from '@osf/shared/models';
+import { CanDeactivateComponent, StepOption } from '@osf/shared/models';
 import { StepperComponent } from '@shared/components';
 import { BrandService } from '@shared/services';
 import { BrowserTabHelper, HeaderStyleHelper, IS_WEB } from '@shared/utils';

src/app/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component.ts

@@ -30,7 +30,6 @@ import {
 } from '@osf/features/preprints/components';
 import { updatePreprintSteps } from '@osf/features/preprints/constants';
 import { PreprintSteps } from '@osf/features/preprints/enums';
-import { CanDeactivateComponent } from '@osf/features/preprints/models';
 import { GetPreprintProviderById, PreprintProvidersSelectors } from '@osf/features/preprints/store/preprint-providers';
 import {
   FetchPreprintById,
@@ -39,7 +38,7 @@ import {
   SetSelectedPreprintProviderId,
 } from '@osf/features/preprints/store/preprint-stepper';
 import { StepperComponent } from '@shared/components';
-import { StepOption } from '@shared/models';
+import { CanDeactivateComponent, StepOption } from '@shared/models';
 import { BrandService } from '@shared/services';
 import { BrowserTabHelper, HeaderStyleHelper, IS_WEB } from '@shared/utils';
 

src/app/features/preprints/pages/update-preprint-stepper/update-preprint-stepper.component.ts

@@ -2,13 +2,13 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
-import { ConfirmLeavingGuard } from '@osf/features/preprints/guards';
 import { PreprintsComponent } from '@osf/features/preprints/preprints.component';
 import { PreprintProvidersState } from '@osf/features/preprints/store/preprint-providers';
 import { PreprintStepperState } from '@osf/features/preprints/store/preprint-stepper';
 import { PreprintsDiscoverState } from '@osf/features/preprints/store/preprints-discover';
 import { PreprintsResourcesFiltersState } from '@osf/features/preprints/store/preprints-resources-filters';
 import { PreprintsResourcesFiltersOptionsState } from '@osf/features/preprints/store/preprints-resources-filters-options';
+import { ConfirmLeavingGuard } from '@shared/guards';
 import { ResourceType } from '@shared/enums';
 import { ContributorsState, SubjectsState } from '@shared/stores';
 

src/app/features/preprints/preprints.routes.ts

@@ -3,10 +3,10 @@ import { Subject } from 'rxjs';
 import { inject } from '@angular/core';
 import { CanDeactivateFn } from '@angular/router';
 
-import { SubmitPreprintStepperComponent } from '@osf/features/preprints/pages/submit-preprint-stepper/submit-preprint-stepper.component';
+import { CanDeactivateComponent } from '@shared/models';
 import { CustomConfirmationService } from '@shared/services';
 
-export const ConfirmLeavingGuard: CanDeactivateFn<SubmitPreprintStepperComponent> = (component) => {
+export const ConfirmLeavingGuard: CanDeactivateFn<CanDeactivateComponent> = (component) => {
   const confirmationService = inject(CustomConfirmationService);
   const confirmationResultSubject = new Subject<boolean>();
   const confirmationResultObservable = confirmationResultSubject.asObservable();